Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add imperative access to popover invoker, and connect popover/invoker to implicit anchor element #10728

Merged
merged 8 commits into from
Nov 15, 2024
Merged

Add imperative access to popover invoker, and connect popover/invoker to implicit anchor element #10728

Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
aba8d39
Add imperative access to invoker, and connect to implicit anchor element
mfreed7 Oct 28, 2024
a4ea186
Slight cleanup
mfreed7 Oct 28, 2024
11a3209
Address comments
mfreed7 Oct 29, 2024
e35d6aa
Remove todo
mfreed7 Oct 30, 2024
a4eac71
invoker to source
mfreed7 Nov 11, 2024
68bd6c3
Handle null options
mfreed7 Nov 13, 2024
5602678
Missed one
mfreed7 Nov 13, 2024
660f130
Set -> Let, wrapping, remove CSS URL version
domenic Nov 15, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
63 changes: 53 additions & 10 deletions source
View file
Open in desktop
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>
domenic marked this conversation as resolved.
Show resolved Hide resolved
</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 = {});
mfreed7 marked this conversation as resolved.
Show resolved Hide resolved
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 = {});
mfreed7 marked this conversation as resolved.
Show resolved Hide resolved
[<span>CEReactions</span>] attribute DOMString? <span data-x="dom-popover">popover</span>;
};

dictionary <dfn dictionary>ShowPopoverOptions</dfn> {
mfreed7 marked this conversation as resolved.
Show resolved Hide resolved
<span>HTMLElement</span> <dfn dict-member for="ShowPopoverOptions" data-x="dom-ShowPopoverOptions-source">source</dfn>;
mfreed7 marked this conversation as resolved.
Show resolved Hide resolved
mfreed7 marked this conversation as resolved.
Show resolved Hide resolved
};

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 @@ -144547,6 +144587,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