558 lines
24 KiB
JavaScript
558 lines
24 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;
|
|
}
|
|
|
|
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'));
|
|
|
|
$.getJSON("data.json", function(data)
|
|
{
|
|
|
|
/**********/
|
|
/** MENU **/
|
|
/**********/
|
|
|
|
var genres = [];
|
|
var themes = [];
|
|
var places = [];
|
|
var tags = [];
|
|
|
|
function generateMenu()
|
|
{
|
|
for (i of data)
|
|
{
|
|
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 (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();
|
|
places.sort(Intl.Collator().compare);
|
|
tags.sort(Intl.Collator().compare);
|
|
|
|
for (genre of genres)
|
|
{
|
|
html = '<span><input type="checkbox" id="' + genre + '" name="genre" value="' + genre + '"></input>\n';
|
|
html += '<label for="' + genre + '">' + genre + '</label></span>';
|
|
$(".box.genres .item-cont").append(html);
|
|
}
|
|
|
|
for (theme of themes)
|
|
{
|
|
html = '<span><input type="checkbox" id="' + theme + '" name="theme" value="' + theme + '"></input>\n';
|
|
html += '<label for="' + theme + '">' + theme + '</label></span>';
|
|
$(".box.themes .item-cont").append(html);
|
|
}
|
|
|
|
$(".box.places select").append('<option value="">Aucun</option');
|
|
for (place of places)
|
|
$(".box.places select").append('<option value="' + place + '">' + place + '</option');
|
|
|
|
$(".box.tags select").append('<option value="">Aucun</option');
|
|
for (tag of tags)
|
|
$(".box.tags select").append('<option value="' + tag + '">' + tag + '</option');
|
|
|
|
|
|
function URLGeneration()
|
|
{
|
|
// populate checkboxes depending on URL
|
|
function URLcheckBoxSelector(names, name, urlParam)
|
|
{
|
|
if (urlParam == "all")
|
|
{
|
|
$('input[name="'+names+'"]').prop("checked", true);
|
|
$('input[name="'+name+'"]').prop("disabled", true);
|
|
$('input[name="'+name+'"]').prop("checked", true);
|
|
}
|
|
else
|
|
{
|
|
for (a of urlParam)
|
|
{
|
|
$('input[id="'+a+'"]').prop("checked", true);
|
|
}
|
|
}
|
|
}
|
|
|
|
// populate list depending on URL
|
|
function URLlistSelector(selector, name, param, names)
|
|
{
|
|
if (param.length >= 1)
|
|
$(selector + ' select').parent().remove();
|
|
for (a of param)
|
|
{
|
|
html = '<span><span class="inline">※ </span><select name="' + name + '">';
|
|
html += '<option value="">Aucun</option>';
|
|
for (i of names)
|
|
{
|
|
if (i == a)
|
|
html += '<option value="' + i + '" selected>' + i + '</option>';
|
|
else
|
|
html += '<option value="' + i + '">' + i + '</option>';
|
|
}
|
|
html += '</select></span>';
|
|
$(selector + ' .item-cont').append(html);
|
|
}
|
|
if (!param.includes("all") && param.length >= 1)
|
|
{
|
|
html = '<span><span class="inline">※ </span><select name="' + name + '">';
|
|
html += '<option value="">Aucun</option>';
|
|
for (i of names)
|
|
html += '<option value="' + i + '">' + i + '</option>';
|
|
html += '</select></span>';
|
|
$(selector + ' .item-cont').append(html);
|
|
}
|
|
}
|
|
|
|
URLcheckBoxSelector("years", "year", paramYear)
|
|
URLcheckBoxSelector("months", "month", paramMonth);
|
|
URLcheckBoxSelector("dimensions", "dimension", paramDimension);
|
|
URLcheckBoxSelector("genres", "genre", paramGenre);
|
|
URLcheckBoxSelector("themes", "theme", paramTheme);
|
|
URLcheckBoxSelector("places", "place", paramPlace);
|
|
URLcheckBoxSelector("tags", "tag", paramTag);
|
|
URLcheckBoxSelector("photos", "photo", paramPhoto);
|
|
URLcheckBoxSelector("helps", "help", paramHelp);
|
|
URLlistSelector(".box.places", "place", paramPlace, places);
|
|
URLlistSelector(".box.tags", "tag", paramTag, tags);
|
|
|
|
// URL special case for photos with "exist"
|
|
if (paramPhoto == "exist")
|
|
{
|
|
$('input[id="exist"]').prop("checked", true);
|
|
$('input[id="bad"]').prop("checked", true); $('input[id="bad"]').prop("disabled", true);
|
|
$('input[id="ok"]').prop("checked", true); $('input[id="ok"]').prop("disabled", true);
|
|
$('input[id="good"]').prop("checked", true); $('input[id="good"]').prop("disabled", true);
|
|
}
|
|
}
|
|
|
|
function userActionHandle()
|
|
{
|
|
// if "all" is selected, check all other options and disable them
|
|
function allCheckBoxSelected(names, name)
|
|
{
|
|
$('input[id="' + names + '"]').click(function()
|
|
{
|
|
if ($(this).prop("checked") == true)
|
|
{
|
|
$('input[name="' + name + '"]').prop("checked", true);
|
|
$('input[name="' + name + '"]').prop("disabled", true);
|
|
}
|
|
else if ($(this).prop("checked") == false)
|
|
{
|
|
$('input[name="' + name + '"]').prop("checked", false);
|
|
$('input[name="' + name + '"]').prop("disabled", false);
|
|
}
|
|
});
|
|
}
|
|
|
|
// for places and tags
|
|
function listOptionSelected(selector, name, names)
|
|
{
|
|
$(selector).on('change', 'select[name="' + name + '"]', function()
|
|
{
|
|
if (this.value != "")
|
|
{
|
|
createNewElem = true; // if we modify an existing element to a value, we don't delete it
|
|
$(selector + ' select').each(function()
|
|
{
|
|
if ($(this).val() == "")
|
|
createNewElem = false;
|
|
});
|
|
if (createNewElem)
|
|
{
|
|
html = '<span><span class="inline">※ </span><select name="' + name + '">';
|
|
html += '<option value="">Aucun</option>';
|
|
for (a of names)
|
|
html += '<option value="' + a + '">' + a + '</option>';
|
|
html += '</select></span>';
|
|
$(selector + " .item-cont").append(html);
|
|
}
|
|
}
|
|
else
|
|
{
|
|
// if the element has no value, we delete it
|
|
$(this).parent().remove();
|
|
}
|
|
});
|
|
}
|
|
|
|
$("input").prop("checked", false); // by default, uncheck all options
|
|
allCheckBoxSelected("years", "year");
|
|
allCheckBoxSelected("months", "month");
|
|
allCheckBoxSelected("dimensions", "dimension");
|
|
allCheckBoxSelected("genres", "genre");
|
|
allCheckBoxSelected("themes", "theme");
|
|
allCheckBoxSelected("places", "place");
|
|
allCheckBoxSelected("tags", "tag");
|
|
allCheckBoxSelected("photos", "photo");
|
|
allCheckBoxSelected("helps", "help");
|
|
listOptionSelected(".box.places", "place", places);
|
|
listOptionSelected(".box.tags", "tag", tags);
|
|
|
|
// special case for photos with "exist"
|
|
$('input[id="exist"]').click(function()
|
|
{
|
|
if ($(this).prop("checked") == true)
|
|
{
|
|
$('input[id="bad"]').prop("checked", true); $('input[id="bad"]').prop("disabled", true);
|
|
$('input[id="ok"]').prop("checked", true); $('input[id="ok"]').prop("disabled", true);
|
|
$('input[id="good"]').prop("checked", true); $('input[id="good"]').prop("disabled", true);
|
|
}
|
|
else
|
|
{
|
|
$('input[id="bad"]').prop("checked", false); $('input[id="bad"]').prop("disabled", false);
|
|
$('input[id="ok"]').prop("checked", false); $('input[id="ok"]').prop("disabled", false);
|
|
$('input[id="good"]').prop("checked", false); $('input[id="good"]').prop("disabled", false);
|
|
}
|
|
});
|
|
}
|
|
|
|
// menu configurer show / hide
|
|
$("article.explorer h2").click(function()
|
|
{
|
|
if ($(this).hasClass("active"))
|
|
{
|
|
$(this).removeClass("active");
|
|
$("form").slideUp(200);
|
|
}
|
|
else
|
|
{
|
|
$(this).addClass("active");
|
|
$("form").slideDown(200);
|
|
}
|
|
});
|
|
|
|
// menu configurer child on mobile show/hide
|
|
if ($(window).width() <= 600)
|
|
{
|
|
$("article.explorer .box h3").click(function()
|
|
{
|
|
if ($(this).parent().hasClass("active"))
|
|
{
|
|
$(this).parent().removeClass("active");
|
|
$(this).parent().children(".item-cont").slideUp(200);
|
|
}
|
|
else
|
|
{
|
|
$(this).parent().addClass("active");
|
|
$(this).parent().children(".item-cont").slideDown(200);
|
|
}
|
|
});
|
|
}
|
|
|
|
URLGeneration();
|
|
userActionHandle();
|
|
}
|
|
|
|
/*********************/
|
|
/** TABLE & GALLERY **/
|
|
/*********************/
|
|
|
|
function checkYear(year)
|
|
{
|
|
if (paramYear == "all") return true;
|
|
if (paramYear.includes("50s") && year >= 1950 && year <= 1959) return true;
|
|
if (paramYear.includes("60s") && year >= 1960 && year <= 1969) return true;
|
|
if (paramYear.includes("70s") && year >= 1970 && year <= 1979) return true;
|
|
if (paramYear.includes("80s") && year >= 1980 && year <= 1989) return true;
|
|
if (paramYear.includes("90s") && year >= 1990 && year <= 1999) return true;
|
|
if (paramYear.includes("00s") && year >= 2000 && year <= 2009) return true;
|
|
if (paramYear.includes("10s") && year >= 2010 && year <= 2020) return true;
|
|
return false;
|
|
}
|
|
|
|
function checkMonth(month)
|
|
{
|
|
if (paramMonth == "all") return true;
|
|
if (paramMonth.includes("01") && month == "Janvier") return true;
|
|
if (paramMonth.includes("02") && month == "Février") return true;
|
|
if (paramMonth.includes("03") && month == "Mars") return true;
|
|
if (paramMonth.includes("04") && month == "Avril") return true;
|
|
if (paramMonth.includes("05") && month == "Mai") return true;
|
|
if (paramMonth.includes("06") && month == "Juin") return true;
|
|
if (paramMonth.includes("07") && month == "Juillet") return true;
|
|
if (paramMonth.includes("08") && month == "Août") return true;
|
|
if (paramMonth.includes("09") && month == "Septembre") return true;
|
|
if (paramMonth.includes("10") && month == "Octobre") return true;
|
|
if (paramMonth.includes("11") && month == "Novembre") return true;
|
|
if (paramMonth.includes("12") && month == "Décembre") return true;
|
|
return false;
|
|
}
|
|
|
|
function checkDimension(dimension)
|
|
{
|
|
if (paramDimension == "all") return true;
|
|
if (paramDimension.includes("18") && dimension.split("x")[0] >= 18 && dimension.split("x")[0] <= 19) return true;
|
|
if (paramDimension.includes("20") && dimension.split("x")[0] >= 20 && dimension.split("x")[0] <= 29) return true;
|
|
if (paramDimension.includes("30") && dimension.split("x")[0] >= 30 && dimension.split("x")[0] <= 39) return true;
|
|
if (paramDimension.includes("40") && dimension.split("x")[0] >= 40 && dimension.split("x")[0] <= 49) return true;
|
|
if (paramDimension.includes("50") && dimension.split("x")[0] >= 50 && dimension.split("x")[0] <= 59) return true;
|
|
if (paramDimension.includes("60") && dimension.split("x")[0] >= 60 && dimension.split("x")[0] <= 69) return true;
|
|
if (paramDimension.includes("70") && dimension.split("x")[0] >= 70 && dimension.split("x")[0] <= 79) return true;
|
|
if (paramDimension.includes("80") && dimension.split("x")[0] >= 80 && dimension.split("x")[0] <= 89) return true;
|
|
if (paramDimension.includes("90") && dimension.split("x")[0] >= 90 && dimension.split("x")[0] <= 99) return true;
|
|
if (paramDimension.includes("100") && dimension.split("x")[0] >= 100 && dimension.split("x")[0] <= 109) return true;
|
|
return false;
|
|
}
|
|
|
|
function checkGenre(genre)
|
|
{
|
|
if (paramGenre == "all")
|
|
return true;
|
|
if (paramGenre.includes(genre))
|
|
return true;
|
|
return false;
|
|
}
|
|
|
|
function checkTheme(theme)
|
|
{
|
|
if (paramTheme == "all")
|
|
return true;
|
|
if (paramTheme.includes(theme))
|
|
return true;
|
|
return false;
|
|
}
|
|
|
|
function checkPlace(place)
|
|
{
|
|
if (paramPlace == "all")
|
|
return true;
|
|
if (paramPlace.includes(place))
|
|
return true;
|
|
return false;
|
|
}
|
|
|
|
function checkTag(tag)
|
|
{
|
|
if (paramTag == "all")
|
|
return true;
|
|
splitTag = tag.split(", ");
|
|
|
|
for (t of splitTag)
|
|
{
|
|
if (paramTag.includes(t))
|
|
return true;
|
|
}
|
|
return false;
|
|
}
|
|
|
|
function checkPhoto(photo)
|
|
{
|
|
if (paramPhoto == "all") return true;
|
|
if (paramPhoto.includes("none") && photo == "none") return true;
|
|
if (paramPhoto.includes("bad") && photo == "bad") return true;
|
|
if (paramPhoto.includes("ok") && photo == "ok") return true;
|
|
if (paramPhoto.includes("good") && photo == "good") return true;
|
|
if (paramPhoto.includes("exist") && (photo == "bad" || photo == "ok" || photo == "good")) return true;
|
|
return false;
|
|
}
|
|
|
|
function checkHelp(help)
|
|
{
|
|
if (paramHelp == "all") return true;
|
|
if (paramHelp.includes("no") && help == "no") return true;
|
|
if (paramHelp.includes("yes") && help == "yes") return true;
|
|
return false;
|
|
}
|
|
|
|
function generateTable()
|
|
{
|
|
hasResult = false;
|
|
numberOfItem = 0;
|
|
|
|
for (i of data)
|
|
{
|
|
if (urlParams.toString() === "") // no parameter in URL
|
|
res = false;
|
|
else
|
|
res = true;
|
|
|
|
// check URL parameters and compute result
|
|
if (paramYear != "") res &&= checkYear(i.year);
|
|
if (paramMonth != "") res &&= checkMonth(i.month);
|
|
if (paramDimension != "") res &&= checkDimension(i.dimension);
|
|
if (paramGenre != "") res &&= checkGenre(i.genre);
|
|
if (paramTheme != "") res &&= checkTheme(i.theme);
|
|
if (paramPlace != "") res &&= checkPlace(i.place);
|
|
if (paramTag != "") res &&= checkTag(i.tags);
|
|
if (paramPhoto != "") res &&= checkPhoto(i.photo);
|
|
if (paramHelp != "") res &&= checkHelp(i.help);
|
|
|
|
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">‼︎</td>'
|
|
else
|
|
result += '<td> </td>'
|
|
|
|
result += '<td><a href="painting.html?number=' + i.number + '"><img src="styles/icons/eye.svg"></a></td>';
|
|
result += "</tr>";
|
|
|
|
$("table").append(result);
|
|
|
|
// gallery
|
|
if (i.photo == "none")
|
|
{
|
|
paintingHtml = '<a data-fancybox="exposition" href="images/unknown.jpg" data-fancybox-index="' + i.number + '">'
|
|
paintingHtml += '<img src="images/unknown.jpg"></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/' + i.number + '.jpg"></a>'
|
|
}
|
|
$("#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();
|
|
|
|
generateMenu();
|
|
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");
|
|
}
|
|
else
|
|
{
|
|
$("article.explorer p.no-result").css("display", "block");
|
|
$("article.explorer p.result").css("display", "none");
|
|
}
|
|
|
|
// on mobile, show only the first item slided down
|
|
if ($(window).width() <= 600)
|
|
{
|
|
$("article.explorer .container .box").each(function()
|
|
{
|
|
if (!$(this).hasClass('active'))
|
|
{
|
|
$(this).children(".item-cont").slideUp(200);
|
|
}
|
|
});
|
|
}
|
|
|
|
// change display: gallery/table
|
|
$(".style-select.frame").click(function()
|
|
{
|
|
$("table").hide();
|
|
$("#gallery").show();
|
|
})
|
|
$(".style-select.list").click(function()
|
|
{
|
|
$("#gallery").hide();
|
|
$("table").show();
|
|
})
|
|
|
|
|
|
// fancybox configuration
|
|
$('[data-fancybox="exposition"]').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();
|
|
}
|
|
});
|
|
});
|
|
}); |