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

Jump to bottom

dispatch toggleevents for dialog open/close #10091

Open
wants to merge 14 commits into
base: main
Choose a base branch
from
Open

dispatch toggleevents for dialog open/close #10091

Changes from all commits
Commits
Show all changes
14 commits
Select commit Hold shift + click to select a range
87a626d
dispatch toggleevents for dialog open/close
keithamus Jan 25, 2024
895ed4d
add dialog toggle task tracker
keithamus Jan 29, 2024
adbfe07
use dialog toggle event tasks for toggle events
keithamus Jan 29, 2024
210dcab
queue a dialog toggle event task on close
keithamus Jan 29, 2024
eb2056c
fix queued toggle event on close
keithamus Jan 29, 2024
8e69a0b
s/on the//
keithamus Oct 13, 2024
cd96aeb
remove comma
keithamus Oct 13, 2024
84c0f1f
s/toggle/beforetoggle/
keithamus Oct 13, 2024
9fb2ac3
return early if dialog closed after beforetoggle fired
keithamus Oct 13, 2024
920ebd8
return early if dialog opened after beforetoggle fired
keithamus Oct 13, 2024
b21ed65
return early if dialog opened after beforetoggle fired
keithamus Oct 13, 2024
0b2b8c8
reorder queued toggle events just after beforetoggle, for clarity
keithamus Oct 13, 2024
91adad9
guard showModal against remove/showPopover during beforetoggle
keithamus Oct 17, 2024
a83f832
remove newline
keithamus Oct 17, 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
88 changes: 88 additions & 0 deletions source
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -60963,6 +60963,49 @@ interface <dfn interface>HTMLDialogElement</dfn> : <span>HTMLElement</span> {

<div w-nodev>

<p>Every <code>dialog</code> element has a <dfn>dialog toggle task tracker</dfn>, which is a
<span>toggle task tracker</span> or null, initially null.</p>

<p>To <dfn>queue a dialog toggle event task</dfn> given a <code>dialog</code> element
<var>element</var>, a string <var>oldState</var>, and a string <var>newState</var>:

<ol>
<li>
<p>If <var>element</var>'s <span>dialog toggle task tracker</span> is not null, then:</p>

<ol>
<li><p>Set <var>oldState</var> to <var>element</var>'s <span>dialog toggle task
tracker</span>'s <span data-x="toggle-task-old-state">old state</span>.</p></li>

<li><p>Remove <var>element</var>'s <span>dialog toggle task tracker</span>'s <span
data-x="toggle-task-task">task</span> from its <span>task queue</span>.</p></li>

<li><p>Set <var>element</var>'s <span>dialog toggle task tracker</span> to null.</p></li>
</ol>
</li>

<li>
<p><span>Queue an element task</span> given the <span>DOM manipulation task source</span> and
<var>element</var> to run the following steps:</p>

<ol>
<li><p><span data-x="concept-event-fire">Fire an event</span> named <code
data-x="event-toggle">toggle</code> at <var>element</var>, using <code>ToggleEvent</code>, with
the <code data-x="dom-ToggleEvent-oldState">oldState</code> attribute initialized to
<var>oldState</var> and the <code data-x="dom-ToggleEvent-newState">newState</code> attribute
initialized to <var>newState</var>.</p></li>

<li><p>Set <var>element</var>'s <span>dialog toggle task tracker</span> to null.</p></li>
</ol>
</li>

<li><p>Set <var>element</var>'s <span>dialog toggle task tracker</span> to a struct with <span
data-x="toggle-task-task">task</span> set to the just-queued <span
data-x="concept-task">task</span> and <span data-x="toggle-task-old-state">old state</span> set
to <var>oldState</var>.</p></li>
Comment on lines +61002 to +61005
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Just-queued is a lil vague. But I guess we have no alternative?

Copy link
Contributor Author

@keithamus keithamus Oct 13, 2024 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I cribbed this from the popover part of the spec which does the same thing. Happy to look at alternatives.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yeah if all the task queueing algorithms returned the task they create then this would be better. Maybe that could be done as a follow up and we could fix up this part and the identical popover one?

</ol>


<p>The <dfn method for="HTMLDialogElement"><code data-x="dom-dialog-show">show()</code></dfn>
method steps are:</p>

Expand All @@ -60973,6 +61016,20 @@ interface <dfn interface>HTMLDialogElement</dfn> : <span>HTMLElement</span> {
<li><p>If <span>this</span> has an <code data-x="attr-dialog-open">open</code> attribute, then
throw an <span>"<code>InvalidStateError</code>"</span> <code>DOMException</code>.</p></li>

<li><p>If the result of <span data-x="concept-event-fire">firing an event</span> named <code
data-x="event-beforetoggle">beforetoggle</code>, using <code>ToggleEvent</code>, with the <code
data-x="dom-Event-cancelable">cancelable</code> attribute initialized to true, the <code
data-x="dom-ToggleEvent-oldState">oldState</code> attribute initialized to "<code
data-x="">closed</code>", and the <code data-x="dom-ToggleEvent-newState">newState</code>
attribute initialized to "<code data-x="">open</code>" at <var>this</var> is false, then
return.</p></li>

keithamus marked this conversation as resolved.
Show resolved Hide resolved
<li><p>If <span>this</span> has an <code data-x="attr-dialog-open">open</code> attribute, then
return.</p></li>

<li><p><span>Queue a dialog toggle event task</span> given <var>subject</var>,
"<code data-x="">closed</code>", and "<code data-x="">open</code>".</p></li>

<li><p>Add an <code data-x="attr-dialog-open">open</code> attribute to <span>this</span>, whose
value is the empty string.</p></li>

Expand Down Expand Up @@ -61002,6 +61059,25 @@ interface <dfn interface>HTMLDialogElement</dfn> : <span>HTMLElement</span> {
state</span>, then throw an <span>"<code>InvalidStateError</code>"</span>
<code>DOMException</code>.</p></li>

<li><p>If the result of <span data-x="concept-event-fire">firing an event</span> named <code
data-x="event-beforetoggle">beforetoggle</code>, using <code>ToggleEvent</code>, with the <code
data-x="dom-Event-cancelable">cancelable</code> attribute initialized to true, the <code
data-x="dom-ToggleEvent-oldState">oldState</code> attribute initialized to "<code
data-x="">closed</code>", and the <code data-x="dom-ToggleEvent-newState">newState</code>
attribute initialized to "<code data-x="">open</code>" at <var>this</var> is false, then
return.</p></li>

<li><p>If <span>this</span> has an <code data-x="attr-dialog-open">open</code> attribute,
then return.</p></li>

<li><p>If <span>this</span> is not <span>connected</span>, then return.</p></li>

<li><p>If <span>this</span> is in the <span data-x="popover-showing-state">popover showing
state</span>, then return.</p></li>

<li><p><span>Queue a dialog toggle event task</span> given <var>subject</var>,
"<code data-x="">closed</code>", and "<code data-x="">open</code>".</p></li>

<li><p>Add an <code data-x="attr-dialog-open">open</code> attribute to <span>this</span>, whose
value is the empty string.</p></li>

Expand Down Expand Up @@ -61092,6 +61168,18 @@ interface <dfn interface>HTMLDialogElement</dfn> : <span>HTMLElement</span> {
<li><p>If <var>subject</var> does not have an <code data-x="attr-dialog-open">open</code>
attribute, then return.</p></li>

<li><p><span data-x="concept-event-fire">Fire an event</span> named
<code data-x="event-beforetoggle">beforetoggle</code>, using <code>ToggleEvent</code>, with the
<code data-x="dom-ToggleEvent-oldState">oldState</code> attribute initialized to "<code
data-x="">open</code>" and the <code data-x="dom-ToggleEvent-newState">newState</code>
attribute initialized to "<code data-x="">closed</code>" at <var>subject</var>.</p></li>

<li><p>If <var>subject</var> does not have an <code data-x="attr-dialog-open">open</code>
attribute, then return.</p></li>

<li><p><span>Queue a dialog toggle event task</span> given <var>subject</var>,
"<code data-x="">open</code>", and "<code data-x="">closed</code>".</p></li>

<li><p>Remove <var>subject</var>'s <code data-x="attr-dialog-open">open</code>
attribute.</p></li>

Expand Down