Compare commits
25 Commits
6e07aec3a5
...
60422a6400
| Author | SHA1 | Date | |
|---|---|---|---|
| 60422a6400 | |||
| 47a0dcd200 | |||
| e923c9404e | |||
| e31639d340 | |||
| 61511ecc95 | |||
| e0ebd28dcb | |||
| e41ccc5549 | |||
| 862a7348e6 | |||
| 3283d11c02 | |||
| 25a09015d1 | |||
| 34e8fe9b12 | |||
| 4effbe657e | |||
| 35b1e06dfc | |||
| 3a964098e7 | |||
| 3fe24e502e | |||
| 44a5f52e94 | |||
| 5b79f924cb | |||
| 936af2a9fd | |||
| f37a2fde6e | |||
| ab5710e69e | |||
| dae17821ad | |||
| 10dea8e993 | |||
| fece1eab16 | |||
| 4739726e5c | |||
| bf60722e22 |
@ -34,6 +34,7 @@
|
|||||||
<article class="main">
|
<article class="main">
|
||||||
<h1>Biographie</h1>
|
<h1>Biographie</h1>
|
||||||
|
|
||||||
|
<img src="images/ginou50.jpg" class="bio-img" alt="Ginou, peignant dans les années 50">
|
||||||
<p>Ginou, née Geneviève Collignon, était une artiste-peintre qui a vécu la plus grande partie de sa vie à Dugny-sur-Meuse, village de la vallée de la Meuse où elle trouvera de nombreux sujets d’inspiration.</p>
|
<p>Ginou, née Geneviève Collignon, était une artiste-peintre qui a vécu la plus grande partie de sa vie à Dugny-sur-Meuse, village de la vallée de la Meuse où elle trouvera de nombreux sujets d’inspiration.</p>
|
||||||
|
|
||||||
<p>Comme l'écrit Ginou en 2016 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, et en garde des souvenirs très précis, même 75 ans après. Après avoir passé le certificat d'études avec succès, Geneviève apprend le métier de couturière de son père Eugène, tailleur installé dans le bas du petit village isolé dans la forêt meusienne, dans une maison sur les berges du petit ruisseau qui serpente au fond d'une vallée accrochée aux contreforts des côtes de Meuse.</p>
|
<p>Comme l'écrit Ginou en 2016 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, et en garde des souvenirs très précis, même 75 ans après. Après avoir passé le certificat d'études avec succès, Geneviève apprend le métier de couturière de son père Eugène, tailleur installé dans le bas du petit village isolé dans la forêt meusienne, dans une maison sur les berges du petit ruisseau qui serpente au fond d'une vallée accrochée aux contreforts des côtes de Meuse.</p>
|
||||||
|
|||||||
10
divers.html
10
divers.html
@ -102,6 +102,10 @@
|
|||||||
<img src="photos/divers/mini/exposaintjean.jpg" alt="Fête du collège Saint-Jean de Verdun (2005).">
|
<img src="photos/divers/mini/exposaintjean.jpg" alt="Fête du collège Saint-Jean de Verdun (2005).">
|
||||||
</a>
|
</a>
|
||||||
|
|
||||||
|
<a data-fancybox="divers" href="photos/divers/normal/expojeannot.jpg" data-caption="Exposition à la foire aux puces de Dugny, avec le Jeannot (1995).">
|
||||||
|
<img src="photos/divers/mini/expojeannot.jpg" alt="Exposition à la foire aux puces de Dugny, avec le Jeannot (1995).">
|
||||||
|
</a>
|
||||||
|
|
||||||
<a data-fancybox="divers" href="photos/divers/normal/foiredugny.jpg" data-caption="Foire aux puces de Dugny-sur-Meuse (2004).">
|
<a data-fancybox="divers" href="photos/divers/normal/foiredugny.jpg" data-caption="Foire aux puces de Dugny-sur-Meuse (2004).">
|
||||||
<img src="photos/divers/mini/foiredugny.jpg" alt="Foire aux puces de Dugny-sur-Meuse (2004).">
|
<img src="photos/divers/mini/foiredugny.jpg" alt="Foire aux puces de Dugny-sur-Meuse (2004).">
|
||||||
</a>
|
</a>
|
||||||
@ -110,6 +114,10 @@
|
|||||||
<img src="photos/divers/mini/foirethierville.jpg" alt="Foire de Thierville-sur-Meuse (2002).">
|
<img src="photos/divers/mini/foirethierville.jpg" alt="Foire de Thierville-sur-Meuse (2002).">
|
||||||
</a>
|
</a>
|
||||||
|
|
||||||
|
<a data-fancybox="divers" href="photos/divers/normal/expobarleduc.jpg" data-caption="Exposition au siège du Conseil Général de Bar-le-Duc (1994).">
|
||||||
|
<img src="photos/divers/mini/expobarleduc.jpg" alt="Exposition au siège du Conseil Général de Bar-le-Duc (1994).">
|
||||||
|
</a>
|
||||||
|
|
||||||
<a data-fancybox="divers" href="photos/divers/normal/derniereexpo.jpg" data-caption="Dernière exposition où les tableaux de Ginou ont été présentés à titre posthume (2017).">
|
<a data-fancybox="divers" href="photos/divers/normal/derniereexpo.jpg" data-caption="Dernière exposition où les tableaux de Ginou ont été présentés à titre posthume (2017).">
|
||||||
<img src="photos/divers/mini/derniereexpo.jpg" alt="Dernière exposition où les tableaux de Ginou ont été présentés à titre posthume (2017).">
|
<img src="photos/divers/mini/derniereexpo.jpg" alt="Dernière exposition où les tableaux de Ginou ont été présentés à titre posthume (2017).">
|
||||||
</a>
|
</a>
|
||||||
@ -140,7 +148,7 @@
|
|||||||
<p>
|
<p>
|
||||||
De 1956 à 2016, soit sur une période de 60 ans, Ginou a peint plus de de 385 tableaux.<br>
|
De 1956 à 2016, soit sur une période de 60 ans, Ginou a peint plus de de 385 tableaux.<br>
|
||||||
Parmi ceux-ci, elle a le plus souvent aimé travailler à la lumière printanière du mois de mai avec un total de 50 tableaux.<br>
|
Parmi ceux-ci, elle a le plus souvent aimé travailler à la lumière printanière du mois de mai avec un total de 50 tableaux.<br>
|
||||||
Son année la plus active fut 1988 où elle réalisa 23 œuvres. Enfin, le format qu'elle privilégia fut le <em>55x46</em>, utilisé pour 53 toiles.
|
Son année la plus active fut 1988 où elle réalisa 23 œuvres. Enfin, le genre de tableau qu’elle préféra peindre était des paysages, plus particulièrement à la campagne.
|
||||||
</p>
|
</p>
|
||||||
|
|
||||||
<div id="stats">
|
<div id="stats">
|
||||||
|
|||||||
@ -61,16 +61,7 @@
|
|||||||
<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">
|
||||||
<label for="photos">Tout état</label></span>
|
<label for="photos">Tout état</label></span>
|
||||||
<span><input type="checkbox" id="none" name="photo" value="none">
|
<div class="generated"></div>
|
||||||
<label for="none">☆ manquant</label></span>
|
|
||||||
<span><input type="checkbox" id="exist" name="photo" value="exist">
|
|
||||||
<label for="exist">Disponible</label></span>
|
|
||||||
<span><input type="checkbox" id="bad" name="photo" value="bad">
|
|
||||||
<label for="bad">★ mauvais</label></span>
|
|
||||||
<span><input type="checkbox" id="ok" name="photo" value="ok">
|
|
||||||
<label for="ok">★★ acceptable</label></span>
|
|
||||||
<span><input type="checkbox" id="good" name="photo" value="good">
|
|
||||||
<label for="good">★★★ bon</label></span>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="box years">
|
<div class="box years">
|
||||||
@ -78,20 +69,7 @@
|
|||||||
<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">
|
||||||
<label for="years">Toutes</label></span>
|
<label for="years">Toutes</label></span>
|
||||||
<span><input type="checkbox" id="50s" name="year" value="50s">
|
<div class="generated"></div>
|
||||||
<label for="50s">1956 - 1959</label></span>
|
|
||||||
<span><input type="checkbox" id="60s" name="year" value="60s">
|
|
||||||
<label for="60s">1960 - 1969</label></span>
|
|
||||||
<span><input type="checkbox" id="70s" name="year" value="70s">
|
|
||||||
<label for="70s">1970 - 1979</label></span>
|
|
||||||
<span><input type="checkbox" id="80s" name="year" value="80s">
|
|
||||||
<label for="80s">1980 - 1989</label></span>
|
|
||||||
<span><input type="checkbox" id="90s" name="year" value="90s">
|
|
||||||
<label for="90s">1990 - 1999</label></span>
|
|
||||||
<span><input type="checkbox" id="00s" name="year" value="00s">
|
|
||||||
<label for="00s">2000 - 2009</label></span>
|
|
||||||
<span><input type="checkbox" id="10s" name="year" value="10s">
|
|
||||||
<label for="10s">2010 - 2016</label></span>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="box months">
|
<div class="box months">
|
||||||
@ -99,30 +77,7 @@
|
|||||||
<div class="item-cont">
|
<div class="item-cont">
|
||||||
<span><input type="checkbox" id="months" name="months" value="all">
|
<span><input type="checkbox" id="months" name="months" value="all">
|
||||||
<label for="months">Tous</label></span>
|
<label for="months">Tous</label></span>
|
||||||
<span><input type="checkbox" id="01" name="month" value="01">
|
<div class="generated"></div>
|
||||||
<label for="01">Janvier</label></span>
|
|
||||||
<span><input type="checkbox" id="02" name="month" value="02">
|
|
||||||
<label for="02">Février</label></span>
|
|
||||||
<span><input type="checkbox" id="03" name="month" value="03">
|
|
||||||
<label for="03">Mars</label></span>
|
|
||||||
<span><input type="checkbox" id="04" name="month" value="04">
|
|
||||||
<label for="04">Avril</label></span>
|
|
||||||
<span><input type="checkbox" id="05" name="month" value="05">
|
|
||||||
<label for="05">Mai</label></span>
|
|
||||||
<span><input type="checkbox" id="06" name="month" value="06">
|
|
||||||
<label for="06">Juin</label></span>
|
|
||||||
<span><input type="checkbox" id="07" name="month" value="07">
|
|
||||||
<label for="07">Juillet</label></span>
|
|
||||||
<span><input type="checkbox" id="08" name="month" value="08">
|
|
||||||
<label for="08">Août</label></span>
|
|
||||||
<span><input type="checkbox" id="09" name="month" value="09">
|
|
||||||
<label for="09">Septembre</label></span>
|
|
||||||
<span><input type="checkbox" id="10" name="month" value="10">
|
|
||||||
<label for="10">Octobre</label></span>
|
|
||||||
<span><input type="checkbox" id="11" name="month" value="11">
|
|
||||||
<label for="11">Novembre</label></span>
|
|
||||||
<span><input type="checkbox" id="12" name="month" value="12">
|
|
||||||
<label for="12">Décembre</label></span>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="box genres">
|
<div class="box genres">
|
||||||
@ -130,6 +85,7 @@
|
|||||||
<div class="item-cont">
|
<div class="item-cont">
|
||||||
<span><input type="checkbox" id="genres" name="genres" value="all">
|
<span><input type="checkbox" id="genres" name="genres" value="all">
|
||||||
<label for="genres">Tous</label></span>
|
<label for="genres">Tous</label></span>
|
||||||
|
<div class="generated"></div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="box themes">
|
<div class="box themes">
|
||||||
@ -137,6 +93,7 @@
|
|||||||
<div class="item-cont">
|
<div class="item-cont">
|
||||||
<span><input type="checkbox" id="themes" name="themes" value="all">
|
<span><input type="checkbox" id="themes" name="themes" value="all">
|
||||||
<label for="themes">Tous</label></span>
|
<label for="themes">Tous</label></span>
|
||||||
|
<div class="generated"></div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="box places">
|
<div class="box places">
|
||||||
@ -152,7 +109,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">※ </span><select name="tag"></select></span>
|
<span class="first"><span class="inline">※ </span><select name="tag"></select></span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="box dimensions">
|
<div class="box dimensions">
|
||||||
@ -160,26 +117,7 @@
|
|||||||
<div class="item-cont">
|
<div class="item-cont">
|
||||||
<span><input type="checkbox" id="dimensions" name="dimensions" value="all">
|
<span><input type="checkbox" id="dimensions" name="dimensions" value="all">
|
||||||
<label for="dimensions">Toutes</label></span>
|
<label for="dimensions">Toutes</label></span>
|
||||||
<span><input type="checkbox" id="18" name="dimension" value="18">
|
<div class="generated"></div>
|
||||||
<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>
|
</div>
|
||||||
<div class="box help">
|
<div class="box help">
|
||||||
@ -187,14 +125,14 @@
|
|||||||
<div class="item-cont">
|
<div class="item-cont">
|
||||||
<span><input type="checkbox" id="helps" name="helps" value="all">
|
<span><input type="checkbox" id="helps" name="helps" value="all">
|
||||||
<label for="helps">Toute</label></span>
|
<label for="helps">Toute</label></span>
|
||||||
<span><input type="checkbox" id="no" name="help" value="no">
|
<div class="generated"></div>
|
||||||
<label for="no">Non</label></span>
|
|
||||||
<span><input type="checkbox" id="yes" name="help" value="yes">
|
|
||||||
<label for="yes"><img width="5rem" src="styles/icons/exclamation-mark.svg" alt="Oui"> Oui</label></span>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
<div class="button-cont">
|
||||||
<input type="submit" value="Générer">
|
<input type="submit" value="Générer">
|
||||||
|
<input type="button" value="Réinitialiser">
|
||||||
|
</div>
|
||||||
</form>
|
</form>
|
||||||
<p class="no-result"><strong>Aucun résultat.</strong> Veuillez réessayer avec d'autres paramètres.</p>
|
<p class="no-result"><strong>Aucun résultat.</strong> Veuillez réessayer avec d'autres paramètres.</p>
|
||||||
<div id="style-container">
|
<div id="style-container">
|
||||||
|
|||||||
BIN
images/ginou50.jpg
Normal file
BIN
images/ginou50.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 162 KiB |
@ -35,7 +35,7 @@
|
|||||||
<h1>L'art de Ginou</h1>
|
<h1>L'art de Ginou</h1>
|
||||||
<p>Ginou était une artiste peintre autodidacte très appréciée dans son entourage. Elle a réalisé de nombreuses œuvres, principalement à la <strong>peinture à l’huile</strong>, occasionnellement à l’<strong>aquarelle</strong>, mais aussi par le biais de la <strong>peinture sur soie</strong> et <strong>sur bois</strong> ou bien encore dans les cahiers où elle écrivait des <strong>poèmes illustrés</strong>.</p>
|
<p>Ginou était une artiste peintre autodidacte très appréciée dans son entourage. Elle a réalisé de nombreuses œuvres, principalement à la <strong>peinture à l’huile</strong>, occasionnellement à l’<strong>aquarelle</strong>, mais aussi par le biais de la <strong>peinture sur soie</strong> et <strong>sur bois</strong> ou bien encore dans les cahiers où elle écrivait des <strong>poèmes illustrés</strong>.</p>
|
||||||
|
|
||||||
<p>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, <strong>de 1958 à 2017</strong>, sont référencés 383 tableaux. Cependant 2 tableaux (nº33 et nº49) ont été recouverts par Ginou elle-même. Nous avons aussi retrouvé 4 inédits. 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 haute résolution les tableaux en notre possession. Ainsi, pour le moment, nous pouvons présenter sur ce site <strong>249 des 385 tableaux recensés.</strong></p>
|
<p>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, <strong>de 1958 à 2017</strong>, sont référencés 383 tableaux. Cependant deux tableaux (nº33 et nº49) ont été recouverts par Ginou elle-même. Nous avons aussi retrouvé 4 inédits. 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 haute résolution les tableaux en notre possession. Ainsi, pour le moment, nous pouvons présenter sur ce site <strong>249 des 385 tableaux recensés.</strong></p>
|
||||||
|
|
||||||
<p>Ce site est conçu pour présenter un aperçu de son talent et pour que tout le monde puisse apprécier son œuvre.</p>
|
<p>Ce site est conçu pour présenter un aperçu de son talent et pour que tout le monde puisse apprécier son œuvre.</p>
|
||||||
|
|
||||||
|
|||||||
@ -44,7 +44,7 @@
|
|||||||
|
|
||||||
<div class="stat">
|
<div class="stat">
|
||||||
<canvas id="photo"></canvas>
|
<canvas id="photo"></canvas>
|
||||||
<span class="legend-cont"><span class="legend none"></span><span>Pas de photo</span></span>
|
<span class="legend-cont"><span class="legend none"></span><span>Photo manquante</span></span>
|
||||||
<span class="legend-cont"><span class="legend bad"></span><span>Photo de mauvaise qualité</span></span>
|
<span class="legend-cont"><span class="legend bad"></span><span>Photo de mauvaise qualité</span></span>
|
||||||
<span class="legend-cont"><span class="legend ok"></span><span>Photo de qualité acceptable</span></span>
|
<span class="legend-cont"><span class="legend ok"></span><span>Photo de qualité acceptable</span></span>
|
||||||
<span class="legend-cont"><span class="legend good"></span><span>Photo de bonne qualité</span></span>
|
<span class="legend-cont"><span class="legend good"></span><span>Photo de bonne qualité</span></span>
|
||||||
@ -70,7 +70,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>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>Site réalisé par <a href="https://theo.marchal.dev">Théo</a> et Denis Marchal avec la participation de toute la famille. Dernière mise à jour en février 2021.</p>
|
<p>Site réalisé par <a href="https://theo.marchal.dev">Théo</a> et Denis Marchal avec la participation de toute la famille. Dernière mise à jour en mars 2021.</p>
|
||||||
</article>
|
</article>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
2
photos
2
photos
@ -1 +1 @@
|
|||||||
Subproject commit 06d11b6b2f872ffb7bfcabf4e098000ff70b24fb
|
Subproject commit cb8156ed916c95b1f3012ae769434414bcbb134e
|
||||||
@ -12,6 +12,13 @@ function onSubmit() {
|
|||||||
return true;
|
return true;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
function removeFromArray(array, item)
|
||||||
|
{
|
||||||
|
index = array.indexOf(item);
|
||||||
|
if (index > -1)
|
||||||
|
array.splice(index, 1);
|
||||||
|
}
|
||||||
|
|
||||||
jQuery(document).ready(function($)
|
jQuery(document).ready(function($)
|
||||||
{
|
{
|
||||||
// get URL parameters
|
// get URL parameters
|
||||||
@ -25,6 +32,7 @@ jQuery(document).ready(function($)
|
|||||||
paramTag = (urlParams.get('tags') == null ? urlParams.getAll('tag') : urlParams.getAll('tags'));
|
paramTag = (urlParams.get('tags') == null ? urlParams.getAll('tag') : urlParams.getAll('tags'));
|
||||||
paramPhoto = (urlParams.get('photos') == null ? urlParams.getAll('photo') : urlParams.getAll('photos'));
|
paramPhoto = (urlParams.get('photos') == null ? urlParams.getAll('photo') : urlParams.getAll('photos'));
|
||||||
paramHelp = (urlParams.get('helps') == null ? urlParams.getAll('help') : urlParams.getAll('helps'));
|
paramHelp = (urlParams.get('helps') == null ? urlParams.getAll('help') : urlParams.getAll('helps'));
|
||||||
|
params = { "year": paramYear, "month": paramMonth, "dimension": paramDimension, "genre": paramGenre, "theme": paramTheme, "place": paramPlace, "tag": paramTag, "photo": paramPhoto, "help": paramHelp }
|
||||||
|
|
||||||
$.getJSON("data.json", function(data)
|
$.getJSON("data.json", function(data)
|
||||||
{
|
{
|
||||||
@ -33,21 +41,118 @@ jQuery(document).ready(function($)
|
|||||||
/** MENU **/
|
/** MENU **/
|
||||||
/**********/
|
/**********/
|
||||||
|
|
||||||
var genres = [];
|
var availableOptions = [];
|
||||||
var themes = [];
|
var selectedOptions = [];
|
||||||
var places = [];
|
|
||||||
var tags = [];
|
|
||||||
|
|
||||||
function generateMenu()
|
// filter data depending of parameters
|
||||||
|
function filterData(selectedOptions)
|
||||||
{
|
{
|
||||||
|
function CheckItem(name, selectedElements)
|
||||||
|
{
|
||||||
|
return function(item)
|
||||||
|
{
|
||||||
|
if (selectedElements.length == 0)
|
||||||
|
return true;
|
||||||
|
for (elem of selectedElements)
|
||||||
|
{
|
||||||
|
if (elem == "all")
|
||||||
|
return true;
|
||||||
|
if (item[name] == elem)
|
||||||
|
return true;
|
||||||
|
}
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function CheckTag(item)
|
||||||
|
{
|
||||||
|
for (tag of selectedOptions.tags)
|
||||||
|
{
|
||||||
|
if (tag == "all")
|
||||||
|
return true;
|
||||||
|
if (!item.tags.includes(tag))
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
return true;
|
||||||
|
}
|
||||||
|
|
||||||
|
function CheckDimension(item)
|
||||||
|
{
|
||||||
|
if (selectedOptions.dimensions.length == 0)
|
||||||
|
return true;
|
||||||
|
for (dimension of selectedOptions.dimensions)
|
||||||
|
{
|
||||||
|
if (dimension == "all")
|
||||||
|
return true;
|
||||||
|
if (item.dimension.split("x")[0] == dimension)
|
||||||
|
return true;
|
||||||
|
}
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
|
||||||
|
data = data.filter(CheckTag);
|
||||||
|
data = data.filter(CheckDimension);
|
||||||
|
data = data.filter(CheckItem("year", selectedOptions.years));
|
||||||
|
data = data.filter(CheckItem("photo", selectedOptions.photos));
|
||||||
|
data = data.filter(CheckItem("month", selectedOptions.months));
|
||||||
|
data = data.filter(CheckItem("genre", selectedOptions.genres));
|
||||||
|
data = data.filter(CheckItem("theme", selectedOptions.themes));
|
||||||
|
data = data.filter(CheckItem("place", selectedOptions.places));
|
||||||
|
data = data.filter(CheckItem("help", selectedOptions.helps));
|
||||||
|
}
|
||||||
|
|
||||||
|
// gather data from json to make form
|
||||||
|
function gatherData()
|
||||||
|
{
|
||||||
|
var photos = []; var years = []; var months = []; var genres = [];
|
||||||
|
var themes = []; var places = []; var tags = []; var dimensions = []; var helps = [];
|
||||||
|
|
||||||
|
function makeItem(item, array, displayName, min, max)
|
||||||
|
{
|
||||||
|
if (item >= min && item <= max)
|
||||||
|
{
|
||||||
|
if (array.indexOf(displayName) === -1)
|
||||||
|
array.push(displayName);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
for (i of data)
|
for (i of data)
|
||||||
{
|
{
|
||||||
|
if (photos.indexOf(i.photo) === -1 && i.photo != "" && i.photo != "—")
|
||||||
|
photos.push(i.photo);
|
||||||
|
if (months.indexOf(i.month) === -1 && i.month != "" && i.month != "—")
|
||||||
|
months.push(i.month);
|
||||||
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 != "—")
|
||||||
themes.push(i.theme);
|
themes.push(i.theme);
|
||||||
if (places.indexOf(i.place) === -1 && i.place != "" && i.place != "—")
|
if (places.indexOf(i.place) === -1 && i.place != "" && i.place != "—")
|
||||||
places.push(i.place);
|
places.push(i.place);
|
||||||
|
if (helps.indexOf(i.help) === -1 && i.help != "" && i.help != "—")
|
||||||
|
helps.push(i.help);
|
||||||
|
if (i.year != "" && i.year != "—")
|
||||||
|
{
|
||||||
|
makeItem(i.year, years, "50s", 1956, 1959);
|
||||||
|
makeItem(i.year, years, "60s", 1960, 1969);
|
||||||
|
makeItem(i.year, years, "70s", 1970, 1979);
|
||||||
|
makeItem(i.year, years, "80s", 1980, 1989);
|
||||||
|
makeItem(i.year, years, "90s", 1990, 1999);
|
||||||
|
makeItem(i.year, years, "00s", 2000, 2009);
|
||||||
|
makeItem(i.year, years, "10s", 2010, 2016);
|
||||||
|
}
|
||||||
|
if (i.dimension != "" && i.dimension != "—")
|
||||||
|
{
|
||||||
|
makeItem(i.dimension.split("x")[0], dimensions, "18", 0, 19);
|
||||||
|
makeItem(i.dimension.split("x")[0], dimensions, "20", 20, 29);
|
||||||
|
makeItem(i.dimension.split("x")[0], dimensions, "30", 30, 39);
|
||||||
|
makeItem(i.dimension.split("x")[0], dimensions, "40", 40, 49);
|
||||||
|
makeItem(i.dimension.split("x")[0], dimensions, "50", 50, 59);
|
||||||
|
makeItem(i.dimension.split("x")[0], dimensions, "60", 60, 69);
|
||||||
|
makeItem(i.dimension.split("x")[0], dimensions, "70", 70, 79);
|
||||||
|
makeItem(i.dimension.split("x")[0], dimensions, "80", 80, 89);
|
||||||
|
makeItem(i.dimension.split("x")[0], dimensions, "90", 90, 99);
|
||||||
|
makeItem(i.dimension.split("x")[0], dimensions, "100", 100, 109);
|
||||||
|
}
|
||||||
if (tags.indexOf(i.tags) === -1 && i.tags != "" && i.tags != "—")
|
if (tags.indexOf(i.tags) === -1 && i.tags != "" && i.tags != "—")
|
||||||
{
|
{
|
||||||
splitTags = i.tags.split(", ");
|
splitTags = i.tags.split(", ");
|
||||||
@ -62,145 +167,134 @@ jQuery(document).ready(function($)
|
|||||||
|
|
||||||
genres.sort();
|
genres.sort();
|
||||||
themes.sort();
|
themes.sort();
|
||||||
|
helps.sort();
|
||||||
places.sort(Intl.Collator().compare);
|
places.sort(Intl.Collator().compare);
|
||||||
tags.sort(Intl.Collator().compare);
|
tags.sort(Intl.Collator().compare);
|
||||||
|
dimensions.sort(function(a, b) { return a - b; });
|
||||||
|
var targetMonths = ["Janvier", "Février", "Mars", "Avril", "Mai", "Juin", "Juillet", "Août", "Septembre", "Octobre", "Novembre", "Décembre"];
|
||||||
|
months.sort(function(a, b) { return targetMonths.indexOf(a) - targetMonths.indexOf(b); });
|
||||||
|
var targetPhotos = ["none", "bad", "ok", "good"];
|
||||||
|
photos.sort(function(a, b) { return targetPhotos.indexOf(a) - targetPhotos.indexOf(b); });
|
||||||
|
|
||||||
for (genre of genres)
|
return {"photos": photos, "years": years, "months": months, "genres": genres, "themes": themes, "places": places, "tags": tags, "dimensions": dimensions, "helps": helps};
|
||||||
{
|
|
||||||
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)
|
// gather data from url to check available options
|
||||||
|
function gatherURLdata()
|
||||||
{
|
{
|
||||||
html = '<span><input type="checkbox" id="' + theme + '" name="theme" value="' + theme + '"></input>\n';
|
selectedYears = [];
|
||||||
html += '<label for="' + theme + '">' + theme + '</label></span>';
|
selectedDimensions = [];
|
||||||
$(".box.themes .item-cont").append(html);
|
selectedPhotos = params.photo;
|
||||||
|
if (selectedPhotos.includes("exist"))
|
||||||
|
{
|
||||||
|
if (selectedPhotos.indexOf("bad") === -1) selectedPhotos.push("bad");
|
||||||
|
if (selectedPhotos.indexOf("ok") === -1) selectedPhotos.push("ok");
|
||||||
|
if (selectedPhotos.indexOf("good") === -1) selectedPhotos.push("good");
|
||||||
|
}
|
||||||
|
selectedMonths = params.month;
|
||||||
|
selectedGenres = params.genre;
|
||||||
|
selectedThemes = params.theme;
|
||||||
|
selectedPlaces = params.place;
|
||||||
|
selectedTags = params.tag;
|
||||||
|
selectedHelps = params.help;
|
||||||
|
for (p of params.year)
|
||||||
|
{
|
||||||
|
if (p == "50s") for (i = 1956; i <= 1959; i++) selectedYears.push(i);
|
||||||
|
if (p == "60s") for (i = 1960; i <= 1969; i++) selectedYears.push(i);
|
||||||
|
if (p == "70s") for (i = 1970; i <= 1979; i++) selectedYears.push(i);
|
||||||
|
if (p == "80s") for (i = 1980; i <= 1989; i++) selectedYears.push(i);
|
||||||
|
if (p == "90s") for (i = 1990; i <= 1999; i++) selectedYears.push(i);
|
||||||
|
if (p == "00s") for (i = 2000; i <= 2009; i++) selectedYears.push(i);
|
||||||
|
if (p == "10s") for (i = 2010; i <= 2016; i++) selectedYears.push(i);
|
||||||
|
}
|
||||||
|
for (p of params.dimension)
|
||||||
|
{
|
||||||
|
if (p == "18") for (i = 18; i <= 19; i++) selectedDimensions.push(i);
|
||||||
|
if (p == "20") for (i = 20; i <= 29; i++) selectedDimensions.push(i);
|
||||||
|
if (p == "30") for (i = 30; i <= 39; i++) selectedDimensions.push(i);
|
||||||
|
if (p == "40") for (i = 40; i <= 49; i++) selectedDimensions.push(i);
|
||||||
|
if (p == "50") for (i = 50; i <= 59; i++) selectedDimensions.push(i);
|
||||||
|
if (p == "60") for (i = 60; i <= 69; i++) selectedDimensions.push(i);
|
||||||
|
if (p == "70") for (i = 70; i <= 79; i++) selectedDimensions.push(i);
|
||||||
|
if (p == "80") for (i = 80; i <= 89; i++) selectedDimensions.push(i);
|
||||||
|
if (p == "90") for (i = 90; i <= 99; i++) selectedDimensions.push(i);
|
||||||
|
if (p == "100") for (i = 100; i <= 109; i++) selectedDimensions.push(i);
|
||||||
|
}
|
||||||
|
return {"photos": selectedPhotos, "years": selectedYears, "months": selectedMonths, "genres": selectedGenres, "themes": selectedThemes,
|
||||||
|
"places": selectedPlaces, "tags": selectedTags, "dimensions": selectedDimensions, "helps": selectedHelps};
|
||||||
}
|
}
|
||||||
|
|
||||||
$(".box.places select").append('<option value="">Aucun</option');
|
var originalData = data;
|
||||||
for (place of places)
|
var originalAvailableOptions = gatherData();
|
||||||
$(".box.places select").append('<option value="' + place + '">' + place + '</option');
|
|
||||||
|
|
||||||
$(".box.tags select").append('<option value="">Aucun</option');
|
selectedOptions = gatherURLdata();
|
||||||
for (tag of tags)
|
filterData(selectedOptions);
|
||||||
$(".box.tags select").append('<option value="' + tag + '">' + tag + '</option');
|
|
||||||
|
|
||||||
|
// menu initial generation
|
||||||
|
$.getScript("scripts/explorer_menu.js", function()
|
||||||
|
{
|
||||||
|
generateMenu(originalAvailableOptions);
|
||||||
|
availableOptions = gatherData();
|
||||||
|
|
||||||
function URLGeneration()
|
userActionHandle(availableOptions);
|
||||||
|
URLGeneration(originalAvailableOptions);
|
||||||
|
updateMenu(availableOptions);
|
||||||
|
|
||||||
|
function handleVisualFilterChanges()
|
||||||
{
|
{
|
||||||
// populate checkboxes depending on URL
|
function makeFilterChanges()
|
||||||
function URLcheckBoxSelector(names, name, urlParam)
|
|
||||||
{
|
{
|
||||||
if (urlParam == "all")
|
selectedOptions = gatherURLdata();
|
||||||
|
data = originalData;
|
||||||
|
filterData(selectedOptions);
|
||||||
|
availableOptions = [];
|
||||||
|
availableOptions = gatherData();
|
||||||
|
updateMenu(availableOptions);
|
||||||
|
}
|
||||||
|
|
||||||
|
// handle tags
|
||||||
|
function handleTags()
|
||||||
{
|
{
|
||||||
$('input[name="'+names+'"]').prop("checked", true);
|
$('input[name="tags"]').change(function()
|
||||||
$('input[name="'+name+'"]').prop("disabled", true);
|
{
|
||||||
$('input[name="'+name+'"]').prop("checked", true);
|
params["tag"] = []; // remove filter
|
||||||
|
if (this.checked)
|
||||||
|
{
|
||||||
|
$('select[name="tag"] option[value=""]').prop('selected', true);
|
||||||
|
$('select[name="tag"]').attr('disabled', 'disabled');
|
||||||
|
$(".box.tags span:not(.first) select").parent().remove();
|
||||||
}
|
}
|
||||||
else
|
else
|
||||||
{
|
$('select[name="tag"]').removeAttr('disabled');
|
||||||
for (a of urlParam)
|
|
||||||
{
|
|
||||||
$('input[id="'+a+'"]').prop("checked", true);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// populate list depending on URL
|
makeFilterChanges();
|
||||||
function URLlistSelector(selector, name, param, names)
|
|
||||||
{
|
|
||||||
if (param.length >= 1)
|
|
||||||
$(selector + ' select').parent().remove();
|
|
||||||
for (a of param)
|
|
||||||
{
|
|
||||||
html = '<span><span class="inline">※ </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">※ </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);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
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);
|
|
||||||
$('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);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
function userActionHandle()
|
|
||||||
{
|
|
||||||
// if "all" is selected, check all other options and disable them
|
|
||||||
function allCheckBoxSelected(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);
|
|
||||||
}
|
|
||||||
});
|
});
|
||||||
}
|
|
||||||
|
|
||||||
// for places and tags
|
$('.box.tags .item-cont').delegate('select[name="tag"]', 'change', function()
|
||||||
function listOptionSelected(selector, name, names)
|
|
||||||
{
|
{
|
||||||
$(selector).on('change', 'select[name="' + name + '"]', function()
|
params.tag = []; // collect all tags from all dropdowns
|
||||||
|
$('.box.tags .item-cont select[name="tag"]').each(function()
|
||||||
{
|
{
|
||||||
|
if (params.tag.indexOf(this.value) === -1 && this.value != "")
|
||||||
|
params.tag.push(this.value);
|
||||||
|
});
|
||||||
|
|
||||||
if (this.value != "")
|
if (this.value != "")
|
||||||
{
|
{
|
||||||
createNewElem = true; // if we modify an existing element to a value, we don't delete it
|
createNewElem = true; // if we modify an existing element to a value, we don't delete it
|
||||||
$(selector + ' select').each(function()
|
$('.box.tags select').each(function()
|
||||||
{
|
{
|
||||||
if ($(this).val() == "")
|
if ($(this).val() == "")
|
||||||
createNewElem = false;
|
createNewElem = false;
|
||||||
});
|
});
|
||||||
if (createNewElem)
|
if (createNewElem)
|
||||||
{
|
{
|
||||||
html = '<span><span class="inline">※ </span><select name="' + name + '">';
|
html = '<span><span class="inline">※ </span><select name="tag">';
|
||||||
html += '<option value="">Aucun</option>';
|
html += '<option value="">Aucun filtre</option>';
|
||||||
for (a of names)
|
for (a of originalAvailableOptions.tags)
|
||||||
html += '<option value="' + a + '">' + a + '</option>';
|
html += '<option value="' + a + '">' + a + '</option>';
|
||||||
html += '</select></span>';
|
html += '</select></span>';
|
||||||
$(selector + " .item-cont").append(html);
|
$(".box.tags .item-cont").append(html);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
else
|
else
|
||||||
@ -208,191 +302,93 @@ jQuery(document).ready(function($)
|
|||||||
// if the element has no value, we delete it
|
// if the element has no value, we delete it
|
||||||
$(this).parent().remove();
|
$(this).parent().remove();
|
||||||
}
|
}
|
||||||
|
|
||||||
|
makeFilterChanges();
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
handleTags();
|
||||||
|
|
||||||
$("input").prop("checked", false); // by default, uncheck all options
|
function visualFilterCheckboxItem(name)
|
||||||
allCheckBoxSelected("years", "year");
|
{
|
||||||
allCheckBoxSelected("months", "month");
|
$('input[name="' + name + 's"]').change(function()
|
||||||
allCheckBoxSelected("dimensions", "dimension");
|
{
|
||||||
allCheckBoxSelected("genres", "genre");
|
params[name] = []; // remove filter
|
||||||
allCheckBoxSelected("themes", "theme");
|
makeFilterChanges();
|
||||||
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[name="' + name + '"]').change(function()
|
||||||
$('input[id="exist"]').click(function()
|
|
||||||
{
|
{
|
||||||
if ($(this).prop("checked") == true)
|
if (this.checked)
|
||||||
{
|
{
|
||||||
$('input[id="bad"]').prop("checked", true); $('input[id="bad"]').prop("disabled", true);
|
if (this.id == "exist") // photos special case
|
||||||
$('input[id="ok"]').prop("checked", true); $('input[id="ok"]').prop("disabled", true);
|
{
|
||||||
$('input[id="good"]').prop("checked", true); $('input[id="good"]').prop("disabled", true);
|
params[name].push("bad");
|
||||||
|
params[name].push("ok");
|
||||||
|
params[name].push("good");
|
||||||
|
}
|
||||||
|
params[name].push(this.id);
|
||||||
}
|
}
|
||||||
else
|
else
|
||||||
{
|
{
|
||||||
$('input[id="bad"]').prop("checked", false); $('input[id="bad"]').prop("disabled", false);
|
if (this.id == "exist") // photos special case
|
||||||
$('input[id="ok"]').prop("checked", false); $('input[id="ok"]').prop("disabled", false);
|
{
|
||||||
$('input[id="good"]').prop("checked", false); $('input[id="good"]').prop("disabled", false);
|
removeFromArray(params[name], "bad");
|
||||||
|
removeFromArray(params[name], "ok");
|
||||||
|
removeFromArray(params[name], "good");
|
||||||
}
|
}
|
||||||
|
removeFromArray(params[name], this.id);
|
||||||
|
}
|
||||||
|
|
||||||
|
makeFilterChanges();
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
// menu configurer show / hide
|
function visualFilterListItem(name)
|
||||||
$("article.explorer h2").click(function()
|
|
||||||
{
|
{
|
||||||
if ($(this).hasClass("active"))
|
$('input[name="' + name + 's"]').change(function()
|
||||||
{
|
{
|
||||||
$(this).removeClass("active");
|
params[name] = []; // remove filter
|
||||||
$("form").slideUp(200);
|
if (this.checked)
|
||||||
|
{
|
||||||
|
$('select[name="' + name + '"] option[value=""]').prop('selected', true);
|
||||||
|
$('select[name="' + name + '"]').attr('disabled', 'disabled');
|
||||||
}
|
}
|
||||||
else
|
else
|
||||||
{
|
$('select[name="' + name + '"]').removeAttr('disabled');
|
||||||
$(this).addClass("active");
|
|
||||||
$("form").slideDown(200);
|
makeFilterChanges();
|
||||||
}
|
|
||||||
});
|
});
|
||||||
|
|
||||||
// menu configurer child on mobile show/hide
|
$('select[name="' + name + '"]').change(function()
|
||||||
if ($(window).width() <= 600)
|
|
||||||
{
|
{
|
||||||
$("article.explorer .box h3").click(function()
|
if (this.value == "" && name == "place")
|
||||||
{
|
params[name].pop();
|
||||||
if ($(this).parent().hasClass("active"))
|
|
||||||
{
|
|
||||||
$(this).parent().removeClass("active");
|
|
||||||
$(this).parent().children(".item-cont").slideUp(200);
|
|
||||||
}
|
|
||||||
else
|
else
|
||||||
{
|
params[name].push(this.value);
|
||||||
$(this).parent().addClass("active");
|
|
||||||
$(this).parent().children(".item-cont").slideDown(200);
|
makeFilterChanges();
|
||||||
}
|
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
userActionHandle();
|
visualFilterCheckboxItem("photo");
|
||||||
URLGeneration();
|
visualFilterCheckboxItem("year");
|
||||||
|
visualFilterCheckboxItem("month");
|
||||||
|
visualFilterCheckboxItem("genre");
|
||||||
|
visualFilterCheckboxItem("theme");
|
||||||
|
visualFilterCheckboxItem("dimension");
|
||||||
|
visualFilterCheckboxItem("help");
|
||||||
|
visualFilterListItem("place");
|
||||||
}
|
}
|
||||||
|
handleVisualFilterChanges();
|
||||||
|
});
|
||||||
|
|
||||||
/*********************/
|
/*********************/
|
||||||
/** TABLE & GALLERY **/
|
/** 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 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 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 paramTag)
|
|
||||||
{
|
|
||||||
if (!splitTag.includes(t))
|
|
||||||
return false;
|
|
||||||
}
|
|
||||||
return true;
|
|
||||||
}
|
|
||||||
|
|
||||||
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;
|
|
||||||
}
|
|
||||||
|
|
||||||
// gallery vars
|
// gallery vars
|
||||||
var pageSize = 14;
|
window.pageSize = 14;
|
||||||
var paintingList = [];
|
window.paintingList = [];
|
||||||
|
|
||||||
function generateTable()
|
function generateTable()
|
||||||
{
|
{
|
||||||
@ -407,17 +403,6 @@ jQuery(document).ready(function($)
|
|||||||
else
|
else
|
||||||
res = true;
|
res = true;
|
||||||
|
|
||||||
// check URL parameters and compute result
|
|
||||||
if (paramYear != "") res = res && checkYear(i.year);
|
|
||||||
if (paramMonth != "") res = res && checkMonth(i.month);
|
|
||||||
if (paramDimension != "") res = res && checkDimension(i.dimension);
|
|
||||||
if (paramGenre != "") res = res && checkGenre(i.genre);
|
|
||||||
if (paramTheme != "") res = res && checkTheme(i.theme);
|
|
||||||
if (paramPlace != "") res = res && checkPlace(i.place);
|
|
||||||
if (paramTag != "") res = res && checkTag(i.tags);
|
|
||||||
if (paramPhoto != "") res = res && checkPhoto(i.photo);
|
|
||||||
if (paramHelp != "") res = res && checkHelp(i.help);
|
|
||||||
|
|
||||||
if (!res)
|
if (!res)
|
||||||
continue;
|
continue;
|
||||||
|
|
||||||
@ -461,6 +446,7 @@ jQuery(document).ready(function($)
|
|||||||
|
|
||||||
$("table").append(result);
|
$("table").append(result);
|
||||||
|
|
||||||
|
|
||||||
// gallery
|
// gallery
|
||||||
paintingList.push(i.number);
|
paintingList.push(i.number);
|
||||||
if (paintingList.length % (pageSize + 1) == 0)
|
if (paintingList.length % (pageSize + 1) == 0)
|
||||||
@ -471,6 +457,7 @@ jQuery(document).ready(function($)
|
|||||||
paintingHtml += 'active">';
|
paintingHtml += 'active">';
|
||||||
else
|
else
|
||||||
paintingHtml += 'inactive">';
|
paintingHtml += 'inactive">';
|
||||||
|
|
||||||
if (i.photo == "none")
|
if (i.photo == "none")
|
||||||
{
|
{
|
||||||
paintingHtml += '<a data-fancybox="exposition" href="images/unknown.jpg" data-fancybox-index="' + i.number + '">'
|
paintingHtml += '<a data-fancybox="exposition" href="images/unknown.jpg" data-fancybox-index="' + i.number + '">'
|
||||||
@ -481,6 +468,7 @@ jQuery(document).ready(function($)
|
|||||||
paintingHtml += '<a data-fancybox="exposition" href="photos/paintings/normal/' + i.number + '.jpg" data-fancybox-index="' + i.number + '">'
|
paintingHtml += '<a data-fancybox="exposition" href="photos/paintings/normal/' + i.number + '.jpg" data-fancybox-index="' + i.number + '">'
|
||||||
paintingHtml += '<img src="photos/paintings/mini/" alt="Tableau ' + i.number + '"></a>'
|
paintingHtml += '<img src="photos/paintings/mini/" alt="Tableau ' + i.number + '"></a>'
|
||||||
}
|
}
|
||||||
|
|
||||||
paintingHtml += '<span class="item-title">' + i.title;
|
paintingHtml += '<span class="item-title">' + i.title;
|
||||||
if (i.year != '—')
|
if (i.year != '—')
|
||||||
paintingHtml += ' (' + i.year + ')';
|
paintingHtml += ' (' + i.year + ')';
|
||||||
@ -498,7 +486,6 @@ jQuery(document).ready(function($)
|
|||||||
if (urlParams.get('page') != "")
|
if (urlParams.get('page') != "")
|
||||||
targetPage = urlParams.get('page');
|
targetPage = urlParams.get('page');
|
||||||
|
|
||||||
generateMenu();
|
|
||||||
var res = generateTable();
|
var res = generateTable();
|
||||||
|
|
||||||
if (res) // display table or no result depending of computed result
|
if (res) // display table or no result depending of computed result
|
||||||
@ -508,70 +495,15 @@ jQuery(document).ready(function($)
|
|||||||
$("form").slideUp(200);
|
$("form").slideUp(200);
|
||||||
$("article.explorer p.result").css("display", "block");
|
$("article.explorer p.result").css("display", "block");
|
||||||
|
|
||||||
|
// pagination configuration
|
||||||
// pagination
|
window.currentPage = 0;
|
||||||
function getPageRange()
|
window.previousArray = []
|
||||||
{
|
$.getScript("scripts/pagination.js", function() {
|
||||||
if (window.innerWidth >= 600)
|
paginationInit(data, paintingList, true);
|
||||||
return 6;
|
|
||||||
else if (window.innerWidth < 600 && window.innerWidth > 450)
|
|
||||||
return 4;
|
|
||||||
else
|
|
||||||
return 1;
|
|
||||||
}
|
|
||||||
|
|
||||||
var currentPage = 0;
|
|
||||||
var previousArray = []
|
|
||||||
var options =
|
|
||||||
{
|
|
||||||
dataSource: paintingList,
|
|
||||||
pageSize: pageSize,
|
|
||||||
pageRange: getPageRange(),
|
|
||||||
className: 'paginationjs-theme-ginou',
|
|
||||||
hideWhenLessThanOnePage: true,
|
|
||||||
callback: function (response, pagination)
|
|
||||||
{
|
|
||||||
currentPage = pagination.pageNumber;
|
|
||||||
urlParams = new URLSearchParams(window.location.search)
|
|
||||||
if (urlParams.get('page') == undefined)
|
|
||||||
{
|
|
||||||
window.history.replaceState('', '', window.location.pathname + window.location.search + '&page=' + currentPage + window.location.hash);
|
|
||||||
}
|
|
||||||
else
|
|
||||||
{
|
|
||||||
trimSearch = window.location.search.substr(0, window.location.search.lastIndexOf('&'));
|
|
||||||
window.history.replaceState('', '', window.location.pathname + trimSearch + '&page=' + currentPage + window.location.hash);
|
|
||||||
}
|
|
||||||
|
|
||||||
if (previousArray.length > 0)
|
|
||||||
{
|
|
||||||
for (i of previousArray)
|
|
||||||
$('[data-fancybox-index="'+i+'"]').parent().removeClass("active").addClass("inactive");
|
|
||||||
}
|
|
||||||
|
|
||||||
previousArray = response;
|
|
||||||
|
|
||||||
$.each(response, function(index, item)
|
|
||||||
{
|
|
||||||
$('[data-fancybox="exposition"][data-fancybox-index="'+item+'"]').parent().removeClass("inactive").addClass("active");
|
|
||||||
|
|
||||||
idx = item-1;
|
|
||||||
if (item >= 1000)
|
|
||||||
idx = item - 1000 + 383 - 1; // inédit: index starts at 1000 // 383: total number of paintings except inédit
|
|
||||||
|
|
||||||
if (data[idx].photo != "none")
|
|
||||||
$('[data-fancybox="exposition"][data-fancybox-index="'+item+'"] img').attr("src", "photos/paintings/mini/"+item+".jpg");
|
|
||||||
else
|
|
||||||
$('[data-fancybox="exposition"][data-fancybox-index="'+item+'"] img').attr("src", "images/unknown.jpg");
|
|
||||||
});
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
$('#pagination').pagination(options);
|
|
||||||
|
|
||||||
if (targetPage > 0)
|
if (targetPage > 0)
|
||||||
$("#pagination").pagination('go', targetPage);
|
$("#pagination").pagination('go', targetPage);
|
||||||
|
});
|
||||||
}
|
}
|
||||||
else
|
else
|
||||||
{
|
{
|
||||||
@ -579,90 +511,10 @@ jQuery(document).ready(function($)
|
|||||||
$("article.explorer p.result").css("display", "none");
|
$("article.explorer p.result").css("display", "none");
|
||||||
}
|
}
|
||||||
|
|
||||||
// on mobile, show only the first item slided down
|
|
||||||
if ($(window).width() <= 600)
|
|
||||||
{
|
|
||||||
$("article.explorer .container .box").each(function()
|
|
||||||
{
|
|
||||||
if (!$(this).hasClass('active'))
|
|
||||||
{
|
|
||||||
$(this).children(".item-cont").slideUp(200);
|
|
||||||
}
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
// change display: gallery/table
|
|
||||||
$(".style-select.frame").click(function()
|
|
||||||
{
|
|
||||||
$("table").hide();
|
|
||||||
$("#gallery").show();
|
|
||||||
})
|
|
||||||
$(".style-select.list").click(function()
|
|
||||||
{
|
|
||||||
$("#gallery").hide();
|
|
||||||
$("table").show();
|
|
||||||
})
|
|
||||||
|
|
||||||
|
|
||||||
// fancybox configuration
|
// fancybox configuration
|
||||||
$('[data-fancybox="exposition"], [data-fancybox="exposition-list"]').fancybox(
|
$.getScript("scripts/fancybox.js", function() {
|
||||||
{
|
fancyboxInit(data, true);
|
||||||
infobar: false,
|
|
||||||
toolbar: true,
|
|
||||||
smallBtn: false,
|
|
||||||
buttons: ["arrowLeft", "arrowRight", "close"],
|
|
||||||
arrows: false,
|
|
||||||
transitionEffect: "fade",
|
|
||||||
baseClass: 'fancybox-custom-layout',
|
|
||||||
mobile: {
|
|
||||||
preventCaptionOverlap: true,
|
|
||||||
},
|
|
||||||
|
|
||||||
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
|
|
||||||
|
|
||||||
function generateCartel()
|
|
||||||
{
|
|
||||||
cartel = '<div id="info"><span class="info">';
|
|
||||||
cartel += '<a href="painting.html?number=' + data[idx].number + '">ℹ︎</span></a></span>';
|
|
||||||
cartel += '<span class="title">' + data[idx].title + '</span><span class="year">';
|
|
||||||
if (data[idx].month != '—')
|
|
||||||
cartel += data[idx].month + ' ';
|
|
||||||
if (data[idx].year != '—')
|
|
||||||
cartel += data[idx].year;
|
|
||||||
cartel += ' </span><span class="format">' + data[idx].paint + ' sur ' + data[idx].support.toLowerCase();
|
|
||||||
if (data[idx].dimension != '—')
|
|
||||||
cartel += ' (' + data[idx].dimension + ')';
|
|
||||||
cartel += '</span>';
|
|
||||||
if (data[idx].comment != '—')
|
|
||||||
cartel += '<span class="comment">' + data[idx].comment + '</span>';
|
|
||||||
cartel += '</div>';
|
|
||||||
return cartel;
|
|
||||||
}
|
|
||||||
|
|
||||||
return generateCartel();
|
|
||||||
},
|
|
||||||
|
|
||||||
beforeShow : function(instance, current)
|
|
||||||
{
|
|
||||||
if (current.opts.fancyboxIndex > previousArray[previousArray.length - 1])
|
|
||||||
$('#pagination').pagination('next');
|
|
||||||
|
|
||||||
if (current.opts.fancyboxIndex < previousArray[0])
|
|
||||||
$('#pagination').pagination('previous');
|
|
||||||
},
|
|
||||||
|
|
||||||
afterClose : function(instance)
|
|
||||||
{
|
|
||||||
// after closing, changing the URL again. I guess there's no better way except by changing fancybox code...
|
|
||||||
// (apparently fancybox changes back to the original url it had when starting)
|
|
||||||
urlParams = new URLSearchParams(window.location.search)
|
|
||||||
trimSearch = window.location.search.substr(0, window.location.search.lastIndexOf('&'));
|
|
||||||
window.history.replaceState('', '', window.location.pathname + trimSearch + '&page=' + currentPage + window.location.hash);
|
|
||||||
}
|
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
350
scripts/explorer_menu.js
Normal file
350
scripts/explorer_menu.js
Normal file
@ -0,0 +1,350 @@
|
|||||||
|
function generateMenu(availableOptions)
|
||||||
|
{
|
||||||
|
function createPhotoName(photo)
|
||||||
|
{
|
||||||
|
if (photo == "none") return "☆ manquant";
|
||||||
|
if (photo == "bad") return "★ mauvais";
|
||||||
|
if (photo == "ok") return "★★ acceptable";
|
||||||
|
if (photo == "good") return "★★★ bon";
|
||||||
|
}
|
||||||
|
|
||||||
|
function createYearName(year)
|
||||||
|
{
|
||||||
|
if (year == "50s") return "1956 - 1959";
|
||||||
|
if (year == "60s") return "1960 - 1969";
|
||||||
|
if (year == "70s") return "1970 - 1979";
|
||||||
|
if (year == "80s") return "1980 - 1989";
|
||||||
|
if (year == "90s") return "1990 - 1999";
|
||||||
|
if (year == "00s") return "2000 - 2009";
|
||||||
|
if (year == "10s") return "2010 - 2016";
|
||||||
|
}
|
||||||
|
|
||||||
|
function createDimensionName(dimension)
|
||||||
|
{
|
||||||
|
if (dimension == "18") return "< 20cm";
|
||||||
|
if (dimension == "20") return "20cm - 29cm";
|
||||||
|
if (dimension == "30") return "30cm - 39cm";
|
||||||
|
if (dimension == "40") return "40cm - 49cm";
|
||||||
|
if (dimension == "50") return "50cm - 59cm";
|
||||||
|
if (dimension == "60") return "60cm - 69cm";
|
||||||
|
if (dimension == "70") return "70cm - 79cm";
|
||||||
|
if (dimension == "80") return "80cm - 89cm";
|
||||||
|
if (dimension == "90") return "90cm - 99cm";
|
||||||
|
if (dimension == "100") return ">= 100cm";
|
||||||
|
}
|
||||||
|
|
||||||
|
function createHelpName(photo)
|
||||||
|
{
|
||||||
|
if (photo == "yes") return '<img width="5rem" src="styles/icons/exclamation-mark.svg" alt="Oui"> Oui';
|
||||||
|
if (photo == "no") return "Non";
|
||||||
|
}
|
||||||
|
|
||||||
|
hasExist = false;
|
||||||
|
for (photo of availableOptions.photos)
|
||||||
|
{
|
||||||
|
if (!hasExist && (photo == "bad" || photo == "ok" || photo == "good"))
|
||||||
|
{
|
||||||
|
html = '<span><input type="checkbox" id="exist" name="photo" value="exist"></input>\n';
|
||||||
|
html += '<label for="exist">Disponible</label></span>';
|
||||||
|
$(".box.photos .item-cont .generated").append(html);
|
||||||
|
hasExist = true;
|
||||||
|
}
|
||||||
|
html = '<span><input type="checkbox" id="' + photo + '" name="photo" value="' + photo + '"></input>\n';
|
||||||
|
html += '<label for="' + photo + '">' + createPhotoName(photo) + '</label></span>';
|
||||||
|
$(".box.photos .item-cont .generated").append(html);
|
||||||
|
}
|
||||||
|
|
||||||
|
for (year of availableOptions.years)
|
||||||
|
{
|
||||||
|
html = '<span><input type="checkbox" id="' + year + '" name="year" value="' + year + '"></input>\n';
|
||||||
|
html += '<label for="' + year + '">' + createYearName(year) + '</label></span>';
|
||||||
|
$(".box.years .item-cont .generated").append(html);
|
||||||
|
}
|
||||||
|
|
||||||
|
for (month of availableOptions.months)
|
||||||
|
{
|
||||||
|
html = '<span><input type="checkbox" id="' + month + '" name="month" value="' + month + '"></input>\n';
|
||||||
|
html += '<label for="' + month + '">' + month + '</label></span>';
|
||||||
|
$(".box.months .item-cont .generated").append(html);
|
||||||
|
}
|
||||||
|
|
||||||
|
for (genre of availableOptions.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 .generated").append(html);
|
||||||
|
}
|
||||||
|
|
||||||
|
for (theme of availableOptions.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 .generated").append(html);
|
||||||
|
}
|
||||||
|
|
||||||
|
for (dimension of availableOptions.dimensions)
|
||||||
|
{
|
||||||
|
html = '<span><input type="checkbox" id="' + dimension + '" name="dimension" value="' + dimension + '"></input>\n';
|
||||||
|
html += '<label for="' + dimension + '">' + createDimensionName(dimension) + '</label></span>';
|
||||||
|
$(".box.dimensions .item-cont .generated").append(html);
|
||||||
|
}
|
||||||
|
|
||||||
|
for (help of availableOptions.helps)
|
||||||
|
{
|
||||||
|
html = '<span><input type="checkbox" id="' + help + '" name="help" value="' + help + '"></input>\n';
|
||||||
|
html += '<label for="' + help + '">' + createHelpName(help) + '</label></span>';
|
||||||
|
$(".box.help .item-cont .generated").append(html);
|
||||||
|
}
|
||||||
|
|
||||||
|
$(".box.places select").append('<option value="">Aucun filtre</option');
|
||||||
|
for (place of availableOptions.places)
|
||||||
|
$(".box.places select").append('<option value="' + place + '">' + place + '</option');
|
||||||
|
|
||||||
|
$(".box.tags select").append('<option value="">Aucun filtre</option');
|
||||||
|
for (tag of availableOptions.tags)
|
||||||
|
$(".box.tags select").append('<option value="' + tag + '">' + tag + '</option');
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
function updateMenu(availableOptions)
|
||||||
|
{
|
||||||
|
function checkItem(name, array)
|
||||||
|
{
|
||||||
|
$('.' + name + ' .item-cont span input').each(function()
|
||||||
|
{
|
||||||
|
if (!array.includes($(this).prop("value")))
|
||||||
|
{
|
||||||
|
if ($(this).prop("value") != "all" && $(this).prop("value") != "exist")
|
||||||
|
$(this).parent().addClass("filter");
|
||||||
|
if ($(this).prop("value") == "exist") // special case for "exist" in photos
|
||||||
|
{
|
||||||
|
if (array.includes("none") && !array.includes("bad") && !array.includes("ok") && !array.includes("good"))
|
||||||
|
$(this).parent().addClass("filter");
|
||||||
|
else
|
||||||
|
$(this).parent().removeClass("filter");
|
||||||
|
}
|
||||||
|
}
|
||||||
|
else
|
||||||
|
$(this).parent().removeClass("filter");
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
function checkListItem(name, array)
|
||||||
|
{
|
||||||
|
$('.' + name + ' select option').each(function()
|
||||||
|
{
|
||||||
|
if (!array.includes($(this).prop("value")))
|
||||||
|
{
|
||||||
|
if ($(this).prop("value") != "")
|
||||||
|
{
|
||||||
|
$(this).hide();
|
||||||
|
$(this).attr('disabled', 'disabled'); // for iOS
|
||||||
|
}
|
||||||
|
}
|
||||||
|
else
|
||||||
|
{
|
||||||
|
$(this).show();
|
||||||
|
$(this).removeAttr('disabled'); // for iOS
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
checkItem("photos", availableOptions.photos);
|
||||||
|
checkItem("years", availableOptions.years);
|
||||||
|
checkItem("months", availableOptions.months);
|
||||||
|
checkItem("genres", availableOptions.genres);
|
||||||
|
checkItem("themes", availableOptions.themes);
|
||||||
|
checkItem("dimensions", availableOptions.dimensions);
|
||||||
|
checkItem("help", availableOptions.helps);
|
||||||
|
|
||||||
|
checkListItem("places", availableOptions.places);
|
||||||
|
checkListItem("tags", availableOptions.tags);
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
function URLGeneration(availableOptions)
|
||||||
|
{
|
||||||
|
// populate checkboxes depending on URL
|
||||||
|
function URLcheckBoxSelector(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);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 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">※ </span><select name="' + name + '">';
|
||||||
|
html += '<option value="">Aucun filtre</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 && name != "place")
|
||||||
|
{
|
||||||
|
html = '<span><span class="inline">※ </span><select name="' + name + '">';
|
||||||
|
html += '<option value="">Aucun filtre</option>';
|
||||||
|
for (i of names)
|
||||||
|
html += '<option value="' + i + '">' + i + '</option>';
|
||||||
|
html += '</select></span>';
|
||||||
|
$(selector + ' .item-cont').append(html);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
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, availableOptions.places);
|
||||||
|
URLlistSelector(".box.tags", "tag", paramTag, availableOptions.tags);
|
||||||
|
|
||||||
|
// URL special case for photos with "exist"
|
||||||
|
if (paramPhoto.includes("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);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
function userActionHandle(availableOptions)
|
||||||
|
{
|
||||||
|
// if "all" is selected, check all other options and disable them
|
||||||
|
function allCheckBoxSelected(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
|
||||||
|
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");
|
||||||
|
|
||||||
|
// 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()
|
||||||
|
{
|
||||||
|
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);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
// on mobile, show only the first item slided down
|
||||||
|
if ($(window).width() <= 600)
|
||||||
|
{
|
||||||
|
$("article.explorer .container .box").each(function()
|
||||||
|
{
|
||||||
|
if (!$(this).hasClass('active'))
|
||||||
|
{
|
||||||
|
$(this).children(".item-cont").slideUp(200);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
// change display: gallery/table
|
||||||
|
$(".style-select.frame").click(function()
|
||||||
|
{
|
||||||
|
$("table").hide();
|
||||||
|
$("#gallery").show();
|
||||||
|
});
|
||||||
|
$(".style-select.list").click(function()
|
||||||
|
{
|
||||||
|
$("#gallery").hide();
|
||||||
|
$("table").show();
|
||||||
|
});
|
||||||
|
}
|
||||||
@ -2,7 +2,7 @@ jQuery(document).ready(function($)
|
|||||||
{
|
{
|
||||||
$.getJSON("data.json", function(data)
|
$.getJSON("data.json", function(data)
|
||||||
{
|
{
|
||||||
var pageSize = 14;
|
window.pageSize = 14;
|
||||||
var paintingList = [];
|
var paintingList = [];
|
||||||
|
|
||||||
canDisplay = true;
|
canDisplay = true;
|
||||||
@ -38,110 +38,19 @@ jQuery(document).ready(function($)
|
|||||||
if (urlParams.get('page') != "")
|
if (urlParams.get('page') != "")
|
||||||
targetPage = urlParams.get('page');
|
targetPage = urlParams.get('page');
|
||||||
|
|
||||||
function getPageRange()
|
// pagination configuration
|
||||||
{
|
window.currentPage = 0;
|
||||||
if (window.innerWidth >= 600)
|
window.previousArray = [];
|
||||||
return null;
|
$.getScript("scripts/pagination.js", function() {
|
||||||
else if (window.innerWidth < 600 && window.innerWidth > 450)
|
paginationInit(data, paintingList, false);
|
||||||
return 4;
|
|
||||||
else
|
|
||||||
return 1;
|
|
||||||
}
|
|
||||||
|
|
||||||
var currentPage = 0;
|
|
||||||
var previousArray = []
|
|
||||||
var options =
|
|
||||||
{
|
|
||||||
dataSource: paintingList,
|
|
||||||
pageSize: pageSize,
|
|
||||||
pageRange: getPageRange(),
|
|
||||||
className: 'paginationjs-theme-ginou',
|
|
||||||
hideWhenLessThanOnePage: true,
|
|
||||||
callback: function (response, pagination)
|
|
||||||
{
|
|
||||||
currentPage = pagination.pageNumber;
|
|
||||||
window.history.replaceState('', '', window.location.pathname + '?page=' + currentPage + window.location.hash);
|
|
||||||
|
|
||||||
if (previousArray.length > 0)
|
|
||||||
{
|
|
||||||
for (i of previousArray)
|
|
||||||
$('[data-fancybox-index="'+i+'"]').parent().removeClass("active").addClass("inactive");
|
|
||||||
}
|
|
||||||
|
|
||||||
previousArray = response;
|
|
||||||
|
|
||||||
$.each(response, function(index, item)
|
|
||||||
{
|
|
||||||
$('[data-fancybox-index="'+item+'"]').parent().removeClass("inactive").addClass("active");
|
|
||||||
$('[data-fancybox-index="'+item+'"] img').attr("src", "photos/paintings/mini/"+item+".jpg");
|
|
||||||
});
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
$('#pagination').pagination(options);
|
|
||||||
|
|
||||||
if (targetPage > 0)
|
if (targetPage > 0)
|
||||||
$("#pagination").pagination('go', targetPage);
|
$("#pagination").pagination('go', targetPage);
|
||||||
|
});
|
||||||
|
|
||||||
|
// fancybox configuration
|
||||||
$('[data-fancybox="exposition"]').fancybox(
|
$.getScript("scripts/fancybox.js", function() {
|
||||||
{
|
fancyboxInit(data, false);
|
||||||
selector: '.gallery a',
|
|
||||||
infobar: false,
|
|
||||||
toolbar: true,
|
|
||||||
smallBtn: false,
|
|
||||||
buttons: ["arrowLeft", "arrowRight", "close"],
|
|
||||||
arrows: false,
|
|
||||||
transitionEffect: "fade",
|
|
||||||
baseClass: 'fancybox-custom-layout',
|
|
||||||
mobile: {
|
|
||||||
preventCaptionOverlap: true,
|
|
||||||
},
|
|
||||||
|
|
||||||
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
|
|
||||||
|
|
||||||
function generateCartel()
|
|
||||||
{
|
|
||||||
cartel = '<div id="info"><span class="info">';
|
|
||||||
cartel += '<a href="painting.html?number=' + data[idx].number + '">ℹ︎</span></a></span>';
|
|
||||||
cartel += '<span class="title">' + data[idx].title + '</span><span class="year">';
|
|
||||||
if (data[idx].month != '—')
|
|
||||||
cartel += data[idx].month + ' ';
|
|
||||||
if (data[idx].year != '—')
|
|
||||||
cartel += data[idx].year;
|
|
||||||
cartel += ' </span><span class="format">' + data[idx].paint + ' sur ' + data[idx].support.toLowerCase();
|
|
||||||
if (data[idx].dimension != '—')
|
|
||||||
cartel += ' (' + data[idx].dimension + ')';
|
|
||||||
cartel += '</span>';
|
|
||||||
if (data[idx].comment != '—')
|
|
||||||
cartel += '<span class="comment">' + data[idx].comment + '</span>';
|
|
||||||
cartel += '</div>';
|
|
||||||
return cartel;
|
|
||||||
}
|
|
||||||
|
|
||||||
return generateCartel();
|
|
||||||
},
|
|
||||||
|
|
||||||
beforeShow : function(instance, current)
|
|
||||||
{
|
|
||||||
if (current.opts.fancyboxIndex > previousArray[previousArray.length - 1])
|
|
||||||
$('#pagination').pagination('next');
|
|
||||||
|
|
||||||
if (current.opts.fancyboxIndex < previousArray[0])
|
|
||||||
$('#pagination').pagination('previous');
|
|
||||||
},
|
|
||||||
|
|
||||||
afterClose : function(instance)
|
|
||||||
{
|
|
||||||
// after closing, changing the URL again. I guess there's no better way except by changing fancybox code...
|
|
||||||
// (apparently fancybox changes back to the original url it had when starting)
|
|
||||||
window.history.replaceState('', '', window.location.pathname + '?page=' + currentPage + window.location.hash);
|
|
||||||
}
|
|
||||||
|
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
71
scripts/fancybox.js
Normal file
71
scripts/fancybox.js
Normal file
@ -0,0 +1,71 @@
|
|||||||
|
function fancyboxInit(data, explorer)
|
||||||
|
{
|
||||||
|
$('[data-fancybox="exposition"], [data-fancybox="exposition-list"]').fancybox(
|
||||||
|
{
|
||||||
|
selector: '.gallery a',
|
||||||
|
infobar: false,
|
||||||
|
toolbar: true,
|
||||||
|
smallBtn: false,
|
||||||
|
buttons: ["arrowLeft", "arrowRight", "close"],
|
||||||
|
arrows: false,
|
||||||
|
transitionEffect: "fade",
|
||||||
|
baseClass: 'fancybox-custom-layout',
|
||||||
|
mobile: {
|
||||||
|
preventCaptionOverlap: true,
|
||||||
|
},
|
||||||
|
|
||||||
|
caption: function(instance, item)
|
||||||
|
{
|
||||||
|
var idx = 0; // search the index of the painting of filtered data
|
||||||
|
for (i = 0; i < data.length; i++)
|
||||||
|
{
|
||||||
|
if (data[i].number == item.opts.fancyboxIndex)
|
||||||
|
idx = i;
|
||||||
|
}
|
||||||
|
|
||||||
|
function generateCartel()
|
||||||
|
{
|
||||||
|
cartel = '<div id="info"><span class="info">';
|
||||||
|
cartel += '<a href="painting.html?number=' + data[idx].number + '">ℹ︎</span></a></span>';
|
||||||
|
cartel += '<span class="title">' + data[idx].title + '</span><span class="year">';
|
||||||
|
if (data[idx].month != '—')
|
||||||
|
cartel += data[idx].month + ' ';
|
||||||
|
if (data[idx].year != '—')
|
||||||
|
cartel += data[idx].year;
|
||||||
|
cartel += ' </span><span class="format">' + data[idx].paint + ' sur ' + data[idx].support.toLowerCase();
|
||||||
|
if (data[idx].dimension != '—')
|
||||||
|
cartel += ' (' + data[idx].dimension + ')';
|
||||||
|
cartel += '</span>';
|
||||||
|
if (data[idx].comment != '—')
|
||||||
|
cartel += '<span class="comment">' + data[idx].comment + '</span>';
|
||||||
|
cartel += '</div>';
|
||||||
|
return cartel;
|
||||||
|
}
|
||||||
|
|
||||||
|
return generateCartel();
|
||||||
|
},
|
||||||
|
|
||||||
|
beforeShow : function(instance, current)
|
||||||
|
{
|
||||||
|
if (current.opts.fancyboxIndex > previousArray[previousArray.length - 1])
|
||||||
|
$('#pagination').pagination('next');
|
||||||
|
|
||||||
|
if (current.opts.fancyboxIndex < previousArray[0])
|
||||||
|
$('#pagination').pagination('previous');
|
||||||
|
},
|
||||||
|
|
||||||
|
afterClose : function(instance)
|
||||||
|
{
|
||||||
|
// after closing, changing the URL again. I guess there's no better way except by changing fancybox code...
|
||||||
|
// (apparently fancybox changes back to the original url it had when starting)
|
||||||
|
if (explorer)
|
||||||
|
{
|
||||||
|
urlParams = new URLSearchParams(window.location.search)
|
||||||
|
trimSearch = window.location.search.substr(0, window.location.search.lastIndexOf('&'));
|
||||||
|
window.history.replaceState('', '', window.location.pathname + trimSearch + '&page=' + currentPage + window.location.hash);
|
||||||
|
}
|
||||||
|
else
|
||||||
|
window.history.replaceState('', '', window.location.pathname + '?page=' + currentPage + window.location.hash);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
78
scripts/pagination.js
Normal file
78
scripts/pagination.js
Normal file
@ -0,0 +1,78 @@
|
|||||||
|
function paginationInit(data, paintingList, explorer)
|
||||||
|
{
|
||||||
|
function getPageRange()
|
||||||
|
{
|
||||||
|
if (window.innerWidth >= 600)
|
||||||
|
return explorer ? 6 : null;
|
||||||
|
else if (window.innerWidth < 600 && window.innerWidth > 450)
|
||||||
|
return 4;
|
||||||
|
else
|
||||||
|
return 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
var options =
|
||||||
|
{
|
||||||
|
dataSource: paintingList,
|
||||||
|
pageSize: pageSize,
|
||||||
|
pageRange: getPageRange(),
|
||||||
|
className: 'paginationjs-theme-ginou',
|
||||||
|
hideWhenLessThanOnePage: true,
|
||||||
|
callback: function (response, pagination)
|
||||||
|
{
|
||||||
|
currentPage = pagination.pageNumber;
|
||||||
|
// url handling
|
||||||
|
if (explorer)
|
||||||
|
{
|
||||||
|
urlParams = new URLSearchParams(window.location.search)
|
||||||
|
if (urlParams.get('page') == undefined)
|
||||||
|
{
|
||||||
|
window.history.replaceState('', '', window.location.pathname + window.location.search + '&page=' + currentPage + window.location.hash);
|
||||||
|
}
|
||||||
|
else
|
||||||
|
{
|
||||||
|
trimSearch = window.location.search.substr(0, window.location.search.lastIndexOf('&'));
|
||||||
|
window.history.replaceState('', '', window.location.pathname + trimSearch + '&page=' + currentPage + window.location.hash);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
else
|
||||||
|
{
|
||||||
|
window.history.replaceState('', '', window.location.pathname + '?page=' + currentPage + window.location.hash);
|
||||||
|
}
|
||||||
|
|
||||||
|
if (previousArray.length > 0)
|
||||||
|
{
|
||||||
|
for (i of previousArray)
|
||||||
|
$('[data-fancybox-index="'+i+'"]').parent().removeClass("active").addClass("inactive");
|
||||||
|
}
|
||||||
|
|
||||||
|
previousArray = response;
|
||||||
|
|
||||||
|
infoArray = []
|
||||||
|
for (a of response)
|
||||||
|
{
|
||||||
|
for (d of data)
|
||||||
|
{
|
||||||
|
if (a == d.number)
|
||||||
|
infoArray.push({"number": d.number, "photo": d.photo});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
$.each(response, function(index, item)
|
||||||
|
{
|
||||||
|
for (i of infoArray)
|
||||||
|
{
|
||||||
|
if (i.number == item)
|
||||||
|
{
|
||||||
|
$('[data-fancybox="exposition"][data-fancybox-index="' + item + '"]').parent().removeClass("inactive").addClass("active");
|
||||||
|
if (i.photo != "none")
|
||||||
|
$('[data-fancybox="exposition"][data-fancybox-index="' + item + '"] img').attr("src", "photos/paintings/mini/" + item + ".jpg");
|
||||||
|
else
|
||||||
|
$('[data-fancybox="exposition"][data-fancybox-index="' + item + '"] img').attr("src", "images/unknown.jpg");
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
$('#pagination').pagination(options);
|
||||||
|
}
|
||||||
@ -2,14 +2,17 @@ jQuery(document).ready(function($)
|
|||||||
{
|
{
|
||||||
const urlParams = new URLSearchParams(window.location.search);
|
const urlParams = new URLSearchParams(window.location.search);
|
||||||
const pageId = urlParams.get('number');
|
const pageId = urlParams.get('number');
|
||||||
if (pageId > 1000)
|
|
||||||
i = pageId - 1000 + 383 - 1; // inédit: index starts at 1000 // 383: total number of paintings except inédit
|
|
||||||
else
|
|
||||||
i = pageId - 1; // index is 0
|
|
||||||
|
|
||||||
$.getJSON("data.json", function(data)
|
$.getJSON("data.json", function(data)
|
||||||
{
|
{
|
||||||
if (!data[i]) // the number specified in URL does not exist
|
var idx = 0; // search the index of the painting of filtered data
|
||||||
|
for (i = 0; i < data.length; i++)
|
||||||
|
{
|
||||||
|
if (data[i].number == pageId)
|
||||||
|
idx = i;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (!data[idx]) // the number specified in URL does not exist
|
||||||
{
|
{
|
||||||
$(".container").css("display", "none");
|
$(".container").css("display", "none");
|
||||||
$("#info").css("display", "none");
|
$("#info").css("display", "none");
|
||||||
@ -18,75 +21,75 @@ jQuery(document).ready(function($)
|
|||||||
|
|
||||||
function GetNumber()
|
function GetNumber()
|
||||||
{
|
{
|
||||||
if (data[i].number > 1000)
|
if (data[idx].number > 1000)
|
||||||
return "Inédit";
|
return "Inédit";
|
||||||
return data[i].number;
|
return data[idx].number;
|
||||||
}
|
}
|
||||||
|
|
||||||
// page title
|
// page title
|
||||||
$("head title").append(GetNumber());
|
$("head title").append(GetNumber());
|
||||||
|
|
||||||
// photo
|
// photo
|
||||||
if (data[i].photo != "none")
|
if (data[idx].photo != "none")
|
||||||
$(".photo img").attr("src", "photos/paintings/normal/" + data[i].number + ".jpg");
|
$(".photo img").attr("src", "photos/paintings/normal/" + data[idx].number + ".jpg");
|
||||||
else
|
else
|
||||||
$(".photo img").attr("src", "images/unknown.jpg");
|
$(".photo img").attr("src", "images/unknown.jpg");
|
||||||
$(".photo img").attr("alt", "Tableau " + data[i].number);
|
$(".photo img").attr("alt", "Tableau " + data[idx].number);
|
||||||
|
|
||||||
// metadata
|
// metadata
|
||||||
$(".metadata .content.number").append(GetNumber());
|
$(".metadata .content.number").append(GetNumber());
|
||||||
if (data[i].month != "—")
|
if (data[idx].month != "—")
|
||||||
$(".metadata .content.date").append(data[i].month + " " + data[i].year);
|
$(".metadata .content.date").append(data[idx].month + " " + data[idx].year);
|
||||||
else
|
else
|
||||||
$(".metadata .content.date").append(data[i].year);
|
$(".metadata .content.date").append(data[idx].year);
|
||||||
|
|
||||||
$(".metadata .content.dimension").append(data[i].dimension);
|
$(".metadata .content.dimension").append(data[idx].dimension);
|
||||||
$(".metadata .content.support").append(data[i].support);
|
$(".metadata .content.support").append(data[idx].support);
|
||||||
$(".metadata .content.genre").append(data[i].genre);
|
$(".metadata .content.genre").append(data[idx].genre);
|
||||||
$(".metadata .content.theme").append(data[i].theme);
|
$(".metadata .content.theme").append(data[idx].theme);
|
||||||
$(".metadata .content.place").append(data[i].place);
|
$(".metadata .content.place").append(data[idx].place);
|
||||||
|
|
||||||
if (data[i].photo == "none") photoState = "aucune";
|
if (data[idx].photo == "none") photoState = "aucune";
|
||||||
if (data[i].photo == "bad") photoState = "mauvais";
|
if (data[idx].photo == "bad") photoState = "mauvais";
|
||||||
if (data[i].photo == "ok") photoState = "acceptable";
|
if (data[idx].photo == "ok") photoState = "acceptable";
|
||||||
if (data[i].photo == "good") photoState = "bon";
|
if (data[idx].photo == "good") photoState = "bon";
|
||||||
$(".metadata .content.photo").append(photoState);
|
$(".metadata .content.photo").append(photoState);
|
||||||
|
|
||||||
if (data[i].help == "yes")
|
if (data[idx].help == "yes")
|
||||||
$(".metadata .content.help").append('<a href="informations.html"><strong>oui (!)</strong></a>');
|
$(".metadata .content.help").append('<a href="informations.html"><strong>oui (!)</strong></a>');
|
||||||
else
|
else
|
||||||
$(".metadata .content.help").append("non");
|
$(".metadata .content.help").append("non");
|
||||||
|
|
||||||
if (data[i].tags != "—")
|
if (data[idx].tags != "—")
|
||||||
$(".metadata .content.tag").append(data[i].tags);
|
$(".metadata .content.tag").append(data[idx].tags);
|
||||||
else
|
else
|
||||||
$(".metadata .content.tag").parent().css("display", "none");
|
$(".metadata .content.tag").parent().css("display", "none");
|
||||||
|
|
||||||
if (data[i].comment != "—")
|
if (data[idx].comment != "—")
|
||||||
$(".metadata .content.comment").append(data[i].comment);
|
$(".metadata .content.comment").append(data[idx].comment);
|
||||||
else
|
else
|
||||||
$(".metadata .content.comment").parent().css("display", "none");
|
$(".metadata .content.comment").parent().css("display", "none");
|
||||||
|
|
||||||
if (data[i].photo != "none")
|
if (data[idx].photo != "none")
|
||||||
$(".metadata .content.original a").attr("href", "photos/paintings/original/" + data[i].number + ".jpg");
|
$(".metadata .content.original a").attr("href", "photos/paintings/original/" + data[idx].number + ".jpg");
|
||||||
else
|
else
|
||||||
$(".metadata .content.original").parent().css("display", "none");
|
$(".metadata .content.original").parent().css("display", "none");
|
||||||
|
|
||||||
// cartel
|
// cartel
|
||||||
$("#info .title").append(data[i].title);
|
$("#info .title").append(data[idx].title);
|
||||||
if (data[i].month != "—")
|
if (data[idx].month != "—")
|
||||||
$("#info .year").append(data[i].month + " " + data[i].year);
|
$("#info .year").append(data[idx].month + " " + data[idx].year);
|
||||||
else
|
else
|
||||||
$("#info .year").append(data[i].year);
|
$("#info .year").append(data[idx].year);
|
||||||
|
|
||||||
format = data[i].paint + " sur " + data[i].support.toLowerCase();
|
format = data[idx].paint + " sur " + data[idx].support.toLowerCase();
|
||||||
|
|
||||||
if (data[i].dimension != "—")
|
if (data[idx].dimension != "—")
|
||||||
format += " (" + data[i].dimension + ")";
|
format += " (" + data[idx].dimension + ")";
|
||||||
$("#info .format").append(format);
|
$("#info .format").append(format);
|
||||||
|
|
||||||
if (data[i].comment != "—")
|
if (data[idx].comment != "—")
|
||||||
$("#info .comment").prepend(data[i].comment);
|
$("#info .comment").prepend(data[idx].comment);
|
||||||
else
|
else
|
||||||
$("#info .comment").css("display", "none");
|
$("#info .comment").css("display", "none");
|
||||||
});
|
});
|
||||||
|
|||||||
@ -80,10 +80,10 @@ jQuery(document).ready(function($)
|
|||||||
var chartDimension = new Chart(canvasDimension, {
|
var chartDimension = new Chart(canvasDimension, {
|
||||||
type: 'bar',
|
type: 'bar',
|
||||||
data: {
|
data: {
|
||||||
labels: ["Allégorique", "Animal domestique", "Animalier", "Campagne", "Forêt", "Marine", "Montagne", "Métier", "Personne", "Urbain", "Végétal"],
|
labels: ["Histoire", "Nature morte", "Paysage", "Portrait", "Scène"],
|
||||||
datasets: [{
|
datasets: [{
|
||||||
label: 'nombre de tableaux',
|
label: 'nombre de tableaux',
|
||||||
data: [2, 11, 67, 126, 3, 10, 5, 10, 46, 39, 39],
|
data: [2, 42, 173, 59, 107],
|
||||||
backgroundColor: '#2589BD',
|
backgroundColor: '#2589BD',
|
||||||
borderColor: '#187795',
|
borderColor: '#187795',
|
||||||
borderWidth: 1
|
borderWidth: 1
|
||||||
|
|||||||
@ -208,6 +208,23 @@ article.main p.signature {
|
|||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
article.main .bio-img {
|
||||||
|
float:right;
|
||||||
|
padding:1rem;
|
||||||
|
padding-top:0.25rem;
|
||||||
|
padding-right:0;
|
||||||
|
max-width:25vw;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media only screen and (max-width:1200px) {
|
||||||
|
article.main .bio-img {
|
||||||
|
float:none;
|
||||||
|
padding:0;
|
||||||
|
max-width:90vw;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
/* Exposition */
|
/* Exposition */
|
||||||
|
|
||||||
article #pagination {
|
article #pagination {
|
||||||
@ -495,25 +512,51 @@ article.explorer form .inline {
|
|||||||
margin:0.1rem;
|
margin:0.1rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.button-cont {
|
||||||
|
margin:auto;
|
||||||
|
margin-top:1.5rem;
|
||||||
|
display:flex;
|
||||||
|
justify-content:center;
|
||||||
|
align-items:flex-end;
|
||||||
|
width:-moz-fit-content;
|
||||||
|
width:fit-content;
|
||||||
|
}
|
||||||
|
|
||||||
article.explorer input[type = submit] {
|
article.explorer input[type = submit] {
|
||||||
display:block;
|
|
||||||
margin:auto;
|
margin:auto;
|
||||||
text-align:center;
|
text-align:center;
|
||||||
border:none;
|
border:none;
|
||||||
padding:0.8rem;
|
padding:0.8rem;
|
||||||
margin-top:1.5rem;
|
|
||||||
border-radius:5%;
|
border-radius:5%;
|
||||||
background:#2589BD;
|
background:#2589BD;
|
||||||
text-decoration:none;
|
text-decoration:none;
|
||||||
font-size:1.1rem;
|
font-size:1.1rem;
|
||||||
cursor:pointer;
|
cursor:pointer;
|
||||||
color:white;
|
color:white;
|
||||||
|
margin-right:1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
article.explorer input[type = button] {
|
||||||
|
margin:auto;
|
||||||
|
text-align:center;
|
||||||
|
border:none;
|
||||||
|
padding:0.4rem;
|
||||||
|
border-radius:5%;
|
||||||
|
background:grey;
|
||||||
|
text-decoration:none;
|
||||||
|
font-size:1.1rem;
|
||||||
|
cursor:pointer;
|
||||||
|
color:white;
|
||||||
}
|
}
|
||||||
|
|
||||||
input:checked + label {
|
input:checked + label {
|
||||||
font-weight:bold;
|
font-weight:bold;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.item-cont span.filter {
|
||||||
|
color:gray;
|
||||||
|
}
|
||||||
|
|
||||||
@media only screen and (max-width:600px) {
|
@media only screen and (max-width:600px) {
|
||||||
article.explorer form .container {
|
article.explorer form .container {
|
||||||
display:block;
|
display:block;
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user