Les librairies internes

La fabrique à sites intègre plusieurs librairies internes, développées par l’agence Thuria, dans le but de gérer des éléments globaux du site tels les accordéons, les ancres, les dropdowns, les overlays, les barres fixes…

Les fichiers :

• th_accordeon.js : permet l’ouverture et la fermeture de contenus affichés sous forme d’accordéons tel que le bloc – Onglet Accordéon – Type 3. – voir ici
• th_anchor.js : permet une interaction avec des liens « ancres » sur le site afin de défiler plus rapidement à travers la page web.
• th_dropdown.js : permet l’affichage et la gestion des menus déroulants.
• th_expand.js : permet d’étendre la hauteur d’un contenu mis en hauteur fixe par défaut pour ne pas alourdir la page web. L’utilisateur dispose d’un bouton pour découvrir l’intégralité du contenu.
• th_map-leaflet.js : gestion des maps avec leaflet, raccourcis beaucoup de fonctions
• th_overlay.js : gestion des interactions et de l’affichage des overlays.
• th_slider_cards.js : affichage des cards du card design sous forme d’un slider sur des supports ordinateurs et un affichage utilisant le scroll snap sur les tablettes et mobiles. Fonctionne avec l’initialisation de la libraire iScroll.js sur les supports supérieurs à 1280px.
• th_sticky.jquery.js : affichage d’un élément HTML fixe lors du défilement dans la page web afin de le garder toujours visible à l’écran.
• th_vheight.js : calcul de la hauteur d’écran en pixels de tous les supports numériques afin d’éviter les variations d’hauteurs sur différents navigateurs web.

Détail des fichiers

th_accordeon.js

Cette librairie est initialisée dans le fichier main.js. 

Pour utiliser cette librairie, votre structure HTML doit être composée au minimum de :

• <div class=’accordeon’>
• <div class=’title-accordeon’>
• <div class=’item’>

th_anchor.js

Cette librairie est initialisée dans le fichier main.js. 

Insérez un [data-anchor] dans votre structure HTML :

• si vous écrivez « scroll », alors votre page scrollera d’une hauteur d’écran moins quelques pixels.
• si vous écrivez l’identifiant de l’élément que vous souhaitez lié, alors votre page scrollera juqu’en haut de cet élément.

th_dropdown.js

Cette librairie est initialisée dans le fichier main.js. 

Pour utiliser cette librairie, votre structure HTML doit être composée au minimum de :

• <div class=’dropdown’>
• un premier enfant direct avec un <a href= »# »>
• une liste déroulante avec un <ul> au même niveau que <a href= »# »>

th_expand.js

Cette librairie est initialisée dans le fichier main.js. Elle fonctionne avec un [data-expand] dans lequel il est nécessaire d’entrer une valeur correspondant à la hauteur du contenu que vous souhaitez voir afficher à l’écran sans qu’il soit expand. Si la hauteur de votre contenu mesure moins de 100 pixels, il n’y aura rien à expand, le contenu s’affichera naturellement. Mais si la hauteur de votre contenu mesure plus de 100 pixels, alors une classe CSS .to-expand viendra s’ajouter dans le même élément que celui avec [data-expand].

La valeur du [data-expand] doit être retranscrite en CSS avec la propriété height suivi d’un !important pour fonctionner correctement.

Pour utiliser cette librairie, votre structure HTML doit être composée au minimum de :

• <div data-expand=’100′>
• au même niveau de structure que data-expand,  un lien <a href= »#expand »>

th_map-leaflet.js

@TODO À ÉCRIRE PAR PAUL.

th_overlay.js

Cette librairie est initialisée dans le fichier main.js. 

@TODO À ÉCRIRE PAR PAUL.

th_slider_cards.js

Cette libraire nécessite plusieurs éléments à défiler pour le slider des cards. Si au moins un élément est présent, une classe CSS .loaded s’ajoutera au slider, et une classe CSS .iscroll si iScroll est chargée.

Sur desktop : initialisation de la libraire JavaScript iScroll.js pour la personnalisation de la scrollbar et la gestion du défilement horizontal du bloc.

Sur tablettes et mobiles : utilisation de la propriété CSS scroll-snap-type – voir la documentation – permettant le défilement horizontal du bloc sans l’utilisation de JavaScript.

Pour utiliser cette librairie, votre structure HTML doit être composée au minimum de :

• <div class=’slider-cards’>
• <div class=’listing-items’> suivant en premier enfant d’une <div>

th_sticky.jquery.js

L’élément parent de celui que vous souhaitez rendre fixe au scroll doit avoir une position (relative ou absolute) dans votre page. Cet élément parent doit faire la taille de la hauteur de sa zone de scroll. Son élément enfant, aura lui une position fixe et une height inférieur ou égale à une hauteur d’écran afin que l’élément fixe soit toujours visible à l’écran lorsque cela sera nécessaire.

th_vheight.js

Cette librairie fonctionne avec l’ajout d’un [data-vheight] sur l’élément sur lequel vous souhaitez obtenir une hauteur fixe. L’attribut [data-vheight] vous donnera une hauteur sur l’ensemble des supports et l’attribut [data-m-vheight] exclusivement sur des supports mobiles inférieurs à 600px de large.

La valeur que vous intégrez dans le [data-vheight] ou [data-m-vheight] correspond à un pourcentage de la hauteur de votre écran. Vous pouvez effectuer une addition ou une soustraction si vous souhaitez une valeur plus précise. Il est important de respecter l’espacement avant et après l’opérateur mathématique.

Voici quelques exemples :

• data-vheight=’100′ // correspond à 100vh
• data-vheight=’100 – 80′ // correspond à 100vh – 80 pixels
• data-m-vheght=’100 – 120′ // correspond à 100vh – 120 pixels
• data-vheight=’100 + 40′ // correspond à 100vh + 40 pixels
• data-vheght=’125′ // correspond à 125vh