Skip to content

Commit

Permalink
add dialogmodaltarget attribute
Browse files Browse the repository at this point in the history
  • Loading branch information
keithamus committed Jun 26, 2023
1 parent a05b1ce commit c7f3a68
Showing 1 changed file with 87 additions and 3 deletions.
90 changes: 87 additions & 3 deletions source
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

0 comments on commit c7f3a68

Please sign in to comment.