DIALOG
Le composant DIALOG
permet d’ouvrir ou fermer des <dialog>
. Il fonctionne de manière différente s’il est enfant de cette balise ou non. Par défaut à l’extérieur, il sert à en ouvrir une. A l’intérieur il sert à refermer.
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 (sel
) afin de désigner la <dialog>
de la page à afficher. Pour éviter les écarts, le composant concatène dialog
au début de ce sélecteur. Attention, la syntaxe impose l’imbrication de guillemets : 2 pour encadrer la valeur du data-sudialog
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 dialog
. Ce qui donne : data-sudialog='{"paramètre":"valeur"}'
.
Paramètres
sel
: permet de choisir la cible, génère un sélecteur en concaténant dialog et la valeur du paramètre; Exemple"sel":".popin-1"
cherchera le selecteurdialog.popin-1
dans le document.method
: permet de changer la méthode appelée par défautshowModal
; autre valeur possibleshow
pour permettre de continuer l’interaction avec le reste du document. N. B. - Si la<dialog>
à afficher porte l’attributpopover
, ce sera la méthodeshowPopover
qui sera choisie automatiquement.
Exemples
Démo 0 : cas basique
Par défaut, le sudialog
se produira sur le <dialog>
parent de l’objet possédant l’attribut, aussi, en l’absence de paramètre sel
, il fermera la boîte de dialogue. Et toujours par défaut, il ouvrira cette boîte de dialogue en mode modal, en milieu de page, avec un voile qui empêche les clics sur un autre élément de la page.
N. B. – On peut écrire au choix data-sudialog
ou data-sudialog=''
pour le bouton de fermeture sans sel
.
<div class="demo0">
<dialog class="popin-0">
<button class="su-button su-primary" data-sudialog>Fermer</button>
</dialog>
<button class="su-button su-primary" data-sudialog='{"sel":".popin-0"}'>Ouvrir</button>
</div>
Démo 1 : surcharge method
Avec le paramètre method
réglé à show
on peut forcer un comportement non-modal. Dans ce cas, la boîte de dialogue apparaît positionnée relativement à sa position ds le DOM, sans voile, et il est toujours possible de cliquer ailleurs dans la page.
<div class="demo1">
<dialog class="popin-1">
<button class="su-button su-primary" data-sudialog>Fermer</button>
</dialog>
<button class="su-button su-primary" data-sudialog='{"sel":".popin-1","method":"show"}'>Ouvrir</button>
</div>
Démo 2 : method
popover automatique
Si la <dialog>
porte l’attribut popover
, le JS choisira automatiquement la méthode showPopover
pour l’afficher. Il lui ajoutera aussi la classe su-open
pour compenser l’absence d’ajout d’attribut open
géré par les navigateurs avec show
ou showModal
.
<div class="demo2">
<dialog class="popin-2" popover>
<button class="su-button su-primary" data-sudialog>Fermer</button>
</dialog>
<button class="su-button su-primary" data-sudialog='{"sel":".popin-2"}'>Ouvrir</button>
</div>
Démo 3 : surcharge timeout
Avec le paramètre timeout
réglé à 6000
on peut forcer un comportement d’auto-fermeture. Dans ce cas, la boîte de dialogue disparaît lorsque le nombre de millisecondes précisées est écoulé.
<div class="demo3">
<dialog class="popin-3">
<p>Fermeture automatique 6 secondes après l’ouverture.</p>
</dialog>
<button class="su-button su-primary" data-sudialog='{"sel":".popin-3","method":"show","timeout":6000}'>Ouvrir</button>
</div>