DAAP_interface/templates/browsethearchive.html

{% extends "layout.html" %}
{% block content %}

<div id="browsethearchive-all">
<div class="pagetitle" id="browsethearchive-title">BROWSE THE ARCHIVE</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 https://www.javaer101.com/en/article/123201810.html
pageSize = 4;
incremSlide = 5;
startPage = 0;
numberPage = 0;

var pageCount =  $(".browsethearchive-items").length / pageSize;
var totalSlidepPage = Math.floor(pageCount / incremSlide);
    
for(var i = 0 ; i<pageCount;i++){
    $("#pagin").append('<li><a href="#">'+(i+1)+'</a></li> ');
    if(i>pageSize){
       $("#pagin li").eq(i).hide();
    }
}

var prev = $("<li/>").addClass("prev").html("Prev").click(function(){
   startPage-=1;
   incremSlide-=1;
   numberPage--;
   slide();
});

prev.hide();

var next = $("<li/>").addClass("next").html("Next").click(function(){
   startPage+=1;
   incremSlide+=1;
   numberPage++;
   slide();
});


$("#pagin").prepend(prev).append(next);

$("#pagin li").first().find("a").addClass("current");

slide = function(sens){
   $("#pagin li").hide();
   
   for(t=startPage;t<incremSlide;t++){
     $("#pagin li").eq(t+1).show();
   }
   if(startPage == 0){
     next.show();
     prev.hide();
   }else if(numberPage == totalSlidepPage ){
     next.hide();
     prev.show();
   }else{
     next.show();
     prev.show();
   }
   
    
}

showPage = function(page) {
	  $(".browsethearchive-items").hide();
	  $(".browsethearchive-items").each(function(n) {
	      if (n >= pageSize * (page - 1) && n < pageSize * page)
	          $(this).show();
	  });        
}
    
showPage(1);
$("#pagin li a").eq(0).addClass("current");


var $listItems = $('#pagin li a');
var activeLink;


$("#pagin li a").click(function() {

	$listItems.removeClass('current');
    $(this).addClass('current');  
    var activeLink=$(this);

    showPage(parseInt($(this).text()));
});


var i = 1;

$(".prev").click(function() {

    let prevLi = $("#pagin li a.current").parent().prev().find("a");
    $("#pagin li a.current").removeClass("current");
    prevLi.addClass("current");


    if (i != 1) {
      showPage(--i);
    }
});
$(".next").click(function() {

    let nextLi = $("#pagin li a.current").parent().next().find("a");
    $("#pagin li a.current").removeClass("current");
    nextLi.addClass("current");

    if (i < ($('.browsethearchive-items').length)/4) {
      showPage(++i);
    }    
});





	 // $("#pagin li a").removeClass("current");
	 // $(this).addClass("current");





    // $(".next").removeClass("");
    // $(this).addClass("");



	//$('#pagin li a').removeClass('current');

	// $("#pagin li").eq().addClass('current');

 	// $(this).addClass('current');  
 	// var activeLink=$(this);
	// $activeLi.next().addClass('current');  
    
    // showPage($('#pagin li a').addClass('current'));

    // var $activeLi = $('#pagin li').find("a.current");
    // $activeLi.removeClass('current');

    // if($activeLi.next()!=null && $activeLi.next()!=undefined ){
    // 	$activeLi.next().addClass('current');  
    // 	}else{
    // 	$('#pagin li').find("a:last").addClass("current")
    // }





// $('.next').on('click',function(){
//     var $activeLi=$('#pagin li').find("a.current");
//     $activeLi.removeClass('current');

//     if($activeLi.next().length>0 ){
// 	$activeLi.next().addClass('current');  
// 	}else{
// 	$('#pagin li').find("a:first").addClass("current")
// 	}

// });

// https://stackoverflow.com/questions/23335133/add-and-remove-pagination-active-class-when-i-click-in-next-and-prev-arrows
// https://stackoverflow.com/questions/23335133/add-and-remove-pagination-active-class-when-i-click-in-next-and-prev-arrows/23337941

</script>

</div>


{% endblock content %}