355 lines
13 KiB
JavaScript
355 lines
13 KiB
JavaScript
function generateMenu(availableOptions)
|
|
{
|
|
function createPhotoName(photo)
|
|
{
|
|
if (photo == "none") return "☆ manquant";
|
|
if (photo == "bad") return "★ mauvais";
|
|
if (photo == "ok") return "★★ acceptable";
|
|
if (photo == "good") return "★★★ bon";
|
|
}
|
|
|
|
function createYearName(year)
|
|
{
|
|
if (year == "50s") return "1956 - 1959";
|
|
if (year == "60s") return "1960 - 1969";
|
|
if (year == "70s") return "1970 - 1979";
|
|
if (year == "80s") return "1980 - 1989";
|
|
if (year == "90s") return "1990 - 1999";
|
|
if (year == "00s") return "2000 - 2009";
|
|
if (year == "10s") return "2010 - 2016";
|
|
}
|
|
|
|
function createDimensionName(dimension)
|
|
{
|
|
if (dimension == "18") return "< 20cm";
|
|
if (dimension == "20") return "20cm - 29cm";
|
|
if (dimension == "30") return "30cm - 39cm";
|
|
if (dimension == "40") return "40cm - 49cm";
|
|
if (dimension == "50") return "50cm - 59cm";
|
|
if (dimension == "60") return "60cm - 69cm";
|
|
if (dimension == "70") return "70cm - 79cm";
|
|
if (dimension == "80") return "80cm - 89cm";
|
|
if (dimension == "90") return "90cm - 99cm";
|
|
if (dimension == "100") return ">= 100cm";
|
|
}
|
|
|
|
function createHelpName(photo)
|
|
{
|
|
if (photo == "yes") return '<img width="5rem" src="styles/icons/exclamation-mark.svg" alt="Oui"> Oui';
|
|
if (photo == "no") return "Non";
|
|
}
|
|
|
|
hasExist = false;
|
|
for (photo of availableOptions.photos)
|
|
{
|
|
if (!hasExist && (photo == "bad" || photo == "ok" || photo == "good"))
|
|
{
|
|
html = '<span><input type="checkbox" id="exist" name="photo" value="exist"></input>\n';
|
|
html += '<label for="exist">Disponible</label></span>';
|
|
$(".box.photos .item-cont .generated").append(html);
|
|
hasExist = true;
|
|
}
|
|
html = '<span><input type="checkbox" id="' + photo + '" name="photo" value="' + photo + '"></input>\n';
|
|
html += '<label for="' + photo + '">' + createPhotoName(photo) + '</label></span>';
|
|
$(".box.photos .item-cont .generated").append(html);
|
|
}
|
|
|
|
for (year of availableOptions.years)
|
|
{
|
|
html = '<span><input type="checkbox" id="' + year + '" name="year" value="' + year + '"></input>\n';
|
|
html += '<label for="' + year + '">' + createYearName(year) + '</label></span>';
|
|
$(".box.years .item-cont .generated").append(html);
|
|
}
|
|
|
|
for (month of availableOptions.months)
|
|
{
|
|
html = '<span><input type="checkbox" id="' + month + '" name="month" value="' + month + '"></input>\n';
|
|
html += '<label for="' + month + '">' + month + '</label></span>';
|
|
$(".box.months .item-cont .generated").append(html);
|
|
}
|
|
|
|
for (genre of availableOptions.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 .generated").append(html);
|
|
}
|
|
|
|
for (theme of availableOptions.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 .generated").append(html);
|
|
}
|
|
|
|
for (dimension of availableOptions.dimensions)
|
|
{
|
|
html = '<span><input type="checkbox" id="' + dimension + '" name="dimension" value="' + dimension + '"></input>\n';
|
|
html += '<label for="' + dimension + '">' + createDimensionName(dimension) + '</label></span>';
|
|
$(".box.dimensions .item-cont .generated").append(html);
|
|
}
|
|
|
|
for (help of availableOptions.helps)
|
|
{
|
|
html = '<span><input type="checkbox" id="' + help + '" name="help" value="' + help + '"></input>\n';
|
|
html += '<label for="' + help + '">' + createHelpName(help) + '</label></span>';
|
|
$(".box.help .item-cont .generated").append(html);
|
|
}
|
|
|
|
$(".box.places select").append('<option value="">Aucun filtre</option');
|
|
for (place of availableOptions.places)
|
|
$(".box.places select").append('<option value="' + place + '">' + place + '</option');
|
|
|
|
$(".box.tags select").append('<option value="">Aucun filtre</option');
|
|
for (tag of availableOptions.tags)
|
|
$(".box.tags select").append('<option value="' + tag + '">' + tag + '</option');
|
|
}
|
|
|
|
|
|
function updateMenu(availableOptions)
|
|
{
|
|
function checkItem(name, array)
|
|
{
|
|
$('.' + name + ' .item-cont span input').each(function()
|
|
{
|
|
if (!array.includes($(this).prop("value")))
|
|
{
|
|
if ($(this).prop("value") != "all" && $(this).prop("value") != "exist")
|
|
$(this).parent().addClass("filter");
|
|
if ($(this).prop("value") == "exist") // special case for "exist" in photos
|
|
{
|
|
if (array.includes("none") && !array.includes("bad") && !array.includes("ok") && !array.includes("good"))
|
|
$(this).parent().addClass("filter");
|
|
else
|
|
$(this).parent().removeClass("filter");
|
|
}
|
|
}
|
|
else
|
|
$(this).parent().removeClass("filter");
|
|
});
|
|
}
|
|
|
|
function checkListItem(name, array)
|
|
{
|
|
$('.' + name + ' select option').each(function()
|
|
{
|
|
if (!array.includes($(this).prop("value")))
|
|
{
|
|
if ($(this).prop("value") != "")
|
|
{
|
|
$(this).hide();
|
|
$(this).attr('disabled', 'disabled'); // for iOS
|
|
}
|
|
}
|
|
else
|
|
{
|
|
$(this).show();
|
|
$(this).removeAttr('disabled'); // for iOS
|
|
}
|
|
});
|
|
}
|
|
|
|
checkItem("photos", availableOptions.photos);
|
|
checkItem("years", availableOptions.years);
|
|
checkItem("months", availableOptions.months);
|
|
checkItem("genres", availableOptions.genres);
|
|
checkItem("themes", availableOptions.themes);
|
|
checkItem("dimensions", availableOptions.dimensions);
|
|
checkItem("help", availableOptions.helps);
|
|
|
|
checkListItem("places", availableOptions.places);
|
|
checkListItem("tags", availableOptions.tags);
|
|
}
|
|
|
|
|
|
function URLGeneration(availableOptions)
|
|
{
|
|
// 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 filtre</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 && name != "place")
|
|
{
|
|
html = '<span><span class="inline">※ </span><select name="' + name + '">';
|
|
html += '<option value="">Aucun filtre</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, availableOptions.places);
|
|
URLlistSelector(".box.tags", "tag", paramTag, availableOptions.tags);
|
|
|
|
// URL special case for photos with "exist"
|
|
if (paramPhoto.includes("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(availableOptions)
|
|
{
|
|
// 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);
|
|
}
|
|
});
|
|
}
|
|
|
|
$("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");
|
|
|
|
// 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);
|
|
}
|
|
});
|
|
}
|
|
|
|
|
|
|
|
// 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.frame").addClass('active');
|
|
$(".style-select.list").removeClass('active');
|
|
window.localStorage.setItem('explorer-view', 'gallery');
|
|
});
|
|
$(".style-select.list").click(function()
|
|
{
|
|
$("#gallery").hide();
|
|
$("table").show();
|
|
$(".style-select.frame").removeClass('active');
|
|
$(".style-select.list").addClass('active');
|
|
window.localStorage.setItem('explorer-view', 'table');
|
|
});
|
|
} |