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

First batch of data, and modification to take them into account

Browse Source 
Also optimized fonts, after discovering (when having all photos in one page) they were too heavy.
This commit is contained in:
Théo Marchal 2021-02-10 18:39:46 +01:00
parent ad13b8b127
commit 7d945f2bf4
16 changed files with 158 additions and 742 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

649
data.json
View File

File diff suppressed because one or more lines are too long

4
divers.html
View File

@ -128,10 +128,10 @@
<canvas id="month" width="400" height="200"></canvas>
</div>
<div id="stat">
<canvas id="month2" width="400" height="200"></canvas>
<canvas id="year" width="400" height="200"></canvas>
</div>
<div id="stat">
<canvas id="month3" width="400" height="200"></canvas>
<canvas id="dimension" width="400" height="200"></canvas>
</div>
</div>
</article>

43
explorer.html
View File

@ -103,6 +103,33 @@
<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">< 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>
</div>
<div class="box genres">
<h3>Genres&nbsp;</h3>
<div class="item-cont">
<span><input type="checkbox" id="genres" name="genres" value="all">
<label for="genres">Tous</label></span>
</div>
</div>
<div class="box themes">
@ -112,18 +139,13 @@
<label for="themes">Tous</label></span>
</div>
</div>
<div class="box categories">
<h3>Catégories&nbsp;</h3>
<div class="item-cont">
<span><input type="checkbox" id="categories" name="categories" value="all">
<label for="categories">Toutes</label></span>
</div>
</div>
<div class="box places">
<h3>Lieux&nbsp;</h3>
<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>-->
</div>
</div>
<div class="box tags">
@ -131,6 +153,8 @@
<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>-->
</div>
</div>
<div class="box photos">
@ -140,6 +164,8 @@
<label for="photos">Tout état</label></span>
<span><input type="checkbox" id="none" name="photo" value="none">
<label for="none">&#x2606; aucune</label></span>
<!--<span><input type="checkbox" id="exist" name="photo" value="exist">
<label for="exist">Existante</label></span>-->
<span><input type="checkbox" id="bad" name="photo" value="bad">
<label for="bad">&#x2605; mauvaise</label></span>
<span><input type="checkbox" id="ok" name="photo" value="ok">
@ -171,8 +197,8 @@
<th>Titre</th>
<th>Année</th>
<th>Dimension</th>
<th>Genre</th>
<th>Thème</th>
<th>Catégorie</th>
<th>Lieu</th>
<th>Tags</th>
<th>Photo</th>
@ -181,6 +207,7 @@
</tr>
</thead>
</table>
<p class="result" style="text-align:center;"></p>
</article>
</body>
</html>

2
informations.html
View File

@ -56,7 +56,7 @@
<p>Le code source est librement disponible <em>via git</em> en <a href="https://git.n700.ovh/keb/ginou">cliquant ici</a>. Cela signifie qu'il est possible d'obtenir le site en local pour son utilisation personnelle, moyennant quelques connaissances techniques.</p>
<p>Dernière mise à jour en janvier 2021.</p>
<p>Dernière mise à jour en février 2021.</p>
</article>
</body>
</html>

2
painting.html
View File

@ -46,9 +46,9 @@
<li><span class="title">date :</span><span class="content date">&nbsp;</span></li>
<li><span class="title">format :</span><span class="content dimension">&nbsp;</span></li>
<li><span class="title">support :</span><span class="content support">&nbsp;</span></li>
<li><span class="title">genre :</span><span class="content genre">&nbsp;</span></li>
<li><span class="title">thème :</span><span class="content theme">&nbsp;</span></li>
<li><span class="title">lieu :</span><span class="content place">&nbsp;</span></li>
<li><span class="title">catégorie :</span><span class="content category">&nbsp;</span></li>
<li><span class="title">état photo :</span><span class="content photo">&nbsp;</span></li>
<li><span class="title">aide requise :</span><span class="content help">&nbsp;</span></li>
<li><span class="title">commentaire :</span><span class="content comment"> </span></li>

110
scripts/explorer.js
View File

@ -5,8 +5,8 @@ jQuery(document).ready(function($)
paramYear = (urlParams.get('years') == null ? urlParams.getAll('year') : urlParams.getAll('years'));
paramMonth = (urlParams.get('months') == null ? urlParams.getAll('month') : urlParams.getAll('months'));
paramDimension = (urlParams.get('dimensions') == null ? urlParams.getAll('dimension') : urlParams.getAll('dimensions'));
paramGenre = (urlParams.get('genres') == null ? urlParams.getAll('genre') : urlParams.getAll('genres'));
paramTheme = (urlParams.get('themes') == null ? urlParams.getAll('theme') : urlParams.getAll('themes'));
paramCategory = (urlParams.get('categories') == null ? urlParams.getAll('category') : urlParams.getAll('categories'));
paramPlace = (urlParams.get('places') == null ? urlParams.getAll('place') : urlParams.getAll('places'));
paramTag = (urlParams.get('tags') == null ? urlParams.getAll('tag') : urlParams.getAll('tags'));
paramPhoto = (urlParams.get('photos') == null ? urlParams.getAll('photo') : urlParams.getAll('photos'));
@ -19,9 +19,9 @@ jQuery(document).ready(function($)
/** MENU **/
/**********/
var dimensions = [];
//var dimensions = [];
var genres = [];
var themes = [];
var categories = [];
var places = [];
var tags = [];
@ -29,12 +29,12 @@ jQuery(document).ready(function($)
{
for (i of data)
{
if (dimensions.indexOf(i.dimension) === -1 && i.dimension != "" && i.dimension != "—")
dimensions.push(i.dimension);
/*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 != "—")
themes.push(i.theme);
if (categories.indexOf(i.category) === -1 && i.category != "" && i.category != "—")
categories.push(i.category);
if (places.indexOf(i.place) === -1 && i.place != "" && i.place != "—")
places.push(i.place);
if (tags.indexOf(i.tags) === -1 && i.tags != "" && i.tags != "—")
@ -49,17 +49,23 @@ jQuery(document).ready(function($)
}
}
dimensions.sort();
//dimensions.sort();
genres.sort();
themes.sort();
categories.sort();
places.sort();
tags.sort();
for (dimension of dimensions)
/*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)
{
@ -67,23 +73,23 @@ jQuery(document).ready(function($)
html += '<label for="' + theme + '">' + theme + '</label></span>';
$(".box.themes .item-cont").append(html);
}
for (category of categories)
{
html = '<span><input type="checkbox" id="' + category + '" name="category" value="' + category + '"></input>\n';
html += '<label for="' + category + '">' + category + '</label></span>';
$(".box.categories .item-cont").append(html);
}
//$(".box.places select").append('<option value="none">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.tags select").append('<option value="none">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');
}
// populate checkboxes depending on URL
@ -107,8 +113,8 @@ 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("categories", "category", paramCategory);
checkBoxSelector("places", "place", paramPlace);
checkBoxSelector("tags", "tag", paramTag);
checkBoxSelector("photos", "photo", paramPhoto);
@ -138,8 +144,8 @@ jQuery(document).ready(function($)
AllCheckBoxSelector("years", "year");
AllCheckBoxSelector("months", "month");
AllCheckBoxSelector("dimensions", "dimension");
AllCheckBoxSelector("genres", "genre");
AllCheckBoxSelector("themes", "theme");
AllCheckBoxSelector("categories", "category");
AllCheckBoxSelector("places", "place");
AllCheckBoxSelector("tags", "tag");
AllCheckBoxSelector("photos", "photo");
@ -199,26 +205,42 @@ jQuery(document).ready(function($)
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;
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")
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 (paramDimension.includes(dimension))
if (paramGenre.includes(genre))
return true;
return false;
}
@ -232,15 +254,6 @@ jQuery(document).ready(function($)
return false;
}
function checkCategory(category)
{
if (paramCategory == "all")
return true;
if (paramCategory.includes(category))
return true;
return false;
}
function checkPlace(place)
{
if (paramPlace == "all")
@ -285,6 +298,7 @@ jQuery(document).ready(function($)
function generateTable()
{
hasResult = false;
numberOfItem = 0;
for (i of data)
{
@ -297,8 +311,8 @@ jQuery(document).ready(function($)
if (paramYear != "") res &&= checkYear(i.year);
if (paramMonth != "") res &&= checkMonth(i.month);
if (paramDimension != "") res &&= checkDimension(i.dimension);
if (paramGenre != "") res &&= checkGenre(i.genre);
if (paramTheme != "") res &&= checkTheme(i.theme);
if (paramCategory != "") res &&= checkCategory(i.category);
if (paramPlace != "") res &&= checkPlace(i.place);
if (paramTag != "") res &&= checkTag(i.tags);
if (paramPhoto != "") res &&= checkPhoto(i.photo);
@ -308,6 +322,7 @@ jQuery(document).ready(function($)
continue;
hasResult = true;
numberOfItem++;
// table
$("table").css("display", "block");
@ -315,10 +330,10 @@ jQuery(document).ready(function($)
result = "<tr>";
result += "<td>" + i.number + "</td>";
result += "<td>" + i.title + "</td>";
result += "<td>" + i.year + "</td>";
result += "<td>" + (i.month != "—" ? i.month + "&nbsp;" : "") + i.year + "</td>";
result += "<td>" + i.dimension + "</td>";
result += "<td>" + i.genre + "</td>";
result += "<td>" + i.theme + "</td>";
result += "<td>" + i.category + "</td>";
result += "<td>" + i.place + "</td>";
result += "<td>" + i.tags + "</td>";
@ -354,6 +369,7 @@ jQuery(document).ready(function($)
}
$("#gallery").append(paintingHtml);
}
$(".explorer .result").append("La recherche donne un résultat de <strong>" + numberOfItem + " éléments</strong>.");
return hasResult;
}
@ -368,9 +384,13 @@ jQuery(document).ready(function($)
$(".style-select").show();
$("article.explorer h2").removeClass("active")
$("form").slideUp(200);
$("article.explorer p.result").css("display", "block");
}
else
{
$("article.explorer p.no-result").css("display", "block");
$("article.explorer p.result").css("display", "none");
}
// on mobile, show only the first item slided down
if ($(window).width() <= 600)
@ -414,6 +434,8 @@ jQuery(document).ready(function($)
caption: function(instance, item)
{
var idx = item.opts.fancyboxIndex - 1; // painting number
if (item.opts.fancyboxIndex >= 1000)
idx = item.opts.fancyboxIndex - 1000 + 383 - 1; // inédit: index starts at 1000 // 383: total number of paintings except inédit
return '\
<div id="info">\
<span class="info"><a href="painting.html?number=' + data[idx].number + '">&#8505;&#xFE0E;</span></a></span>\

5
scripts/exposition.js
View File

@ -28,11 +28,14 @@ jQuery(document).ready(function($)
caption: function(instance, item)
{
var idx = item.opts.fancyboxIndex - 1; // painting number
if (item.opts.fancyboxIndex >= 1000)
idx = item.opts.fancyboxIndex - 1000 + 383 - 1; // inédit: index starts at 1000 // 383: total number of paintings except inédit
return '\
<div id="info">\
<span class="info"><a href="painting.html?number=' + data[idx].number + '">&#8505;&#xFE0E;</span></a></span>\
<span class="title">' + data[idx].title + '</span><span class="year">' + (data[idx].month != '—' ? data[idx].month + '&nbsp;' : '') + data[idx].year + '</span>\
<span class="format">' + data[idx].paint + ' sur ' + data[idx].support + ' (' + data[idx].dimension + ')</span>\
<span class="format">' + data[idx].paint + ' sur ' + data[idx].support.toLowerCase() + ' (' + data[idx].dimension + ')</span>\
<span class="comment">' + data[idx].comment + '</span>\
</div>\
';

22
scripts/painting.js
View File

@ -17,13 +17,15 @@ jQuery(document).ready(function($)
// metadata
$(".metadata .content.number").append(data[i].number);
if (data[i].month != "—") $(".metadata .content.date").append(data[i].month + " " + data[i].year);
else $(".metadata .content.date").append(data[i].year);
if (data[i].month != "—")
$(".metadata .content.date").append(data[i].month + " " + data[i].year);
else
$(".metadata .content.date").append(data[i].year);
$(".metadata .content.dimension").append(data[i].dimension);
$(".metadata .content.support").append(data[i].support);
$(".metadata .content.genre").append(data[i].genre);
$(".metadata .content.theme").append(data[i].theme);
$(".metadata .content.place").append(data[i].place);
$(".metadata .content.category").append(data[i].category);
if (data[i].photo == "none") photoState = "aucune";
if (data[i].photo == "bad") photoState = "mauvais";
@ -31,8 +33,10 @@ jQuery(document).ready(function($)
if (data[i].photo == "good") photoState = "bon";
$(".metadata .content.photo").append(photoState);
if (data[i].help == "yes") $(".metadata .content.help").append('<a href="informations.html"><strong>oui (!)</strong></a>');
else $(".metadata .content.help").append("non");
if (data[i].help == "yes")
$(".metadata .content.help").append('<a href="informations.html"><strong>oui (!)</strong></a>');
else
$(".metadata .content.help").append("non");
$(".metadata .content.comment").append(data[i].comment);
@ -43,9 +47,11 @@ jQuery(document).ready(function($)
// cartel
$("#info .title").append(data[i].title);
if (data[i].month != "—") $("#info .year").append(data[i].month + " " + data[i].year);
else $("#info .year").append(data[i].year);
format = data[i].paint + " sur " + data[i].support;
if (data[i].month != "—")
$("#info .year").append(data[i].month + " " + data[i].year);
else
$("#info .year").append(data[i].year);
format = data[i].paint + " sur " + data[i].support.toLowerCase();
format += " (" + data[i].dimension + ")";
$("#info .format").append(format);
$("#info .comment").prepend(data[i].comment);

18
scripts/stats.js
View File

@ -7,7 +7,7 @@ jQuery(document).ready(function($)
labels: ["Janvier", "Février", "Mars", "Avril", "Mai", "Juin", "Juillet", "Août", "Septembre", "Octobre", "Novembre", "Décembre"],
datasets: [{
label: 'nombre de tableaux',
data: [13, 30, 40, 34, 50, 33, 27, 23, 18, 24, 35, 19],
data: [11, 30, 40, 34, 50, 33, 27, 24, 17, 26, 37, 19],
backgroundColor: '#2589BD',
borderColor: '#187795',
borderWidth: 1
@ -38,14 +38,14 @@ jQuery(document).ready(function($)
}
});
var canvasMonth2 = document.getElementById("month2").getContext('2d');
var chartMonth2 = new Chart(canvasMonth2, {
var canvasYear = document.getElementById("year").getContext('2d');
var chartYear = new Chart(canvasYear, {
type: 'bar',
data: {
labels: ["Janvier", "Février", "Mars", "Avril", "Mai", "Juin", "Juillet", "Août", "Septembre", "Octobre", "Novembre", "Décembre"],
labels: ["1956 - 1959", "1960 - 1969", "1970 - 1979", "1980 - 1989", "1990 - 1999", "2000 - 2009", "2010 - 2016"],
datasets: [{
label: 'nombre de tableaux',
data: [13, 30, 40, 34, 50, 33, 27, 23, 18, 24, 35, 19],
data: [24, 16, 7, 57, 117, 112, 52],
backgroundColor: '#2589BD',
borderColor: '#187795',
borderWidth: 1
@ -76,14 +76,14 @@ jQuery(document).ready(function($)
}
});
var canvasMonth3 = document.getElementById("month3").getContext('2d');
var chartMonth3 = new Chart(canvasMonth3, {
var canvasDimension = document.getElementById("dimension").getContext('2d');
var chartDimension = new Chart(canvasDimension, {
type: 'bar',
data: {
labels: ["Janvier", "Février", "Mars", "Avril", "Mai", "Juin", "Juillet", "Août", "Septembre", "Octobre", "Novembre", "Décembre"],
labels: ["< 20cm", "20cm - 29cm", "30cm - 39cm", "40cm - 49cm", "50cm - 59cm", "60cm - 69cm", "70cm - 79cm", "80cm - 89cm", "90cm - 99cm", ">= 100cm"],
datasets: [{
label: 'nombre de tableaux',
data: [13, 30, 40, 34, 50, 33, 27, 23, 18, 24, 35, 19],
data: [1, 60, 54, 97, 50, 54, 11, 2, 1, 2],
backgroundColor: '#2589BD',
borderColor: '#187795',
borderWidth: 1

BIN
styles/fonts/Commissioner-VariableFont_wght.ttf
View File

Binary file not shown.

BIN
styles/fonts/CommissionerFlair-Regular.ttf Normal file
View File

Binary file not shown.

BIN
styles/fonts/Rubik-Regular.woff Normal file
View File

Binary file not shown.

BIN
styles/fonts/Rubik-Regular.woff2 Normal file
View File

Binary file not shown.

BIN
styles/fonts/Rubik-VariableFont_wght.ttf
View File

Binary file not shown.

BIN
styles/fonts/newsgothicstd.otf
View File

Binary file not shown.

13
styles/main.css
View File

@ -1,6 +1,7 @@
@font-face {
font-family:Rubik;
src:url('fonts/Rubik-VariableFont_wght.ttf');
src:url('fonts/Rubik-Regular.woff2') format("woff2"),
url('fonts/Rubik-Regular.woff') format("woff");
}
@font-face {
@ -10,7 +11,7 @@
@font-face {
font-family:Commissioner;
src:url('fonts/Commissioner-VariableFont_wght.ttf');
Src:url('fonts/CommissionerFlair-Regular.ttf');
}
body {
@ -247,11 +248,15 @@ article #gallery img {
#info .info {
font-size:1.2rem;
position:absolute;
top:0.4rem;
top:0.325rem;
right:1rem;
font-family:monospace;
}
#info .year {
margin-right:1rem;
}
#info .title {
font-weight:bold;
font-style:italic;
@ -415,7 +420,7 @@ article.explorer form {
article.explorer form select {
display:block;
margin-right:0.75rem;
margin-left:0.2rem;
}
/* does not seem to work */