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 selecteur dialog.popin-1 dans le document.
• method : permet de changer la méthode appelée par défaut showModal ; autre valeur possible show pour permettre de continuer l’interaction avec le reste du document. N. B. - Si la <dialog> à afficher porte l’attribut popover, ce sera la méthode showPopover 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.

<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>