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.

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 dialog light dismiss behavior #10737

Merged
merged 28 commits into from
Jan 15, 2025
Merged
Changes from 1 commit
Commits
Show all changes
28 commits
Select commit Hold shift + click to select a range
4a93ad6
Add closedby attribute to <dialog>
mfreed7 Oct 31, 2024
3630019
Small tweaks
mfreed7 Oct 31, 2024
32c2240
Add requestClose()
mfreed7 Oct 31, 2024
78f9789
Fix tag nesting
mfreed7 Oct 31, 2024
b99c5ac
Move note out of OL
mfreed7 Nov 1, 2024
8698d0b
Address comments
mfreed7 Nov 8, 2024
f50198e
Check for open attribute
mfreed7 Nov 8, 2024
fb01762
Adjust algorithm to match impl and tests
mfreed7 Nov 13, 2024
4f205bd
Address comments
mfreed7 Nov 13, 2024
38bdafe
Update attribute index
mfreed7 Nov 13, 2024
873e451
Adjustments from dbaron
mfreed7 Nov 14, 2024
e7fbbec
Fix up the return value
mfreed7 Nov 15, 2024
8b019a4
Fix up closewatcher
mfreed7 Nov 15, 2024
b57968e
Fix up ol/li/p
mfreed7 Nov 15, 2024
ea474af
Some cleanup
mfreed7 Nov 15, 2024
db56191
Fix "empty" xref
mfreed7 Nov 15, 2024
82a4561
Address domenic@ comments
mfreed7 Nov 21, 2024
6a9e20b
Address annevk comments
mfreed7 Dec 2, 2024
20dc2fe
Change behavior to only close topmost dialog
mfreed7 Dec 5, 2024
f5a0919
Remove extra section
mfreed7 Dec 6, 2024
3f413d3
Remove exception
mfreed7 Dec 6, 2024
d9ed19f
Add closewatcher override for requestClose
mfreed7 Dec 6, 2024
ff98f98
Address 2 nits
mfreed7 Dec 9, 2024
2fb87b1
Address domenic comments
mfreed7 Dec 10, 2024
6aa7386
Side-step closewatcher abuse prevention
mfreed7 Dec 10, 2024
344d87f
allowPreventClose -> requireHistoryActionActivation
mfreed7 Dec 11, 2024
76619aa
Change closeWatcher.requestClose() also
mfreed7 Dec 12, 2024
57df925
Address two comments
mfreed7 Dec 12, 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
Prev Previous commit
Next Next commit
Add requestClose()
mfreed7 committed Nov 16, 2024
commit 32c2240293a2d87b71f7fdd57d729d495a4fcf77
63 changes: 50 additions & 13 deletions source
Original file line number Diff line number Diff line change
@@ -61595,6 +61595,7 @@ interface <dfn interface>HTMLDialogElement</dfn> : <span>HTMLElement</span> {
[<span>CEReactions</span>] undefined <span data-x="dom-dialog-show">show</span>();
[<span>CEReactions</span>] undefined <span data-x="dom-dialog-showModal">showModal</span>();
[<span>CEReactions</span>] undefined <span data-x="dom-dialog-close">close</span>(optional DOMString returnValue);
[<span>CEReactions</span>] undefined <span data-x="dom-dialog-request-close">requestClose</span>(optional DOMString returnValue);
};</code></pre>
</dd>
<dd w-dev>Uses <code>HTMLDialogElement</code>.</dd>
@@ -61701,7 +61702,8 @@ interface <dfn interface>HTMLDialogElement</dfn> : <span>HTMLElement</span> {
<tr>
<td><dfn attr-value for="dialog/closedby"><code data-x="attr-closedby-any">any</code></dfn>
<td><dfn data-x="attr-closedby-any-state">Any</dfn>
<td><span data-x="close request">Close requests</span> (e.g. user hitting ESC) or clicking outside closes the dialog.
<td><span data-x="close request">Close requests</span> (e.g. user hitting ESC) or clicking
outside closes the dialog.
<tr>
<td><dfn attr-value for="dialog/closedby"><code data-x="attr-closedby-closerequest">closerequest</code></dfn>
<td><dfn data-x="attr-closedby-closerequest-state">Close Request</dfn>
@@ -61772,6 +61774,13 @@ interface <dfn interface>HTMLDialogElement</dfn> : <span>HTMLElement</span> {
<p>The argument, if provided, provides a return value.</p>
</dd>

<dt><code data-x=""><var>dialog</var>.<span subdfn data-x="dom-dialog-request-close">requestClose</span>([ <var>result</var> ])</code></dt>
<dd>
<p>Requests the closure of the <code>dialog</code> element.</p>

<p>The argument, if provided, provides a return value.</p>
</dd>

<dt><code data-x=""><var>dialog</var>.<span subdfn data-x="dom-dialog-returnValue">returnValue</span> [ = <var>result</var> ]</code></dt>
<dd>
<p>Returns the <code>dialog</code>'s return value.</p>
@@ -62060,6 +62069,17 @@ interface <dfn interface>HTMLDialogElement</dfn> : <span>HTMLElement</span> {
<li><p><span>Close the dialog</span> <span>this</span> with <var>returnValue</var>.</p></li>
</ol>

<p>The <dfn method for="HTMLDialogElement"><code
data-x="dom-dialog-request-close">requestClose(<var>returnValue</var>)</code></dfn> method steps
are:

<ol>
<li><p>If <var>returnValue</var> is not given, then set it to null.</p></li>

<li><p><span>Request to close the dialog</span> with <span>this</span> and
<var>returnValue</var>.</p></li>
</ol>

<p>When a <code>dialog</code> element <var>subject</var> is to be <dfn data-x="close the
dialog">closed</dfn>, with null or a string <var>result</var>, run these steps:</p>

@@ -62285,7 +62305,7 @@ interface <dfn interface>HTMLDialogElement</dfn> : <span>HTMLElement</span> {
<li><p>Let <var>topDialog</var> be <var>document</var>'s <span>light dismissible dialog
list</span>'s last element.</p></li>

<li><p>Let <var>sameTarget<var> be true if var>clickedDialog</var> is <span>dialog pointerdown
<li><p>Let <var>sameTarget<var> be true if <var>clickedDialog</var> is <span>dialog pointerdown
target</span>.</p></li>

<li><p>Let <var>clickedTopDialog</var> be true if <var>clickedDialog</var> is
@@ -62295,14 +62315,36 @@ interface <dfn interface>HTMLDialogElement</dfn> : <span>HTMLElement</span> {

<li><p>If <var>clickedTopDialog</var> is true or <var>sameTarget<var> is false, then return.</p></li>

<li><p>Perform <span>close the dialog</span> given <var>topDialog</var>.</p></li>
<li><p>Perform <span>request to close the dialog</span> given <var>topDialog</var>.</p></li>
</ol>
</li>
</ol>

<p class="XXX"><span>Light dismiss open dialogs</span> will be called by the <a
href="https://github.com/w3c/pointerevents/pull/460">Pointer Events spec</a> when the user clicks
or touches anywhere on the page.</p>
<p>To <dfn>run light dismiss activities</dfn>, given an <code>Event</code> <var>event</var>:</p>

<ol>
<li><p>Run <span>Light dismiss open dialogs</span> with <var>event</var>.</p></li>

<li><p>Run <span>Light dismiss open popovers</span> with <var>event</var>.</p></li>

<p class="XXX"><span>Run light dismiss activities</span> will be called by the <a
href="https://github.com/w3c/pointerevents/pull/460">Pointer Events spec</a> when the user clicks
or touches anywhere on the page.</p>
</ol>

<p>To <dfn>request to close the dialog</dfn>, given a <code data-x="HTMLDialogElement">dialog element</code>
<var>dialog</var> and a <code>DOMString</code> <var>returnValue</var>:</p>

<ol>
<li><p>Let <var>notCanceled</var> be the result of <span
data-x="concept-event-fire">firing an event</span> named <code data-x="event-cancel">cancel</code> at
<span>dialog</span>, with the <code data-x="dom-Event-cancelable">cancelable</code> attribute
initialized to true.</p></li>

<li><p>If <var>notCanceled</var> is false, return.</p></li>

<li><p><span>Close the dialog</span> given <span>dialog</span> and <var>returnValue</var>.</p></li>
</ol>

<p>To find the <dfn>topmost clicked dialog</dfn>, given a <code>Node</code> <var>node</var>:</p>

@@ -62320,9 +62362,8 @@ interface <dfn interface>HTMLDialogElement</dfn> : <span>HTMLElement</span> {
<li><p>Let <var>dialogs</var> be « ».</p></li>

<li><p><span data-x="list iterate">For each</span> <code>Element</code> <var>element</var> in
<var>document</var>: if <var>element</var> is a <code
data-x="HTMLDialogElement">dialog element</code>, <var>element</var>'s <code
data-x="attr-dialog-closedby">closedby</code> attribute is in the <span
<var>document</var>: if <var>element</var> is a <code data-x="HTMLDialogElement">dialog element</code>,
<var>element</var>'s <code data-x="attr-dialog-closedby">closedby</code> attribute is in the <span
data-x="attr-closedby-any-state">any state</span>, and <var>element</var> has the <code
data-x="attr-dialog-open">open</code> attribute, then <span data-x="list append">append</span>
<var>element</var> to <var>dialogs</var>.</p></li>
@@ -86680,10 +86721,6 @@ dictionary <dfn dictionary>DragEventInit</dfn> : <span>MouseEventInit</span> {
</li>
</ol>

<p class="XXX"><span>Light dismiss open popovers</span> will be called by the <a
href="https://github.com/w3c/pointerevents/pull/460">Pointer Events spec</a> when the user clicks
or touches anywhere on the page.</p>

<p>To find the <dfn>topmost clicked popover</dfn>, given a <code>Node</code> <var>node</var>:</p>

<ol>