Project for the Hybrid Publishing thesis award of 2018.
By Julie Boschat Thorez and Cristina Cochior.
https://www.wdka.nl/work/sic-scripture
http://51.255.169.99:8080/
You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
244 lines
10 KiB
244 lines
10 KiB
4 years ago
|
<!DOCTYPE html>
|
||
|
|
<html>
|
||
|
|
<head>
|
||
|
|
|
||
|
|
<meta charset="utf-8">
|
||
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||
|
|
<title>Library</title>
|
||
|
|
<link rel="stylesheet" href="{{ url_for('static', filename='css/main.css') }}">
|
||
|
|
|
||
|
|
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.3/jquery.min.js"></script>
|
||
|
|
|
||
|
|
|
||
|
|
<!-- <script type="text/javascript">
|
||
|
|
$(document).ready(function() {
|
||
|
|
$(".librarian-names").click(function(event){
|
||
|
|
var thename = $(this).text();
|
||
|
|
$(".name-elements").empty();
|
||
|
|
|
||
|
|
$.getJSON('{{ url_for('static', filename='js/mergedjson.json') }}', function(test) {
|
||
|
|
// iterate in test[i].librarian to find where the name is present to get the test[i].debris that goes with it
|
||
|
|
var alldocs = [];
|
||
|
|
for (var i = 0; i < test.length; ++i) {
|
||
|
|
var item = test[i];
|
||
|
|
if(item.librarian.includes(thename)){
|
||
|
|
ledocument = item.debrispath;
|
||
|
|
lelibrarian = item.librarian;
|
||
|
|
//put ledocument into li and nest inside ul
|
||
|
|
var extension = ledocument.replace(/^.*\./, '');
|
||
|
|
console.log(ledocument);
|
||
|
|
if ((extension=="jpg") || (extension=="jpeg") || (extension=="png") || (extension=="gif") || (extension=="tiff")) {
|
||
|
|
$(".name-elements").append("<li><img class='listed-images' src='/files/"+ledocument+"'>Librarians: "+lelibrarian+"</li>");
|
||
|
|
}
|
||
|
|
else if (extension=="pdf") {
|
||
|
|
$(".name-elements").append("<li><embed class='listed-pdf' src='files/"+ledocument+"'/>Librarians: "+lelibrarian+"</li>");
|
||
|
|
}
|
||
|
|
else if (extension=="epub") {
|
||
|
|
$(".name-elements").append("<li>"+ledocument+lelibrarian+"</li>");
|
||
|
|
}
|
||
|
|
else if ((extension=="mp3") || (extension=="wav") || (extension=="m4a")) {
|
||
|
|
$(".name-elements").append("<li><audio class='listed-audio' controls><source src='files/"+ledocument+"'></audio>Librarians: "+lelibrarian+"</li>");
|
||
|
|
}
|
||
|
|
else if ((extension=="mov") || (extension=="mp4")) {
|
||
|
|
$(".name-elements").append("<li><video class='listed-videos' controls><source src='files/"+ledocument+"'></video>Librarians: "+lelibrarian+"</li>");
|
||
|
|
}
|
||
|
|
else if ((extension=="odt") || (extension=="docx")) {
|
||
|
|
// something for odt and docx
|
||
|
|
$(".name-elements").append("<li>"+ledocument+lelibrarian+"</li>");
|
||
|
|
};
|
||
|
|
};
|
||
|
|
};
|
||
|
|
});
|
||
|
|
});
|
||
|
|
|
||
|
|
$(".file-names").click(function(event){
|
||
|
|
var thefile = $(this).text();
|
||
|
|
$.getJSON('{{ url_for('static', filename='js/mergedjson.json') }}', function(test) {
|
||
|
|
$(".name-elements").empty();
|
||
|
|
// iterate in test[i].librarian to find where the name is present
|
||
|
|
//to get the test[i].debris that goes with it
|
||
|
|
var allpeeps = [];
|
||
|
|
var category = null;
|
||
|
|
for (var i = 0; i < test.length; ++i) {
|
||
|
|
var item = test[i];
|
||
|
|
if(item.debrisname.includes(thefile)){
|
||
|
|
ledocument = item.debrispath;
|
||
|
|
// allpeeps.push(ledocument);
|
||
|
|
var extension = ledocument.replace(/^.*\./, '');
|
||
|
|
console.log(ledocument);
|
||
|
|
if ((extension=="jpg") || (extension=="jpeg") || (extension=="png") || (extension=="gif") || (extension=="tiff")) {
|
||
|
|
$(".name-elements").append("<li><img class='listed-images' src='/files/"+ledocument+"'></li>");
|
||
|
|
}
|
||
|
|
else if (extension=="pdf") {
|
||
|
|
$(".name-elements").append("<li><object class='listed-pdf' data='files/"+ledocument+"'/></li>");
|
||
|
|
}
|
||
|
|
else if (extension=="epub") {
|
||
|
|
$(".name-elements").append("<li>"+ledocument+"</li>");
|
||
|
|
}
|
||
|
|
else if ((extension=="mp3") || (extension=="wav") || (extension=="m4a")) {
|
||
|
|
$(".name-elements").append("<li><audio class='listed-audio' controls><source src='files/"+ledocument+"'></audio></li>");
|
||
|
|
}
|
||
|
|
else if ((extension=="mov") || (extension=="mp4")) {
|
||
|
|
$(".name-elements").append("<li><video class='listed-videos' controls><source src='files/"+ledocument+"'></video></li>");
|
||
|
|
}
|
||
|
|
else if ((extension=="odt") || (extension=="docx")) {
|
||
|
|
// something for odt and docx
|
||
|
|
$(".name-elements").append("<li>"+ledocument+"</li>");
|
||
|
|
};
|
||
|
|
};
|
||
|
|
category = item.method;
|
||
|
|
};
|
||
|
|
|
||
|
|
});
|
||
|
|
});
|
||
|
|
|
||
|
|
});
|
||
|
|
</script> -->
|
||
|
|
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
<div class="nav-top">
|
||
|
|
<ul>
|
||
|
|
<li><span class="nav-button" style="text-align: left;" id="bought">BOUGHT</span></li>
|
||
|
|
<li><span class="nav-button" style="text-align: center;" id="stolen">STOLEN</span>
|
||
|
|
<li><span class="nav-button" style="text-align: right;" id="repurposed">REPURPOSED</span>
|
||
|
|
</ul>
|
||
|
|
</div>
|
||
|
|
<div class="main">
|
||
|
|
<div class="main-column-left">
|
||
|
|
|
||
|
|
<div id="listofpeople">
|
||
|
|
{% for librarian in librarians %}
|
||
|
|
<!-- <span class="librarian-names" id={{libid}}>{{librarian}}</span> -->
|
||
|
|
<span class="librarian-names" id={{librarian}}>{{librarian}}</span>
|
||
|
|
{% endfor %}
|
||
|
|
</div>
|
||
|
|
<br>
|
||
|
|
|
||
|
|
<div class="file-names-container">
|
||
|
|
{% for querylibrarian in urllibrarian %}
|
||
|
|
{% for file in filetoname_dict %}
|
||
|
|
{% for item in file['librarian'] %}
|
||
|
|
{% if item == querylibrarian and urlmethod != ['']%}
|
||
|
|
{% set show_file = file['debrisname'] %}
|
||
|
|
<span class="file-names" id="{{show_file}}">{{show_file}}</span>
|
||
|
|
{% endif %}
|
||
|
|
{% endfor %}
|
||
|
|
{% endfor %}
|
||
|
|
{% endfor %}
|
||
|
|
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="main-column-right">
|
||
|
|
<a href="{{ url_for('static', filename='realjson.json') }}">test link</a>
|
||
|
|
<ul class="name-elements">
|
||
|
|
<p>hello world</p>
|
||
|
|
</ul>
|
||
|
|
|
||
|
|
{% block content %}
|
||
|
|
{% endblock content %}
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="nav-bottom">
|
||
|
|
<ul>
|
||
|
|
<li><span class="nav-button" style="text-align: left;" id="copied">COPIED</span></li>
|
||
|
|
<li><span class="nav-button" style="text-align: center;" id="found">FOUND</span></li>
|
||
|
|
<li><span class="nav-button" style="text-align: right;" id="gift">GIFT</span></li>
|
||
|
|
</ul>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<script type="text/javascript">
|
||
|
|
$(document).ready(function() {
|
||
|
|
var address = '/?';
|
||
|
|
|
||
|
|
$(".librarian-names").click(function(event){
|
||
|
|
var theid = $(this).attr('id');
|
||
|
|
if($(this).hasClass('clicked')==false){
|
||
|
|
address = address + "librarian=" + theid;
|
||
|
|
// location.href = address;
|
||
|
|
$(this).addClass('clicked');
|
||
|
|
$(".librarian-names").addClass('selected');
|
||
|
|
alert(address);
|
||
|
|
} else {
|
||
|
|
$(this).removeClass('clicked');
|
||
|
|
$(".librarian-names").removeClass('selected');
|
||
|
|
address = address - ("librarian=" + theid);
|
||
|
|
alert(address);
|
||
|
|
};
|
||
|
|
|
||
|
|
// var thename = $(this).text();
|
||
|
|
// $.getJSON('{{ url_for('static', filename='js/mergedjson.json') }}', function(test) {
|
||
|
|
// var alldocs = [];
|
||
|
|
// for (var i = 0; i < test.length; ++i) {
|
||
|
|
// var item = test[i];
|
||
|
|
// if(item.librarian.includes(thename)){
|
||
|
|
// ledocument = item.debrispath;
|
||
|
|
// lelibrarian = item.librarian;
|
||
|
|
// };
|
||
|
|
// }
|
||
|
|
// });
|
||
|
|
});
|
||
|
|
|
||
|
|
$(".nav-button").click(function(event){
|
||
|
|
var navid = $(this).attr('id');
|
||
|
|
if($(this).hasClass('clicked')==false){
|
||
|
|
address = address + "&method=" + navid;
|
||
|
|
$(this).addClass('clicked');
|
||
|
|
alert(address);
|
||
|
|
} else {
|
||
|
|
$(this).removeClass('clicked');
|
||
|
|
address = address - ("method=" + navid);
|
||
|
|
alert(address);
|
||
|
|
};
|
||
|
|
});
|
||
|
|
|
||
|
|
$(".file-names").click(function(event){
|
||
|
|
var thefile = $(this).text();
|
||
|
|
$.getJSON('{{ url_for('static', filename='js/mergedjson.json') }}', function(test) {
|
||
|
|
$(".name-elements").empty();
|
||
|
|
// iterate in test[i].librarian to find where the name is present
|
||
|
|
//to get the test[i].debris that goes with it
|
||
|
|
var allpeeps = [];
|
||
|
|
var category = null;
|
||
|
|
for (var i = 0; i < test.length; ++i) {
|
||
|
|
var item = test[i];
|
||
|
|
if(item.debrisname.includes(thefile)){
|
||
|
|
ledocument = item.debrispath;
|
||
|
|
// allpeeps.push(ledocument);
|
||
|
|
var extension = ledocument.replace(/^.*\./, '');
|
||
|
|
console.log(ledocument);
|
||
|
|
if ((extension=="jpg") || (extension=="jpeg") || (extension=="png") || (extension=="gif") || (extension=="tiff")) {
|
||
|
|
$(".name-elements").append("<li><img class='listed-images' src='/files/"+ledocument+"'></li>");
|
||
|
|
}
|
||
|
|
else if (extension=="pdf") {
|
||
|
|
$(".name-elements").append("<li><object class='listed-pdf' data='files/"+ledocument+"'/></li>");
|
||
|
|
}
|
||
|
|
else if (extension=="epub") {
|
||
|
|
$(".name-elements").append("<li>"+ledocument+"</li>");
|
||
|
|
}
|
||
|
|
else if ((extension=="mp3") || (extension=="wav") || (extension=="m4a")) {
|
||
|
|
$(".name-elements").append("<li><audio class='listed-audio' controls><source src='files/"+ledocument+"'></audio></li>");
|
||
|
|
}
|
||
|
|
else if ((extension=="mov") || (extension=="mp4")) {
|
||
|
|
$(".name-elements").append("<li><video class='listed-videos' controls><source src='files/"+ledocument+"'></video></li>");
|
||
|
|
}
|
||
|
|
else if ((extension=="odt") || (extension=="docx")) {
|
||
|
|
// something for odt and docx
|
||
|
|
$(".name-elements").append("<li>"+ledocument+"</li>");
|
||
|
|
};
|
||
|
|
};
|
||
|
|
category = item.method;
|
||
|
|
};
|
||
|
|
|
||
|
|
});
|
||
|
|
});
|
||
|
|
|
||
|
|
});
|
||
|
|
|
||
|
|
|
||
|
|
</script>
|
||
|
|
|
||
|
|
</body>
|
||
|
|
</html>
|