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

Jump to bottom

Removing members not implemented by browsers #2933

Closed
wants to merge 11 commits into from
Closed

Removing members not implemented by browsers #2933

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
11 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
cef0825
removing members not implemented
Rumyra Mar 8, 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>
</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>

<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>
<td>{{Spec2('Clipboard API')}}</td>
<td>Initial definition.</td>
</tr>
Expand Down
12 changes: 6 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,6 +42,10 @@ <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>

</dl>

<h2 id="Methods">Methods</h2>
Expand Down Expand Up @@ -117,14 +121,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