152 lines
3.4 KiB
HTML
152 lines
3.4 KiB
HTML
{% extends "layout.html" %}
|
||
{% block content %}
|
||
|
||
<div id="browsethearchive-all">
|
||
<div class="pagetitle" id="browsethearchive-title">BROWSE THE ARCHIVE FROM A–Z</div>
|
||
|
||
<div id="browsethearchive-grid">
|
||
|
||
{% for x in results['results']['bindings']%}
|
||
<div class="browsethearchive-items">
|
||
<div class="browsethearchive-items-top">
|
||
{% if "image" in x %}
|
||
<a href='/artwork?id={{ x["work"]["value"] | replace("http://daap.bannerrepeater.org/entity/", "") }}'>
|
||
<img class="browsethearchive-imgs" src='{{ x["image"]["value"] | replace("wiki/File:","wiki/Special:Redirect/file/") }}'>
|
||
</a> <br>
|
||
{% else %}
|
||
<a href='/artwork?id={{ x["work"]["value"] | replace("http://daap.bannerrepeater.org/entity/", "") }}'>
|
||
<img class="browsethearchive-imgs" src="{{ url_for('static', filename='/imgs/Icons/placeholder_no-image2.png') }}"><br>
|
||
</a>
|
||
{% endif %}
|
||
</div>
|
||
|
||
<div class="browsethearchive-items-bottom">
|
||
<a class="title" href='/artwork?id={{ x["work"]["value"] | replace("http://daap.bannerrepeater.org/entity/", "") }}'>
|
||
{{ x["workLabel"]["value"]}}
|
||
</a> <br>
|
||
<span class="date">
|
||
{% if "date" in x %}
|
||
{{ x["date"]["value"] | replace("T00:00:00Z", "") }}
|
||
{% endif %}
|
||
</span>
|
||
|
||
|
||
</div>
|
||
|
||
</div>
|
||
{% endfor %}
|
||
|
||
</div>
|
||
|
||
<ul id="pagin" class="browsethearchive-pagination">
|
||
|
||
</ul>
|
||
|
||
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
|
||
|
||
<script type="text/javascript">
|
||
|
||
// pagination script w/ support from @biberman on stackoverflow - big thanks!
|
||
|
||
|
||
let startPage;
|
||
const pageSize = 24;
|
||
const totalSlidePage = 5;
|
||
const pageCount = Math.ceil($(".browsethearchive-items").length / pageSize);
|
||
const slideRange = Math.floor(totalSlidePage / 2);
|
||
|
||
slide = function() {
|
||
startPage = $("#pagin li a.current").parent().index();
|
||
let paginationStart = (startPage - slideRange) <= 1 ? 0 :
|
||
(startPage >= (pageCount - slideRange) ? (pageCount - totalSlidePage) :
|
||
(startPage - slideRange - 1));
|
||
|
||
|
||
$("#pagin li").hide();
|
||
for (let t = paginationStart; t < (paginationStart + totalSlidePage); t++) {
|
||
$("#pagin li").eq(t + 1).show();
|
||
}
|
||
|
||
next.show();
|
||
prev.show();
|
||
|
||
if (startPage == 1) {
|
||
prev.hide();
|
||
}
|
||
if (startPage == pageCount ) {
|
||
next.hide();
|
||
}
|
||
}
|
||
|
||
showPage = function() {
|
||
console.log(startPage);
|
||
$(".browsethearchive-items").hide();
|
||
$(".browsethearchive-items").each(function(n) {
|
||
if (n >= pageSize * (startPage - 1) && n < pageSize * startPage)
|
||
$(this).show();
|
||
});
|
||
}
|
||
|
||
for (let i = 0 ; i < pageCount; i++) {
|
||
$("#pagin").append('<li><a href="#">' + (i + 1) + '</a></li> ');
|
||
|
||
if (i > pageSize) {
|
||
$("#pagin li").eq(i).hide();
|
||
}
|
||
}
|
||
|
||
let prev = $("<li/>").addClass("prev").html("Prev").click(function() {
|
||
let prevLi = $("#pagin li a.current").parent().prev().find("a");
|
||
|
||
if (prevLi[0]) {
|
||
$("#pagin li a.current").removeClass("current");
|
||
prevLi.addClass("current");
|
||
}
|
||
|
||
slide();
|
||
|
||
if (startPage != 0) {
|
||
showPage();
|
||
}
|
||
});
|
||
|
||
let next = $("<li/>").addClass("next").html("Next").click(function() {
|
||
let nextLi = $("#pagin li a.current").parent().next().find("a");
|
||
|
||
if (nextLi[0]) {
|
||
$("#pagin li a.current").removeClass("current");
|
||
nextLi.addClass("current");
|
||
}
|
||
|
||
slide();
|
||
|
||
if (startPage <= pageCount) {
|
||
showPage();
|
||
}
|
||
});
|
||
|
||
$("#pagin").prepend(prev).append(next);
|
||
|
||
$("#pagin li a").click(function() {
|
||
$('#pagin li a').removeClass('current');
|
||
$(this).addClass('current');
|
||
|
||
slide();
|
||
showPage();
|
||
});
|
||
|
||
$("#pagin li a").eq(0).addClass("current");
|
||
|
||
slide();
|
||
showPage();
|
||
|
||
</script>
|
||
|
||
</div>
|
||
|
||
|
||
{% endblock content %}
|
||
|
||
|
||
|