Skip to content

Commit

Permalink
Add popover source connection
Browse files Browse the repository at this point in the history 
This includes two related changes:

1. The showPopover() and togglePopover() methods now include an options bag that allows setting the popover source.

2. Popover sources (declaratively or imperatively set) now create an implicit anchor reference for that popover.

See discussion in whatwg#9144 (comment). Closes whatwg#10442. Closes whatwg#10675.
  • Loading branch information
@mfreed7
mfreed7 authored Nov 15, 2024
1 parent 316b83b commit b4e1fb1
Showing 1 changed file with 53 additions and 10 deletions.
63 changes: 53 additions & 10 deletions source
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4192,6 +4192,12 @@ a.setAttribute('href', 'https://example.com/'); // change the content attribute
<li><dfn data-x-href="https://drafts.csswg.org/css-contain/#content-visibility">'content-visibility'</dfn> property</li>
<li><dfn data-x-href="https://drafts.csswg.org/css-contain/#propdef-content-visibility" data-x="content-visibility-auto">'auto'</dfn> value for <span>'content-visibility'</span></li>
</ul>

<p>The following terms are defined in <cite>CSS Anchor Positioning</cite>: <ref>CSSANCHOR</ref></p>

<ul class="brief">
<li><dfn data-x-href="https://drafts.csswg.org/css-anchor-position/#implicit-anchor-element">implicit anchor element</dfn></li>
</ul>
</dd>


Expand Down Expand Up @@ -11924,12 +11930,20 @@ interface <dfn interface>HTMLElement</dfn> : <span>Element</span> {
<span>ElementInternals</span> <span data-x="dom-attachInternals">attachInternals</span>();

// The popover API
undefined <span data-x="dom-showPopover">showPopover</span>();
undefined <span data-x="dom-showPopover">showPopover</span>(optional <span>ShowPopoverOptions</span> options = {});
undefined <span data-x="dom-hidePopover">hidePopover</span>();
boolean <span data-x="dom-togglePopover">togglePopover</span>(optional boolean force);
boolean <span data-x="dom-togglePopover">togglePopover</span>(optional (<span>TogglePopoverOptions</span> or boolean) options = {});
[<span>CEReactions</span>] attribute DOMString? <span data-x="dom-popover">popover</span>;
};

dictionary <dfn dictionary>ShowPopoverOptions</dfn> {
<span>HTMLElement</span> <dfn dict-member for="ShowPopoverOptions" data-x="dom-ShowPopoverOptions-source">source</dfn>;
};

dictionary <dfn dictionary>TogglePopoverOptions</dfn> : <span>ShowPopoverOptions</span> {
boolean <dfn dict-member for="TogglePopoverOptions" data-x="dom-TogglePopoverOptions-force">force</dfn>;
};

<span>HTMLElement</span> includes <span>GlobalEventHandlers</span>;
<span>HTMLElement</span> includes <span>ElementContentEditable</span>;
<span>HTMLElement</span> includes <span>HTMLOrSVGElement</span>;
Expand Down Expand Up @@ -85525,8 +85539,17 @@ dictionary <dfn dictionary>DragEventInit</dfn> : <span>MouseEventInit</span> {
false.</dd>
</dl>

<p>The <dfn method for="HTMLElement"><code data-x="dom-showPopover">showPopover()</code></dfn>
method steps are to run <span>show popover</span> given <span>this</span>, true, and null.</p>
<p>The <dfn method for="HTMLElement"><code
data-x="dom-showPopover">showPopover(<var>options</var>)</code></dfn> method steps are:</p>

<ol>
<li><p>Let <var>invoker</var> be <var>options</var>["<code
data-x="dom-ShowPopoverOptions-source">source</code>"] if it <span data-x="map
exists">exists</span>; otherwise, null.</p></li>

<li><p>Run <span>show popover</span> given <span>this</span>, true, and
<var>invoker</var>.</p></li>
</ol>

<p>To <dfn>show popover</dfn>, given an <span data-x="HTML elements">HTML element</span>
<var>element</var>, a boolean <var>throwExceptions</var>, and an <span data-x="HTML elements">HTML
Expand Down Expand Up @@ -85655,6 +85678,9 @@ dictionary <dfn dictionary>DragEventInit</dfn> : <span>MouseEventInit</span> {

<li><p>Set <var>element</var>'s <span>popover invoker</span> to <var>invoker</var>.</p></li>

<li><p>Set <var>element</var>'s <span>implicit anchor element</span> to
<var>invoker</var>.</p></li>

<li><p>Run the <span>popover focusing steps</span> given <var>element</var>.</p></li>

<li><p>If <var>shouldRestoreFocus</var> is true and <var>element</var>'s <code
Expand Down Expand Up @@ -85805,6 +85831,8 @@ dictionary <dfn dictionary>DragEventInit</dfn> : <span>MouseEventInit</span> {

<li><p><span>Request an element to be removed from the top layer</span> given
<var>element</var>.</p></li>

<li><p>Set <var>element</var>'s <span>implicit anchor element</span> to null.</p></li>
</ol>
</li>

Expand Down Expand Up @@ -85839,16 +85867,28 @@ dictionary <dfn dictionary>DragEventInit</dfn> : <span>MouseEventInit</span> {
</ol>

<p>The <dfn method for="HTMLElement"><code
data-x="dom-togglePopover">togglePopover(<var>force</var>)</code></dfn> method steps are:</p>
data-x="dom-togglePopover">togglePopover(<var>options</var>)</code></dfn> method steps are:</p>

<ol>
<li><p>Let <var>force</var> be null.</p></li>

<li><p>If <var>options</var> is a boolean, set <var>force</var> to <var>options</var>.</p></li>

<li><p>Otherwise, if <var>options</var>["<code
data-x="dom-TogglePopoverOptions-force">force</code>"] <span data-x="map exists">exists</span>,
set <var>force</var> to <var>options</var>["<code
data-x="dom-TogglePopoverOptions-force">force</code>"].</p></li>

<li><p>Let <var>invoker</var> be <var>options</var>["<code
data-x="dom-ShowPopoverOptions-source">source</code>"] if it <span data-x="map
exists">exists</span>; otherwise, null.</p></li>

<li><p>If <span>this</span>'s <span>popover visibility state</span> is <span
data-x="popover-showing-state">showing</span>, and <var>force</var> is not present or false, then
run the <span>hide popover algorithm</span> given <span>this</span>, true, true, and
true.</p></li>
data-x="popover-showing-state">showing</span>, and <var>force</var> is null or false, then run
the <span>hide popover algorithm</span> given <span>this</span>, true, true, and true.</p></li>

<li><p>Otherwise, if <var>force</var> is not present or true, then run <span>show popover</span>
given <span>this</span>, true, and null.</p></li>
<li><p>Otherwise, if <var>force</var> is null or true, then run <span>show popover</span> given
<span>this</span>, true, and <var>invoker</var>.</p></li>

<li>
<p>Otherwise:</p>
Expand Down Expand Up @@ -144542,6 +144582,9 @@ INSERT INTERFACES HERE
<dt id="refsCSSALIGN">[CSSALIGN]</dt>
<dd><cite><a href="https://w3c.github.io/csswg-drafts/css-align/">CSS Box Alignment</a></cite>, E. Etemad, T. Atkins. W3C.</dd>

<dt id="refsCSSANCHOR">[CSSANCHOR]</dt>
<dd><cite><a href="https://drafts.csswg.org/css-anchor-position/">CSS Anchor Positioning</a></cite>, T. Atkins, E. Etemad, I. Kilpatrick. W3C.</dd>

<dt id="refsCSSANIMATIONS">[CSSANIMATIONS]</dt>
<dd><cite><a href="https://w3c.github.io/csswg-drafts/css-animations/">CSS Animations</a></cite>, D. Jackson, D. Hyatt, C. Marrin, S. Galineau, L. Baron. W3C.</dd>

Expand Down

0 comments on commit b4e1fb1

Please sign in to comment.