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

Tags and places are now in a list for a more compact space

Browse Source 
Explorer code has been very much reordered following this change
This commit is contained in:
Théo Marchal 2021-02-12 01:11:17 +01:00
parent f27d1a8dad
commit 16f9d4afca
5 changed files with 305 additions and 239 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
README.md
View File

@ -20,9 +20,9 @@ Tools used:
* [Chart.js](https://www.chartjs.org/)
Fonts used:
* Rubik
* Commissioner
* Hot August Night
* [Rubik](https://github.com/googlefonts/Rubik)
* [Commissioner](https://github.com/kosbarts/Commissioner)
* [Hot August Night](https://www.1001fonts.com/hot-august-night-font.html)
### Export Excel spreadsheet to JSON

12
explorer.html
View File

@ -44,9 +44,9 @@
<img class="style-select frame" src="styles/icons/frame.svg">
<img class="style-select list" src="styles/icons/list.svg">
</div>
<form action="">
<form name="explorer" action="" onsubmit="onSubmit();">
<div class="container">
<div class="box photos">
<div class="box photos active">
<h3>État photo&nbsp;</h3>
<div class="item-cont">
<span><input type="checkbox" id="photos" name="photos" value="all">
@ -63,7 +63,7 @@
<label for="good">&#x2605;&#x2605;&#x2605; bonne</label></span>
</div>
</div>
<div class="box years active">
<div class="box years">
<h3>Années&nbsp;</h3>
<div class="item-cont">
<span><input type="checkbox" id="years" name="years" value="all">
@ -134,8 +134,7 @@
<div class="item-cont">
<span><input type="checkbox" id="places" name="places" value="all">
<label for="places">Tous</label></span>
<!--<input type="checkbox" id="place1" name="place1" value="all"><select style="display:inline;"></select>-->
<span><span class="inline">&#x203B;&nbsp;</span><select name="place"></select></span>
</div>
</div>
<div class="box tags">
@ -143,8 +142,7 @@
<div class="item-cont">
<span><input type="checkbox" id="tags" name="tags" value="all">
<label for="tags">Tous</label></span>
<!--<input type="checkbox" id="tag1" name="tag1" value="all"><select style="display:inline;"></select>-->
<span><span class="inline">&#x203B;&nbsp;</span><select name="tag"></select></span>
</div>
</div>
<div class="box dimensions">

2
exposition.html
View File

@ -35,7 +35,7 @@
<article class="exposition">
<h1>Exposition</h1>
<p class="center">Cliquez sur une image pour la voir en grand avec ses détails.</p>
<p class="center">Cliquez sur un tableau pour le voir en grand avec ses détails.</p>
<div id="gallery"></div>
</article>
</body>

508
scripts/explorer.js
View File

@ -1,3 +1,17 @@
// 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
@ -19,7 +33,6 @@ jQuery(document).ready(function($)
/** MENU **/
/**********/
//var dimensions = [];
var genres = [];
var themes = [];
var places = [];
@ -29,8 +42,6 @@ jQuery(document).ready(function($)
{
for (i of data)
{
/*if (dimensions.indexOf(i.dimension) === -1 && i.dimension != "" && i.dimension != "—")
dimensions.push(i.dimension);*/
if (genres.indexOf(i.genre) === -1 && i.genre != "" && i.genre != "—")
genres.push(i.genre);
if (themes.indexOf(i.theme) === -1 && i.theme != "" && i.theme != "—")
@ -49,278 +60,335 @@ jQuery(document).ready(function($)
}
}
//dimensions.sort();
genres.sort();
themes.sort();
places.sort(Intl.Collator().compare);
tags.sort(Intl.Collator().compare);
/*for (dimension of dimensions)
{
html = '<span><input type="checkbox" id="' + dimension + '" name="dimension" value="' + dimension + '"></input>\n';
html += '<label for="' + dimension + '">' + dimension + '</label></span>';
$(".box.dimensions .item-cont").append(html);
}*/
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="none">Aucun</option');
$(".box.places select").append('<option value="">Aucun</option');
for (place of places)
{
html = '<span><input type="checkbox" id="' + place + '" name="place" value="' + place + '"></input>\n';
html += '<label for="'+place+'">' + place + '</label></span>';
$(".box.places .item-cont").append(html);
$(".box.places select").append('<option value="' + place + '">' + place + '</option');
//$(".box.places select").append('<option value="' + place + '">' + place + '</option');
}
//$(".box.tags select").append('<option value="none">Aucun</option');
$(".box.tags select").append('<option value="">Aucun</option');
for (tag of tags)
{
html = '<span><input type="checkbox" id="' + tag + '" name="tag" value="' + tag + '"></input>\n';
html += '<label for="'+tag+'">' + tag + '</label></span>';
$(".box.tags .item-cont").append(html);
$(".box.tags select").append('<option value="' + tag + '">' + tag + '</option');
//$(".box.tags select").append('<option value="' + tag + '">' + tag + '</option');
}
// populate checkboxes depending on URL
function checkBoxSelector(names, name, urlParam)
function URLGeneration()
{
if (urlParam == "all")
// populate checkboxes depending on URL
function URLcheckBoxSelector(names, name, urlParam)
{
$('input[name="'+names+'"]').prop("checked", true);
$('input[name="'+name+'"]').prop("disabled", true);
$('input[name="'+name+'"]').prop("checked", true);
}
else
{
for (a of urlParam)
if (urlParam == "all")
{
$('input[id="'+a+'"]').prop("checked", true);
$('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);
}
}
}
}
checkBoxSelector("years", "year", paramYear)
checkBoxSelector("months", "month", paramMonth);
checkBoxSelector("dimensions", "dimension", paramDimension);
checkBoxSelector("genres", "genre", paramGenre);
checkBoxSelector("themes", "theme", paramTheme);
checkBoxSelector("places", "place", paramPlace);
checkBoxSelector("tags", "tag", paramTag);
checkBoxSelector("photos", "photo", paramPhoto);
checkBoxSelector("helps", "help", paramHelp);
// 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);
}
}
// if "all" is selected, check all other options and disable them
function AllCheckBoxSelector(names, name)
{
$('input[id="' + names + '"]').click(function()
{
if ($(this).prop("checked") == true)
// populate list depending on URL
function URLlistSelector(selector, name, param, names)
{
$('input[name="' + name + '"]').prop("checked", true);
$('input[name="' + name + '"]').prop("disabled", true);
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);
}
}
else if ($(this).prop("checked") == false)
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[name="' + name + '"]').prop("checked", false);
$('input[name="' + name + '"]').prop("disabled", false);
$('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);
}
});
}
$("input").prop("checked", false); // by default, uncheck all options
AllCheckBoxSelector("years", "year");
AllCheckBoxSelector("months", "month");
AllCheckBoxSelector("dimensions", "dimension");
AllCheckBoxSelector("genres", "genre");
AllCheckBoxSelector("themes", "theme");
AllCheckBoxSelector("places", "place");
AllCheckBoxSelector("tags", "tag");
AllCheckBoxSelector("photos", "photo");
AllCheckBoxSelector("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()
function userActionHandle()
{
if ($(this).parent().hasClass("active"))
// if "all" is selected, check all other options and disable them
function allCheckBoxSelected(names, name)
{
$(this).parent().removeClass("active");
$(this).parent().children(".item-cont").slideUp(200);
$('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 configurer show / hide
$("article.explorer h2").click(function()
{
if ($(this).hasClass("active"))
{
$(this).removeClass("active");
$("form").slideUp(200);
}
else
{
$(this).parent().addClass("active");
$(this).parent().children(".item-cont").slideDown(200);
$(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 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 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 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)
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 (paramGenre == "all")
if (paramTag.includes(t))
return true;
if (paramGenre.includes(genre))
return true;
return false;
}
return false;
}
function checkTheme(theme)
{
if (paramTheme == "all")
return true;
if (paramTheme.includes(theme))
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 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 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()
{

16
styles/main.css
View File

@ -422,8 +422,14 @@ article.explorer form {
}
article.explorer form select {
display:block;
margin-left:0.2rem;
display:inline;
margin-top:0.1rem;
margin-bottom:0.2rem;
}
article.explorer form .inline {
display:inline;
margin:0.1rem;
}
article.explorer input[type = submit] {
@ -450,12 +456,6 @@ input:checked + label {
display:block;
}
article.explorer form .container .box span {
display:block;
margin-left:1rem;
font-size:1.05rem;
}
article.explorer form .container h3 {
cursor:pointer;
}