562 lines
23 KiB
JavaScript
562 lines
23 KiB
JavaScript
// remove place and tag from url when unnecessary
|
|
function onSubmit() {
|
|
$("select[name=place]").each(function() {
|
|
if ($(this).val() == "")
|
|
$(this).remove();
|
|
});
|
|
|
|
$("select[name=tag]").each(function() {
|
|
if ($(this).val() == "")
|
|
$(this).remove();
|
|
});
|
|
return true;
|
|
}
|
|
|
|
function removeFromArray(array, item)
|
|
{
|
|
index = array.indexOf(item);
|
|
if (index > -1)
|
|
array.splice(index, 1);
|
|
}
|
|
|
|
jQuery(document).ready(function($)
|
|
{
|
|
// get URL parameters
|
|
urlParams = new URLSearchParams(window.location.search);
|
|
paramYear = (urlParams.get('years') == null ? urlParams.getAll('year') : urlParams.getAll('years'));
|
|
paramMonth = (urlParams.get('months') == null ? urlParams.getAll('month') : urlParams.getAll('months'));
|
|
paramDimension = (urlParams.get('dimensions') == null ? urlParams.getAll('dimension') : urlParams.getAll('dimensions'));
|
|
paramGenre = (urlParams.get('genres') == null ? urlParams.getAll('genre') : urlParams.getAll('genres'));
|
|
paramTheme = (urlParams.get('themes') == null ? urlParams.getAll('theme') : urlParams.getAll('themes'));
|
|
paramPlace = (urlParams.get('places') == null ? urlParams.getAll('place') : urlParams.getAll('places'));
|
|
paramTag = (urlParams.get('tags') == null ? urlParams.getAll('tag') : urlParams.getAll('tags'));
|
|
paramPhoto = (urlParams.get('photos') == null ? urlParams.getAll('photo') : urlParams.getAll('photos'));
|
|
paramHelp = (urlParams.get('helps') == null ? urlParams.getAll('help') : urlParams.getAll('helps'));
|
|
paramView = (urlParams.get('view'));
|
|
params = { "year": paramYear, "month": paramMonth, "dimension": paramDimension, "genre": paramGenre, "theme": paramTheme, "place": paramPlace, "tag": paramTag, "photo": paramPhoto, "help": paramHelp }
|
|
|
|
$.getJSON("data.json", function(data)
|
|
{
|
|
|
|
/**********/
|
|
/** MENU **/
|
|
/**********/
|
|
|
|
fancyboxInit(data, true);
|
|
|
|
var availableOptions = [];
|
|
var selectedOptions = [];
|
|
|
|
// filter data depending of parameters
|
|
function filterData(selectedOptions)
|
|
{
|
|
function CheckItem(name, selectedElements)
|
|
{
|
|
return function(item)
|
|
{
|
|
if (selectedElements.length == 0)
|
|
return true;
|
|
for (elem of selectedElements)
|
|
{
|
|
if (elem == "all")
|
|
return true;
|
|
if (item[name] == elem)
|
|
return true;
|
|
}
|
|
return false;
|
|
}
|
|
}
|
|
|
|
function CheckTag(item)
|
|
{
|
|
for (tag of selectedOptions.tags)
|
|
{
|
|
if (tag == "all")
|
|
return true;
|
|
if (!item.tags.includes(tag))
|
|
return false;
|
|
}
|
|
return true;
|
|
}
|
|
|
|
function CheckDimension(item)
|
|
{
|
|
if (selectedOptions.dimensions.length == 0)
|
|
return true;
|
|
for (dimension of selectedOptions.dimensions)
|
|
{
|
|
if (dimension == "all")
|
|
return true;
|
|
if (item.dimension.split("x")[0] == dimension)
|
|
return true;
|
|
}
|
|
return false;
|
|
}
|
|
|
|
data = data.filter(CheckTag);
|
|
data = data.filter(CheckDimension);
|
|
data = data.filter(CheckItem("year", selectedOptions.years));
|
|
data = data.filter(CheckItem("photo", selectedOptions.photos));
|
|
data = data.filter(CheckItem("month", selectedOptions.months));
|
|
data = data.filter(CheckItem("genre", selectedOptions.genres));
|
|
data = data.filter(CheckItem("theme", selectedOptions.themes));
|
|
data = data.filter(CheckItem("place", selectedOptions.places));
|
|
data = data.filter(CheckItem("help", selectedOptions.helps));
|
|
}
|
|
|
|
// gather data from json to make form
|
|
function gatherData()
|
|
{
|
|
var photos = []; var years = []; var months = []; var genres = [];
|
|
var themes = []; var places = []; var tags = []; var dimensions = []; var helps = [];
|
|
|
|
function makeItem(item, array, displayName, min, max)
|
|
{
|
|
if (item >= min && item <= max)
|
|
{
|
|
if (array.indexOf(displayName) === -1)
|
|
array.push(displayName);
|
|
}
|
|
}
|
|
|
|
for (i of data)
|
|
{
|
|
if (photos.indexOf(i.photo) === -1 && i.photo != "" && i.photo != "—")
|
|
photos.push(i.photo);
|
|
if (months.indexOf(i.month) === -1 && i.month != "" && i.month != "—")
|
|
months.push(i.month);
|
|
if (genres.indexOf(i.genre) === -1 && i.genre != "" && i.genre != "—")
|
|
genres.push(i.genre);
|
|
if (themes.indexOf(i.theme) === -1 && i.theme != "" && i.theme != "—")
|
|
themes.push(i.theme);
|
|
if (places.indexOf(i.place) === -1 && i.place != "" && i.place != "—")
|
|
places.push(i.place);
|
|
if (helps.indexOf(i.help) === -1 && i.help != "" && i.help != "—")
|
|
helps.push(i.help);
|
|
if (i.year != "" && i.year != "—")
|
|
{
|
|
makeItem(i.year, years, "50s", 1956, 1959);
|
|
makeItem(i.year, years, "60s", 1960, 1969);
|
|
makeItem(i.year, years, "70s", 1970, 1979);
|
|
makeItem(i.year, years, "80s", 1980, 1989);
|
|
makeItem(i.year, years, "90s", 1990, 1999);
|
|
makeItem(i.year, years, "00s", 2000, 2009);
|
|
makeItem(i.year, years, "10s", 2010, 2016);
|
|
}
|
|
if (i.dimension != "" && i.dimension != "—")
|
|
{
|
|
makeItem(i.dimension.split("x")[0], dimensions, "18", 0, 19);
|
|
makeItem(i.dimension.split("x")[0], dimensions, "20", 20, 29);
|
|
makeItem(i.dimension.split("x")[0], dimensions, "30", 30, 39);
|
|
makeItem(i.dimension.split("x")[0], dimensions, "40", 40, 49);
|
|
makeItem(i.dimension.split("x")[0], dimensions, "50", 50, 59);
|
|
makeItem(i.dimension.split("x")[0], dimensions, "60", 60, 69);
|
|
makeItem(i.dimension.split("x")[0], dimensions, "70", 70, 79);
|
|
makeItem(i.dimension.split("x")[0], dimensions, "80", 80, 89);
|
|
makeItem(i.dimension.split("x")[0], dimensions, "90", 90, 99);
|
|
makeItem(i.dimension.split("x")[0], dimensions, "100", 100, 109);
|
|
}
|
|
if (tags.indexOf(i.tags) === -1 && i.tags != "" && i.tags != "—")
|
|
{
|
|
splitTags = i.tags.split(", ");
|
|
for (splitTag of splitTags) {
|
|
if (tags.indexOf(splitTag) === -1)
|
|
{
|
|
tags.push(splitTag);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
genres.sort();
|
|
themes.sort();
|
|
helps.sort();
|
|
places.sort(Intl.Collator().compare);
|
|
tags.sort(Intl.Collator().compare);
|
|
dimensions.sort(function(a, b) { return a - b; });
|
|
var targetMonths = ["Janvier", "Février", "Mars", "Avril", "Mai", "Juin", "Juillet", "Août", "Septembre", "Octobre", "Novembre", "Décembre"];
|
|
months.sort(function(a, b) { return targetMonths.indexOf(a) - targetMonths.indexOf(b); });
|
|
var targetPhotos = ["none", "bad", "ok", "good"];
|
|
photos.sort(function(a, b) { return targetPhotos.indexOf(a) - targetPhotos.indexOf(b); });
|
|
|
|
return {"photos": photos, "years": years, "months": months, "genres": genres, "themes": themes, "places": places, "tags": tags, "dimensions": dimensions, "helps": helps};
|
|
}
|
|
|
|
// gather data from url to check available options
|
|
function gatherURLdata()
|
|
{
|
|
selectedYears = [];
|
|
selectedDimensions = [];
|
|
selectedPhotos = params.photo;
|
|
if (selectedPhotos.includes("exist"))
|
|
{
|
|
if (selectedPhotos.indexOf("bad") === -1) selectedPhotos.push("bad");
|
|
if (selectedPhotos.indexOf("ok") === -1) selectedPhotos.push("ok");
|
|
if (selectedPhotos.indexOf("good") === -1) selectedPhotos.push("good");
|
|
}
|
|
selectedMonths = params.month;
|
|
selectedGenres = params.genre;
|
|
selectedThemes = params.theme;
|
|
selectedPlaces = params.place;
|
|
selectedTags = params.tag;
|
|
selectedHelps = params.help;
|
|
for (p of params.year)
|
|
{
|
|
if (p == "50s") for (i = 1956; i <= 1959; i++) selectedYears.push(i);
|
|
if (p == "60s") for (i = 1960; i <= 1969; i++) selectedYears.push(i);
|
|
if (p == "70s") for (i = 1970; i <= 1979; i++) selectedYears.push(i);
|
|
if (p == "80s") for (i = 1980; i <= 1989; i++) selectedYears.push(i);
|
|
if (p == "90s") for (i = 1990; i <= 1999; i++) selectedYears.push(i);
|
|
if (p == "00s") for (i = 2000; i <= 2009; i++) selectedYears.push(i);
|
|
if (p == "10s") for (i = 2010; i <= 2016; i++) selectedYears.push(i);
|
|
}
|
|
for (p of params.dimension)
|
|
{
|
|
if (p == "18") for (i = 18; i <= 19; i++) selectedDimensions.push(i);
|
|
if (p == "20") for (i = 20; i <= 29; i++) selectedDimensions.push(i);
|
|
if (p == "30") for (i = 30; i <= 39; i++) selectedDimensions.push(i);
|
|
if (p == "40") for (i = 40; i <= 49; i++) selectedDimensions.push(i);
|
|
if (p == "50") for (i = 50; i <= 59; i++) selectedDimensions.push(i);
|
|
if (p == "60") for (i = 60; i <= 69; i++) selectedDimensions.push(i);
|
|
if (p == "70") for (i = 70; i <= 79; i++) selectedDimensions.push(i);
|
|
if (p == "80") for (i = 80; i <= 89; i++) selectedDimensions.push(i);
|
|
if (p == "90") for (i = 90; i <= 99; i++) selectedDimensions.push(i);
|
|
if (p == "100") for (i = 100; i <= 109; i++) selectedDimensions.push(i);
|
|
}
|
|
return {"photos": selectedPhotos, "years": selectedYears, "months": selectedMonths, "genres": selectedGenres, "themes": selectedThemes,
|
|
"places": selectedPlaces, "tags": selectedTags, "dimensions": selectedDimensions, "helps": selectedHelps};
|
|
}
|
|
|
|
var originalData = data;
|
|
var originalAvailableOptions = gatherData();
|
|
|
|
selectedOptions = gatherURLdata();
|
|
filterData(selectedOptions);
|
|
|
|
$("input.reinit").click(function()
|
|
{
|
|
$('input').prop("disabled", false);
|
|
$('input').prop("checked", false);
|
|
$('select').val("");
|
|
data = originalData;
|
|
availableOptions = originalAvailableOptions;
|
|
params = {};
|
|
updateMenu(availableOptions);
|
|
});
|
|
|
|
// menu initial generation
|
|
$.getScript("scripts/explorer_menu.js", function()
|
|
{
|
|
generateMenu(originalAvailableOptions);
|
|
availableOptions = gatherData();
|
|
|
|
userActionHandle(availableOptions);
|
|
URLGeneration(originalAvailableOptions);
|
|
updateMenu(availableOptions);
|
|
|
|
function handleVisualFilterChanges()
|
|
{
|
|
function makeFilterChanges()
|
|
{
|
|
selectedOptions = gatherURLdata();
|
|
data = originalData;
|
|
filterData(selectedOptions);
|
|
availableOptions = [];
|
|
availableOptions = gatherData();
|
|
updateMenu(availableOptions);
|
|
}
|
|
|
|
// handle tags
|
|
function handleTags()
|
|
{
|
|
$('input[name="tags"]').change(function()
|
|
{
|
|
params["tag"] = []; // remove filter
|
|
if (this.checked)
|
|
{
|
|
$('select[name="tag"] option[value=""]').prop('selected', true);
|
|
$('select[name="tag"]').attr('disabled', 'disabled');
|
|
$(".box.tags span:not(.first) select").parent().remove();
|
|
}
|
|
else
|
|
$('select[name="tag"]').removeAttr('disabled');
|
|
|
|
makeFilterChanges();
|
|
});
|
|
|
|
$('.box.tags .item-cont').delegate('select[name="tag"]', 'change', function()
|
|
{
|
|
params.tag = []; // collect all tags from all dropdowns
|
|
$('.box.tags .item-cont select[name="tag"]').each(function()
|
|
{
|
|
if (params.tag.indexOf(this.value) === -1 && this.value != "")
|
|
params.tag.push(this.value);
|
|
});
|
|
|
|
if (this.value != "")
|
|
{
|
|
createNewElem = true; // if we modify an existing element to a value, we don't delete it
|
|
$('.box.tags select').each(function()
|
|
{
|
|
if ($(this).val() == "")
|
|
createNewElem = false;
|
|
});
|
|
if (createNewElem)
|
|
{
|
|
html = '<span><span class="inline">※ </span><select name="tag">';
|
|
html += '<option value="">Aucun filtre</option>';
|
|
for (a of originalAvailableOptions.tags)
|
|
html += '<option value="' + a + '">' + a + '</option>';
|
|
html += '</select></span>';
|
|
$(".box.tags .item-cont").append(html);
|
|
}
|
|
}
|
|
else
|
|
{
|
|
// if the element has no value, we delete it
|
|
$(this).parent().remove();
|
|
}
|
|
|
|
makeFilterChanges();
|
|
});
|
|
}
|
|
handleTags();
|
|
|
|
function visualFilterCheckboxItem(name)
|
|
{
|
|
$('input[name="' + name + 's"]').change(function()
|
|
{
|
|
params[name] = []; // remove filter
|
|
makeFilterChanges();
|
|
});
|
|
|
|
$('input[name="' + name + '"]').change(function()
|
|
{
|
|
if (this.checked)
|
|
{
|
|
if (this.id == "exist") // photos special case
|
|
{
|
|
params[name].push("bad");
|
|
params[name].push("ok");
|
|
params[name].push("good");
|
|
}
|
|
params[name].push(this.id);
|
|
}
|
|
else
|
|
{
|
|
if (this.id == "exist") // photos special case
|
|
{
|
|
removeFromArray(params[name], "bad");
|
|
removeFromArray(params[name], "ok");
|
|
removeFromArray(params[name], "good");
|
|
}
|
|
removeFromArray(params[name], this.id);
|
|
}
|
|
|
|
makeFilterChanges();
|
|
});
|
|
}
|
|
|
|
function visualFilterListItem(name)
|
|
{
|
|
$('input[name="' + name + 's"]').change(function()
|
|
{
|
|
params[name] = []; // remove filter
|
|
if (this.checked)
|
|
{
|
|
$('select[name="' + name + '"] option[value=""]').prop('selected', true);
|
|
$('select[name="' + name + '"]').attr('disabled', 'disabled');
|
|
}
|
|
else
|
|
$('select[name="' + name + '"]').removeAttr('disabled');
|
|
|
|
makeFilterChanges();
|
|
});
|
|
|
|
$('select[name="' + name + '"]').change(function()
|
|
{
|
|
if (this.value == "" && name == "place")
|
|
params[name].pop();
|
|
else
|
|
params[name].push(this.value);
|
|
|
|
makeFilterChanges();
|
|
});
|
|
}
|
|
|
|
visualFilterCheckboxItem("photo");
|
|
visualFilterCheckboxItem("year");
|
|
visualFilterCheckboxItem("month");
|
|
visualFilterCheckboxItem("genre");
|
|
visualFilterCheckboxItem("theme");
|
|
visualFilterCheckboxItem("dimension");
|
|
visualFilterCheckboxItem("help");
|
|
visualFilterListItem("place");
|
|
}
|
|
handleVisualFilterChanges();
|
|
});
|
|
|
|
/*********************/
|
|
/** TABLE & GALLERY **/
|
|
/*********************/
|
|
|
|
// gallery vars
|
|
window.pageSize = 14;
|
|
window.paintingList = [];
|
|
|
|
function generateTable()
|
|
{
|
|
hasResult = false;
|
|
numberOfItem = 0;
|
|
canDisplay = true;
|
|
|
|
for (i of data)
|
|
{
|
|
if (urlParams.toString() === "") // no parameter in URL
|
|
res = false;
|
|
else
|
|
res = true;
|
|
|
|
if (!res)
|
|
continue;
|
|
|
|
hasResult = true;
|
|
numberOfItem++;
|
|
|
|
// table
|
|
$("table").css("display", "block");
|
|
|
|
result = "<tr>";
|
|
result += "<td>" + i.number + "</td>";
|
|
result += "<td>" + i.title + "</td>";
|
|
result += "<td>" + (i.month != "—" ? i.month + " " : "") + i.year + "</td>";
|
|
result += "<td>" + i.dimension + "</td>";
|
|
result += "<td>" + i.genre + "</td>";
|
|
result += "<td>" + i.theme + "</td>";
|
|
result += "<td>" + i.place + "</td>";
|
|
result += "<td>" + i.tags + "</td>";
|
|
|
|
if (i.photo == "good")
|
|
result += '<td class="photo">★★★</td>';
|
|
else if (i.photo == "ok")
|
|
result += '<td class="photo">★★</td>';
|
|
else if (i.photo == "bad")
|
|
result += '<td class="photo">★</td>';
|
|
else if (i.photo == "none")
|
|
result += '<td class="photo">☆</td>';
|
|
|
|
if (i.help == "yes")
|
|
result += '<td class="help"><img width="5rem" src="styles/icons/exclamation-mark.svg" alt="Oui"></td>'
|
|
else
|
|
result += '<td> </td>'
|
|
|
|
result += '<td><a class="list-preview" data-fancybox="exposition-list" href="';
|
|
if (i.photo == "none")
|
|
result += 'images/unknown.jpg';
|
|
else
|
|
result += 'photos/paintings/normal/' + i.number + '.jpg'
|
|
result += '" data-fancybox-index="' + i.number + '"><img src="styles/icons/eye.svg"></a></td>';
|
|
result += "</tr>";
|
|
|
|
$("table").append(result);
|
|
|
|
|
|
// gallery
|
|
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")
|
|
{
|
|
paintingHtml += '<a data-fancybox="exposition" href="images/unknown.jpg" data-fancybox-index="' + i.number + '">'
|
|
paintingHtml += '<img src="images/unknown.jpg" alt="Tableau ' + i.number + '"></a>'
|
|
}
|
|
else
|
|
{
|
|
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 + ')';
|
|
paintingHtml += '</span></div>';
|
|
$(".gallery").append(paintingHtml);
|
|
}
|
|
$(".explorer .result").append("La recherche donne un résultat de <strong>" + numberOfItem + " élément" + (numberOfItem > 1 ? "s" : "") + "</strong>.");
|
|
return hasResult;
|
|
}
|
|
|
|
$("#gallery").hide();
|
|
$(".style-select").hide();
|
|
|
|
var targetPage = 0;
|
|
if (urlParams.get('page') != "")
|
|
targetPage = urlParams.get('page');
|
|
|
|
var res = generateTable();
|
|
|
|
if (res) // display table or no result depending of computed result
|
|
{
|
|
$(".style-select").show();
|
|
$("article.explorer h2").removeClass("active")
|
|
$("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);
|
|
|
|
if (targetPage > 0)
|
|
$("#pagination").pagination('go', targetPage);
|
|
});
|
|
}
|
|
else
|
|
{
|
|
$("article.explorer p.no-result").css("display", "block");
|
|
$("article.explorer p.result").css("display", "none");
|
|
}
|
|
|
|
function setGallery()
|
|
{
|
|
$("table").hide();
|
|
$("#gallery").show();
|
|
$(".style-select.frame").addClass('active');
|
|
$(".style-select.list").removeClass('active');
|
|
window.localStorage.setItem('explorer-view', 'gallery');
|
|
}
|
|
|
|
function setTable()
|
|
{
|
|
$("#gallery").hide();
|
|
$("table").show();
|
|
$(".style-select.frame").removeClass('active');
|
|
$(".style-select.list").addClass('active');
|
|
window.localStorage.setItem('explorer-view', 'table');
|
|
}
|
|
|
|
if (paramView == "gallery")
|
|
setGallery();
|
|
else if (paramView == "table")
|
|
setTable();
|
|
else
|
|
{
|
|
if (res)
|
|
{
|
|
explorerView = window.localStorage.getItem('explorer-view');
|
|
if (explorerView == "gallery")
|
|
setGallery();
|
|
else if (explorerView == "table")
|
|
setTable();
|
|
}
|
|
}
|
|
});
|
|
}); |