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

clipboarditem updates #2829

Merged
merged 10 commits into from
Mar 5, 2021
Merged

clipboarditem updates #2829

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
a54cff0
clipboarditem updates
Rumyra Mar 3, 2021
30ffbbc
casing
Rumyra Mar 3, 2021
fc167eb
dancing
Rumyra Mar 3, 2021
aab36a7
dancing
Rumyra Mar 3, 2021
8fbd77c
Update files/en-us/web/api/clipboarditem/clipboarditem/index.html
Rumyra Mar 4, 2021
0cd674b
Update files/en-us/web/api/clipboarditem/index.html
Rumyra Mar 4, 2021
31e3686
Update files/en-us/web/api/clipboarditem/index.html
Rumyra Mar 4, 2021
78eea56
Update files/en-us/web/api/clipboarditem/presentationstyle/index.html
Rumyra Mar 4, 2021
b9b33b4
fixes
Rumyra Mar 4, 2021
6cfbab5
Merge branch 'clipitem' of github.com:Rumyra/content into clipitem
Rumyra Mar 4, 2021
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
37 changes: 15 additions & 22 deletions files/en-us/web/api/clipboarditem/clipboarditem/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,43 +14,38 @@
---
<div>{{DefaultAPISidebar("Clipboard API")}}</div>

<p class="summary"><span class="seoSummary">The
<code><strong>ClipboardItem()</strong></code> constructor of the {{domxref("Clipboard
API")}} creates a new {{domxref("ClipboardItem")}} object which represents data to be
stored or retrieved via the {{domxref("Clipboard API")}}, that is
{{domxref("clipboard.write()")}} and {{domxref("clipboard.read()")}}
respectively.</span></p>
<p class="summary"><span class="seoSummary">The <code><strong>ClipboardItem()</strong></code> constructor of the {{domxref("Clipboard API")}} creates a new {{domxref("ClipboardItem")}} object which represents data to be stored or retrieved via the {{domxref("Clipboard API")}}, that is {{domxref("clipboard.write()")}} and {{domxref("clipboard.read()")}} respectively.</span></p>

<div class="notecard note">
<p><strong>Note</strong>: Image format support varies by browser. See the browser
compatibility table for the {{domxref("Clipboard")}} interface.</p>
<p><strong>Note</strong>: Image format support varies by browser. See the browser compatibility table for the {{domxref("Clipboard")}} interface.</p>
Rumyra marked this conversation as resolved.
Show resolved Hide resolved
</div>

<h2 id="Syntax">Syntax</h2>

<pre
class="brush: js">var <var>ClipboardItem</var> = new ClipboardItem(ClipboardItemData);</pre>
<pre class="brush: js">var <var>ClipboardItem</var> = new ClipboardItem(ClipboardItemData);</pre>

<h3 id="Parameters">Parameters</h3>

<dl>
<dt><code>ClipboardItemData</code></dt>
<dd>An {{jsxref("Object")}} with the {{Glossary("MIME type")}} as the key and
{{domxref("Blob")}} as the value.</dd>
<dd>An {{jsxref("Object")}} with the {{Glossary("MIME type")}} as the key and data as the value. The data can represented as a {{domxref("Blob")}}, a {{jsxref("String")}} or a {{jsxref("Promise")}} which resolves to either a blob or string.</dd>

<dt><code>ClipboardItemOptions</code> {{optional_inline}}</dt>
<dd>An {{jsxref("Object")}} with the following properties:
<ul>
<li><code><strong>presentationStyle</strong></code>: One of <code>"unspecified"</code>, <code>"inline"</code> or <code>"attachment"</code>. The default is <code>"unspecified"</code>.</li>
</ul>
</dd>
</dl>

<div class="notecard note">
<p><strong>Note</strong>: To work with text see the {{domxref("Clipboard.readText()")}}
and {{domxref("Clipboard.writeText()")}} methods of the {{domxref("Clipboard")}}
<p><strong>Note</strong>: You can also work with text via the {{domxref("Clipboard.readText()")}} and {{domxref("Clipboard.writeText()")}} methods of the {{domxref("Clipboard")}}
interface.</p>
</div>

<h2 id="Examples">Examples</h2>

<p>The below example requests a png image using the {{domxref("Fetch API")}}, and in turn,
the {{domxref("Body.blob()", "responses' blob()")}} method, to create a new
{{domxref("ClipboardItem")}} and write it to the clipboard, using the
{{domxref("Clipboard API")}}.</p>
<p>The below example requests a png image using the {{domxref("Fetch API")}}, and in turn, the {{domxref("Body.blob()", "responses' blob()")}} method, to create a new {{domxref("ClipboardItem")}}. This item is then written to the clipboard, using the {{domxref("Clipboard.write()")}} method.</p>

<div class="note">
<p><strong>Note</strong>: You can only pass in one clipboard item at a time.</p>
Expand Down Expand Up @@ -99,8 +94,6 @@ <h2 id="See_also">See also</h2>

<ul>
<li><a href="/en-US/docs/Web/API/Clipboard_API">Clipboard API</a></li>
<li><a href="https://async-clipboard-api.glitch.me/">Async Clipboard API demo on
Glitch</a></li>
<li><a href="https://web.dev/image-support-for-async-clipboard/">Image support for Async
Clipboard article</a></li>
<li><a href="https://async-clipboard-api.glitch.me/">Async Clipboard API demo on Glitch</a></li>
<li><a href="https://web.dev/image-support-for-async-clipboard/">Image support for Async Clipboard article</a></li>
</ul>
11 changes: 4 additions & 7 deletions files/en-us/web/api/clipboarditem/gettype/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,17 +11,14 @@
- getTypes
- paste
---
<div>{{draft}}{{DefaultAPISidebar("Clipboard API")}}</div>
<div>{{DefaultAPISidebar("Clipboard API")}}</div>

<p class="summary"><span class="seoSummary">The <strong><code>getType()</code></strong>
method of the {{domxref("ClipboardItem")}} interface returns a {{jsxref("Promise")}}
that resolves with a {{domxref("Blob")}} of the requested  {{Glossary("MIME type")}}
or an error if the MIME type is not found.</span></p>
<p class="summary"><span class="seoSummary">The <strong><code>getType()</code></strong> method of the {{domxref("ClipboardItem")}} interface returns a {{jsxref("Promise")}} that resolves with a {{domxref("Blob")}} of the requested  {{Glossary("MIME type")}} or an error if the MIME type is not found.</span></p>
jpmedley marked this conversation as resolved.
Show resolved Hide resolved

<h2 id="Syntax">Syntax</h2>

<pre
class="brush: js">var <em>blob</em> = <em>clipboardItem</em>.getType(type);</pre>
class="brush: js">var <var>blob</var> = <var>clipboardItem</var>.getType(type);</pre>

<h3 id="Parameters">Parameters</h3>

Expand Down Expand Up @@ -80,7 +77,7 @@ <h2 id="Specifications">Specifications</h2>
<th scope="col">Comment</th>
</tr>
<tr>
<td>{{SpecName('Clipboard API','#clipboarditem','ClipboardItem')}}</td>
<td>{{SpecName('Clipboard API','#dom-clipboarditem-gettype-type-type','ClipboardItem.getType()')}}</td>
Rumyra marked this conversation as resolved.
Show resolved Hide resolved
<td>{{Spec2('Clipboard API')}}</td>
<td>Initial definition.</td>
</tr>
Expand Down
32 changes: 26 additions & 6 deletions files/en-us/web/api/clipboarditem/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@
- copy
- paste
---
<div>{{draft}}{{DefaultAPISidebar("Clipboard API")}}</div>
<div>{{DefaultAPISidebar("Clipboard API")}}</div>

<p class="summary"><span class="seoSummary">The <strong><code>ClipboardItem</code></strong> interface of the {{domxref('Clipboard API')}} represents a single item format, used when reading or writing data via the {{domxref('Clipboard API')}}. That is {{domxref("clipboard.read()")}} and {{domxref("clipboard.write()")}} respectively.</span></p>

Expand Down Expand Up @@ -42,8 +42,21 @@ <h2 id="Properties">Properties</h2>
<dl>
<dt>{{domxref("ClipboardItem.types", "types")}} {{ReadOnlyInline}}</dt>
<dd>Returns an {{jsxref("Array")}} of MIME types available within the <strong><code>ClipboardItem</code></strong>.</dd>

<dt>{{domxref("ClipboardItem.presentationStyle", "presentationStyle")}} {{ReadOnlyInline}}</dt>
<dd>Returns one of the following: <code>"unspecified"</code>, <code>"inline"</code> or <code>"attachment"</code>.</dd>

<dt>{{domxref("ClipboardItem.delayed", "delayed")}} {{ReadOnlyInline}}</dt>
<dd>Returns a boolean which if true indicates the <strong><code>ClipboardItem</code></strong> was created using the static <code>createDelayed()</code> method.</dd>

<dt>{{domxref("ClipboardItem.lastModified", "lastModified")}} {{ReadOnlyInline}}</dt>
<dd>Returns an {{domxref("DOMTimeStamp")}} representing the time at which the <strong><code>ClipboardItem</code></strong> was last modified.</dd>
</dl>

<div class="note">
<p><strong>Note:</strong> Neither <code>ClipboardItem.delayed</code> nor <code>ClipboardItem.lastModified</code> have been implemented by any browsers at this time. Check the <a href="#browser_compatibility">compatibility table</a> for details.</p>
</div>

<h2 id="Methods">Methods</h2>

<p><em>This interface defines the following methods.</em></p>
Expand All @@ -53,6 +66,17 @@ <h2 id="Methods">Methods</h2>
<dd>Returns a {{jsxref("Promise")}} that resolves with a {{domxref("Blob")}} of the requested {{Glossary("MIME type")}}, or an error if the MIME type is not found.</dd>
</dl>

<h2 id="Static_Methods">Static Methods</h2>

<dl>
<dt>{{domxref("ClipboardItem.createDelayed()")}}</dt>
<dd>Creates a new <strong><code>ClipboardItem</code></strong> object, with the {{Glossary("MIME type")}} as the key and {{domxref("Blob")}} as the value.</dd>
</dl>

<div class="note">
<p><strong>Note:</strong> <code>ClipboardItem.createDelayed()</code> has not been implemented by any browsers at this time. Check the <a href="#browser_compatibility">compatibility table</a> for details.</p>
</div>

<h2 id="Examples">Examples</h2>

<h3 id="Writing_To_Clipboard">Writing To Clipboard</h3>
Expand Down Expand Up @@ -117,14 +141,10 @@ <h2 id="Specifications">Specifications</h2>
</tbody>
</table>

<h2 id="Browser_compatibility">Browser compatibility</h2>
<h2 id="browser_compatibility">Browser compatibility</h2>

<p>{{Compat("api.ClipboardItem")}}</p>

<div class="note">
<p><strong>Note</strong>: Image format support varies by browser. See the browser compatibility table for the {{domxref("Clipboard")}} interface.</p>
</div>

<h2 id="See_also">See also</h2>

<ul>
Expand Down
81 changes: 81 additions & 0 deletions files/en-us/web/api/clipboarditem/presentationstyle/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,81 @@
---
title: ClipboardItem.presentationStyle
slug: Web/API/ClipboardItem/presentationStyle
tags:
- API
- Clipboard
- Clipboard API
- ClipboardItem
- Cut
- Property
- Read-only
- Reference
- presentationStyle
- copy
- paste
---
<div>{{DefaultAPISidebar("Clipboard API")}}</div>

<p class="summary"><span class="seoSummary">The read-only
<strong><code>presentationStyle</code></strong> property of the {{domxref("ClipboardItem")}}
interface returns a {{jsxref("String")}} indicating how an item should be presented.</span></p>

<h2 id="Syntax">Syntax</h2>

<pre
class="brush: js">var <var>presentationStyle</var> = <var>clipboardItem</var>.presentationStyle;</pre>

<h3 id="Value">Value</h3>

<p>One of either <code>"unspecified"</code>, <code>"inline"</code> or <code>"attachment"</code>.</p>

<h2 id="Examples">Examples</h2>

<p>In the below example, we're returning all items on the clipboard via the {{domxref("clipboard.read()")}} method, then logging the <code>presentationStyle</code> property.</p>

<pre class="brush: js">async function getClipboardContents() {
try {
const clipboardItems = await navigator.clipboard.read();

for (const clipboardItem of clipboardItems) {

console.log(clipboardItem.presentationStyle);

}

} catch (err) {
console.error(err.name, err.message);
}
}
</pre>

<h2 id="Specifications">Specifications</h2>

<table class="standard-table">
<tbody>
<tr>
<th scope="col">Specification</th>
<th scope="col">Status</th>
<th scope="col">Comment</th>
</tr>
<tr>
<td>{{SpecName('Clipboard API','#dom-clipboarditem-presentationstyle','ClipboardItem.presentationStyle')}}</td>
<td>{{Spec2('Clipboard API')}}</td>
<td>Initial definition.</td>
</tr>
</tbody>
</table>

<h2 id="Browser_compatibility">Browser compatibility</h2>

<p>{{Compat("api.ClipboardItem.types")}}</p>

<h2 id="See_also">See also</h2>

<ul>
<li><a href="/en-US/docs/Web/API/Clipboard_API">Clipboard API</a></li>
<li><a href="https://async-clipboard-api.glitch.me/">Async Clipboard API demo on
Glitch</a></li>
<li><a href="https://web.dev/image-support-for-async-clipboard/">Image support for Async
Clipboard article</a></li>
</ul>
6 changes: 3 additions & 3 deletions files/en-us/web/api/clipboarditem/types/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@
- copy
- paste
---
<div>{{draft}}{{DefaultAPISidebar("Clipboard API")}}</div>
<div>{{DefaultAPISidebar("Clipboard API")}}</div>

<p class="summary"><span class="seoSummary">The read-only
<strong><code>types</code></strong> property of the {{domxref("ClipboardItem")}}
Expand All @@ -24,7 +24,7 @@
<h2 id="Syntax">Syntax</h2>

<pre
class="brush: js">var <em>types</em> = <em>clipboardItem</em>.types;</pre>
class="brush: js">var <var>types</var> = <var>clipboardItem</var>.types;</pre>

<h3 id="Value">Value</h3>

Expand Down Expand Up @@ -67,7 +67,7 @@ <h2 id="Specifications">Specifications</h2>
<th scope="col">Comment</th>
</tr>
<tr>
<td>{{SpecName('Clipboard API','#clipboarditem','ClipboardItem')}}</td>
<td>{{SpecName('Clipboard API','#dom-clipboarditem-types','ClipboardItem.types')}}</td>
<td>{{Spec2('Clipboard API')}}</td>
<td>Initial definition.</td>
</tr>
Expand Down