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 beforetoggle & toggle events during dialog open/close/showModal #10091

Merged
merged 18 commits into from
Nov 5, 2024
Merged

Dispatch beforetoggle & toggle events during dialog open/close/showModal #10091

Changes from all commits
Commits
Show all changes
18 commits
Select commit Hold shift + click to select a range
2d7e978
dispatch toggleevents for dialog open/close
keithamus Jan 25, 2024
1a07647
add dialog toggle task tracker
keithamus Jan 29, 2024
ebe5785
use dialog toggle event tasks for toggle events
keithamus Jan 29, 2024
59b315c
queue a dialog toggle event task on close
keithamus Jan 29, 2024
1541f48
fix queued toggle event on close
keithamus Jan 29, 2024
b512f75
s/on the//
keithamus Oct 13, 2024
292371e
remove comma
keithamus Oct 13, 2024
6be2ea9
s/toggle/beforetoggle/
keithamus Oct 13, 2024
b1251f0
return early if dialog closed after beforetoggle fired
keithamus Oct 13, 2024
f47f220
return early if dialog opened after beforetoggle fired
keithamus Oct 13, 2024
18cd173
return early if dialog opened after beforetoggle fired
keithamus Oct 13, 2024
053065b
reorder queued toggle events just after beforetoggle, for clarity
keithamus Oct 13, 2024
1194962
guard showModal against remove/showPopover during beforetoggle
keithamus Oct 17, 2024
17769f6
remove newline
keithamus Oct 17, 2024
e9003fe
fixup line wrapping
keithamus Nov 4, 2024
b666d93
more line-wrapping fixups
keithamus Nov 4, 2024
471dbdd
more line-wrapping fixups
keithamus Nov 4, 2024
0b273ef
fixup line wrapping on p tag
keithamus Nov 5, 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 @@ -61734,6 +61734,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>
</ol>


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

Expand All @@ -61744,6 +61787,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>
keithamus marked this conversation as resolved.
Show resolved Hide resolved
attribute initialized to "<code data-x="">open</code>" at <var>this</var> is false, then
keithamus marked this conversation as resolved.
Show resolved Hide resolved
return.</p></li>
annevk 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
keithamus marked this conversation as resolved.
Show resolved Hide resolved
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 @@ -61782,6 +61839,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
keithamus marked this conversation as resolved.
Show resolved Hide resolved
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 @@ -61915,6 +61991,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