example.html

<!doctype html>
<html lang="en">
  <title>Invoker Buttons Example</title>
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <script
    type="module"
    async
    src="https://unpkg.com/@oddbird/popover-polyfill@0.5.2/dist/popover.js"
  ></script>
  <script type="module" src="./index.js"></script>
  <body>
    <h1>commandfor &amp; command attributes</h1>
    <p>
      This is a demonstration page for the
      <a href="https://github.com/keithamus/invokers-polyfill"
        >github:keithamus/invokers-polyfill</a
      >, which polyfills the <a href="https://open-ui.org/components/invokers.explainer/">
        Invoker Buttons proposal
      </a>
    </p>
    <hr />
    <h2>Initial Actions</h2>
    <button commandfor="my-dialog" command="show-modal" interesttarget="dialog-explainer">
      This will open the dialog
    </button>

    <dialog id="my-dialog">
      <button
        commandfor="my-dialog"
        command="close"
        aria-label="Close dialog"
      >
        x
      </button>
      This is a dialog. Press the Close button (X) to close it
    </dialog>

    <div popover id="dialog-explainer">
      This button will open the dialog element
    </div>

    <hr />

    <button commandfor="my-popover-1" command="toggle-popover">
      Toggles a popover
    </button>

    <div popover id="my-popover-1">
      <button commandfor="my-popover-1" command="hide-popover">X</button>
      This is a popover
    </div>
    <hr />

    <details>
      <summary>Future Actions</summary>
      <button commandfor="my-file-input" command="show-picker">
        This will open the file picker
      </button>
      <input type="file" id="my-file-input" />
      <hr />
      <button commandfor="my-date-input" command="show-picker">
        This should open the date picker
      </button>
      <input type="date" id="my-date-input" />
      <hr />

      <button commandfor="my-details" command="open" interesttarget="button-explainer">
        This will open the details
      </button>

      <details id="my-details">
        <summary>This is a details</summary>
        This is the details
      </details>

      <div popover id="button-explainer">
        This button will open the details element
      </div>

      <hr />

      <button commandfor="my-select" command="show-picker" interesttarget="select-explainer">
        This will open the select
      </button>
      <select id="my-select">
        <option>Option 1</option>
        <option>Option 2</option>
      </select>

      <div popover id="select-explainer">
        This button will open the select element, in browsers that support
        <code>select.showPicker()</code>
      </div>
      <hr />
      <button
        commandfor="my-video"
        command="play-pause"
        interesttarget="my-video-playpause-explainer"
      >
        Play/pause
      </button>
      <div popover id="my-video-playpause-explainer">
        This button will cause the video to play or pause depending on the
        current state
      </div>
      <button
        commandfor="my-video"
        command="play"
        interesttarget="my-video-play-explainer"
      >
        Play
      </button>
      <div popover id="my-video-play-explainer">
        This button will cause the video to play if it isn't already
      </div>
      <button
        commandfor="my-video"
        command="pause"
        interesttarget="my-video-pause-explainer"
      >
        Pause
      </button>
      <div popover id="my-video-pause-explainer">
        This button will cause the video to pause if it isn't already
      </div>
      <button
        commandfor="my-video"
        command="mute"
        interesttarget="my-video-mute-explainer"
      >
        Mute
      </button>
      <div popover id="my-video-mute-explainer">
        This button will cause the video mute or unmute depending on the current
        state
      </div>
      <button
        commandfor="my-video"
        command="requestfullscreen"
        interesttarget="my-video-fullscreen-explainer"
      >
        Fullscreen
      </button>
      <div popover id="my-video-fullscreen-explainer">
        This button will cause the video to go into fullscreen
      </div>
      <video id="my-video" width="100%" controls>
        <source
          src="https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4"
          type="video/mp4"
        />
      </video>
    </details>
  </body>
</html>