keb/ginou
1
0
Fork 0
Code Issues 6 Pull Requests Releases Activity

WIP filter, has some basic features

Browse Source
This commit is contained in:
Théo Marchal
2021-02-18 22:07:26 +01:00
parent bf60722e22
commit 4739726e5c
6 changed files with 610 additions and 377 deletions
Download Patch File Download Diff File Expand all files Collapse all files

488
scripts/explorer.js
View File

@ -29,25 +29,121 @@ jQuery(document).ready(function($)
$.getJSON("data.json", function(data)
{
var originalData = data;
/**********/
/** MENU **/
/**********/
var genres = [];
var themes = [];
var places = [];
var tags = [];
var availableOptions = [];
function generateMenu()
/*var selectedPhotos = []; var selectedYears = []; var selectedMonths = []; var selectedGenres = [];
var selectedThemes = []; var selectedPlaces = []; var selectedTags = []; var selectedDimensions = []; var selectedHelps = [];*/
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 (item[name] == elem)
return true;
}
return false;
}
}
function CheckTag(item)
{
for (tag of selectedOptions.tags)
{
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 (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(", ");
@ -62,185 +158,66 @@ jQuery(document).ready(function($)
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); });
for (genre of genres)
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 = paramPhoto;
selectedMonths = paramMonth;
selectedGenres = paramGenre;
selectedThemes = paramTheme;
selectedPlaces = paramPlace;
selectedTags = paramTag;
selectedHelps = paramHelp;
for (p of paramYear)
{
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);
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 (theme of themes)
for (p of paramDimension)
{
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);
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};
}
$(".box.places select").append('<option value="">Aucun</option');
for (place of places)
$(".box.places select").append('<option value="' + place + '">' + place + '</option');
selectedOptions = gatherURLdata();
$(".box.tags select").append('<option value="">Aucun</option');
for (tag of tags)
$(".box.tags select").append('<option value="' + tag + '">' + tag + '</option');
filterData(selectedOptions);
availableOptions = gatherData();
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">&#x203B;&nbsp;</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">&#x203B;&nbsp;</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">&#x203B;&nbsp;</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 initial generation
$.getScript("scripts/explorer_menu.js", function() {
generateMenu(availableOptions);
// menu configurer show / hide
$("article.explorer h2").click(function()
@ -275,121 +252,49 @@ jQuery(document).ready(function($)
});
}
userActionHandle();
URLGeneration();
}
userActionHandle(availableOptions);
URLGeneration(availableOptions);
function removeFromArray(array, item)
{
index = array.indexOf(item);
if (index > -1)
array.splice(index, 1);
}
function visualFilterListItem(name, param)
{
$('input[name="' + name + '"]').change(function()
{
if (this.checked)
{
console.log("checked");
param.push(this.id);
}
else
{
console.log("unchecked");
removeFromArray(param, this.id);
}
selectedOptions = gatherURLdata();
data = originalData;
filterData(selectedOptions);
availableOptions = [];
availableOptions = gatherData();
console.log(data);
updateMenu(availableOptions);
});
}
visualFilterListItem("photo", paramPhoto);
visualFilterListItem("year", paramYear);
});
/*********************/
/** 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 paramTag)
{
if (!splitTag.includes(t))
return false;
}
return true;
}
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;
}
// gallery vars
window.pageSize = 14;
window.paintingList = [];
@ -407,17 +312,6 @@ jQuery(document).ready(function($)
else
res = true;
// check URL parameters and compute result
if (paramYear != "") res = res && checkYear(i.year);
if (paramMonth != "") res = res && checkMonth(i.month);
if (paramDimension != "") res = res && checkDimension(i.dimension);
if (paramGenre != "") res = res && checkGenre(i.genre);
if (paramTheme != "") res = res && checkTheme(i.theme);
if (paramPlace != "") res = res && checkPlace(i.place);
if (paramTag != "") res = res && checkTag(i.tags);
if (paramPhoto != "") res = res && checkPhoto(i.photo);
if (paramHelp != "") res = res && checkHelp(i.help);
if (!res)
continue;
@ -482,7 +376,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 + ')';
@ -500,14 +394,14 @@ jQuery(document).ready(function($)
if (urlParams.get('page') != "")
targetPage = urlParams.get('page');
generateMenu();
//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);
//$("form").slideUp(200);
$("article.explorer p.result").css("display", "block");
// pagination configuration