Commandes d'invocateur: façons supplémentaires de travailler avec Dialog, Popover… et plus encore?

L'API élément dialog et popover sont des ajouts puissants à la plate-forme Web. J'ai récemment a fourni une analyse détaillée de leurs applications et des techniques sans papiers découvertes. Cependant, leurs implémentations distinctes semblent inutilement complexes.

Les navigateurs Web introduisent des "commandes d'invocateur" - les attributs command et commandfor - pour simplifier l'interaction avec les popovers, les dialogues et les fonctionnalités futures, minimisant la recours JavaScript. Ces attributs introduisent également de nouveaux événements JavaScript.

Statut expérimental:

N'oubliez pas que ce sont des caractéristiques expérimentales. Leur permettez-leur:

• Chrome Canary 134 (drapeau: enable-experimental-web-platform-features)
• Firefox Nightly 135 (drapeau: dom.element.invokers.enabled)
• Aperçu de la technologie Safari (drapeau: InvokerAttributesEnabled)

Leur élégante abstraction des tâches de script suggère une adoption généralisée est probable.

Utilisation de base:

Utilisez un élément de type bouton (par exemple, <button></button>, <a></a>) avec l'attribut command (spécifiant le nom de commande, comme "show-modal") et commandfor (référence à l'ID de l'élément cible).

<button command="show-modal" commandfor="dialogA">Show dialogA</button>
<dialog id="dialogA">...</dialog>

Explorons les valeurs de commande.

Valeurs d'attribut:

• show-modal: L'équivalent HTML de showModal(). Il permet un affichage modal sans javascript. Cela reflète les popovers existantes conformes à HTML, créant une approche plus cohérente.

• show: Une commande show pour les boîtes de dialogue non modale est absente. Compte tenu des capacités de l'API popover, les dialogues non modaux peuvent devenir obsolètes.

• close: L'équivalent HTML de close(), fermant la boîte de dialogue.

• show-popover, hide-popover, toggle-popover: Ces miroirs showPopover(), hidePopover(), et togglePopover(), respectivement. Bien que utile, leur fonctionnalité est déjà accessible à travers les attributs de popover existants.

Voici un résumé:

Command	Equivalent JavaScript Method	Notes
show-modal	showModal()	Shows a modal dialog.
close	close()	Closes a dialog or popover.
show-popover	showPopover()	Shows a popover (redundant with existing popover attributes).
hide-popover	hidePopover()	Hides a popover (redundant with existing popover attributes).
toggle-popover	togglePopover()	Toggles a popover (redundant with existing popover attributes).
--custom-command	N/A	Custom commands prefixed with --.

Gestion des événements JavaScript:

Les commandes d'invocateur

déclenchent un événement command sur l'élément cible. Ceci est particulièrement utile pour les éléments dialog, qui manquent d'un événement show.

<button command="show-modal" commandfor="dialogA">Show dialogA</button>
<dialog id="dialogA">...</dialog>

La manipulation des événements popover est similaire:

dialogs.forEach(dialog => {
  dialog.addEventListener("command", event => {
    if (event.command === "show-modal") { /* Dialog shown */ }
    else if (event.command === "close") { /* Dialog closed */ }
  });
});

event.source Fournit l'élément de bouton invoquant. Les attributs peuvent également être définis via JavaScript:

popovers.forEach(popover => {
  popover.addEventListener("command", event => {
    if (event.command === "show-popover") { /* Popover shown */ }
    // ...
  });
});

Commandes personnalisées:

Les commandes personnalisées (par exemple, --spin-me-a-bit) permettent une fonctionnalité étendue.

Support futur:

Bien que concentré initialement sur <dialog></dialog> et les popovers, le support futur pour <details></details>, <input type="color">, <video></video>, et les contrôles à écran complet sont prévus.

Avantages:

Les commandes d'invocateur réduisent JavaScript, offrent une manipulation de type événement et fournissent des méthodes d'interaction alternatives pour les API existantes. Ils affinent et améliorent les fonctionnalités existantes.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!