HTMLElement : méthode togglePopover()

force

Un booléen, qui fait que togglePopover() se comporte comme showPopover() ou hidePopover(), à l'exception qu'elle ne lance pas d'exception si le popover est déjà dans l'état cible.

• S'il est défini sur true, le popover est affiché s'il était initialement masqué. S'il était initialement affiché, rien ne se passe.
• S'il est défini sur false, le popover est masqué s'il était initialement affiché. S'il était initialement masqué, rien ne se passe.

true si le popup est ouvert après l'appel, et false sinon.

L'exemple qui suit est une version légèrement modifiée de l'exemple d'interface d'aide. L'exemple affiche/masque un popover en appuyant sur une touche particulière du clavier (lorsque la fenêtre de l'exemple a le focus).

Le HTML de l'exemple est affiché ci-après. Le premier élément fournit les instructions sur la façon d'invoquer le popup, ce dont nous avons besoin, car les popups sont masqués par défaut.

<p id="instructions">
  Appuyez sur <kbd>h</kbd> pour afficher/masquer une fenêtre d'aide
  (sélectionnez d'abord la fenêtre de l'exemple).
</p>

Nous définissons ensuite un élément <div> qui est le popup. Le contenu réel n'a pas d'importance, mais notez que nous avons besoin de l'attribut popover pour faire du <div> un popover afin qu'il soit masqué par défaut (nous pourrions également définir cet élément dans le JavaScript).

<div id="mypopover" popover>
  <h2>Aides</h2>

  <p>Vous pouvez utiliser les touches suivantes pour contrôlez l'application</p>

  <ul>
    <li>Pressez la touche <ins>C</ins> pour commander du fromage</li>
    <li>Pressez la touche <ins>T</ins> pour commander du tofu</li>
    <li>Pressez la touche <ins>B</ins> pour commander du bacon</li>
  </ul>
</div>

Premièrement, nous vérifions que le navigateur prend en charge les popovers. Si ce n'est pas le cas, nous masquons la div popover afin qu'elle ne soit pas visible par défaut.

const instructions = document.getElementById("instructions");
const popover = document.getElementById("mypopover");

if (!HTMLElement.prototype.hasOwnProperty("popover")) {
  popover.innerText = "";
  instructions.innerText =
    "Votre navigateur ne prend pas en charge les popovers.";
}

Si les popovers sont supportés, nous ajoutons un gestionnaire d'évènement qui vérifie si la touche h est pressée, et si c'est le cas nous changeons l'état du popover. Nous affichons également l'état du popover après l'évènement, mais uniquement si les valeurs true ou false ont été retournées.

if (HTMLElement.prototype.hasOwnProperty("popover")) {
  document.addEventListener("keydown", (event) => {
    if (event.key === "h") {
      const popupOpened = popover.togglePopover();

      // Vérifie si le popover est ouvert ou fermé
      // sur les navigateurs qui le prennent en charge
      if (popupOpened !== undefined) {
        instructions.innerText += popupOpened === true ? `\nOuvert` : `\nFermé`;
      }
    }
  });
}

• L'API Popover