TOGGLECLASS

Le composant TOGGLECLASS permet d’ajouter ou supprimer une classe. Il fonctionne comme un « d’interrupteur » : si la classe est absente, il l’ajoute, si elle est présente, il la supprime.

Syntaxe

Comme tout déclencheur JS de SipaUI il est préfixé par data-su. À ce déclencheur on doit ajouter au moins un paramètre (klass, cf. ci-dessous) afin de donner la(les) classe(s) à positionner / supprimer. Attention, la syntaxe impose l’imbrication de guillemets : 2 pour encadrer la valeur du data-sutoggleclass et d’autres pour encadrer les paramètres et leur valeur. Ces derniers doivent par ailleurs respecter la syntaxe JSON {"parametre":"valeur"}. Par conséquent, il faut choisir des '' pour encadrer le contenu de toggleclass. Ce qui donne : data-sutoggleclass='{"paramètre":"valeur"}'.

Paramètres

• sel : permet de choisir la cible du toggle (par défaut c’est l’élément lui-même)
• parent : parent du DOM à cibler (à la place de sel)
• klass : liste de classe(s) séparée(s) par des espaces (paramètre obligatoire)
• inverted : inverse le comportement du toggle si nécessaire dans le cas d’un survol.
• force : force permet de choisir entre toujours mettre les classes (force:1) ou toujours les enlever (force:0)

Classes supplémentaires

Classes CSS à mettre au même endroit que sur l’élément possédant l’attribut data-sutoggleclass

• su-on-over : permet de mettre la classe quand le pointer passe au-dessus, ou d’enlever la classe quand il part
• su-delay : permet d’altérer le comportement des su-on-over en déclenchant le toggle que si on est resté dans l’état pendant 400 millisecondes
• su-on-focus : permet de mettre la classe quand l’élément gagne le focus, ou d’enlever la classe quand il le perd

Exemples

Démo 0 : cas basique (sur l’élément cliqué)

Basiquement, le sutoggleclass se produira sur l’élément possédant l’attribut.

<div class="demo0">
    <button class="su-button su-primary" data-sutoggleclass='{"klass":"su-small"}'>Cliquez</button>
</div>

Démo 1 : cas parent (parent de l’élément cliqué)

Avec la propriété parent, il est possible de cibler un élément parent en l’appelant par une classe ou un ID.

<style type="text/css">
    .yellow {
        background: yellow !important;
    }
</style>
<div class="demo1">
    <button class="su-button su-primary" data-sutoggleclass='{"parent":".sipaui","klass":"yellow"}'>Cliquez</button>
</div>

Démo 2 : cas sélecteur (différent de l’élément cliqué ou de ses parents)

Avec la propriété sel, il est possible de paramétrer l’élément cible du sutoggleclass partout dans le DOM. La valeur de cette propriété peut être une classe, un ID, ou toute suite de sélecteurs comme pour un ciblage en CSS.

<div class="demo2">
    <button class="su-button su-primary su-margin-bottom-s" data-sutoggleclass='{"sel":".demo-target2 p","klass":"su-hidden"}'>Cliquez</button>
    <div class="demo-target2">
        <p>Ceci est un exemple de texte qui sera masqué ou affiché selon le clic sur le bouton ci-dessus.</p>
    </div>
</div>

Démo 3 : cas su-on-over (survol)

Avec la classe su-on-over, le sutoggleclass peut être activé au survol.

<style type="text/css">
    .red {
        background: red !important;
    }
</style>
<div class="demo3">
    <button class="su-button su-primary su-margin-bottom-s su-on-over" data-sutoggleclass='{"sel":".demo-target3 p","klass":"red"}'>Survolez</button>
    <div class="demo-target3">
        <p>Ceci est un exemple de texte qui sera masqué ou affiché si le bouton ci-dessus est survolé.</p>
    </div>
</div>

Démo 3a : cas su-on-over avec délai

Avec la classe su-delay, il est possible de laisser un temps d’attente de 400 millisecondes avant d’activer sutoggleclass. Il permet de temporiser légèrement l’action pour éviter, par exemple, des déclenchements intempestifs au survol d’un menu…

<style type="text/css">
    .red {
        background: red !important;
    }
</style>
<div class="demo3a">
    <button class="su-delay su-button su-primary su-margin-bottom-s su-on-over" data-sutoggleclass='{"sel":".demo-target3 p","klass":"red"}'>Survolez</button>
    <div class="demo-target3">
        <p>Ceci est un exemple de texte dont le fond sera coloré si le bouton est survolé.</p>
    </div>
</div>

Démo 3b : cas su-on-over interverti

Par défaut, le survol ajoute la classe et l’enlève lorsque la souris s’en va. Il est possible de faire l’inverse via le paramètre inverted:true.

<style type="text/css">
    .red {
        background: red !important;
    }
</style>
<div class="demo3b">
    <button class="su-button su-primary su-margin-bottom-s su-on-over" data-sutoggleclass='[{"sel":".demo-target3b p","klass":"red","inverted":true}]'>Survolez</button>
    <div class="demo-target3b">
        <p class="red">Ceci est un exemple de texte dont le fond sera dé-coloré si le bouton est survolé.</p>
    </div>
</div>

Démo 4 : cas su-on-focus

Avec cette classe, il est possible d’utiliser SUTOGGLECLASS lorsqu’un élément prend le focus, notamment grâce au clic sur un label lié à un input.

<style type="text/css">
    .focus {
        background: red !important;
    }
</style>
<div class="demo4">
    <label for="demo4">Label&nbsp;: cliquez sur ce libellé pour activer le TOGGLECLASS</label>
    <input id="demo4" class="su-on-focus" name="input1" type="text" data-sutoggleclass='{"klass":"focus"}'>
</div>

Démo 5 : cas multiple classes

Il est possible de mettre / enlever plusieurs classes en même temps sur le même élément. Il suffit de mettre ces classes séparées par des espaces dans le paramètre klass.

<div class="demo5">
    <p class="su-margin-bottom-s">Cliquer sur le bouton ci-dessous supprime la classe <code>.su-primary</code> et ajoute la classe <code>.su-secondary</code>.</p>
    <button class="su-button su-primary" data-sutoggleclass='{"klass":"su-primary su-secondary"}'>Cliquez</button>
</div>

Démo 6 : cas multiple toggles

Il est possible de mettre plusieurs SUTOGGLECLASS sur un même déclencheur pour cibler différents éléments. Tout se met dans le même su-toggleclass, séparé par une ,.

<div class="demo6">
    <button class="su-button su-primary su-margin-bottom-s" data-sutoggleclass='[{"sel":".demo6 .p1","klass":"su-hidden"}, {"sel":".demo6 .p2","klass":"su-hidden"}]'>Multiples sutoggleclass au clic</button>
    <div class="demo-target">
        <p class="p1">P1 Lorem ipsum Id magna velit sed et nostrud dolore tempor eiusmod commodo quis nisi aliquip reprehenderit veniam ex consequat nisi est.</p>
        <p class="p2">P2 Lorem ipsum Id magna velit sed et nostrud dolore tempor eiusmod commodo quis nisi aliquip reprehenderit veniam ex consequat nisi est.</p>
    </div>
</div>

Démo 7 : cas force

Le paramètre force permet de supprimer le principe « d’interrupteur » du TOGGLECLASS : l’action sera ainsi toujours la même, soit elle force l’ajout de classe ("force":1), soit elle force la suppression ("force":0).

<div class="demo7">
    <button class="su-button su-primary su-margin-bottom-s" data-sutoggleclass='{"sel":".demo7 p","klass":"su-hidden","force":1}'>Cliquez pour cacher</button>
    <div class="demo-target">
        <p>P1 Lorem ipsum Id magna velit sed et nostrud dolore tempor eiusmod commodo quis nisi aliquip reprehenderit veniam ex consequat nisi est.</p>
    </div>
</div>