From bf60722e2210048a40a48fd2a962faae14de1108 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Th=C3=A9o=20Marchal?= Date: Wed, 17 Feb 2021 18:48:52 +0100 Subject: [PATCH] First test of separation of javascript --- scripts/explorer.js | 142 +++++------------------------------------- scripts/exposition.js | 117 ++++------------------------------ scripts/fancybox.js | 68 ++++++++++++++++++++ scripts/pagination.js | 62 ++++++++++++++++++ 4 files changed, 159 insertions(+), 230 deletions(-) create mode 100644 scripts/fancybox.js create mode 100644 scripts/pagination.js diff --git a/scripts/explorer.js b/scripts/explorer.js index 825b9c4..d6ff210 100644 --- a/scripts/explorer.js +++ b/scripts/explorer.js @@ -391,8 +391,8 @@ jQuery(document).ready(function($) } // gallery vars - var pageSize = 14; - var paintingList = []; + window.pageSize = 14; + window.paintingList = []; function generateTable() { @@ -469,8 +469,9 @@ jQuery(document).ready(function($) paintingHtml = '
'; - else - paintingHtml += 'inactive">'; + else + paintingHtml += 'inactive">'; + if (i.photo == "none") { paintingHtml += '' @@ -481,6 +482,7 @@ jQuery(document).ready(function($) paintingHtml += '' paintingHtml += 'Tableau ' + i.number + '' } + paintingHtml += '' + i.title; if (i.year != '—') paintingHtml += ' (' + i.year + ')'; @@ -508,70 +510,15 @@ jQuery(document).ready(function($) $("form").slideUp(200); $("article.explorer p.result").css("display", "block"); + // pagination configuration + window.currentPage = 0; + window.previousArray = [] + $.getScript("scripts/pagination.js", function() { + paginationInit(data, paintingList, true); - // pagination - function getPageRange() - { - if (window.innerWidth >= 600) - return 6; - else if (window.innerWidth < 600 && window.innerWidth > 450) - return 4; - else - return 1; - } - - var currentPage = 0; - var previousArray = [] - var options = - { - dataSource: paintingList, - pageSize: pageSize, - pageRange: getPageRange(), - className: 'paginationjs-theme-ginou', - hideWhenLessThanOnePage: true, - callback: function (response, pagination) - { - currentPage = pagination.pageNumber; - urlParams = new URLSearchParams(window.location.search) - 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); - + if (targetPage > 0) + $("#pagination").pagination('go', targetPage); + }); } else { @@ -603,66 +550,9 @@ jQuery(document).ready(function($) $("table").show(); }) - // fancybox configuration - $('[data-fancybox="exposition"], [data-fancybox="exposition-list"]').fancybox( - { - infobar: false, - toolbar: true, - smallBtn: false, - buttons: ["arrowLeft", "arrowRight", "close"], - arrows: false, - transitionEffect: "fade", - baseClass: 'fancybox-custom-layout', - mobile: { - preventCaptionOverlap: true, - }, - - caption: function(instance, item) - { - var idx = item.opts.fancyboxIndex - 1; // painting number - if (item.opts.fancyboxIndex >= 1000) - idx = item.opts.fancyboxIndex - 1000 + 383 - 1; // inédit: index starts at 1000 // 383: total number of paintings except inédit - - function generateCartel() - { - cartel = '
'; - cartel += 'ℹ︎'; - cartel += '' + data[idx].title + ''; - if (data[idx].month != '—') - cartel += data[idx].month + ' '; - if (data[idx].year != '—') - cartel += data[idx].year; - cartel += ' ' + data[idx].paint + ' sur ' + data[idx].support.toLowerCase(); - if (data[idx].dimension != '—') - cartel += ' (' + data[idx].dimension + ')'; - cartel += ''; - if (data[idx].comment != '—') - cartel += '' + data[idx].comment + ''; - cartel += '
'; - return cartel; - } - - 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) - urlParams = new URLSearchParams(window.location.search) - trimSearch = window.location.search.substr(0, window.location.search.lastIndexOf('&')); - window.history.replaceState('', '', window.location.pathname + trimSearch + '&page=' + currentPage + window.location.hash); - } + $.getScript("scripts/fancybox.js", function() { + fancyboxInit(data, true); }); }); }); \ No newline at end of file diff --git a/scripts/exposition.js b/scripts/exposition.js index 6fd53cb..610abc5 100644 --- a/scripts/exposition.js +++ b/scripts/exposition.js @@ -2,7 +2,7 @@ jQuery(document).ready(function($) { $.getJSON("data.json", function(data) { - var pageSize = 14; + window.pageSize = 14; var paintingList = []; canDisplay = true; @@ -38,110 +38,19 @@ jQuery(document).ready(function($) if (urlParams.get('page') != "") targetPage = urlParams.get('page'); - function getPageRange() - { - if (window.innerWidth >= 600) - return null; - else if (window.innerWidth < 600 && window.innerWidth > 450) - return 4; - else - return 1; - } - - var currentPage = 0; - var previousArray = [] - var options = - { - dataSource: paintingList, - pageSize: pageSize, - pageRange: getPageRange(), - className: 'paginationjs-theme-ginou', - hideWhenLessThanOnePage: true, - callback: function (response, pagination) - { - currentPage = pagination.pageNumber; - window.history.replaceState('', '', window.location.pathname + '?page=' + currentPage + window.location.hash); + // pagination configuration + window.currentPage = 0; + window.previousArray = []; + $.getScript("scripts/pagination.js", function() { + paginationInit(data, paintingList, false); - if (previousArray.length > 0) - { - for (i of previousArray) - $('[data-fancybox-index="'+i+'"]').parent().removeClass("active").addClass("inactive"); - } + if (targetPage > 0) + $("#pagination").pagination('go', targetPage); + }); - previousArray = response; - - $.each(response, function(index, item) - { - $('[data-fancybox-index="'+item+'"]').parent().removeClass("inactive").addClass("active"); - $('[data-fancybox-index="'+item+'"] img').attr("src", "photos/paintings/mini/"+item+".jpg"); - }); - } - }; - - $('#pagination').pagination(options); - - if (targetPage > 0) - $("#pagination").pagination('go', targetPage); - - - $('[data-fancybox="exposition"]').fancybox( - { - selector: '.gallery a', - infobar: false, - toolbar: true, - smallBtn: false, - buttons: ["arrowLeft", "arrowRight", "close"], - arrows: false, - transitionEffect: "fade", - baseClass: 'fancybox-custom-layout', - mobile: { - preventCaptionOverlap: true, - }, - - caption: function(instance, item) - { - var idx = item.opts.fancyboxIndex - 1; // painting number - if (item.opts.fancyboxIndex >= 1000) - idx = item.opts.fancyboxIndex - 1000 + 383 - 1; // inédit: index starts at 1000 // 383: total number of paintings except inédit - - function generateCartel() - { - cartel = '
'; - cartel += 'ℹ︎'; - cartel += '' + data[idx].title + ''; - if (data[idx].month != '—') - cartel += data[idx].month + ' '; - if (data[idx].year != '—') - cartel += data[idx].year; - cartel += ' ' + data[idx].paint + ' sur ' + data[idx].support.toLowerCase(); - if (data[idx].dimension != '—') - cartel += ' (' + data[idx].dimension + ')'; - cartel += ''; - if (data[idx].comment != '—') - cartel += '' + data[idx].comment + ''; - cartel += '
'; - return cartel; - } - - 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); - } - - }); + // fancybox configuration + $.getScript("scripts/fancybox.js", function() { + fancyboxInit(data, false); + }); }); }); \ No newline at end of file diff --git a/scripts/fancybox.js b/scripts/fancybox.js new file mode 100644 index 0000000..2621593 --- /dev/null +++ b/scripts/fancybox.js @@ -0,0 +1,68 @@ +function fancyboxInit(data, explorer) +{ + $('[data-fancybox="exposition"], [data-fancybox="exposition-list"]').fancybox( + { + selector: '.gallery a', + infobar: false, + toolbar: true, + smallBtn: false, + buttons: ["arrowLeft", "arrowRight", "close"], + arrows: false, + transitionEffect: "fade", + baseClass: 'fancybox-custom-layout', + mobile: { + preventCaptionOverlap: true, + }, + + caption: function(instance, item) + { + var idx = item.opts.fancyboxIndex - 1; // painting number + if (item.opts.fancyboxIndex >= 1000) + idx = item.opts.fancyboxIndex - 1000 + 383 - 1; // inédit: index starts at 1000 // 383: total number of paintings except inédit + + function generateCartel() + { + cartel = '
'; + cartel += 'ℹ︎'; + cartel += '' + data[idx].title + ''; + if (data[idx].month != '—') + cartel += data[idx].month + ' '; + if (data[idx].year != '—') + cartel += data[idx].year; + cartel += ' ' + data[idx].paint + ' sur ' + data[idx].support.toLowerCase(); + if (data[idx].dimension != '—') + cartel += ' (' + data[idx].dimension + ')'; + cartel += ''; + if (data[idx].comment != '—') + cartel += '' + data[idx].comment + ''; + cartel += '
'; + return cartel; + } + + 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) + if (explorer) + { + urlParams = new URLSearchParams(window.location.search) + trimSearch = window.location.search.substr(0, window.location.search.lastIndexOf('&')); + window.history.replaceState('', '', window.location.pathname + trimSearch + '&page=' + currentPage + window.location.hash); + } + else + window.history.replaceState('', '', window.location.pathname + '?page=' + currentPage + window.location.hash); + } + }); +} \ No newline at end of file diff --git a/scripts/pagination.js b/scripts/pagination.js new file mode 100644 index 0000000..33d701f --- /dev/null +++ b/scripts/pagination.js @@ -0,0 +1,62 @@ +function paginationInit(data, paintingList, explorer) +{ + function getPageRange() + { + if (window.innerWidth >= 600) + return explorer ? 6 : null; + else if (window.innerWidth < 600 && window.innerWidth > 450) + return 4; + else + return 1; + } + + var options = + { + dataSource: paintingList, + pageSize: pageSize, + pageRange: getPageRange(), + className: 'paginationjs-theme-ginou', + hideWhenLessThanOnePage: true, + callback: function (response, pagination) + { + currentPage = pagination.pageNumber; + // url handling + if (explorer) + { + urlParams = new URLSearchParams(window.location.search) + 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); + } + } + else + { + window.history.replaceState('', '', window.location.pathname + '?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"); + if (data[item >= 1000 ? (item - 1000 + 383 - 1) : (item - 1)].photo != "none") // inédit: index starts at 1000 // 383: total number of paintings except inédit + $('[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); +} \ No newline at end of file