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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

85
explorer.html
View File

@ -61,16 +61,7 @@
<div class="item-cont">
<span><input type="checkbox" id="photos" name="photos" value="all">
<label for="photos">Tout état</label></span>
<span><input type="checkbox" id="none" name="photo" value="none">
<label for="none">&#x2606; inexistant</label></span>
<span><input type="checkbox" id="exist" name="photo" value="exist">
<label for="exist">Existant</label></span>
<span><input type="checkbox" id="bad" name="photo" value="bad">
<label for="bad">&#x2605; mauvais</label></span>
<span><input type="checkbox" id="ok" name="photo" value="ok">
<label for="ok">&#x2605;&#x2605; acceptable</label></span>
<span><input type="checkbox" id="good" name="photo" value="good">
<label for="good">&#x2605;&#x2605;&#x2605; bon</label></span>
<div class="generated"></div>
</div>
</div>
<div class="box years">
@ -78,20 +69,7 @@
<div class="item-cont">
<span><input type="checkbox" id="years" name="years" value="all">
<label for="years">Toutes</label></span>
<span><input type="checkbox" id="50s" name="year" value="50s">
<label for="50s">1956 - 1959</label></span>
<span><input type="checkbox" id="60s" name="year" value="60s">
<label for="60s">1960 - 1969</label></span>
<span><input type="checkbox" id="70s" name="year" value="70s">
<label for="70s">1970 - 1979</label></span>
<span><input type="checkbox" id="80s" name="year" value="80s">
<label for="80s">1980 - 1989</label></span>
<span><input type="checkbox" id="90s" name="year" value="90s">
<label for="90s">1990 - 1999</label></span>
<span><input type="checkbox" id="00s" name="year" value="00s">
<label for="00s">2000 - 2009</label></span>
<span><input type="checkbox" id="10s" name="year" value="10s">
<label for="10s">2010 - 2016</label></span>
<div class="generated"></div>
</div>
</div>
<div class="box months">
@ -99,30 +77,7 @@
<div class="item-cont">
<span><input type="checkbox" id="months" name="months" value="all">
<label for="months">Tous</label></span>
<span><input type="checkbox" id="01" name="month" value="01">
<label for="01">Janvier</label></span>
<span><input type="checkbox" id="02" name="month" value="02">
<label for="02">Février</label></span>
<span><input type="checkbox" id="03" name="month" value="03">
<label for="03">Mars</label></span>
<span><input type="checkbox" id="04" name="month" value="04">
<label for="04">Avril</label></span>
<span><input type="checkbox" id="05" name="month" value="05">
<label for="05">Mai</label></span>
<span><input type="checkbox" id="06" name="month" value="06">
<label for="06">Juin</label></span>
<span><input type="checkbox" id="07" name="month" value="07">
<label for="07">Juillet</label></span>
<span><input type="checkbox" id="08" name="month" value="08">
<label for="08">Août</label></span>
<span><input type="checkbox" id="09" name="month" value="09">
<label for="09">Septembre</label></span>
<span><input type="checkbox" id="10" name="month" value="10">
<label for="10">Octobre</label></span>
<span><input type="checkbox" id="11" name="month" value="11">
<label for="11">Novembre</label></span>
<span><input type="checkbox" id="12" name="month" value="12">
<label for="12">Décembre</label></span>
<div class="generated"></div>
</div>
</div>
<div class="box genres">
@ -130,6 +85,7 @@
<div class="item-cont">
<span><input type="checkbox" id="genres" name="genres" value="all">
<label for="genres">Tous</label></span>
<div class="generated"></div>
</div>
</div>
<div class="box themes">
@ -137,6 +93,7 @@
<div class="item-cont">
<span><input type="checkbox" id="themes" name="themes" value="all">
<label for="themes">Tous</label></span>
<div class="generated"></div>
</div>
</div>
<div class="box places">
@ -153,6 +110,7 @@
<span><input type="checkbox" id="tags" name="tags" value="all">
<label for="tags">Tous</label></span>
<span><span class="inline">&#x203B;&nbsp;</span><select name="tag"></select></span>
<div class="generated"></div>
</div>
</div>
<div class="box dimensions">
@ -160,26 +118,7 @@
<div class="item-cont">
<span><input type="checkbox" id="dimensions" name="dimensions" value="all">
<label for="dimensions">Toutes</label></span>
<span><input type="checkbox" id="18" name="dimension" value="18">
<label for="18">&lt; 20cm</label></span>
<span><input type="checkbox" id="20" name="dimension" value="20">
<label for="20">20cm - 29cm</label></span>
<span><input type="checkbox" id="30" name="dimension" value="30">
<label for="30">30cm - 39cm</label></span>
<span><input type="checkbox" id="40" name="dimension" value="40">
<label for="40">40cm - 49cm</label></span>
<span><input type="checkbox" id="50" name="dimension" value="50">
<label for="50">50cm - 59cm</label></span>
<span><input type="checkbox" id="60" name="dimension" value="60">
<label for="60">60cm - 69cm</label></span>
<span><input type="checkbox" id="70" name="dimension" value="70">
<label for="70">70cm - 79cm</label></span>
<span><input type="checkbox" id="80" name="dimension" value="80">
<label for="80">80cm - 89cm</label></span>
<span><input type="checkbox" id="90" name="dimension" value="90">
<label for="90">90cm - 99cm</label></span>
<span><input type="checkbox" id="100" name="dimension" value="100">
<label for="100">>= 100cm</label></span>
<div class="generated"></div>
</div>
</div>
<div class="box help">
@ -187,14 +126,14 @@
<div class="item-cont">
<span><input type="checkbox" id="helps" name="helps" value="all">
<label for="helps">Toute</label></span>
<span><input type="checkbox" id="no" name="help" value="no">
<label for="no">Non</label></span>
<span><input type="checkbox" id="yes" name="help" value="yes">
<label for="yes"><img width="5rem" src="styles/icons/exclamation-mark.svg" alt="Oui"> Oui</label></span>
<div class="generated"></div>
</div>
</div>
</div>
<input type="submit" value="Générer">
<div class="button-cont">
<input type="submit" value="Générer">
<input type="button" value="Réinitialiser">
</div>
</form>
<p class="no-result"><strong>Aucun résultat.</strong> Veuillez réessayer avec d'autres paramètres.</p>
<div id="style-container">

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

286
scripts/explorer_menu.js Normal file
View File

@ -0,0 +1,286 @@
function generateMenu(availableOptions)
{
function createPhotoName(photo)
{
if (photo == "none") return "&#x2606; inexistant";
if (photo == "bad") return "&#x2605; mauvais";
if (photo == "ok") return "&#x2605;&#x2605; acceptable";
if (photo == "good") return "&#x2605;&#x2605;&#x2605; 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">Existant</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</option');
for (place of availableOptions.places)
$(".box.places select").append('<option value="' + place + '">' + place + '</option');
$(".box.tags select").append('<option value="">Aucun</option');
for (tag of availableOptions.tags)
$(".box.tags select").append('<option value="' + tag + '">' + tag + '</option');
}
function updateMenu(availableOptions)
{
console.log("updateMenu", availableOptions);
$('.photos input, .photos input + label').each(function()
{
if (this.value != "all")
$(this).css('color', 'red');
});
for (a of availableOptions.photos)
{
$('.photos input[id="' + a + '"], .photos input[id="' + a + '"] + label').css('color', 'black');
}
/*$('.photos input').each(function()
{
console.log(this.id);
for (i of availableOptions.photos)
{
console.log("fuck", this.id, i);
if (this.id != i)
$(this).hide();
}
});*/
}
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">&#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, availableOptions.places);
URLlistSelector(".box.tags", "tag", paramTag, availableOptions.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(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);
}
});
}
// 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", availableOptions.places);
listOptionSelected(".box.tags", "tag", availableOptions.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);
}
});
}

76
scripts/filter.js Normal file
View File

@ -0,0 +1,76 @@
jQuery(document).ready(function($)
{
$.getJSON("data.json", function(data)
{
function removeFromArray(array, item)
{
const index = array.indexOf(item);
if (index > -1)
array.splice(index, 1);
return array;
}
var availableYears = [];
var availableTags = [];
selectedTags = ["Chat", "Fleur"];
selectedYears = ["2001", "2007"];
newData = data;
function CheckTag(item)
{
for (tag of selectedTags)
{
if (!item.tags.includes(tag))
return false;
}
return true;
}
function CheckYear(item)
{
for (year of selectedYears)
{
if (item.year == year)
return true;
}
return false;
}
newData = newData.filter(CheckTag);
newData = newData.filter(CheckYear);
console.log(newData);
/*for (dat of data)
{
for (tag of selectedTags)
{
if (dat.tags.includes(tag))
{
if (!availableYears.includes(dat.year))
availableYears.push(dat.year);
else
{
console.log("remove year", dat.year);
}
splitTags = dat.tags.split(", ");
for (splitTag of splitTags)
{
if (!availableTags.includes(splitTag))
availableTags.push(splitTag);
}
}
}
}*/
console.log("availableYears", availableYears);
console.log("availableTags", availableTags);
});
});

26
scripts/pagination.js
View File

@ -46,14 +46,30 @@ function paginationInit(data, paintingList, explorer)
}
previousArray = response;
infoArray = []
for (a of response)
{
for (d of data)
{
if (a == d.number)
infoArray.push({"number": d.number, "photo": d.photo});
}
}
$.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");
for (i of infoArray)
{
if (i.number == item)
{
$('[data-fancybox="exposition"][data-fancybox-index="' + item + '"]').parent().removeClass("inactive").addClass("active");
if (i.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");
}
}
});
}
};

26
styles/main.css
View File

@ -501,19 +501,41 @@ article.explorer form .inline {
margin:0.1rem;
}
.button-cont {
margin:auto;
margin-top:1.5rem;
display:flex;
justify-content:center;
align-items:flex-end;
width:-moz-fit-content;
width:fit-content;
}
article.explorer input[type = submit] {
display:block;
margin:auto;
text-align:center;
border:none;
padding:0.8rem;
margin-top:1.5rem;
border-radius:5%;
background:#2589BD;
text-decoration:none;
font-size:1.1rem;
cursor:pointer;
color:white;
margin-right:1rem;
}
article.explorer input[type = button] {
margin:auto;
text-align:center;
border:none;
padding:0.4rem;
border-radius:5%;
background:grey;
text-decoration:none;
font-size:1.1rem;
cursor:pointer;
color:white;
}
input:checked + label {