Skip to content

Commit

Permalink
[giow] (0) dropzone 5/5, part 4/4: finishing touches for dropzone='':…
Browse files Browse the repository at this point in the history
… add it to the indexes and IDL; add an example.

Fixing http://www.w3.org/Bugs/Public/show_bug.cgi?id=10712

git-svn-id: http://svn.whatwg.org/webapps@5661 340c8d12-0b0e-0410-8428-c7bf67bfef74
  • Loading branch information
Hixie committed Nov 1, 2010
1 parent dda6a51 commit 6a29d9a
Show file tree
Hide file tree
Showing 3 changed files with 108 additions and 23 deletions.
43 changes: 35 additions & 8 deletions complete.html
Original file line number Diff line number Diff line change
Expand Up @@ -9178,6 +9178,7 @@ <h4 id=elements-in-the-dom><span class=secno>3.2.2 </span>Elements in the DOM</h
attribute DOMString <a href=#dom-accesskey title=dom-accessKey>accessKey</a>;
readonly attribute DOMString <a href=#dom-accesskeylabel title=dom-accessKeyLabel>accessKeyLabel</a>;
attribute boolean <a href=#dom-draggable title=dom-draggable>draggable</a>;
[PutForwards=<a href=#dom-domsettabletokenlist-value title=dom-DOMSettableTokenList-value>value</a>] attribute <a href=#domsettabletokenlist>DOMSettableTokenList</a> <a href=#dom-dropzone title=dom-dropzone>dropzone</a>;
attribute DOMString <a href=#dom-contenteditable title=dom-contentEditable>contentEditable</a>;
readonly attribute boolean <a href=#dom-iscontenteditable title=dom-isContentEditable>isContentEditable</a>;
attribute <a href=#htmlmenuelement>HTMLMenuElement</a> <a href=#dom-contextmenu title=dom-contextMenu>contextMenu</a>;
Expand Down Expand Up @@ -9284,6 +9285,7 @@ <h4 id=global-attributes><span class=secno>3.2.3 </span><dfn>Global attributes</
<li><code title=attr-contextmenu><a href=#attr-contextmenu>contextmenu</a></code></li>
<li><code title=attr-dir><a href=#the-dir-attribute>dir</a></code></li>
<li><code title=attr-draggable><a href=#the-draggable-attribute>draggable</a></code></li>
<li><code title=attr-dropzone><a href=#the-dropzone-attribute>dropzone</a></code></li>
<li><code title=attr-hidden><a href=#the-hidden-attribute>hidden</a></code></li>
<li><code title=attr-id><a href=#the-id-attribute>id</a></code></li>
<!--MD--><!--WARNING: ALSO DUPLICATED IN MICRODATA SECTION -->
Expand Down Expand Up @@ -65842,7 +65844,8 @@ <h4 id=introduction-7><span class=secno>8.7.1 </span>Introduction</h4>
}
&lt;/script&gt;</pre>

<hr><p>To accept a drop, the drop target has to listen to at least three
<hr><!-- v2: once dropzone="" is implemented, add text here to use that
instead of the events --><p>To accept a drop, the drop target has to listen to at least three
events. First, the <code title=event-dragenter><a href=#event-dragenter>dragenter</a></code>
event, which is used to determine whether or not the drop target is
to accept the drop. If the drop is to be accepted, then this event
Expand Down Expand Up @@ -67825,6 +67828,8 @@ <h4 id=the-dropzone-attribute><span class=secno>8.7.8 </span>The <dfn title=attr
specified, the <code title=attr-dropzone-copy><a href=#attr-dropzone-copy>copy</a></code> value is
implied.</p>

<div class=impl>

<p>A <code title=attr-dropzone><a href=#the-dropzone-attribute>dropzone</a></code> attribute <dfn id=concept-dropzone-match title=concept-dropzone-match>matches a drag data store</dfn> if
the <a href=#dropzone-processing-steps><code title=attr-dropzone>dropzone</code> processing
steps</a> result in a match.</p>
Expand Down Expand Up @@ -67962,13 +67967,31 @@ <h4 id=the-dropzone-attribute><span class=secno>8.7.8 </span>The <dfn title=attr
attribute must <a href=#reflect>reflect</a> the content attribute of the
same name.</p>

<!-- XXX dropzone add to:
HTMLElement IDL
Global Attributes list
List of focusable elements, with caveat
DND introduction
Attribute index
-->
</div>

<div class=example>

<p>In this example, a <code><a href=#the-div-element>div</a></code> element is made into a drop
target for image files using the <code title=attr-dropzone><a href=#the-dropzone-attribute>dropzone</a></code> attribute. Images dropped
into the target are then displayed.</p>

<pre>&lt;div dropzone="copy f:image/png f:image/gif f:image/jpeg" ondrop="receive(event, this)"&gt;
&lt;p&gt;Drop an image here to have it displayed.&lt;/p&gt;
&lt;/div&gt;
&lt;script&gt;
function receive(event, element) {
var data = event.dataTransfer.items;
for (var i = 0; i &lt; data.length; i += 1) {
if ((data[i].kind == 'file') &amp;&amp; (data[i].type.match('^image/'))) {
var img = new Image();
img.src = window.createObjectURL(data[i].getAsFile());
element.appendChild(img);
}
}
}
&lt;/script&gt;</pre>

</div>


<!--
Expand Down Expand Up @@ -89964,6 +89987,10 @@ <h3 class=no-num id=element-content-categories>Element content categories</h3>
<td> <a href=#the-draggable-attribute title=attr-draggable>HTML elements</a>
<td> Whether the element is draggable
<td> "<code title="">true</code>"; "<code title="">false</code>"
<tr><th> <code title="">dropzone</code>
<td> <a href=#the-dropzone-attribute title=attr-dropzone>HTML elements</a>
<td> Accepted item types for drag-and-drop
<td> <a href=#unordered-set-of-unique-space-separated-tokens>Unordered set of unique space-separated tokens</a>, <a href=#ascii-case-insensitive>ASCII case-insensitive</a>, consisting of accepted types and drag feedback*
<tr><th> <code title="">enctype</code>
<td> <code title=attr-fs-enctype><a href=#attr-fs-enctype>form</a></code>
<td> Form data set encoding type to use for <a href=#form-submission>form submission</a>
Expand Down
43 changes: 35 additions & 8 deletions index
Original file line number Diff line number Diff line change
Expand Up @@ -9155,6 +9155,7 @@ interface <dfn id=xmldocumentloader>XMLDocumentLoader</dfn> {
attribute DOMString <a href=#dom-accesskey title=dom-accessKey>accessKey</a>;
readonly attribute DOMString <a href=#dom-accesskeylabel title=dom-accessKeyLabel>accessKeyLabel</a>;
attribute boolean <a href=#dom-draggable title=dom-draggable>draggable</a>;
[PutForwards=<a href=#dom-domsettabletokenlist-value title=dom-DOMSettableTokenList-value>value</a>] attribute <a href=#domsettabletokenlist>DOMSettableTokenList</a> <a href=#dom-dropzone title=dom-dropzone>dropzone</a>;
attribute DOMString <a href=#dom-contenteditable title=dom-contentEditable>contentEditable</a>;
readonly attribute boolean <a href=#dom-iscontenteditable title=dom-isContentEditable>isContentEditable</a>;
attribute <a href=#htmlmenuelement>HTMLMenuElement</a> <a href=#dom-contextmenu title=dom-contextMenu>contextMenu</a>;
Expand Down Expand Up @@ -9261,6 +9262,7 @@ interface <dfn id=htmlunknownelement>HTMLUnknownElement</dfn> : <a href=#htmlele
<li><code title=attr-contextmenu><a href=#attr-contextmenu>contextmenu</a></code></li>
<li><code title=attr-dir><a href=#the-dir-attribute>dir</a></code></li>
<li><code title=attr-draggable><a href=#the-draggable-attribute>draggable</a></code></li>
<li><code title=attr-dropzone><a href=#the-dropzone-attribute>dropzone</a></code></li>
<li><code title=attr-hidden><a href=#the-hidden-attribute>hidden</a></code></li>
<li><code title=attr-id><a href=#the-id-attribute>id</a></code></li>
<!--MD--><!--WARNING: ALSO DUPLICATED IN MICRODATA SECTION -->
Expand Down Expand Up @@ -65848,7 +65850,8 @@ interface <dfn id=navigatorabilities>NavigatorAbilities</dfn> {
}
&lt;/script&gt;</pre>

<hr><p>To accept a drop, the drop target has to listen to at least three
<hr><!-- v2: once dropzone="" is implemented, add text here to use that
instead of the events --><p>To accept a drop, the drop target has to listen to at least three
events. First, the <code title=event-dragenter><a href=#event-dragenter>dragenter</a></code>
event, which is used to determine whether or not the drop target is
to accept the drop. If the drop is to be accepted, then this event
Expand Down Expand Up @@ -67831,6 +67834,8 @@ interface <dfn>FunctionObjectCallback</dfn> {
specified, the <code title=attr-dropzone-copy><a href=#attr-dropzone-copy>copy</a></code> value is
implied.</p>

<div class=impl>

<p>A <code title=attr-dropzone><a href=#the-dropzone-attribute>dropzone</a></code> attribute <dfn id=concept-dropzone-match title=concept-dropzone-match>matches a drag data store</dfn> if
the <a href=#dropzone-processing-steps><code title=attr-dropzone>dropzone</code> processing
steps</a> result in a match.</p>
Expand Down Expand Up @@ -67968,13 +67973,31 @@ interface <dfn>FunctionObjectCallback</dfn> {
attribute must <a href=#reflect>reflect</a> the content attribute of the
same name.</p>

<!-- XXX dropzone add to:
HTMLElement IDL
Global Attributes list
List of focusable elements, with caveat
DND introduction
Attribute index
-->
</div>

<div class=example>

<p>In this example, a <code><a href=#the-div-element>div</a></code> element is made into a drop
target for image files using the <code title=attr-dropzone><a href=#the-dropzone-attribute>dropzone</a></code> attribute. Images dropped
into the target are then displayed.</p>

<pre>&lt;div dropzone="copy f:image/png f:image/gif f:image/jpeg" ondrop="receive(event, this)"&gt;
&lt;p&gt;Drop an image here to have it displayed.&lt;/p&gt;
&lt;/div&gt;
&lt;script&gt;
function receive(event, element) {
var data = event.dataTransfer.items;
for (var i = 0; i &lt; data.length; i += 1) {
if ((data[i].kind == 'file') &amp;&amp; (data[i].type.match('^image/'))) {
var img = new Image();
img.src = window.createObjectURL(data[i].getAsFile());
element.appendChild(img);
}
}
}
&lt;/script&gt;</pre>

</div>


<!--
Expand Down Expand Up @@ -85878,6 +85901,10 @@ interface <a href=#htmldocument>HTMLDocument</a> {
<td> <a href=#the-draggable-attribute title=attr-draggable>HTML elements</a>
<td> Whether the element is draggable
<td> "<code title="">true</code>"; "<code title="">false</code>"
<tr><th> <code title="">dropzone</code>
<td> <a href=#the-dropzone-attribute title=attr-dropzone>HTML elements</a>
<td> Accepted item types for drag-and-drop
<td> <a href=#unordered-set-of-unique-space-separated-tokens>Unordered set of unique space-separated tokens</a>, <a href=#ascii-case-insensitive>ASCII case-insensitive</a>, consisting of accepted types and drag feedback*
<tr><th> <code title="">enctype</code>
<td> <code title=attr-fs-enctype><a href=#attr-fs-enctype>form</a></code>
<td> Form data set encoding type to use for <a href=#form-submission>form submission</a>
Expand Down
45 changes: 38 additions & 7 deletions source
Original file line number Diff line number Diff line change
Expand Up @@ -9262,6 +9262,7 @@ interface <dfn>XMLDocumentLoader</dfn> {
attribute DOMString <span title="dom-accessKey">accessKey</span>;
readonly attribute DOMString <span title="dom-accessKeyLabel">accessKeyLabel</span>;
attribute boolean <span title="dom-draggable">draggable</span>;
[PutForwards=<span title="dom-DOMSettableTokenList-value">value</span>] attribute <span>DOMSettableTokenList</span> <span title="dom-dropzone">dropzone</span>;
attribute DOMString <span title="dom-contentEditable">contentEditable</span>;
readonly attribute boolean <span title="dom-isContentEditable">isContentEditable</span>;
attribute <span>HTMLMenuElement</span> <span title="dom-contextMenu">contextMenu</span>;
Expand Down Expand Up @@ -9369,6 +9370,7 @@ interface <dfn>HTMLUnknownElement</dfn> : <span>HTMLElement</span> { };</pre>
<li><code title="attr-contextmenu">contextmenu</code></li>
<li><code title="attr-dir">dir</code></li>
<li><code title="attr-draggable">draggable</code></li>
<li><code title="attr-dropzone">dropzone</code></li>
<li><code title="attr-hidden">hidden</code></li>
<li><code title="attr-id">id</code></li>
<!--END w3c-html--><!--MD--><!--WARNING: ALSO DUPLICATED IN MICRODATA SECTION -->
Expand Down Expand Up @@ -75005,6 +75007,9 @@ interface <dfn>NavigatorAbilities</dfn> {

<hr>

<!-- v2: once dropzone="" is implemented, add text here to use that
instead of the events -->

<p>To accept a drop, the drop target has to listen to at least three
events. First, the <code title="event-dragenter">dragenter</code>
event, which is used to determine whether or not the drop target is
Expand Down Expand Up @@ -77418,6 +77423,8 @@ interface <dfn>FunctionObjectCallback</dfn> {
specified, the <code title="attr-dropzone-copy">copy</code> value is
implied.</p>

<div class="impl">

<p>A <code title="attr-dropzone">dropzone</code> attribute <dfn
title="concept-dropzone-match">matches a drag data store</dfn> if
the <span><code title="attr-dropzone">dropzone</code> processing
Expand Down Expand Up @@ -77583,13 +77590,32 @@ interface <dfn>FunctionObjectCallback</dfn> {
attribute must <span>reflect</span> the content attribute of the
same name.</p>

<!-- XXX dropzone add to:
HTMLElement IDL
Global Attributes list
List of focusable elements, with caveat
DND introduction
Attribute index
-->
</div>

<div class="example">

<p>In this example, a <code>div</code> element is made into a drop
target for image files using the <code
title="attr-dropzone">dropzone</code> attribute. Images dropped
into the target are then displayed.</p>

<pre>&lt;div dropzone="copy f:image/png f:image/gif f:image/jpeg" ondrop="receive(event, this)">
&lt;p>Drop an image here to have it displayed.&lt;/p>
&lt;/div>
&lt;script>
function receive(event, element) {
var data = event.dataTransfer.items;
for (var i = 0; i &lt; data.length; i += 1) {
if ((data[i].kind == 'file') && (data[i].type.match('^image/'))) {
var img = new Image();
img.src = window.createObjectURL(data[i].getAsFile());
element.appendChild(img);
}
}
}
&lt;/script></pre>

</div>


<!--
Expand Down Expand Up @@ -103349,6 +103375,11 @@ interface <span>HTMLDocument</span> {
<td> <span title="attr-draggable">HTML elements</span>
<td> Whether the element is draggable
<td> "<code title="">true</code>"; "<code title="">false</code>"
<tr>
<th> <code title="">dropzone</code>
<td> <span title="attr-dropzone">HTML elements</span>
<td> Accepted item types for drag-and-drop
<td> <span>Unordered set of unique space-separated tokens</span>, <span>ASCII case-insensitive</span>, consisting of accepted types and drag feedback*
<tr>
<th> <code title="">enctype</code>
<td> <code title="attr-fs-enctype">form</code>
Expand Down

0 comments on commit 6a29d9a

Please sign in to comment.