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 dialogmodaltarget attribute #9456

Closed
wants to merge 1 commit into from
+87 −3
Closed

add dialogmodaltarget attribute #9456

Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
90 changes: 87 additions & 3 deletions source
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -45686,7 +45686,8 @@ interface <dfn interface>HTMLInputElement</dfn> : <span>HTMLElement</span> {

// <a href="#HTMLInputElement-partial">also has obsolete members</a>
};
<span>HTMLInputElement</span> includes <span>PopoverInvokerElement</span>;</code></pre>
<span>HTMLInputElement</span> includes <span>PopoverInvokerElement</span>;
<span>HTMLInputElement</span> includes <span>DialogInvokerElement</span>;</code></pre>
</dd>
<dd w-dev>Uses <code>HTMLInputElement</code>.</dd>
</dl>
Expand Down Expand Up @@ -52101,7 +52102,8 @@ interface <dfn interface>HTMLButtonElement</dfn> : <span>HTMLElement</span> {

readonly attribute <span>NodeList</span> <span data-x="dom-lfe-labels">labels</span>;
};
<span>HTMLButtonElement</span> includes <span>PopoverInvokerElement</span>;</code></pre>
<span>HTMLButtonElement</span> includes <span>PopoverInvokerElement</span>;
<span>HTMLButtonElement</span> includes <span>DialogInvokerElement</span>;</code></pre>
</dd>
<dd w-dev>Uses <code>HTMLButtonElement</code>.</dd>
</dl>
Expand Down Expand Up @@ -60337,6 +60339,89 @@ interface <dfn interface>HTMLDialogElement</dfn> : <span>HTMLElement</span> {
&lt;/dialog></code></pre>
</div>

<h4 id="the-dialogmodal-target-attributes">The dialogmodal target attributes</h4>

<p><span data-x="concept-button">Buttons</span> may have the following content attributes:</p>

<ul>
<li><p><dfn element-attr for="html-global"><code
data-x="attr-dialogmodaltarget">dialogmoddaltarget</code></dfn></p></li>
</ul>

<p>If specified, the <code data-x="attr-dialogmodaltarget">dialogmodaltarget</code> attribute value must
be the <span data-x="concept-ID">ID</span> of a <span data-x="dialog">dialog</span> element
in the same <span>tree</span> as the <span data-x="concept-button">button</span> with the
<code data-x="attr-dialogmodaltarget">dialogmodaltarget</code> attribute.</p>

<div class="example">
<p>The following shows how the <code data-x="attr-dialogmodaltarget">dialogmodaltarget</code> attribute
can be used to show and close a dialog:</p>

<pre><code class="html">&lt;button dialogmodaltarget="foo">
Show a dialog (modal)
&lt;/button>

&lt;dialog id="foo">
This is a dialog!
&lt;button dialogmodaltarget="foo">Close&lt;/button>
&lt;/article></code></pre>
</div>

<span data-x="concept-element-dom">DOM interface</span>:
<pre><code class="idl">interface mixin <dfn interface>DialogInvokerElement</dfn> {
[<span>CEReactions</span>] attribute Element? <span data-x="dom-dialogModalTargetElement">dialogModalTargetElement</span>;
};</code></pre>

<p>The <dfn attribute for="HTMLElement"><code
data-x="dom-dialogModalTargetElement">dialogModalTargetElement</code></dfn> IDL attribute must
<span>reflect</span> the <code data-x="attr-dialogmodaltarget">dialogmodaltarget</code> attribute.</p>

<p>To run the <dfn>dialog modal target attribute activation behavior</dfn> given a <code>Node</code>
<var>node</var>:</p>

<ol>
<li><p>Let <var>dialog</var> be <var>node</var>'s <span>dialog modal target element</span>.</p></li>

<li><p>If <var>dialog</var> is null, then return.</p></li>

<li><p>If the <code data-x="attr-dialog-open">open</code> attribute is set on <var>node</var>
then:

<ol>
<li><p>Run <code data-x="dom-dialog-close">close()</code></p> on <var>node</var></li>
<li><p>Otherwise, run <code data-x="dom-dialog-showmodal">showModal()</code> on <var>node</var></li>
</ol>

</li>
</ol>

<p>To get the <dfn>dialog modal target element</dfn> given a <code>Node</code> <var>node</var>, perform
the following steps. They return an <span data-x="HTML elements">HTML element</span> or null.</p>

<ol>
<li><p>If <var>node</var> is not a <span data-x="concept-button">button</span>, then return
null.</p></li>

<li><p>If <var>node</var> is <span data-x="concept-fe-disabled">disabled</span>, then return
null.</p></li>

<li><p>If <var>node</var>'s <span data-x="attr-popovertarget">popovertarget</span> is set, then return
null.</p></li>

<li><p>If <var>node</var> has a <span>form owner</span> and <var>node</var> is a <span
data-x="concept-submit-button">submit button</span>, then return null.</p></li>

<li><p>Let <var>dialogElement</var> be <var>node</var>'s <span data-x="attr-associated
element"><code data-x="">dialogmodaltarget</code>-associated element</span>.</p></li>

<li><p>If <var>dialogElement</var> is null, then return null.</p></li>

<li><p>If <var>dialogElement</var> is not a <code data-x="dialog">dialog</code> element, then return null.</p></li>

<li><p>Return <var>dialogElement</var>.</p></li>
</ol>





Expand Down Expand Up @@ -60365,7 +60450,6 @@ interface <dfn interface>HTMLDialogElement</dfn> : <span>HTMLElement</span> {

</div>


<h4 id="the-script-element">The <dfn
id="script" element><code>script</code></dfn> element</h4>

Expand Down