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.
318 lines
13 KiB
318 lines
13 KiB
<!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 src="{{ url_for('static', filename='js/highlight.js') }}"></script>
|
|
|
|
<script type="text/javascript">
|
|
$(document).ready(function() {
|
|
|
|
///////URLS/////////////
|
|
|
|
// setting up variables that we will use for the url later
|
|
var existing_path = window.location.href;
|
|
existing_start = existing_path.indexOf('/?');
|
|
var address = existing_path.slice(existing_start);
|
|
|
|
|
|
// generating the url with librarian names
|
|
$(".librarian-names").click(function(event){
|
|
var theid = $(this).attr('id');
|
|
var test = "librarian=" + theid;
|
|
if(address.includes(test)!=true){
|
|
if(address.slice(address.length - 1)!='/'){
|
|
address = address + "&librarian=" + theid;
|
|
} else {
|
|
address = address + "?librarian=" + theid;
|
|
}
|
|
location.href = address;
|
|
} else {
|
|
var start = "?librarian=" + theid;
|
|
var addition = "&librarian=" + theid;
|
|
if(address.includes(start)==true && address.charAt(start.length+1)=='&'){
|
|
var begin = address.indexOf(start)+1;
|
|
address = address.replace(address.substr(begin,start.length),'');
|
|
} else if(address.includes(start)==true) {
|
|
address = address.replace(start,'');
|
|
} else {
|
|
address = address.replace(addition,'');
|
|
};
|
|
location.href = address;
|
|
};
|
|
});
|
|
|
|
// generating the url with method names
|
|
$(".nav-button").click(function(event){
|
|
var theid = $(this).attr('id');
|
|
var test = "method=" + theid;
|
|
if(address.includes(test)!=true){
|
|
if(address.slice(address.length - 1)!='/'){
|
|
address = address + "&method=" + theid;
|
|
} else {
|
|
address = address + "?method=" + theid;
|
|
}
|
|
location.href = address;
|
|
} else {
|
|
var start = "?method=" + theid;
|
|
var addition = "&method=" + theid;
|
|
if(address.includes(start)==true && address.charAt(start.length+1)=='&'){
|
|
var begin = address.indexOf(start)+1;
|
|
address = address.replace(address.substr(begin,start.length),'');
|
|
} else if(address.includes(start)==true) {
|
|
address = address.replace(start,'');
|
|
} else {
|
|
address = address.replace(addition,'');
|
|
};
|
|
location.href = address;
|
|
};
|
|
});
|
|
|
|
/////DISPLAY FILENAMES/////////////
|
|
|
|
$(".file-names").click(function(event){
|
|
|
|
// alert(listofselecteddocs);
|
|
// if classname in listselecteddocs, checkbox is checked;
|
|
|
|
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 category = null;
|
|
for (var i = 0; i < test.length; ++i) {
|
|
var item = test[i];
|
|
if(item.debrisname.includes(thefile)){
|
|
ledocument = item.debrispath;
|
|
var extension = ledocument.replace(/^.*\./, '');
|
|
// var classname = ledocument.substring(ledocument.lastIndexOf('/')+1);
|
|
// classname = classname.substr(0, classname.lastIndexOf('.')) || classname;
|
|
var classname = ledocument;
|
|
console.log(ledocument);
|
|
|
|
// check or unchecked checkbox if classname in array
|
|
|
|
var checkboite;
|
|
if(jQuery.inArray(classname, listofselecteddocs) != -1) {
|
|
console.log("is in array");
|
|
checkboite = "<br /><input type='checkbox' class='addtoprint' id='"+classname+"' name='"+classname+"' value='print' checked><label for='"+classname+"'> Add to print</label>";
|
|
} else {
|
|
checkboite = "<br /><input type='checkbox' class='addtoprint' id='"+classname+"' name='"+classname+"' value='print'><label for='"+classname+"'> Add to print</label>";
|
|
}
|
|
|
|
|
|
if ((extension=="jpg") || (extension=="jpeg") || (extension=="png") || (extension=="gif") || (extension=="tiff")) {
|
|
$(".name-elements").append("<li><img class='listed-images' src='/files/"+ledocument+"'>"+checkboite+"</li>");
|
|
}
|
|
else if (extension=="pdf") {
|
|
$(".name-elements").append("<li><object class='listed-pdf' data='files/"+ledocument+"'/>"+checkboite+"</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>"+checkboite+"</li>");
|
|
}
|
|
else if ((extension=="mov") || (extension=="mp4")) {
|
|
$(".name-elements").append("<li><video class='listed-videos' controls><source src='files/"+ledocument+"'></video>"+checkboite+"</li>");
|
|
}
|
|
else if ((extension=="odt") || (extension=="docx")) {
|
|
// something for odt and docx
|
|
$(".name-elements").append("<li>"+ledocument+"</li>");
|
|
};
|
|
};
|
|
category = item.method;
|
|
};
|
|
|
|
});
|
|
});
|
|
|
|
////DISPLAY FILES/////////////
|
|
|
|
var flag = true;
|
|
|
|
$("#showall").click(function(event){
|
|
if (flag === true) {
|
|
$('.file-names-container span').each(function () {
|
|
var current = $(this).attr('id');
|
|
$.getJSON('{{ url_for('static', filename='js/mergedjson.json') }}', function(test) {
|
|
var category = null;
|
|
for (var i = 0; i < test.length; ++i) {
|
|
var item = test[i];
|
|
if(item.debrisname.includes(current)){
|
|
actualdocument = item.debrispath;
|
|
var extension = actualdocument.replace(/^.*\./, '');
|
|
var classname = actualdocument;
|
|
|
|
// check or unchecked checkbox if classname in array
|
|
|
|
var checkboite;
|
|
if(jQuery.inArray(classname, listofselecteddocs) != -1) {
|
|
console.log("is in array");
|
|
checkboite = "<br /><input type='checkbox' class='addtoprint' id='"+classname+"' name='"+classname+"' value='print' checked><label for='"+classname+"'> Add to print</label>";
|
|
} else {
|
|
checkboite = "<br /><input type='checkbox' class='addtoprint' id='"+classname+"' name='"+classname+"' value='print'><label for='"+classname+"'> Add to print</label>";
|
|
}
|
|
|
|
|
|
if ((extension=="jpg") || (extension=="jpeg") || (extension=="png") || (extension=="gif") || (extension=="tiff")) {
|
|
$(".name-elements").append("<li><img class='listed-images' src='/files/"+actualdocument+"'>"+checkboite+"</li>");
|
|
}
|
|
else if (extension=="pdf") {
|
|
$(".name-elements").append("<li><object class='listed-pdf' data='files/"+actualdocument+"'/>"+checkboite+"</li>");
|
|
}
|
|
else if (extension=="epub") {
|
|
$(".name-elements").append("<li>"+actualdocument+"</li>");
|
|
}
|
|
else if ((extension=="mp3") || (extension=="wav") || (extension=="m4a")) {
|
|
$(".name-elements").append("<li><audio class='listed-audio' controls><source src='files/"+actualdocument+"'></audio>"+checkboite+"</li>");
|
|
}
|
|
else if ((extension=="mov") || (extension=="mp4")) {
|
|
$(".name-elements").append("<li><video class='listed-videos' controls><source src='files/"+actualdocument+"'></video>"+checkboite+"</li>");
|
|
}
|
|
else if ((extension=="odt") || (extension=="docx")) {
|
|
// something for odt and docx
|
|
$(".name-elements").append("<li>"+actualdocument+"</li>");
|
|
};
|
|
};
|
|
category = item.method;
|
|
};
|
|
|
|
});
|
|
|
|
|
|
});
|
|
flag = false;
|
|
} else {
|
|
$(".name-elements").empty();
|
|
flag = true;
|
|
};
|
|
|
|
});
|
|
|
|
///////////CHECKBOXES////////////////
|
|
|
|
var listofselecteddocs = [];
|
|
|
|
$(document.body).on("click", "input[type='checkbox']", function() {
|
|
var self=$(this);
|
|
if(self.is(":checked")){
|
|
theid = self.attr("id");
|
|
alert("checkbox id ="+theid +"is checked ");
|
|
listofselecteddocs.push(theid);
|
|
alert(listofselecteddocs.length);
|
|
}else {
|
|
theid = self.attr("id");
|
|
alert("id = "+theid +"is Unchecked ");
|
|
listofselecteddocs = $.grep(listofselecteddocs, function(value) {
|
|
return value != theid;
|
|
});
|
|
alert(listofselecteddocs.length);
|
|
|
|
}
|
|
});
|
|
|
|
|
|
//THE SENDING OF THE LIST TO PYTHON ///////////////////
|
|
|
|
$("#listoffiles").click(function(){
|
|
console.log(listofselecteddocs)
|
|
$.ajax({
|
|
type : 'POST',
|
|
url : "{{url_for('test')}}",
|
|
data : JSON.stringify(listofselecteddocs),
|
|
success: function(response){
|
|
alert("yesss")
|
|
},
|
|
contentType: "application/json",
|
|
dataType: 'json'
|
|
});
|
|
});
|
|
|
|
|
|
});
|
|
|
|
</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={{librarian}}>{{librarian}}</span>
|
|
{% endfor %}
|
|
</div>
|
|
|
|
<!-- submit data -->
|
|
<button id="about">About</button>
|
|
<a href="/test/" target="_blank"><button id="listoffiles">Print</button></a>
|
|
<a href="/"><button id="reset">Reset</button></a>
|
|
<button id="showall">Show All</button>
|
|
|
|
|
|
<br>
|
|
<div class="file-names-container">
|
|
<!--librarians-focused-->
|
|
{% 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><br>
|
|
{% elif item == querylibrarian %}
|
|
{% for urlmeth in urlmethod %}
|
|
{% if urlmeth.lower() == file['method'].lower() %}
|
|
{% set show_file = file['debrisname'] %}
|
|
<span class="file-names" id="{{show_file}}">{{show_file}}</span><br>
|
|
{% endif %}
|
|
{% endfor %}
|
|
{% endif %}
|
|
{% endfor %}
|
|
{% endfor %}
|
|
{% endfor %}
|
|
|
|
<!--method-focused-->
|
|
{% for querymethod in urlmethod %}
|
|
{% for file in filetoname_dict %}
|
|
{% if querymethod.lower() == file['method'].lower() and urllibrarian==[] %}
|
|
{% set show_file = file['debrisname'] %}
|
|
<span class="file-names" id="{{show_file}}">{{show_file}}</span><br>
|
|
{% endif %}
|
|
{% endfor %}
|
|
{% endfor %}
|
|
</div>
|
|
</div>
|
|
|
|
<div class="main-column-right">
|
|
<ul class="name-elements">
|
|
</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>
|
|
|
|
</body>
|
|
</html>
|
|
|