From 6f154234b34d13ae8ee527346928334f9cc76653 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Th=C3=A9o=20Marchal?= Date: Sun, 14 Feb 2021 12:24:53 +0100 Subject: [PATCH] Pagination on all pages --- explorer.html | 8 +++- scripts/explorer.js | 98 ++++++++++++++++++++++++++++++++++++++++--- scripts/exposition.js | 2 +- 3 files changed, 101 insertions(+), 7 deletions(-) diff --git a/explorer.html b/explorer.html index 67351e7..38f30fe 100644 --- a/explorer.html +++ b/explorer.html @@ -14,6 +14,9 @@ + + + @@ -192,7 +195,10 @@ galerie liste -
+ diff --git a/scripts/explorer.js b/scripts/explorer.js index f58a27d..47f4311 100644 --- a/scripts/explorer.js +++ b/scripts/explorer.js @@ -390,10 +390,15 @@ jQuery(document).ready(function($) return false; } + // gallery vars + var pageSize = 14; + var paintingList = []; + function generateTable() { hasResult = false; numberOfItem = 0; + canDisplay = true; for (i of data) { @@ -457,7 +462,15 @@ jQuery(document).ready(function($) $("table").append(result); // gallery - paintingHtml = '
'; + paintingList.push(i.number); + if (paintingList.length % (pageSize + 1) == 0) + canDisplay = false; + + paintingHtml = '
'; + else + paintingHtml += 'inactive">'; if (i.photo == "none") { paintingHtml += '' @@ -466,7 +479,7 @@ jQuery(document).ready(function($) else { paintingHtml += '' - paintingHtml += 'Tableau ' + i.number + '' + paintingHtml += 'Tableau ' + i.number + '' } paintingHtml += '' + i.title; if (i.year != '—') @@ -478,9 +491,13 @@ jQuery(document).ready(function($) return hasResult; } - $(".gallery").hide(); + $("#gallery").hide(); $(".style-select").hide(); + var targetPage = 0; + if (urlParams.get('page') != "") + targetPage = urlParams.get('page'); + generateMenu(); var res = generateTable(); @@ -490,6 +507,61 @@ jQuery(document).ready(function($) $("article.explorer h2").removeClass("active") $("form").slideUp(200); $("article.explorer p.result").css("display", "block"); + + + // pagination + var currentPage = 0; + var previousArray = [] + var options = + { + dataSource: paintingList, + pageSize: pageSize, + pageRange: 6, + className: 'paginationjs-theme-ginou', + callback: function (response, pagination) + { + currentPage = pagination.pageNumber; + urlParams = new URLSearchParams(window.location.search) + console.log(urlParams.get('page')); + if (urlParams.get('page') == undefined) + { + window.history.replaceState('', '', window.location.pathname + window.location.search + '&page=' + currentPage + window.location.hash); + } + else + { + trimSearch = window.location.search.substr(0, window.location.search.lastIndexOf('&')); + window.history.replaceState('', '', window.location.pathname + trimSearch + '&page=' + currentPage + window.location.hash); + } + + if (previousArray.length > 0) + { + for (i of previousArray) + $('[data-fancybox-index="'+i+'"]').parent().removeClass("active").addClass("inactive"); + } + + previousArray = response; + + $.each(response, function(index, item) + { + $('[data-fancybox="exposition"][data-fancybox-index="'+item+'"]').parent().removeClass("inactive").addClass("active"); + + idx = item-1; + if (item >= 1000) + idx = item - 1000 + 383 - 1; // inédit: index starts at 1000 // 383: total number of paintings except inédit + + if (data[idx].photo != "none") + $('[data-fancybox="exposition"][data-fancybox-index="'+item+'"] img').attr("src", "photos/paintings/mini/"+item+".jpg"); + else + $('[data-fancybox="exposition"][data-fancybox-index="'+item+'"] img').attr("src", "images/unknown.jpg"); + }); + } + }; + + $('#pagination').pagination(options); + + if (targetPage > 0) + $("#pagination").pagination('go', targetPage); + } else { @@ -513,11 +585,11 @@ jQuery(document).ready(function($) $(".style-select.frame").click(function() { $("table").hide(); - $(".gallery").show(); + $("#gallery").show(); }) $(".style-select.list").click(function() { - $(".gallery").hide(); + $("#gallery").hide(); $("table").show(); }) @@ -562,6 +634,22 @@ jQuery(document).ready(function($) } return generateCartel(); + }, + + beforeShow : function(instance, current) + { + if (current.opts.fancyboxIndex > previousArray[previousArray.length - 1]) + $('#pagination').pagination('next'); + + if (current.opts.fancyboxIndex < previousArray[0]) + $('#pagination').pagination('previous'); + }, + + afterClose : function(instance) + { + // after closing, changing the URL again. I guess there's no better way except by changing fancybox code... + // (apparently fancybox changes back to the original url it had when starting) + //window.history.replaceState('', '', window.location.pathname + '?page=' + currentPage + window.location.hash); } }); }); diff --git a/scripts/exposition.js b/scripts/exposition.js index caec13e..c921827 100644 --- a/scripts/exposition.js +++ b/scripts/exposition.js @@ -18,7 +18,7 @@ jQuery(document).ready(function($) if (canDisplay) { paintingHtml += 'active">' - paintingHtml += 'Tableau ' + i.number + ''; + paintingHtml += 'Tableau ' + i.number + ''; } else {