popover mit command

[Matthias Scharwies]

Guten Morgen,

gestern hatten sich Rolf und ich über command und commandfor ausgetauscht, die bereits im Wiki gezeigt werden.

Anlass war der Tag 7 des HTMLHell-Advent Calendars:

Controlling dialogs and popovers with the Invoker Commands API

Mit ihnen kann man dialog-Elemente aber auch popovers steuern. Im Safari läuft es seit 26.2 – aber nur am Desktop.

Also ist auch so etwas möglich:

<button commandfor="additional-info"> → mehr Infos </button>

<div id="additional-info" popover>
  <h4> … </h4>
  <p> … <p>
  <button commandfor="additional-info" command="hide" class="close-btn">
    <span aria-hidden="true">X</span>
    <span class="sr-only">Schließen</span>
</button>
</div>

command ist natürlich viel kürzer als popoovertargetaction.

Es gibt eine Liste von Commands, man kann mit --my-command aber auch Custom commands deklarieren und dann etwas mit JavaScript programmieren.

stay tuned

Herzliche Grüße
Matthias Scharwies

[Rolf B]

Hallo Matthias Scharwies,

Also ist auch so etwas möglich: <button commandfor="additional-info"> → mehr Infos </button>

Wo hast Du das getestet?

Ich habe das gerade probiert – in Chrome und Firefox – und es passiert nichts. commandfor ohne command ist wirkungslos. Bei mir funktionieren diese beiden Varianten:

<button popovertarget="popup"
        popovertargetaction="show">Zeige mit Popover</button>
<button commandfor="popup"
        command="show-popover">Zeige mit Command</button>

<div id="popup" popover >I Pop Up!</div>

Dabei macht ein unvollständiges Pärchen das jeweils andere kaputt, d.h. wenn ich dem Button 1 ein commandfor ohne command hinzufüge oder dem Button 2 ein popovertarget ohne popovertargetaction, funktioniert der jeweilige Button nicht mehr.

Ob das command/commandfor-Pärchen die aria- und anchor-Beziehungen herstellt, die bei popover implizit sind, müsste man nochmal untersuchen. Wenn ich MDN richtig deute, läge hier der Unterschied zwischen den beiden Varianten.

Rolf

[JürgenB]

Hallo Matthias, hallo Rolf,

Ich habe das gerade probiert – in Chrome und Firefox – und es passiert nichts. commandfor ohne command ist wirkungslos. Bei mir funktionieren diese beiden Varianten:

<button popovertarget="popup"
        popovertargetaction="show">Zeige mit Popover</button>
<button commandfor="popup"
        command="show-popover">Zeige mit Command</button>

<div id="popup" popover >I Pop Up!</div>

Dabei macht ein unvollständiges Pärchen das jeweils andere kaputt, d.h. wenn ich dem Button 1 ein commandfor ohne command hinzufüge oder dem Button 2 ein popovertarget ohne popovertargetaction, funktioniert der jeweilige Button nicht mehr.

also bei Chrome unter MacOS funktioniert popovertarget auch ohne popovertargetaction, bei commandfor scheint es aber kein Defaultkommando zu geben

Ob das command/commandfor-Pärchen die aria- und anchor-Beziehungen herstellt, die bei popover implizit sind, müsste man nochmal untersuchen. Wenn ich MDN richtig deute, läge hier der Unterschied zwischen den beiden Varianten.

Die anchor-Beziehungen wird (im Chrome unter MacOS) hergestellt.

Gruß
Jürgen

PS Mit Safari konnte ich nicht testen, da auf meinem MacBook Air mit M4-Chip noch 26.1 läuft. Der laut caniuse schon Anfang November ausgelieferte Safari 26.2 ist bei mir noch nicht angekommen 😟

[Matthias Scharwies]

Servus!

Hallo Matthias Scharwies,

Also ist auch so etwas möglich: <button commandfor="additional-info"> → mehr Infos </button>

Wo hast Du das getestet?

Ich habe das gerade probiert – in Chrome und Firefox – und es passiert nichts. commandfor ohne command ist wirkungslos.

Ja, nur zu schnell geschrieben.

Ich habe die beiden Referenz-Artikel zu ocmmand und commandfor aktualisiert, auch dialog, aber noch nicht popover,etc.

Bei mir funktionieren diese beiden Varianten:

Ja, das müsste man irgendwann in das Popover-Tutorial übernehmen. Aber erst, wenn sich der Zwang zu einem Polyfill erübrigt hat.

Herzliche Grüße
Matthias Scharwies