diff --git a/README.md b/README.md index 5b9bce8..09b19f3 100644 --- a/README.md +++ b/README.md @@ -1,11 +1,17 @@ # Ginou Project -## What is it +## Description This project is a website dedicated to the memory of my late grandmother who was an artist named Ginou, with the goal of keeping her painting legacy intact. Of course, all the content is oriented around her, but you can easily edit it and use it for your own purpose if you want. Just please perhaps change the design a little bit? +## Launch + +The easiest way to launch the website, is by launching a Python server. You just need to go inside this folder and launch (inside PowerShell or the Terminal): + +`python -m http.server` + ## Tools Tools used: @@ -20,4 +26,8 @@ Fonts used: ### Export Excel spreadsheet to JSON -The JSON file present in the repository is generated automatically from an Excel spreadsheet. See this [Stack Overflow thread](https://superuser.com/questions/1249898/saving-excel-sheet-as-json-file) for details. \ No newline at end of file +The JSON file present in the repository is generated automatically from an Excel spreadsheet. See this [Stack Overflow thread](https://superuser.com/questions/1249898/saving-excel-sheet-as-json-file) for details. + +### Optimizing images + +You can optimize images to gain space without losing quality. Useful tools are [listed on this page](https://imageoptim.com/versions.html) (I personally use _imageoptim_ and _pinga_). \ No newline at end of file diff --git a/biographie.html b/biographie.html index 64c6535..2d6333a 100644 --- a/biographie.html +++ b/biographie.html @@ -32,18 +32,17 @@

En construction...

Ginou, née Geneviève Collignon, était une artiste-peintre qui a vu le jour un matin de Mars 1936 à Mouilly, un petit village isolé dans la forêt meusienne, au fond d'une vallée accrochée aux contreforts des Côtes de Meuse.

- -

Comme l'écrit Ginou dans un texte sur sa jeunesse, “je suis née un jour de mars 1936 dans un petit village de la Meuse, Mouilly, le berceau des parents de mon père.”. Elle a 4 ans quand la Seconde Guerre Mondiale éclate, elle en garde des souvenirs très précis, même 75 ans après. Après avoir passé le Certificat d'Étude avec succès, Geneviève apprend le métier de couturière de son père Eugène, tailleur installé dans le bas du village, dans un maison sur les berges du petit ruisseau qui serpente au fond de la vallée.

- -

Dans ce petit village blottit dans la forêt domeniale des Eparges, elle passe beaucoup de temps dans la nature environante, accompagnant son père quand il allait dans les bois chercher des champignons ou bien pour aller jouer ou se promener avec ses copains et copines du village. Elle se souvient : “J'ai appris à les reconnaître, girolles, cèpes, cela me plaisait bien. J'ai toujours aimé la nature, les fleurs, les oiseaux, apercevoir une biche qui détale au détour d'un chemin”. Où bien quand elle rendait visite à ses cousines à Saint Dié dans les Vosges, elle faisait de longues promenades autour de la ville. Cet amour de la nature se ressentira tout au long de son œuvre.

- -

Comme Geneviève l'a elle même relaté dans un texte sur sa jeunesse, “Depuis toute petite, j'aimais dessiner et colorier et puis l'institutrice nous a appris à peindre à la gouache. Elle aussi, comme mon père, encourageait mon don.” C'est ainsi que Geneviève réalise ses premieres aquarelles.

- -

“Et puis, un jour, j'ai rencontré une jeune femme qui peignait et qui m'a parlé de la peinture à l'huile. J'ai voulu essayer, c'est le voisin qui m'a rapporté de Metz mes premiers tubes de peinture et la palette (que j'ai toujours). J'ai aussi acheté quelques livrets traitant de la technique et je me suis lancée et j'ai progressé tout doucement. Et cette passion ne m'a jamais quitté.” Ainsi est née Ginou !

-

Ginou peindra ainsi 383 tableaux (huile sur toile, bois et carton), tous recencés dans un tout petit carnet à spirale ou elle notait leurs caractéristiques et leur acquereurs et destinataires. Ceux-ci sont maintenant en parti disséminé aux quatre coins de la France, peut-être de l'Europe, voir du monde !

+

Comme l'écrit Ginou dans un texte sur sa jeunesse, « je suis née un jour de mars 1936 dans un petit village de la Meuse, Mouilly, le berceau des parents de mon père ». Elle a 4 ans quand la Seconde Guerre Mondiale éclate, elle en garde des souvenirs très précis, même 75 ans après. Après avoir passé le Certificat d'Étude avec succès, Geneviève apprend le métier de couturière de son père Eugène, tailleur installé dans le bas du village, dans un maison sur les berges du petit ruisseau qui serpente au fond de la vallée.

-

Curiosité de la vie, Ginou était en train de completer la dernière page de son petit carnet lorsque qu'elle s'est éteinte le 02 avril 2017, laissant le numéro 383 inachevé.

+

Dans ce petit village blottit dans la forêt domeniale des Eparges, elle passe beaucoup de temps dans la nature environante, accompagnant son père quand il allait dans les bois chercher des champignons ou bien pour aller jouer ou se promener avec ses copains et copines du village. Elle se souvient : « J'ai appris à les reconnaître, girolles, cèpes, cela me plaisait bien. J'ai toujours aimé la nature, les fleurs, les oiseaux, apercevoir une biche qui détale au détour d'un chemin ». Où bien quand elle rendait visite à ses cousines à Saint Dié dans les Vosges, elle faisait de longues promenades autour de la ville. Cet amour de la nature se ressentira tout au long de son œuvre.

+ +

Comme Geneviève l'a elle même relaté dans un texte sur sa jeunesse,  « depuis toute petite, j'aimais dessiner et colorier et puis l'institutrice nous a appris à peindre à la gouache. Elle aussi, comme mon père, encourageait mon don ». C'est ainsi que Geneviève réalise ses premieres aquarelles.

+

« Et puis, un jour, j'ai rencontré une jeune femme qui peignait et qui m'a parlé de la peinture à l'huile. J'ai voulu essayer, c'est le voisin qui m'a rapporté de Metz mes premiers tubes de peinture et la palette (que j'ai toujours). J'ai aussi acheté quelques livrets traitant de la technique et je me suis lancée et j'ai progressé tout doucement. Et cette passion ne m'a jamais quittée ». Ainsi est née Ginou !

+ +

Ginou peindra ainsi 383 tableaux (huile sur toile, bois et carton), tous recencés dans un tout petit carnet à spirale ou elle notait leurs caractéristiques et leur acquereurs et destinataires. Ceux-ci sont maintenant en parti disséminé aux quatre coins de la France, peut-être de l'Europe, voir du monde !

+ +

Curiosité de la vie, Ginou était en train de compléter la dernière page de son petit carnet lorsque qu'elle s'est éteinte le 02 avril 2017, laissant le numéro 383 inachevé.

\ No newline at end of file diff --git a/data.json b/data.json new file mode 100644 index 0000000..ea01ace --- /dev/null +++ b/data.json @@ -0,0 +1,324 @@ +[{ + "type": "tableau", + "number": "1", + "title": "Paysage Mouilly", + "dimension": "", + "month": "", + "year": "", + "support": "", + "paint": "", + "theme": "", + "category": "", + "place": "", + "tags": "", + "comment": "", + "photo": "none", + "help": "" + }, + { + "type": "tableau", + "number": "2", + "title": "Rep. \"Nature Morte\"", + "dimension": "—", + "month": "", + "year": "", + "support": "", + "paint": "", + "theme": "", + "category": "", + "place": "", + "tags": "", + "comment": "", + "photo": "none", + "help": "" + }, + { + "type": "tableau", + "number": "3", + "title": "Rep. \"Chasse\"", + "dimension": "", + "month": "", + "year": "", + "support": "", + "paint": "", + "theme": "", + "category": "", + "place": "Mouilly", + "tags": "", + "comment": "", + "photo": "none", + "help": "" + }, + { + "type": "tableau", + "number": "4", + "title": "Rep. \"Portrait\" (Reynolds)", + "dimension": "", + "month": "", + "year": "", + "support": "", + "paint": "", + "theme": "", + "category": "", + "place": "", + "tags": "", + "comment": "", + "photo": "none", + "help": "" + }, + { + "type": "tableau", + "number": "5", + "title": "Rep. \"Paysage\"", + "dimension": "", + "month": "", + "year": "", + "support": "", + "paint": "", + "theme": "", + "category": "", + "place": "", + "tags": "", + "comment": "", + "photo": "none", + "help": "" + }, + { + "type": "tableau", + "number": "6", + "title": "Portrait Monique", + "dimension": "", + "month": "", + "year": "", + "support": "", + "paint": "", + "theme": "", + "category": "oui", + "place": "", + "tags": "mouche", + "comment": "", + "photo": "none", + "help": "" + }, + { + "type": "tableau", + "number": "7", + "title": "Rep. \"Portrait\" (Greuze)", + "dimension": "", + "month": "", + "year": "", + "support": "", + "paint": "", + "theme": "", + "category": "non", + "place": "", + "tags": "canard", + "comment": "", + "photo": "none", + "help": "" + }, + { + "type": "tableau", + "number": "8", + "title": "Paysage Mouilly", + "dimension": "", + "month": "", + "year": "", + "support": "", + "paint": "", + "theme": "", + "category": "", + "place": "Nancy", + "tags": "", + "comment": "", + "photo": "none", + "help": "" + }, + { + "type": "tableau", + "number": "9", + "title": "Rep. \"Vierge aux raisins\" (Mignard)", + "dimension": "", + "month": "", + "year": "", + "support": "", + "paint": "", + "theme": "", + "category": "", + "place": "", + "tags": "", + "comment": "", + "photo": "none", + "help": "" + }, + { + "type": "tableau", + "number": "10", + "title": "Rep. \"Paysage\"", + "dimension": "", + "month": "", + "year": "", + "support": "", + "paint": "", + "theme": "", + "category": "", + "place": "", + "tags": "", + "comment": "", + "photo": "none", + "help": "" + }, + { + "type": "tableau", + "number": "11", + "title": "Rep. \"Paysage\"", + "dimension": "", + "month": "", + "year": "", + "support": "", + "paint": "", + "theme": "", + "category": "", + "place": "", + "tags": "", + "comment": "", + "photo": "bad", + "help": "" + }, + { + "type": "tableau", + "number": "12", + "title": "Rep. \"Paysage\"", + "dimension": "", + "month": "", + "year": "", + "support": "", + "paint": "", + "theme": "", + "category": "", + "place": "", + "tags": "", + "comment": "", + "photo": "none", + "help": "" + }, + { + "type": "tableau", + "number": "13", + "title": "Paysage neige à Mouilly et bavure d'escargot âpre", + "dimension": "99x69", + "month": "septembre", + "year": "2006", + "support": "carton", + "paint": "Aquarelle", + "theme": "", + "category": "", + "place": "", + "tags": "", + "comment": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer congue faucibus velit, eget fringilla metus.", + "photo": "none", + "help": "" + }, + { + "type": "tableau", + "number": "14", + "title": "Rep. \"T. de genres\"", + "dimension": "55x46", + "month": "", + "year": "1956", + "support": "", + "paint": "", + "theme": "", + "category": "", + "place": "", + "tags": "", + "comment": "", + "photo": "bad", + "help": "" + }, + { + "type": "tableau", + "number": "15", + "title": "Sérénade à l’enfant", + "dimension": "55x46", + "month": "—", + "year": "1959", + "support": "Toile", + "paint": "Huile", + "theme": "Personnages", + "category": "—", + "place": "—", + "tags": "—", + "comment": "test commentaire", + "photo": "good", + "help": "no" + }, + { + "type": "tableau", + "number": "16", + "title": "Mona Lisa", + "dimension": "65x50", + "month": "avril", + "year": "1959", + "support": "Toile", + "paint": "Huile", + "theme": "Personnages", + "category": "—", + "place": "—", + "tags": "chien, chat, cerf, canard, oie", + "comment": "Reproduction de Léonard de Vinci", + "photo": "bad", + "help": "yes" + }, + { + "type": "tableau", + "number": "17", + "title": "Paysage Mouilly", + "dimension": "", + "month": "—", + "year": "1980", + "support": "", + "paint": "", + "theme": "", + "category": "", + "place": "", + "tags": "", + "comment": "", + "photo": "none", + "help": "" + }, + { + "type": "tableau", + "number": "18", + "title": "Paysage Mouilly", + "dimension": "", + "month": "—", + "year": "1985", + "support": "", + "paint": "", + "theme": "", + "category": "", + "place": "", + "tags": "", + "comment": "", + "photo": "none", + "help": "" + }, + { + "type": "tableau", + "number": "19", + "title": "Paysage Mouilly", + "dimension": "99x32", + "month": "février", + "year": "1987", + "support": "", + "paint": "", + "theme": "", + "category": "", + "place": "", + "tags": "", + "comment": "", + "photo": "ok", + "help": "" + } +] \ No newline at end of file diff --git a/explorer.html b/explorer.html index 9ceabeb..5de65be 100644 --- a/explorer.html +++ b/explorer.html @@ -9,6 +9,8 @@ + +
@@ -27,9 +29,129 @@
-
+

Explorer

-

En construction...

+

Cette section du site permet de générer une liste (bientôt aussi visible sous le format d'une galerie) en fonction de différents paramètres, listés ci-dessous. Il permet d'explorer l'œuvre de Ginou, y compris les tableaux dont nous ne possédons pas de photo.
+ Une ☆ étoile vide dans la colonne photo signifie que nous n'avons pas de photo pour un tableau ; une ★ étoile qu'elle est de mauvaise qualité ; deux ★★ étoiles qu'elle est acceptable ; et trois ★★★ étoiles qu'elle est tout à fait satisfaisante.
+ Le symbole ‼︎ dans la colonne aide signifie que nous avons besoin d'aide pour obtenir une photo et que vous pouvez contribuer.

+ +

Configuration  

+
+
+
+

Années

+ + + + + + + + + + + + + + + + +
+
+

Mois

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
+
+

Dimensions

+ + +
+
+

Thèmes

+ + +
+
+

Catégories

+ + +
+
+

Lieux

+ + +
+
+

Tags

+ + +
+
+

État photo

+ + + + + + + + + + +
+
+

Aide requise

+ + + + + + +
+
+ +
+

Aucun résultat. Veuillez réessayer avec d'autres paramètres.

+ + + + + + + + + + + + + + +
TitreAnnéeDimensionThèmeCatégorieLieuTagsPhotoAideVoir
\ No newline at end of file diff --git a/exposition.html b/exposition.html index 7cf43d9..2af661b 100644 --- a/exposition.html +++ b/exposition.html @@ -11,7 +11,7 @@ - + @@ -34,64 +34,7 @@

Exposition

- - +
\ No newline at end of file diff --git a/images/unknown.jpg b/images/unknown.jpg new file mode 100644 index 0000000..f25ec35 Binary files /dev/null and b/images/unknown.jpg differ diff --git a/index.html b/index.html index 5564fcf..3f28cb9 100644 --- a/index.html +++ b/index.html @@ -29,7 +29,7 @@

L'art de Ginou

-

Ginou, de son vrai nom Geneviève Collignon (née à Mouilly, 1936-2017), était une artiste peintre autodidacte très appréciée dans son entourage. Elle a réalisé de nombreuses œuvres, à travers la peinture à l’huile principalement, occasionnellement à l’aquarelle, mais aussi par le biais de la peinture sur soie ou bien encore dans les cahiers où elle écrivait des poèmes.

+

Ginou était une artiste peintre autodidacte très appréciée dans son entourage. Elle a réalisé de nombreuses œuvres, à travers la peinture à l’huile principalement, occasionnellement à l’aquarelle, mais aussi par le biais de la peinture sur soie ou bien encore dans les cahiers où elle écrivait des poèmes.

Tout au long de sa vie, Ginou a tenu à jour un petit carnet où elle consignait ses tableaux, en leur attribuant un numéro et un titre et reportait les dimensions et leur destinataires / acheteurs / commanditaires. Dans ce petit carnet, de 1958 à 2017, sont recensés 383 tableaux. Ginou a commencé à prendre en photos certains tableaux qu’elle peignait dans les années 1980 puis plus systématiquement à partir des années 2000. Pour compléter cette base iconographique, nous avons repris en photo en haute résolution les tableaux en notre possession. Ainsi, pour le moment, nous pouvons présenter sur ce site 261 des 383 tableaux numérotés.

diff --git a/painting.html b/painting.html index ba39c47..0646708 100644 --- a/painting.html +++ b/painting.html @@ -2,13 +2,15 @@ - Ginou • tableau <!-- insérer le nom et/ou le numéro --> + Ginou • tableau nº + +
@@ -30,35 +32,35 @@
-
+
+ -
- +
+
- La Truite1960 - Huile sur toile (55x35) - Reproduction de Courbet + + +  
-
\ No newline at end of file diff --git a/scripts/divers.js b/scripts/divers.js index fe9bc3a..2b30baa 100644 --- a/scripts/divers.js +++ b/scripts/divers.js @@ -1,6 +1,7 @@ -jQuery(document).ready(function($) { - - $('[data-fancybox="divers"]').fancybox({ +jQuery(document).ready(function($) +{ + $('[data-fancybox="divers"]').fancybox( + { infobar: false, toolbar: true, smallBtn: false, diff --git a/scripts/explorer.js b/scripts/explorer.js new file mode 100644 index 0000000..7efa97e --- /dev/null +++ b/scripts/explorer.js @@ -0,0 +1,345 @@ +jQuery(document).ready(function($) +{ + // get URL parameters + urlParams = new URLSearchParams(window.location.search); + 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')); + 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')); + paramHelp = (urlParams.get('helps') == null ? urlParams.getAll('help') : urlParams.getAll('helps')); + + $.getJSON("data.json", function(data) + { + +/**********/ +/** MENU **/ +/**********/ + + var dimensions = []; + var themes = []; + var categories = []; + var places = []; + var tags = []; + + function generateMenu() + { + for (i of data) + { + if (dimensions.indexOf(i.dimension) === -1 && i.dimension != "" && i.dimension != "—") + dimensions.push(i.dimension); + 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 != "—") + { + splitTags = i.tags.split(", "); + for (splitTag of splitTags) { + if (tags.indexOf(splitTag) === -1) + { + tags.push(splitTag); + } + } + } + } + + dimensions.sort(); + themes.sort(); + categories.sort(); + places.sort(); + tags.sort(); + + for (dimension of dimensions) + { + html = '\n'; + html += ''; + $(".box.dimensions").append(html); + } + for (theme of themes) + { + html = '\n'; + html += ''; + $(".box.themes").append(html); + } + for (category of categories) + { + html = '\n'; + html += ''; + $(".box.categories").append(html); + } + for (place of places) + { + html = '\n'; + html += ''; + $(".box.places").append(html); + } + for (tag of tags) + { + html = '\n'; + html += ''; + $(".box.tags").append(html); + } + + // populate checkboxes depending on URL + function checkBoxSelector(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); + } + } + } + + checkBoxSelector("years", "year", paramYear) + checkBoxSelector("months", "month", paramMonth); + checkBoxSelector("dimensions", "dimension", paramDimension); + checkBoxSelector("themes", "theme", paramTheme); + checkBoxSelector("categories", "category", paramCategory); + checkBoxSelector("places", "place", paramPlace); + checkBoxSelector("tags", "tag", paramTag); + checkBoxSelector("photos", "photo", paramPhoto); + checkBoxSelector("helps", "help", paramHelp); + } + + // 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) + { + $('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); + } + }); + } + + $("input").prop("checked", false); // by default, uncheck all options + + AllCheckBoxSelector("years", "year"); + AllCheckBoxSelector("months", "month"); + AllCheckBoxSelector("dimensions", "dimension"); + AllCheckBoxSelector("themes", "theme"); + AllCheckBoxSelector("categories", "category"); + AllCheckBoxSelector("places", "place"); + AllCheckBoxSelector("tags", "tag"); + AllCheckBoxSelector("photos", "photo"); + AllCheckBoxSelector("helps", "help"); + + // 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); + } + }); + + +/***********/ +/** TABLE **/ +/***********/ + + function generateTable() + { + 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(dimension)) + return true; + return false; + } + + function checkTheme(theme) + { + if (paramTheme == "all") + return true; + if (paramTheme.includes(theme)) + return true; + return false; + } + + function checkCategory(category) + { + if (paramCategory == "all") + return true; + if (paramCategory.includes(category)) + 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; + console.log("tag: " + tag); + console.log("paramTag: " + paramTag); + + splitTag = tag.split(", "); + console.log(splitTag); + + 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; + 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; + } + + hasResult = false; + + for (i of data) + { + if (urlParams.toString() === "") // no parameter in URL + res = false; + else + res = true; + + // check URL parameters and compute result + if (paramYear != "") res &&= checkYear(i.year); + if (paramMonth != "") res &&= checkMonth(i.month); + if (paramDimension != "") res &&= checkDimension(i.dimension); + 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); + if (paramHelp != "") res &&= checkHelp(i.help); + + if (!res) + continue; + + hasResult = true; + + $("table").css("display", "block"); + + result = ""; + result += "" + i.number + ""; + result += "" + i.title + ""; + result += "" + i.year + ""; + result += "" + i.dimension + ""; + result += "" + i.theme + ""; + result += "" + i.category + ""; + result += "" + i.place + ""; + result += "" + i.tags + ""; + + if (i.photo == "good") + result += '★★★'; + else if (i.photo == "ok") + result += '★★'; + else if (i.photo == "bad") + result += '★'; + else if (i.photo == "none") + result += '☆'; + + if (i.help == "yes") + result += '‼︎' + else + result += ' ' + + result += '👁'; + result += ""; + + $("table").append(result); + } + return hasResult; + } + + + generateMenu(); + + var res = generateTable(); + // display table or no result depending of computed result + if (res) + { + $("article.explorer h2").removeClass("active") + $("form").slideUp(200); + } + else + $("article.explorer p.no-result").css("display", "block"); + }); +}); \ No newline at end of file diff --git a/scripts/exposition.js b/scripts/exposition.js index a5faa6c..e92f0c0 100644 --- a/scripts/exposition.js +++ b/scripts/exposition.js @@ -1,27 +1,41 @@ -jQuery(document).ready(function($) { - - $('[data-fancybox="exposition"]').fancybox({ - infobar: false, - toolbar: true, - smallBtn: false, - buttons : [ "arrowLeft", "arrowRight", "close" ], - arrows: false, - transitionEffect: "fade", - baseClass: 'fancybox-custom-layout', - - caption : function( instance, item ) { - // index put inside, we can get the number: `item.opts.fancyboxIndex` - // and thus what we what inside the caption! - - // TODO read json to input good captions info - return '\ -
\ - ℹ︎\ - La Truite1960\ - Huile sur toile (55x35)\ - Reproduction de Courbet\ -
\ - '; +jQuery(document).ready(function($) +{ + $.getJSON("data.json", function(data) + { + for (i of data) + { + if (i.photo == "ok" || i.photo == "good") + { + console.log(i.number); + paintingHtml = '' + paintingHtml += ''; + console.log(paintingHtml); + $("#gallery").append(paintingHtml); + } } + + $('[data-fancybox="exposition"]').fancybox( + { + infobar: false, + toolbar: true, + smallBtn: false, + buttons: ["arrowLeft", "arrowRight", "close"], + arrows: false, + transitionEffect: "fade", + baseClass: 'fancybox-custom-layout', + + caption: function(instance, item) + { + var idx = item.opts.fancyboxIndex - 1; // painting number + return '\ +
\ + ℹ︎\ + ' + data[idx].title + '' + (data[idx].month != '—' ? data[idx].month + ' ' : '') + data[idx].year + '\ + ' + data[idx].paint + ' sur ' + data[idx].support + ' (' + data[idx].dimension + ')\ + ' + data[idx].comment + '\ +
\ + '; + } + }); }); }); \ No newline at end of file diff --git a/scripts/mail.js b/scripts/mail.js index c43965a..295f605 100644 --- a/scripts/mail.js +++ b/scripts/mail.js @@ -1,7 +1,8 @@ -jQuery(document).ready(function($) { - +jQuery(document).ready(function($) +{ // a n t i s p a m (hopefully) - $('a.mail').on('click', function() { + $('a.mail').on('click', function() + { var href = $(this).attr('href'); var a1 = "adres" ; var a2 = "se em"; var a3 = "ail"; var goodMail = a1 + a2 + a3; diff --git a/scripts/menu.js b/scripts/menu.js index 4f6c637..6da643c 100644 --- a/scripts/menu.js +++ b/scripts/menu.js @@ -1,7 +1,6 @@ -function mobilemenu() { - +function mobilemenu() +{ var navmenu = document.getElementsByTagName("nav"); - if (navmenu[0].classList.contains("active")) navmenu[0].classList.remove("active"); else diff --git a/scripts/painting.js b/scripts/painting.js new file mode 100644 index 0000000..796903b --- /dev/null +++ b/scripts/painting.js @@ -0,0 +1,53 @@ +jQuery(document).ready(function($) +{ + const urlParams = new URLSearchParams(window.location.search); + const pageId = urlParams.get('number'); + i = pageId - 1; // index is 0 + + $.getJSON("data.json", function(data) + { + // page title + $("head title").append(data[i].number); + + // photo + if (data[i].photo != "none") + $(".photo img").attr("src", "photos/paintings/normal/" + data[i].number + ".jpg"); + else + $(".photo img").attr("src", "images/unknown.jpg"); + + // 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); + $(".metadata .content.dimension").append(data[i].dimension); + $(".metadata .content.support").append(data[i].support); + $(".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"; + if (data[i].photo == "ok") photoState = "acceptable"; + if (data[i].photo == "good") photoState = "bon"; + $(".metadata .content.photo").append(photoState); + + if (data[i].help == "yes") $(".metadata .content.help").append('oui (!)'); + else $(".metadata .content.help").append("non"); + + $(".metadata .content.comment").append(data[i].comment); + + if (data[i].photo != "none") + $(".metadata .content.original a").attr("href", "photos/paintings/original/" + data[i].number + ".jpg"); + else + $(".metadata .content.original").parent().css("display", "none"); + + // 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; + format += " (" + data[i].dimension + ")"; + $("#info .format").append(format); + $("#info .comment").prepend(data[i].comment); + }); +}); \ No newline at end of file diff --git a/scripts/stats.js b/scripts/stats.js index cc4cd13..c41fb17 100644 --- a/scripts/stats.js +++ b/scripts/stats.js @@ -1,5 +1,5 @@ -jQuery(document).ready(function($) { - +jQuery(document).ready(function($) +{ var canvasMonth = document.getElementById("month").getContext('2d'); var chartMonth = new Chart(canvasMonth, { type: 'bar', diff --git a/styles/main.css b/styles/main.css index 2d91110..804f88f 100644 --- a/styles/main.css +++ b/styles/main.css @@ -320,6 +320,158 @@ article.painting .container .metadata span.content { } +/* Explorer */ + +article.explorer p { + width:55vw; + margin:auto; + margin-bottom:2rem; +} + +article.explorer h2 { + margin:0; + cursor:pointer; +} + +article.explorer h2 span::before { + content: "▼︎"; + display: inline-block; + position: absolute; + transition:transform .2s ease; + transform:rotate(-90deg); +} + +article.explorer h2.active span::before { + transform:rotate(0); +} + +article.explorer h3 { + margin-bottom:0.3rem; +} + +article.explorer form h3, article.explorer form span { + display:block; +} + +article.explorer form .container { + max-width:80vw; + margin:auto; + display:flex; + align-self:flex-start; + justify-content:space-evenly; + flex-wrap:nowrap; +} + +article.explorer form { + margin-bottom:1rem; +} + +article.explorer form select { + display:block; + margin-right:1rem; +} + +article.explorer input[type = submit] { + display:block; + margin:auto; + text-align:center; + border: none; + padding:0.8rem; + border-radius:5%; + background:#2589BD; + text-decoration:none; + font-size:1.1rem; + cursor:pointer; + color:white; +} + +article.explorer p.no-result { + text-align:center; + font-size:1.2rem; + display:none; +} + +article.explorer table { + display:none; + border-collapse:separate; + border-spacing:0; + width:100%; + margin-top:1rem; + margin-bottom:1rem; +} + +article.explorer table tr:first-child th:first-child { + border-top-left-radius:6px; +} + +article.explorer table tr:first-child th:last-child { + border-top-right-radius:6px; +} + +article.explorer table tr:last-child td:first-child { + border-bottom-left-radius:6px; +} + +article.explorer table tr:last-child td:last-child { + border-bottom-right-radius:6px; +} + +article.explorer table tr th:first-child, +article.explorer table tr td:first-child { + border-left:1px solid #bbb; +} + +article.explorer td, article.explorer th { + border-right:1px solid #bbb; + border-bottom:1px solid #bbb; + text-align:left; + padding:8px; +} + +article.explorer th { + border-top:1px solid #bbb; + background:#dddddd; + position:sticky; + top:0; +} + +article.explorer tr td:first-child { + width:1%; + white-space:nowrap; +} + +article.explorer tr td:nth-child(2) { + width:25%; + white-space:nowrap; +} + +article.explorer tr td:last-child { + font-size:1.5rem; + text-align:center; + padding:0; + width:1%; + white-space:nowrap; +} + +article.explorer tr td.help { + font-size:1.5rem; + text-align:center; + padding:0; + width:1%; + white-space:nowrap; +} + +article.explorer tr:nth-child(2n+3) { + background-color:#dddddd; +} + +article.explorer table .photo { + width:1%; + white-space:nowrap; + text-align:center; +} + + /* Divers */ article #stats { @@ -361,7 +513,8 @@ article #stats #stat { margin:auto; margin-top:3rem; } -} +} + /* Informations */