TOGGLEATTRIBUTE
Le composant TOGGLEATTRIBUTE permet d’ajouter/supprimer ou changer la valeur d’un attribut. Il fonctionne comme un « d’interrupteur » : si l’attribut est absent, il l’ajoute, s’il est présent, il change sa valeur ou le supprime.
Syntaxe
Comme tout déclencheur JS de SipaUI il est préfixé par data-su. À ce déclencheur on doit ajouter au moins deux paramètres (attr et val, cf. ci-dessous) afin de donner l’(les) attribut(s) à positionner / supprimer. Attention, la syntaxe impose l’imbrication de guillemets : 2 pour encadrer la valeur du data-sutoggleattribute 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 toggleattribute. Ce qui donne : data-sutoggleattribute='{"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 desel)attr: nom de l’attribut (paramètre obligatoire)val: valeur à attribuer à l’attribut (paramètre obligatoire)force: force permet de choisir entre toujours mettre l’attribut (force:1) ou toujours l’enlever (force:0)
Classe supplémentaire
Classe CSS à mettre au même endroit que sur l’élément possédant l’attribut data-sutoggleattribute
su-on-focus: permet de mettre l’attribut quand l’élément gagne le focus, ou de l’enlever quand il le perd
Exemples
Démo 0 : cas basique (sur l’élément cliqué)
Basiquement, le sutoggleattribute se produira sur l’élément possédant l’attribut. Dans ce cas il nécessite uniquement les paramètres minimums : attr et val. Ce déclencheur ajoute l’attribut data-demo="1" au bouton, puis le vide de sa valeur. Si vous voulez supprimer complètement l’attribut, cf. deleteempty plus bas.
Du CSS affiche la valeur de cet attribut à la fin du bouton pour l’illustration, mais ce qu’il faut observer est dans l’inspecteur…
<style type="text/css">
[data-demo]::after {
content: attr(data-demo);
}
</style>
<div class="demo0">
<button class="su-button su-primary" data-sutoggleattribute='{"attr":"data-demo","val":"1"}'>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.
Du CSS affiche la valeur de cet attribut dans le parent, derrière le bouton, pour l’illustration. Ce qu’il faut observer est dans l’inspecteur…
<style type="text/css">
[data-demo]::after {
content: attr(data-demo);
}
</style>
<div class="demo1">
<button class="su-button su-primary su-margin-bottom-s" data-sutoggleattribute='{"parent":".sipaui","attr":"data-demo","val":"1"}'>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 sutoggleattribute 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.
Du CSS affiche la valeur de cet attribut à la fin du paragraphe en dessous pour l’illustration. Ce qu’il faut observer est dans l’inspecteur…
<style type="text/css">
[data-demo]::after {
content: attr(data-demo);
}
</style>
<div class="demo2">
<button class="su-button su-primary su-margin-bottom-s" data-sutoggleattribute='{"sel":".demo-target2 p","attr":"data-demo","val":"1"}'>Cliquez</button>
<div class="demo-target2">
<p>Le chiffre « 1 » s’affichera à droite de ce texte. </p>
</div>
</div>
Démo 3 : cas deleteempty (suppression de l’attribut si celui-ci est vide)
Avec la propriété deleteempty, il est possible d’utiliser le plein potentiel du sutoggleattribute et supprimer l’attribut concerné de l’élément cible si cet attribut est vide. Cette propriété n’accepte qu’une valeur valable : 1 (0 n’ayant aucun intérêt).
Du CSS agit à la fin du paragraphe en dessous pour l’illustration. Ce qu’il faut observer est dans l’inspecteur…
<style type="text/css">
.no-data-demo::after {
content: 'Pas de data-demo';
}
[data-demo]::after,
.no-data-demo[data-demo]::after {
content: attr(data-demo);
}
</style>
<div class="demo3">
<button class="su-button su-primary su-margin-bottom-s" data-sutoggleattribute='{"sel":".demo-target3 p","attr":"data-demo","val":"1","deleteempty":1}'>Cliquez</button>
<div class="demo-target3">
<p class="no-data-demo">Le chiffre « 1 » s’affichera à droite de ce texte si l’attribut existe, sinon un autre texte s’affichera. </p>
</div>
</div>
Démo 4 : cas force
Le paramètre force permet de supprimer le principe « d’interrupteur » du TOGGLEATTRIBUTE : l’action sera ainsi toujours la même, soit elle force l’ajout de l’attribut ("force":1), soit elle force la suppression ("force":0).
Du CSS agit à la fin du paragraphe en dessous pour l’illustration. Ce qu’il faut observer est dans l’inspecteur…
<style type="text/css">
[data-demo]::after {
content: attr(data-demo);
}
</style>
<div class="demo4">
<button class="su-button su-primary su-margin-right-m su-margin-bottom-s" data-sutoggleattribute='{"sel":".demo-target4 p","attr":"data-demo","val":"1","force":1}'>Cliquez pour afficher « 1 »</button>
<button class="su-button su-secondary" data-sutoggleattribute='{"sel":".demo-target4 p","attr":"data-demo","val":"1","force":0}'>Cliquez pour masquer « 1 »</button>
<div class="demo-target4">
<p>Le chiffre « 1 » s’affichera à droite de ce texte si l’attribut existe, sinon il n’y aura rien. </p>
</div>
</div>
Démo 5 : cas deux valeurs (l’une remplace l’autre)
Avec la propriété val2, il est possible d’intervertir la valeur de l’attribut à chaque clic, ce qui est très utile pour un attribut qui attend une valeur booléenne.
Du CSS affiche la valeur à la fin du paragraphe en dessous pour l’illustration. Ce qu’il faut observer est dans l’inspecteur…
<style type="text/css">
[data-demo]::after {
content: attr(data-demo);
}
</style>
<div class="demo5">
<button class="su-button su-primary su-margin-bottom-s" data-sutoggleattribute='{"sel":".demo-target5 p","attr":"data-demo","val":"true","val2":"false"}'>Cliquez</button>
<div class="demo-target5">
<p>La valeur « true » s’affichera à droite de ce texte si l’attribut existe, sinon, ce sera « false ». </p>
</div>
</div>
Démo 6 : cas su-on-focus
Avec cette classe, il est possible d’utiliser SUTOGGLEATTRIBUTE lorsqu’un élément prend le focus, notamment grâce au clic sur un label lié à un input.
<div class="demo6">
<label for="demo6">Label : cliquez sur ce libellé pour activer le TOGGLEATTRIBUTE</label>
<input id="demo6" class="su-on-focus" name="input1" type="text" data-sutoggleattribute='{"attr":"data-demo","val":"1"}'>
</div>