Le Blog

Le blog laboratoire de F.L.D. Studio
0

Oh my JS

Liste des micros fonctions : scripts JavaScript

Dév. interne :  ℱℒ

Micro Librairie Version Rôle Mot clé 
 avisPage.js 1.0 Affichage des avis avisPage
 bkgCycle.js 3.8 Slider ul-li textes et images bckCycle
 mnuMob.js 1.1 Menu pour mobile mnuMob
 revealEl.js 1.0 Affiche images sur evenement revealEl
 validForm.js 1.0 Validateur de formulaire intégrée dans formulaire

Fonctions JS

Dév. externe

Micro Librairie Version Rôle  
   
baguetteBox.min.js 1.8.2 LightBox 
inview.js 0.6.1 Evenements sur Elements entrent/sortent du ViewPort 
lazyload.js  Chargement des images 
pace.js  Barre progression affichage des ressources 
van11y-accessible-accordion-aria.js 1.0.5 Accordeon 

Google Map

https://maps.googleapis.com/maps/api/js?key=xxx

 avisPage.js

Option 1 : pas de paramétres : 

    avisPage();
Option 2 : Paramétre class CSS de transition sur groupe visible :
        avisPage({'effetCss':'slideFromBottom'});
    

bkgCycle.js : 

http://preprod.visicod.pro/test/bkgCycle/build/

Gestion des animations CSS pour la transition des images Toutes ces classes sont facultatives.
  • cssIntro : class CSS pour afficher la première image
  • cssIn : class CSS pour introduction des images ( image suivante )
  • cssOut : class CSS pour sortir les images ( image suivante )
  • cssInBack : class CSS pour introduction des images ( image précédante )
  • cssOutBack : class CSS pour sortir les images ( image précédante )
  • cssIn et cssOut flagCss = false (defaut) : synchroniser les classes = true : activer les classes l'une après l'autre
Au total 5 combinaisons de gestions des classes CSS - supBackground : boolean (false par défaut), indique si il faut supprimer le background après l'affichage de la première image. Si oui indiquer le nom de la div qui contient le background.

        var arrImages = [ 'img/imgFashion.jpg', .... ]; var sliderImg = new bkgCycle( { 'arrImages' : arrImages, // Array des images
        (si images en background/sinon texte seul) 'idContainer' : 'bkgContainer', // defaut : bkgContainer (ID) 'prefix' : 'bkg',
        // defaut : bkg ( prefix ID des li ) 'modeSlider' : true, // defaut : true (mode slider) / false 'tempo' : 8000, // defaut
        : 8000 (8 secondes) 'idLoader' : 'bkgLoader', // defaut : bkgLoader (ID) ou autre / false : pas de loader 'whenLoaderHide':'first',
        // defaut : 'first' sup loader après affichage première image 'last' : après chargement de la dernière 'supBackground' :
        false, // defaut : false (supprimer l'image du background après première image affichée) ou ID de la div contenant le background
        'cssActived' : 'bkgActived', // defaut : bkgActived ou 'nom classe CSS' pour transition sur l'image active 'cssIntro' : 'bkgCycleIntro',
        // defaut : false ou 'nom classe CSS' affichage première image 'cssIn' : 'bkgFadeIn', // defaut : false ou 'nom classe CSS'si
        enchainement d'animation (si différent de cssActived) 'cssOut' : 'bkgFadeOut', // defaut : false ou 'nom classe CSS' si enchainement
        d'animation (si différent de cssActived) 'cssInBack' : 'bkgFadeIn', // defaut : false ou 'nom classe CSS' sortie mode back
        (retour arriere) 'cssOutBack' : 'bkgFadeOut', // defaut : false ou 'nom classe CSS' sortie mode back (retour arriere) 'flagCss'
        : false, // defaut : false. Drapeau gestion des animations CSS glbCssIn et glbCssOut (synchrones par défaut) 
        'flagTouch'     : false,                // defaut : false. Drapeau de gestion du touch sur les écrans tactiles
'idPrev' : false,
        // defaut : false ou Id bouton navigation précédente (si navigation dans le slider) 'idNext' : false, // defaut: false ouId
        bouton navigation suivante (si navigation dans le slider) 'callBack' : function() { // defaut : false. Fonction anonyme de
        callBack exécutée à la fin des transitions ...code... } });
    

Gestion des animations CSS :

  • cssActived : Classe par défaut opacity de 0 à 1 (voir css li)
  • cssIntro : Classe pour affichage de la première image
  • cssIn : Classe pour introduire l'image ( image suivante )
  • cssOut : Classe pour sortir l'image ( image suivante )
  • cssInBack : Classe pour introduire l'image ( image précédante )
  • cssOutBack : Classe pour sortir l'image ( image précédante )
  • flagCss : Drapeau de gestion des animations cssIn et cssOut ( si existent)
  •  false : animation schyncronisées ( synchrones )
  •  true : animations enchainées ( asynchrones )

Dans le cas des animations asynchrone, si on veux supprimer l'effet de fondu, modifier le CSS du li, suprimmer opacity 0/1 et remplacer par display:none/block. Adapter classe .bkgCycle .bkgActived en conséquence (transition: opacity 0;)

Fonction de callBack : voir exemple avec affichage d'une légende pour la dernière image.

mnuMob.js

Option 1 : pas de paramétres : 

            mnuMob();
        
Option 2 : Paramétre effet CSS de transition sur groupe visible :
                    mnuMob({  idMnuMob : 'mnuMobBtn', /* Id du bouton menu : défaut : mnuMobBtn */  idMnuMobNav : 'mnuMobNav' /* Id du menu
                    déroulant : défaut : mnuMobNav */ });
                

revealEl.js

    var reveal = new revealEl( {   'idContainer': 'img-gal-container', // ID du container des images. img-gal-container    
    'cssHide' : 'cssHide', // Class pour cacher les images. cssHide     'cssShow' : 'foldFromLeft', // Class pour afficher les
    images.(paire) null     'cssShowOdd' : 'foldFromRight', // Class pour afficher les images.(impaire) null     'nbrEl' : 6,
    // Nbr d'image àafficher. 6     'uiMore' : 'uiMore' // ID du bouton/lien Interface : En voir Plus uiMore   } ); // Ecoute
    evement interface utilisateur bouton/lien : en voir plus document.getElementById('uiMore').addEventListener('click',function(e){
      e.preventDefault();   reveal.revealEl(); }); function f_redimensionnement() { var result = 6; if('matchMedia' in window)
    { // Détection if ( window.matchMedia('(max-width:600px)').matches ) { result = 4; } else if ( window.matchMedia('(max-width:400px)').matches
    ) { result = 5; } // Modification du paramétre de nombre d'élements à afficher reveal.nbrEl(result); } } // On lie l'événement
    resize à la fonction f_redimensionnement() window.addEventListener('resize', f_redimensionnement, false); // Premier test
    quand la page est chargée f_redimensionnement(); // Premier affichage reveal.revealEl();

Catégories: Conférence

Commentaires: Pas de commentaires

0

La mosaïque version Flexbox

Mondrian

Introduction

Parmis les utilitaires que j'ais eu à concevoir il en exite un baptisé mosaîque. Il s'agit d'une classe sous PHP qui calcule la taille que doivent faire chaque images pour participer à la création d'un motif toujours carré. Pour facilier sa mise en oeuvre j'ai aussi conçu un utilitaire AddOn sous JavaScript qui permet d'utiliser les nombreuses options de la classe et surtout in fine d'optenir le CSS AdHoc pour réaliser l'affichage de la mosaïque d'images.

Le but de ce post est de transformer la mosaïque qui fonctionne sur le principe CSS des éléments flottants en display flex lorsque la taille de l'écran à atteint la taille de l'élément parent de ce composant.

En utilisant le même balisage HTML et pratiquement les mêmes classes CSS que dans le post précédant qui relate de la création d'une galerie d'images fluides et responsives à l'aide du système d'affichage flexbox.

Points communs et différences

S'agissant d'afficher des images il existe de nombreux point communs entre ces deux systèmes de galerie d'images. Le premier point concernne le balisage HTML de représentation des galeries. Toutes deux sont contenues dans un élément parent ( wrapper ou container ) qui défini le système d'affichage des enfants ( les images ).

Galerie : Balisage HTML

Le container dispose d'un affichage de type flexbox et ses enfants (les ancres) sont définis avec des tailles en pourcentage ( Taux d'occupation d'une image et d'une marge au sein du container )

    <div class="img-gal-container"> <a href="https://feimosi.github.io/baguetteBox.js/img/1-1.jpg" data-caption="Galerie
    2 - Image caption"> <figure> <img width="320" height="188" src="http://lorempixel.com/320/188/people" alt="Description
    image" /> </figure> <svg aria-hidden="true" role="presentation"><use xlink:href="#ico-plus">Plus</use></svg>
    </a>

... autres images ....


Mosaïque : Balisage HTML

Le container dispose d'un affichage de type block et ses enfants (les ancres) sont surchargés avec les classes CSS qui guident leurs positionnements (left,right,taille,marge, etc...).

    <div class="img-gal-container"> <a class="mos-s1 fleft" href="https://feimosi.github.io/baguetteBox.js/img/medium/2-1.jpg"
    title="Galerie 1 - Image caption1 description dans title"> <figure> <img width="700" height="525" src="http://lorempixel.com/700/525/people"
    alt="Description image" /> </figure> <svg aria-hidden="true" role="presentation"><use xlink:href="#ico-plus">Plus</use></svg>
    </a>


Le style CSS

Le style d'affichage des images et des effets de hover,active, etc... sont identiques pour les deux systèmes. La principale différence vient du traitement des marges pour l'affichage de la mosaïque et bien sur les classes de positionnement flottant des images.

Lorque la taille du viewport à atteint la taille du container parent de la mosaïque les rêgles du media-querie vont modifier le type d'affichage du parent pour le basculer en mode flexbox ainsi que modifier la taille des enfants afin d'en afficher deux par rangée  et nous utilisons aussi la technique simplifiée des marges droites comme expliqué dans le post précédant. Nous supprimons aussi toutes les rêgles concernant le positionnement flottant des enfants.

Exemple fonctionnel

See the Pen Mosaic vers galerie flex by Du Marais (@DjF) on CodePen.

Catégories: CSS

Tags: flexbox, Galerie

Commentaires: Pas de commentaires

0

Galerie Images display Flexbox

Galerie images flexbox

Introduction

De tous les 'composants' qui sont passés au display:flex ( menu,footer, gabarit de site, etc...) la galerie d'images à été le plus compliqué à mettre au point. Le cahier des charges de la galerie d'images est le suivant :

  • L'utilisateur administre sa galerie d'images , il charge et retire des photos à sa guise, nous ne savons pas à l'avance combien d'images seront affichées.
  • Les images peuvent être en mode portrait et en mode payasage.
  • Les images doivent occuper tout l'espace possible.
  • La galerie doit être responsive et doit donc s'adapter à plusieurs résolutions et tailles d'écrans.

En attendant le display grid qui sera la prochaine révolution en matière d'écriture du CSS nous utilisons le display flexbox qui constitu à ce jour la façon la plus simple d'aligner des éléments les un à coté des autres.

La taille des images

Pour une occupation optimale des images au sein de leur container j'ais conçus un utilitaire qui fait ce travail à ma place (;+). Il fournit la taille width et height d'une image ainsi que la marge de droite. Jusqu'a présent avec le display float que j'utilise il me permet de créer des vignettes à la taille exacte de mon besoin.

Avec le display flexbox et le responsive la taille des images ne doit plus être vue comme une définition exacte en pixels mais plutot comme un pourcentage de place utilisée au sein d'un container.

En effet la contrainte responsive de la galerie nous amméne à la considération suivante : 

Sur un écran de smartphone, considéré aujourd'hui comme ayant une largeur maximale de 320px nous allons afficher une ou deux images par rangée. Dans ce cas la largeur minimale d'une image dans une galerie sera toujours de 320px . Pour en placer plusieurs lorsque la largeur du viewport le permet il faut donc fournir à flexbox des tailles d'éléments non plus en pixels mais en pourcentage.

Exemple pour un container d'une largeur de 1200 pixels devant contenir 6 images avec une marge de 6px entre chaque on effectue le calcul suivant : 

 ( largeur d'une image en pixel / largeur container en pixel ) * 100

Pour les images :

  • ( 195 / 1200 ) * 100 = 16.25%

Pour les marges :

  • ( 6 / 1200 ) * 100 = 0.5%

La gestion des marges

La gestion des marges ou goutières peut être gérée de différentes façon avec flexbox. Sur le l'élément container de la galerie celui qui a le display flex, nous pouvons utiliser la propriété : justify-content.

La valeur space-between permet de disposer une marge autour de chaque images. L'inconvenient c'est que les images n'occupent plus tous l'espace du container. De l'espace est disposé à gauche de la première image de la rangée et à droite de la dernière.

La valeur space-around semble mieux correspondre à notre besoin, mais lorsque par exemple nous prévoyons une galerie de 4 images par rangée et que l'utilisateur en charge 6, la seconde rangée contient alors deux images avec un grand espace au milieu ( pas très esthétique )

Il nous faut donc gérer nos marges nous même. C'étais déjà le cas avec le display:float et comme avec le display float il nous faut gérer la marge droite de la dernière image d'une rangée. En supprimant la marge de la dernière image de chaque rangée nos images vont bien occuper tous l'espace de leur container et la marge ne sera pas modifiée en fonction du nombre d'images affichées.

Avec le display float on utilse une class (exemple .last) qui contenait la rêgle suivante : margin-right:0; Cette classe étais appliquée coté serveur lorsque le script PHP de création du balisage de la galerie devais afficher la dernière image de chaque rangée. Avec flexbox il n'est plus necessaire de le concevoir coté serveur car on peut désormais le faire coté navigateur à l'aide du CSS.

A l'aide du selecteur : nth-of-type(Xn) nous allons pouvoir supprimer la marge droite de la dernière image de chaque rangée. X = le numéro de la dernière image. Ainsi par exemple dans une galerie prévue pour 6 images par rangée, pour supprimer la marge de droite de la dernière image nous écrivons :

Dans cet exemple nous ciblons l'élément a ( enfant ) contenant les images du container flex des images : .img-gal-container

        .img-gal-container a:nth-of-type(6n){ margin-right:0; }
    
Dans cette exemple nous ciblons l'élément a (premier enfant) contenant nos images du container flex des images : .img-gal-container

Le responsif

Le dernier point de notre cahier des charges concerne les versions responsives de notre galerie. En utilisant une largeur en pourcentage nous avons déjà répondu à cette contrainte. Néanmoins afficher 6 images sur l'écran d'un smarphone les rends si petites qu'elles en deviennent illisiblent et surtout difficilement cliquables au vue de leur petites tailles.

Pour afficher moins d'images par rangée et donc des images plus grande il faut recalculer de nouvelles valeurs, pourcentage d'occupation d'une image et pourcentage de la marge droite en fonction de la nouvelle largeur de la galerie et du nombre d'image que l'on souhaite afficher.

Dans la partie media-querie de notre CSS nous allons pouvoir effectuer ces opérations. Pour la nouvelle largeur d'une image nous utilisons la propriété flex-basis qui indique la taille d'un enfant au sein d'un container flex. 

/* 600px */
  @media screen and (max-width: 37.5em) { .img-gal-container a{ /* 2 images par rangée */ flex-basis: 49.5%; margin-right:1%;
} }
    

Attention

Souvenons nous que nous avons supprimé précédement la marge droite de toutes les 6eme images des rangées. Cette fois nous n'en affichons plus que 2. Il faut donc rétablir la marge de droite des 6eme images avec la nouvelle marge calculée pour le media-querie et supprimer celle des secondes images.

Exemple 

/* rétablir la marge droite de toutes les 6eme images des rangées */ 
 .img-gal-container a:nth-of-type(6n){ margin-right:1%;
            } 
/* sup la marge droite de toutes les 2eme images des rangées */ .img-gal-container a:nth-of-type(2n){ margin-right: 0;
            }
        

Simplifier la gestion des marges

Cette technique permet de modifier le nombre d'images affichées par rangées. On peut ainsi passer par exemple de 4 images à 3 images mais comme on le voit ici elle implique de nettoyer les marges précédements positionnées et d'en recréer de nouvelles. A partir du moment ou on affiche deux images par rangée on peut gérer les marges plus simplement :

  • Modifier le positionnement des enfants dans le container parent à l'aide de la propriété : justify-content: space-between;
  • Supprimer toutes les marges droite des images, c'est flexbox qui se chargera de l'espacement entre les images.
  • Modifier de manière arbitraire et non plus à l'aide d'un calcul optimisé la taille de chaque enfant en rêglant leur taille à : 49,5%

Conclusion

Pour remplir les conditions de notre cahier des charges nous avons utilisés les techniques suivantes :

  • Container des images en display:flex; et avec la propriété align-items: flex-start; pour les formats portraits et paysages mélangés
  • Taille des images ( taille physique constante d'une largeur de 320 pixel ) exprimées en pourcentage d'occupation du container parent dans le CSS.
  • Taille des marges exprimées en pourcentage dans le CSS et supprimée sur la dernière image de la rangée.
  • Adaptation du nombre d'images à afficher en fonction de la taille du viewport et gestion des marges droites en conséquence.

Exemple fonctionnel

See the Pen Galerie Images FlexBox 2017 by Du Marais ( @DjF ) on CodePen .

Cerise sur le gateau, l'exemple utilisée ici modifie l'affichage sur smartphone ( media-querie : 400px ) en modifiant la rêgle du container parent en justify-content:space-between; et en modifiant la taille des images affichées celon une séquence de 1er image en taille maxi et répetition toutes les 5 images, ceci créant un rythme visuel sur les petits écrans.

Pour automatiser et personnaliser le plus possibe le CSS d'une galerie d'images fluides et responsives l'exemple ci dessus utilise des variables CSS ainsi que l'instruction calc().

Supports navigateurs

calc()

Variables CSS

Catégories: CSS

Tags: CSS, flexbox

Commentaires: Pas de commentaires