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/) * [Chart.js](https://www.chartjs.org/)
Fonts used: Fonts used:
* Rubik * [Rubik](https://github.com/googlefonts/Rubik)
* Commissioner * [Commissioner](https://github.com/kosbarts/Commissioner)
* Hot August Night * [Hot August Night](https://www.1001fonts.com/hot-august-night-font.html)
### Export Excel spreadsheet to JSON ### 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 frame" src="styles/icons/frame.svg">
<img class="style-select list" src="styles/icons/list.svg"> <img class="style-select list" src="styles/icons/list.svg">
</div> </div>
<form action=""> <form name="explorer" action="" onsubmit="onSubmit();">
<div class="container"> <div class="container">
<div class="box photos"> <div class="box photos active">
<h3>État photo&nbsp;</h3> <h3>État photo&nbsp;</h3>
<div class="item-cont"> <div class="item-cont">
<span><input type="checkbox" id="photos" name="photos" value="all"> <span><input type="checkbox" id="photos" name="photos" value="all">
@ -63,7 +63,7 @@
<label for="good">&#x2605;&#x2605;&#x2605; bonne</label></span> <label for="good">&#x2605;&#x2605;&#x2605; bonne</label></span>
</div> </div>
</div> </div>
<div class="box years active"> <div class="box years">
<h3>Années&nbsp;</h3> <h3>Années&nbsp;</h3>
<div class="item-cont"> <div class="item-cont">
<span><input type="checkbox" id="years" name="years" value="all"> <span><input type="checkbox" id="years" name="years" value="all">
@ -134,8 +134,7 @@
<div class="item-cont"> <div class="item-cont">
<span><input type="checkbox" id="places" name="places" value="all"> <span><input type="checkbox" id="places" name="places" value="all">
<label for="places">Tous</label></span> <label for="places">Tous</label></span>
<span><span class="inline">&#x203B;&nbsp;</span><select name="place"></select></span>
<!--<input type="checkbox" id="place1" name="place1" value="all"><select style="display:inline;"></select>-->
</div> </div>
</div> </div>
<div class="box tags"> <div class="box tags">
@ -143,8 +142,7 @@
<div class="item-cont"> <div class="item-cont">
<span><input type="checkbox" id="tags" name="tags" value="all"> <span><input type="checkbox" id="tags" name="tags" value="all">
<label for="tags">Tous</label></span> <label for="tags">Tous</label></span>
<span><span class="inline">&#x203B;&nbsp;</span><select name="tag"></select></span>
<!--<input type="checkbox" id="tag1" name="tag1" value="all"><select style="display:inline;"></select>-->
</div> </div>
</div> </div>
<div class="box dimensions"> <div class="box dimensions">

2
exposition.html
View File

@ -35,7 +35,7 @@
<article class="exposition"> <article class="exposition">
<h1>Exposition</h1> <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> <div id="gallery"></div>
</article> </article>
</body> </body>

162
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($) jQuery(document).ready(function($)
{ {
// get URL parameters // get URL parameters
@ -19,7 +33,6 @@ jQuery(document).ready(function($)
/** MENU **/ /** MENU **/
/**********/ /**********/
//var dimensions = [];
var genres = []; var genres = [];
var themes = []; var themes = [];
var places = []; var places = [];
@ -29,8 +42,6 @@ jQuery(document).ready(function($)
{ {
for (i of data) 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 != "—") if (genres.indexOf(i.genre) === -1 && i.genre != "" && i.genre != "—")
genres.push(i.genre); genres.push(i.genre);
if (themes.indexOf(i.theme) === -1 && i.theme != "" && i.theme != "—") if (themes.indexOf(i.theme) === -1 && i.theme != "" && i.theme != "—")
@ -49,51 +60,38 @@ jQuery(document).ready(function($)
} }
} }
//dimensions.sort();
genres.sort(); genres.sort();
themes.sort(); themes.sort();
places.sort(Intl.Collator().compare); places.sort(Intl.Collator().compare);
tags.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) for (genre of genres)
{ {
html = '<span><input type="checkbox" id="' + genre + '" name="genre" value="' + genre + '"></input>\n'; html = '<span><input type="checkbox" id="' + genre + '" name="genre" value="' + genre + '"></input>\n';
html += '<label for="' + genre + '">' + genre + '</label></span>'; html += '<label for="' + genre + '">' + genre + '</label></span>';
$(".box.genres .item-cont").append(html); $(".box.genres .item-cont").append(html);
} }
for (theme of themes) for (theme of themes)
{ {
html = '<span><input type="checkbox" id="' + theme + '" name="theme" value="' + theme + '"></input>\n'; html = '<span><input type="checkbox" id="' + theme + '" name="theme" value="' + theme + '"></input>\n';
html += '<label for="' + theme + '">' + theme + '</label></span>'; html += '<label for="' + theme + '">' + theme + '</label></span>';
$(".box.themes .item-cont").append(html); $(".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) for (place of places)
{ $(".box.places select").append('<option value="' + place + '">' + place + '</option');
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.tags select").append('<option value="">Aucun</option');
}
//$(".box.tags select").append('<option value="none">Aucun</option');
for (tag of tags) for (tag of tags)
$(".box.tags select").append('<option value="' + tag + '">' + tag + '</option');
function URLGeneration()
{ {
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');
}
// populate checkboxes depending on URL // populate checkboxes depending on URL
function checkBoxSelector(names, name, urlParam) function URLcheckBoxSelector(names, name, urlParam)
{ {
if (urlParam == "all") if (urlParam == "all")
{ {
@ -110,17 +108,49 @@ jQuery(document).ready(function($)
} }
} }
checkBoxSelector("years", "year", paramYear) // populate list depending on URL
checkBoxSelector("months", "month", paramMonth); function URLlistSelector(selector, name, param, names)
checkBoxSelector("dimensions", "dimension", paramDimension); {
checkBoxSelector("genres", "genre", paramGenre); if (param.length >= 1)
checkBoxSelector("themes", "theme", paramTheme); $(selector + ' select').parent().remove();
checkBoxSelector("places", "place", paramPlace); for (a of param)
checkBoxSelector("tags", "tag", paramTag); {
checkBoxSelector("photos", "photo", paramPhoto); html = '<span><span class="inline">&#x203B;&nbsp;</span><select name="' + name + '">';
checkBoxSelector("helps", "help", paramHelp); 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);
}
}
// special case for photos with "exist" 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") if (paramPhoto == "exist")
{ {
$('input[id="exist"]').prop("checked", true); $('input[id="exist"]').prop("checked", true);
@ -130,8 +160,10 @@ jQuery(document).ready(function($)
} }
} }
function userActionHandle()
{
// if "all" is selected, check all other options and disable them // if "all" is selected, check all other options and disable them
function AllCheckBoxSelector(names, name) function allCheckBoxSelected(names, name)
{ {
$('input[id="' + names + '"]').click(function() $('input[id="' + names + '"]').click(function()
{ {
@ -148,17 +180,49 @@ jQuery(document).ready(function($)
}); });
} }
$("input").prop("checked", false); // by default, uncheck all options // 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();
}
});
}
AllCheckBoxSelector("years", "year"); $("input").prop("checked", false); // by default, uncheck all options
AllCheckBoxSelector("months", "month"); allCheckBoxSelected("years", "year");
AllCheckBoxSelector("dimensions", "dimension"); allCheckBoxSelected("months", "month");
AllCheckBoxSelector("genres", "genre"); allCheckBoxSelected("dimensions", "dimension");
AllCheckBoxSelector("themes", "theme"); allCheckBoxSelected("genres", "genre");
AllCheckBoxSelector("places", "place"); allCheckBoxSelected("themes", "theme");
AllCheckBoxSelector("tags", "tag"); allCheckBoxSelected("places", "place");
AllCheckBoxSelector("photos", "photo"); allCheckBoxSelected("tags", "tag");
AllCheckBoxSelector("helps", "help"); allCheckBoxSelected("photos", "photo");
allCheckBoxSelected("helps", "help");
listOptionSelected(".box.places", "place", places);
listOptionSelected(".box.tags", "tag", tags);
// special case for photos with "exist" // special case for photos with "exist"
$('input[id="exist"]').click(function() $('input[id="exist"]').click(function()
@ -176,6 +240,7 @@ jQuery(document).ready(function($)
$('input[id="good"]').prop("checked", false); $('input[id="good"]').prop("disabled", false); $('input[id="good"]').prop("checked", false); $('input[id="good"]').prop("disabled", false);
} }
}); });
}
// menu configurer show / hide // menu configurer show / hide
$("article.explorer h2").click(function() $("article.explorer h2").click(function()
@ -210,6 +275,9 @@ jQuery(document).ready(function($)
}); });
} }
URLGeneration();
userActionHandle();
}
/*********************/ /*********************/
/** TABLE & GALLERY **/ /** TABLE & GALLERY **/

16
styles/main.css
View File

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