First test of separation of javascript
This commit is contained in:
@@ -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 = '<div class="gallery-item ';
|
||||
if (canDisplay)
|
||||
paintingHtml += 'active">';
|
||||
else
|
||||
paintingHtml += 'inactive">';
|
||||
else
|
||||
paintingHtml += 'inactive">';
|
||||
|
||||
if (i.photo == "none")
|
||||
{
|
||||
paintingHtml += '<a data-fancybox="exposition" href="images/unknown.jpg" data-fancybox-index="' + i.number + '">'
|
||||
@@ -481,6 +482,7 @@ jQuery(document).ready(function($)
|
||||
paintingHtml += '<a data-fancybox="exposition" href="photos/paintings/normal/' + i.number + '.jpg" data-fancybox-index="' + i.number + '">'
|
||||
paintingHtml += '<img src="photos/paintings/mini/" alt="Tableau ' + i.number + '"></a>'
|
||||
}
|
||||
|
||||
paintingHtml += '<span class="item-title">' + 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 = '<div id="info"><span class="info">';
|
||||
cartel += '<a href="painting.html?number=' + data[idx].number + '">ℹ︎</span></a></span>';
|
||||
cartel += '<span class="title">' + data[idx].title + '</span><span class="year">';
|
||||
if (data[idx].month != '—')
|
||||
cartel += data[idx].month + ' ';
|
||||
if (data[idx].year != '—')
|
||||
cartel += data[idx].year;
|
||||
cartel += ' </span><span class="format">' + data[idx].paint + ' sur ' + data[idx].support.toLowerCase();
|
||||
if (data[idx].dimension != '—')
|
||||
cartel += ' (' + data[idx].dimension + ')';
|
||||
cartel += '</span>';
|
||||
if (data[idx].comment != '—')
|
||||
cartel += '<span class="comment">' + data[idx].comment + '</span>';
|
||||
cartel += '</div>';
|
||||
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);
|
||||
});
|
||||
});
|
||||
});
|
||||
@@ -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 = '<div id="info"><span class="info">';
|
||||
cartel += '<a href="painting.html?number=' + data[idx].number + '">ℹ︎</span></a></span>';
|
||||
cartel += '<span class="title">' + data[idx].title + '</span><span class="year">';
|
||||
if (data[idx].month != '—')
|
||||
cartel += data[idx].month + ' ';
|
||||
if (data[idx].year != '—')
|
||||
cartel += data[idx].year;
|
||||
cartel += ' </span><span class="format">' + data[idx].paint + ' sur ' + data[idx].support.toLowerCase();
|
||||
if (data[idx].dimension != '—')
|
||||
cartel += ' (' + data[idx].dimension + ')';
|
||||
cartel += '</span>';
|
||||
if (data[idx].comment != '—')
|
||||
cartel += '<span class="comment">' + data[idx].comment + '</span>';
|
||||
cartel += '</div>';
|
||||
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);
|
||||
});
|
||||
});
|
||||
});
|
||||
68
scripts/fancybox.js
Normal file
68
scripts/fancybox.js
Normal file
@@ -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 = '<div id="info"><span class="info">';
|
||||
cartel += '<a href="painting.html?number=' + data[idx].number + '">ℹ︎</span></a></span>';
|
||||
cartel += '<span class="title">' + data[idx].title + '</span><span class="year">';
|
||||
if (data[idx].month != '—')
|
||||
cartel += data[idx].month + ' ';
|
||||
if (data[idx].year != '—')
|
||||
cartel += data[idx].year;
|
||||
cartel += ' </span><span class="format">' + data[idx].paint + ' sur ' + data[idx].support.toLowerCase();
|
||||
if (data[idx].dimension != '—')
|
||||
cartel += ' (' + data[idx].dimension + ')';
|
||||
cartel += '</span>';
|
||||
if (data[idx].comment != '—')
|
||||
cartel += '<span class="comment">' + data[idx].comment + '</span>';
|
||||
cartel += '</div>';
|
||||
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);
|
||||
}
|
||||
});
|
||||
}
|
||||
62
scripts/pagination.js
Normal file
62
scripts/pagination.js
Normal file
@@ -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);
|
||||
}
|
||||
Reference in New Issue
Block a user