Navigation Menu

Skip to content

Commit

Permalink
Second draft of <details>
Browse files Browse the repository at this point in the history 
git-svn-id: http://svn.whatwg.org/webapps@84 340c8d12-0b0e-0410-8428-c7bf67bfef74
  • Loading branch information
@Hixie
Hixie committed Jul 17, 2006
1 parent 9cfbae0 commit d31535e
Show file tree
Hide file tree
Showing 2 changed files with 84 additions and 68 deletions.
99 changes: 53 additions & 46 deletions index
View file
Expand Up @@ -24,7 +24,7 @@

<h1 id="web-applications">Web Applications 1.0</h1>

<h2 class="no-num no-toc" id="working">Working Draft &mdash; 14 July 2006</h2>
<h2 class="no-num no-toc" id="working">Working Draft &mdash; 17 July 2006</h2>

<p>You can take part in this work. <a
href="http://www.whatwg.org/mailing-list">Join the working group's
Expand Down Expand Up @@ -8120,52 +8120,59 @@ interface <dfn id="htmlsectionelement">HTMLSectionElement</dfn> : <span><a href=

<dt>Element-specific attributes:

<dd>None.
<dd><code title="attr-details-open"><a href="#open">open</a></code>

<dt>DOM interface:

<dd>
<pre
class="idl">interface <dfn id="htmldetailselement">HTMLDetailsElement</dfn> : <span><a href="#htmlelement">HTMLElement</a></span> {
void <code title="dom-details-open"><a href="#open">open</a></code>();
void <code title="dom-details-close"><a href="#close">close</a></code>();
attribute boolean <span title="dom-details-open"><a href="#open0">open</a></span>;
};</pre>
</dl>

<p>The <code><a href="#details0">details</a></code> element represents
additional information which, by default, the user is not shown, but which
the user can obtain on demand.
additional information or controls which the user can obtain on demand.

<p>The first element child of a <code><a
href="#details0">details</a></code> element, if it is a
<code>legend</code> element, represents the summary of the details. This
should be the information shown to the user by default. The rest of the
contents of the element represents the details. These should be shown on
request.
<code>legend</code> element, represents the summary of the details.

<p>If the first element is not a <code>legend</code> element, the UA should
provide its own legend (e.g. "Details").

<p>The <dfn id="open" title="dom-details-open"><code>open()</code></dfn>
method, when invoked, must cause the user agent to act as if the user had
requested that the details be shown. The <dfn id="close"
title="dom-details-close"><code>close()</code></dfn> method, when invoked,
must cause the user agent to act as if the user had requested that the
details be hidden.

<p class="note">These methods don't trigger the UI events that would lead
up to the <code><a href="#details0">details</a></code> element being
openned or closed; for example, if typically the details are shown when
the element's box is clicked, the <code title="dom-details-open"><a
href="#open">open()</a></code> method wouldn't trigger a <code
title="event-click">click</code> event; it would simply show the details,
as if the default action of that event had executed.</p>
<p>The <dfn id="open" title="attr-details-open"><code>open</code></dfn>
content attribute, if present, indicates that the details should be shown
to the user. The default, which applies if the attribute is absent, is
that the details not be shown. If the attribute is present, its value must
be the literal value <code title="">open</code>.

<p>If the attribute is removed, then the details should be hidden. If the
attribute is added, the details should be shown.

<p>The user should be able to request that the details be shown or hidden.

<p>The <dfn id="open0" title="dom-details-open"><code>open</code></dfn>
attribute must <span><a href="#reflect">reflect</a></span> the <code
title="attr-details-open"><a href="#open">open</a></code> content
attribute.</p>
<!--
http://mail.gnome.org/archives/usability/2006-June/msg00015.html
http://developer.apple.com/documentation/UserExperience/Conceptual/OSXHIGuidelines/XHIGControls/chapter_18_section_7.html
https://www.google.com/base/settings
-->

<p class="big-issue">Rendering will be described in the Rendering section
in due course. Basically CSS :open and :closed match the element, it's a
block-level element by default, and when it matches :closed it renders as
if it had an XBL binding attached to it whose template was just
<code>&lt;template>&#x25B6;&lt;content
includes="legend:first-child"&gt;Details&lt;/content>&lt;/template></code>,
and when it's :open it acts as if it had an XBL binding attached to it
whose template was just <code>&lt;template>&#x25BC;&lt;content
includes="legend:first-child"&gt;Details&lt;/content>&lt;content/>&lt;/template></code>
or some such.

<h4 id="scs-the"><span class="secno">3.19.2. </span><span title="SCS"><a
href="#scs">[SCS]</a></span> The <dfn
id="datagrid0"><code>datagrid</code></dfn> element</h4>
Expand Down Expand Up @@ -8626,7 +8633,7 @@ interface <dfn id="datagriddataprovider">DataGridDataProvider</dfn> {
<td>Rows

<td>The row can be opened and closed, and, unless the <code
title="datagrid-row-class-open"><a href="#open0">open</a></code> class
title="datagrid-row-class-open"><a href="#open1">open</a></code> class
is also present, the row is currently closed.

<tr>
Expand Down Expand Up @@ -8693,7 +8700,7 @@ interface <dfn id="datagriddataprovider">DataGridDataProvider</dfn> {
href="#datagrid0">datagrid</a></code> is initially rendered.

<tr>
<td><!--open--><dfn id="open0"
<td><!--open--><dfn id="open1"
title="datagrid-row-class-open"><code>open</code></dfn>

<td>Rows
Expand Down Expand Up @@ -9034,7 +9041,7 @@ interface <dfn id="datagriddataprovider">DataGridDataProvider</dfn> {
<li>If the row's element contains other elements that are also in the
view, and the element's <code title="attr-class">class</code> attribute
doesn't contain the <code title="">closed</code> class: <code
title="datagrid-row-class-open"><a href="#open0">open</a></code>
title="datagrid-row-class-open"><a href="#open1">open</a></code>
</ul>

<p>The <code title="dom-provider-toggleRowOpenState"><a
Expand Down Expand Up @@ -9167,7 +9174,7 @@ interface <dfn id="datagriddataprovider">DataGridDataProvider</dfn> {
<li>If the row's element contains other elements that are also in the
view, and the element's <code title="attr-class">class</code> attribute
doesn't contain the <code title="">closed</code> class: <code
title="datagrid-row-class-open"><a href="#open0">open</a></code>
title="datagrid-row-class-open"><a href="#open1">open</a></code>

<li>If the row's element is an <code><a
href="#h10">h1</a></code>-<code><a href="#h60">h6</a></code> element:
Expand Down Expand Up @@ -9575,7 +9582,7 @@ interface <dfn id="datagriddataprovider">DataGridDataProvider</dfn> {
<dt id="rowType1">To establish whether a row is openable

<dd>Check whether one of the <code title="datagrid-row-class-open"><a
href="#open0">open</a></code> or <code
href="#open1">open</a></code> or <code
title="datagrid-row-class-closed"><a href="#closed">closed</a></code>
classes applies to the row. If one (or both) of these are present, then
the row can be opened and closed, otherwise neither are present and the
Expand All @@ -9585,12 +9592,12 @@ interface <dfn id="datagriddataprovider">DataGridDataProvider</dfn> {
<dt>To establish whether an openable row is open or closed

<dd>Check whether the <code title="datagrid-row-class-open"><a
href="#open0">open</a></code> class applies to the row. If it does, the
href="#open1">open</a></code> class applies to the row. If it does, the
row is open. Otherwise, the row is closed. The <code
title="datagrid-row-class-closed"><a href="#closed">closed</a></code>
class is not examined to make this determination (although either it or
the <code title="datagrid-row-class-open"><a
href="#open0">open</a></code> class must be present to make the row
href="#open1">open</a></code> class must be present to make the row
openable in the first place). If a closed row has rows that consider it a
parent, those rows must still be included in the rendering.</dd>
<!-- XXXPA
Expand Down Expand Up @@ -16873,7 +16880,7 @@ document.getElementById('stock').addEventListener('stock change',
title="dom-connection-readyState"><a
href="#readystate">readyState</a></code> attribute's value must be changed
to 1, and the <code title="event-connection-open"><a
href="#open1">open</a></code> event must be fired on the <code><a
href="#open2">open</a></code> event must be fired on the <code><a
href="#connection0">Connection</a></code> object.

<p>When data is received, the <code title="event-connection-read"><a
Expand All @@ -16886,7 +16893,7 @@ document.getElementById('stock').addEventListener('stock change',
title="dom-connection-readyState"><a
href="#readystate">readyState</a></code> attribute's value must be changed
to 2, and the <code title="event-connection-close"><a
href="#close0">close</a></code> event must be fired on the <code><a
href="#close">close</a></code> event must be fired on the <code><a
href="#connection0">Connection</a></code> object.

<p>The <dfn id="onopen"
Expand All @@ -16895,9 +16902,9 @@ document.getElementById('stock').addEventListener('stock change',
id="onclose" title="dom-connection-onclose"><code>onclose</code></dfn>
attributes must, when set, register their new value as an event listener
for their respective events (namely <code title="event-connection-open"><a
href="#open1">open</a></code>, <code title="event-connection-read"><a
href="#open2">open</a></code>, <code title="event-connection-read"><a
href="#read">read</a></code>, and <code title="event-connection-close"><a
href="#close0">close</a></code>), and unregister their previous value if
href="#close">close</a></code>), and unregister their previous value if
any.

<p>The <dfn id="send" title="dom-connection-send"><code>send()</code></dfn>
Expand All @@ -16910,7 +16917,7 @@ document.getElementById('stock').addEventListener('stock change',
title="dom-connection-disconnect"><code>disconnect()</code></dfn> method
must close the connection, if it is open. If the connection is already
closed, it must do nothing. Closing the connection causes a <code
title="event-connection-close"><a href="#close0">close</a></code> event to
title="event-connection-close"><a href="#close">close</a></code> event to
be fired and the <code title="dom-connection-readyState"><a
href="#readystate">readyState</a></code> attribute's value to change, as
<a href="#closeConnection">described above</a>.
Expand All @@ -16921,12 +16928,12 @@ document.getElementById('stock').addEventListener('stock change',
<code>http://www.w3.org/2001/xml-events</code> namespace, which do not
bubble, are not cancelable, and have no default action.

<p>The <dfn id="open1"
<p>The <dfn id="open2"
title="event-connection-open"><code>open</code></dfn> event is fired when
the connection is established. UAs must use the normal <code>Event</code>
interface when firing this event.

<p>The <dfn id="close0"
<p>The <dfn id="close"
title="event-connection-close"><code>close</code></dfn> event is fired
when the connection is closed (whether by the author, calling the <code
title="dom-connection-disconnect"><a
Expand Down Expand Up @@ -17113,7 +17120,7 @@ document.getElementById('stock').addEventListener('stock change',

<p>As soon as the object is returned, the connection <a
href="#openConnection">has been established</a>, which implies that the
<code title="event-connection-open"><a href="#open1">open</a></code> event
<code title="event-connection-open"><a href="#open2">open</a></code> event
must be fired. Broadcast connections are never closed.

<h5 id="broadcasting"><span class="secno">7.2.5.1. </span>Broadcasting over
Expand Down Expand Up @@ -17962,7 +17969,7 @@ function receiver(e) {

<dd>
<p>If the next input character is a U+002F SOLIDUS (/) character,
consume it and switch to the <span><a href="#close1">close tag open
consume it and switch to the <span><a href="#close0">close tag open
state</a></span>. If the next input character is not a U+002F SOLIDUS
(/) character, emit a U+003C LESS-THAN SIGN character token and
reconsume the current input character in the <span><a
Expand All @@ -17982,7 +17989,7 @@ function receiver(e) {

<dt>U+002F SOLIDUS (/)

<dd>Switch to the <span><a href="#close1">close tag open
<dd>Switch to the <span><a href="#close0">close tag open
state</a></span>.

<dt>U+0041 LATIN CAPITAL LETTER A through to U+005A LATIN CAPITAL
Expand Down Expand Up @@ -18021,7 +18028,7 @@ function receiver(e) {
</dl>
</dl>

<dt><dfn id="close1">Close tag open state</dfn>
<dt><dfn id="close0">Close tag open state</dfn>

<dd>
<p>If the <span><a href="#content2">content model flag</a></span> is set
Expand Down Expand Up @@ -21146,7 +21153,7 @@ function receiver(e) {
"colgroup", "tbody", "td", "tfoot", "th", "thead", "tr"

<dd>
<p><span><a href="#close2">Close the cell</a></span> (see below) and
<p><span><a href="#close1">Close the cell</a></span> (see below) and
reprocess the current token.</p>

<dt>An end tag whose tag name is one of: "body", "caption", "col",
Expand All @@ -21166,13 +21173,13 @@ function receiver(e) {
"tbody", "tfoot" and "thead"), then this is a <span><a
href="#parse">parse error</a></span> and the token must be ignored.</p>

<p>Otherwise, <span><a href="#close2">close the cell</a></span> (see
<p>Otherwise, <span><a href="#close1">close the cell</a></span> (see
below) and reprocess the current token.</p>

<dt>An end-of-file token

<dd>
<p><span><a href="#close2">Close the cell</a></span> and reprocess
<p><span><a href="#close1">Close the cell</a></span> and reprocess
the end-of-file token.</p>

<dt>Anything else
Expand All @@ -21182,7 +21189,7 @@ function receiver(e) {
mode</a></span> was "in body".</p>
</dl>

<p>Where the steps above say to <dfn id="close2">close the cell</dfn>,
<p>Where the steps above say to <dfn id="close1">close the cell</dfn>,
they mean to follow the following algorithm:</p>

<ol>
Expand Down
53 changes: 31 additions & 22 deletions source
View file
Expand Up @@ -6584,50 +6584,59 @@ interface <dfn>HTMLSectionElement</dfn> : <span>HTMLElement</span> {
<span>block-level elements</span> or <span>inline-level
content</span> (but not both).</dd>
<dt>Element-specific attributes:</dt>
<dd>None.</dd>
<dd><code title="attr-details-open">open</code></dd>
<dt>DOM interface:</dt>
<dd>
<pre class="idl">interface <dfn>HTMLDetailsElement</dfn> : <span>HTMLElement</span> {
void <code title="dom-details-open">open</code>();
void <code title="dom-details-close">close</code>();
attribute boolean <span title="dom-details-open">open</span>;
};</pre>
</dd>
</dl>

<p>The <code>details</code> element represents additional
information which, by default, the user is not shown, but which the
user can obtain on demand.</p>
information or controls which the user can obtain on demand.</p>

<p>The first element child of a <code>details</code> element, if it
is a <code>legend</code> element, represents the summary of the
details. This should be the information shown to the user by
default. The rest of the contents of the element represents the
details. These should be shown on request.</p>
details.</p>

<p>If the first element is not a <code>legend</code> element, the
UA should provide its own legend (e.g. "Details").</p>

<p>The <dfn title="dom-details-open"><code>open()</code></dfn>
method, when invoked, must cause the user agent to act as if the
user had requested that the details be shown. The <dfn
title="dom-details-close"><code>close()</code></dfn> method, when
invoked, must cause the user agent to act as if the user had
requested that the details be hidden.</p>

<p class="note">These methods don't trigger the UI events that would
lead up to the <code>details</code> element being openned or closed;
for example, if typically the details are shown when the element's
box is clicked, the <code title="dom-details-open">open()</code>
method wouldn't trigger a <code title="event-click">click</code>
event; it would simply show the details, as if the default action of
that event had executed.</p>
<p>The <dfn title="attr-details-open"><code>open</code></dfn>
content attribute, if present, indicates that the details should be
shown to the user. The default, which applies if the attribute is
absent, is that the details not be shown. If the attribute is
present, its value must be the literal value <code
title="">open</code>.</p>

<p>If the attribute is removed, then the details should be
hidden. If the attribute is added, the details should be shown.</p>

<p>The user should be able to request that the details be shown or
hidden.</p>

<p>The <dfn title="dom-details-open"><code>open</code></dfn>
attribute must <span>reflect</span> the <code
title="attr-details-open">open</code> content attribute.</p>

<!--
http://mail.gnome.org/archives/usability/2006-June/msg00015.html
http://developer.apple.com/documentation/UserExperience/Conceptual/OSXHIGuidelines/XHIGControls/chapter_18_section_7.html
https://www.google.com/base/settings
-->

<p class="big-issue">Rendering will be described in the Rendering
section in due course. Basically CSS :open and :closed match the
element, it's a block-level element by default, and when it matches
:closed it renders as if it had an XBL binding attached to it whose
template was just <code>&lt;template>&#x25B6;&lt;content
includes="legend:first-child"&gt;Details&lt;/content>&lt;/template></code>,
and when it's :open it acts as if it had an XBL binding attached to
it whose template was just <code>&lt;template>&#x25BC;&lt;content
includes="legend:first-child"&gt;Details&lt;/content>&lt;content/>&lt;/template></code>
or some such.</p>


<h4><span title="SCS">[SCS]</span> The <dfn><code>datagrid</code></dfn> element</h4>

Expand Down

0 comments on commit d31535e

Please sign in to comment.