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>

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($)
{
// 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,51 +60,38 @@ 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)
$(".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
function checkBoxSelector(names, name, urlParam)
function URLcheckBoxSelector(names, name, urlParam)
{
if (urlParam == "all")
{
@ -110,17 +108,49 @@ jQuery(document).ready(function($)
}
}
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);
// 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);
}
}
// 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")
{
$('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
function AllCheckBoxSelector(names, name)
function allCheckBoxSelected(names, name)
{
$('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");
AllCheckBoxSelector("months", "month");
AllCheckBoxSelector("dimensions", "dimension");
AllCheckBoxSelector("genres", "genre");
AllCheckBoxSelector("themes", "theme");
AllCheckBoxSelector("places", "place");
AllCheckBoxSelector("tags", "tag");
AllCheckBoxSelector("photos", "photo");
AllCheckBoxSelector("helps", "help");
$("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()
@ -176,6 +240,7 @@ jQuery(document).ready(function($)
$('input[id="good"]').prop("checked", false); $('input[id="good"]').prop("disabled", false);
}
});
}
// menu configurer show / hide
$("article.explorer h2").click(function()
@ -210,6 +275,9 @@ jQuery(document).ready(function($)
});
}
URLGeneration();
userActionHandle();
}
/*********************/
/** TABLE & GALLERY **/

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;
}