keb/ginou
1
0
Fork 0
Code Issues 6 Pull Requests Releases Activity

Pagination on all pages

Browse Source
This commit is contained in:
Théo Marchal 2021-02-14 12:24:53 +01:00
parent 0b268b8654
commit 6f154234b3
3 changed files with 101 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
explorer.html
View File

@ -14,6 +14,9 @@
<script src="plugins/jquery-3.5.1.min.js"></script> <script src="plugins/jquery-3.5.1.min.js"></script>
<link href="plugins/jquery.fancybox.min.css" rel="stylesheet"> <link href="plugins/jquery.fancybox.min.css" rel="stylesheet">
<script src="plugins/jquery.fancybox.min.js"></script> <script src="plugins/jquery.fancybox.min.js"></script>
<script src="plugins/pagination.min.js"></script>
<link rel="stylesheet" href="plugins/pagination.css" media="screen">
<link rel="stylesheet" href="styles/pagination.css" media="screen">
<script src="scripts/explorer.js"></script> <script src="scripts/explorer.js"></script>
</head> </head>
<body> <body>
@ -192,7 +195,10 @@
<img class="style-select frame" src="styles/icons/frame.svg" alt="galerie"> <img class="style-select frame" src="styles/icons/frame.svg" alt="galerie">
<img class="style-select list" src="styles/icons/list.svg" alt="liste"> <img class="style-select list" src="styles/icons/list.svg" alt="liste">
</div> </div>
<div class="gallery"></div> <div id="gallery">
<div id="pagination" style="display:table; text-align:center; margin:auto;"></div>
<div class="gallery"></div>
</div>
<table> <table>
<thead> <thead>
<tr> <tr>

98
scripts/explorer.js
View File

@ -390,10 +390,15 @@ jQuery(document).ready(function($)
return false; return false;
} }
// gallery vars
var pageSize = 14;
var paintingList = [];
function generateTable() function generateTable()
{ {
hasResult = false; hasResult = false;
numberOfItem = 0; numberOfItem = 0;
canDisplay = true;
for (i of data) for (i of data)
{ {
@ -457,7 +462,15 @@ jQuery(document).ready(function($)
$("table").append(result); $("table").append(result);
// gallery // gallery
paintingHtml = '<div class="gallery-item">'; paintingList.push(i.number);
if (paintingList.length % (pageSize + 1) == 0)
canDisplay = false;
paintingHtml = '<div class="gallery-item ';
if (canDisplay)
paintingHtml += 'active">';
else
paintingHtml += 'inactive">';
if (i.photo == "none") if (i.photo == "none")
{ {
paintingHtml += '<a data-fancybox="exposition" href="images/unknown.jpg" data-fancybox-index="' + i.number + '">' paintingHtml += '<a data-fancybox="exposition" href="images/unknown.jpg" data-fancybox-index="' + i.number + '">'
@ -466,7 +479,7 @@ jQuery(document).ready(function($)
else else
{ {
paintingHtml += '<a data-fancybox="exposition" href="photos/paintings/normal/' + i.number + '.jpg" data-fancybox-index="' + i.number + '">' paintingHtml += '<a data-fancybox="exposition" href="photos/paintings/normal/' + i.number + '.jpg" data-fancybox-index="' + i.number + '">'
paintingHtml += '<img src="photos/paintings/mini/' + i.number + '.jpg" alt="Tableau ' + i.number + '"></a>' paintingHtml += '<img src="photos/paintings/mini/" alt="Tableau ' + i.number + '"></a>'
} }
paintingHtml += '<span class="item-title">' + i.title; paintingHtml += '<span class="item-title">' + i.title;
if (i.year != '—') if (i.year != '—')
@ -478,9 +491,13 @@ jQuery(document).ready(function($)
return hasResult; return hasResult;
} }
$(".gallery").hide(); $("#gallery").hide();
$(".style-select").hide(); $(".style-select").hide();
var targetPage = 0;
if (urlParams.get('page') != "")
targetPage = urlParams.get('page');
generateMenu(); generateMenu();
var res = generateTable(); var res = generateTable();
@ -490,6 +507,61 @@ jQuery(document).ready(function($)
$("article.explorer h2").removeClass("active") $("article.explorer h2").removeClass("active")
$("form").slideUp(200); $("form").slideUp(200);
$("article.explorer p.result").css("display", "block"); $("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 else
{ {
@ -513,11 +585,11 @@ jQuery(document).ready(function($)
$(".style-select.frame").click(function() $(".style-select.frame").click(function()
{ {
$("table").hide(); $("table").hide();
$(".gallery").show(); $("#gallery").show();
}) })
$(".style-select.list").click(function() $(".style-select.list").click(function()
{ {
$(".gallery").hide(); $("#gallery").hide();
$("table").show(); $("table").show();
}) })
@ -562,6 +634,22 @@ jQuery(document).ready(function($)
} }
return generateCartel(); 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);
} }
}); });
}); });

2
scripts/exposition.js
View File

@ -18,7 +18,7 @@ jQuery(document).ready(function($)
if (canDisplay) if (canDisplay)
{ {
paintingHtml += 'active"><a data-fancybox="exposition" href="photos/paintings/normal/' + i.number + '.jpg" data-fancybox-index="' + i.number + '">' paintingHtml += 'active"><a data-fancybox="exposition" href="photos/paintings/normal/' + i.number + '.jpg" data-fancybox-index="' + i.number + '">'
paintingHtml += '<img src="photos/paintings/mini/' + i.number + '.jpg" alt="Tableau ' + i.number + '"></a>'; paintingHtml += '<img src="photos/paintings/mini/" alt="Tableau ' + i.number + '"></a>';
} }
else else
{ {