Support for copying to clipboard

[koshka]

Description

Our pages allow users to copy the share URL, (in addition to basic social sharing). To allow our pages to support AMP, we need to be able to copy content to clipboard without JS.

Current feature is provided by a 3rd party tool clipboardjs. We cannot find equivalent functionality.

Example

https://gfycat.com/BareSecondaryFlamingo
Click on the embed </> button below the video
Click on the copy to clipboard icon

[jridgewell]

This would be great, as long as we don't do the spammy text-selection hijacking.

[cramforce]

Would be a neat addition to amp-social-share.

@koshka Would you be interested in implementing this and contributing it to the project?

[torch2424]

Hello! As per the Contributing Guidelines I'd like to show an "intent to implement", a Pull request for this issue.

I plan on using something like: https://www.sitepoint.com/javascript-copy-to-clipboard/ , and clipboard.js for any other reference 😄

I agree with @jridgewell, and try to make the component specifically display the text that will be copied.

[jridgewell]

@torch2424: That'd be lovely.

[cramforce]

I wonder if requiring the show the URL is a little too opinionated. Awesome you are working on this @torch2424!!

[torch2424]

Just Finished this. Probably have a PR opened in today, or within the next week. Currently wrapping up the validator, and some Docs

[sohanirao]

It was concluded that due to lack of cross browser support, this is infeasible. Should not be a GFI candidate anymroe.

[taymonbeal]

<amp-story> supports this. Given that, is there any reason <amp-social-share> can't?

[cramforce]

We should definitely support copy to clipboard.

…

On Thu, Mar 29, 2018 at 10:01 AM, Taymon A. Beal ***@***.***> wrote: <amp-story> supports this. Given that, is there any reason <amp-social-share> can't? — You are receiving this because you commented. Reply to this email directly, view it on GitHub <#4853 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AAFeTz-gjsvL4eH1__wmbfjwNR20IoS4ks5tjRNigaJpZM4J3dmW> .

[samthor]

As a drive-by comment: we implement this with an amp-iframe that just loads a tiny page containing a copy button with regular JS. We have a placeholder button in the top-level page, which is almost immediately replaced with the iframe.

[torch2424]

Just wanted to bump this a little bit, totally forgot, but @sebastianbenz and I discussed how this would be really helpful for AMP By Example, and the upcoming amp.dev at the contributor summit. Would be cool if we could get something going on this, especially since a lot of issues I had with my original PR, are now fixed in later versions of mobile safari (i think) 😄

[samthor]

Here's the iframe solution: https://ampbyexample.com/advanced/copy_button/preview/

[torch2424]

@samthor Thank you for this! Great that we have a link in the issue in case someone else comes across this 👍

[sebastianbenz]

For amp.dev it'd be great to have the ability to copy code snippets from the documentation samples. For this case It'd be great to have a simple copy action which specifies a node and recursively concatenates all child text nodes to a single string which is then added to the clipboard:

<button on="tap:mySnippet.copyToClipboard">
<pre id="mySnippet">
Code ...
</pre>

[sebastianbenz]

Hey @torch2424 are there any updates on this? It'd be really fantastic to have this available for amp.dev.

[torch2424]

@sebastianbenz My apologies! Wasn't sure if the iframe solution would suffice or not. I will pass this around the team in mountain view, and see if we can get some traction on this 👍

[rudygalfi]

cc @nainar - can you investigate prioritization?

[torch2424]

I'll let @nainar investigate/prioritize this. Feel free to reach out to me on this topic, I actually made an extension for this about a year and a half ago, so before we start implementation perhaps we can possibly re-use some of that code (probably not though).

Thanks for catching this @rudygalfi ! 😄

[catherinehoule]

@aghassemi You marked this "soon" about 6 months ago. Is there any plans to work on it ? Thank you !

[aghassemi]

Hi @catherinehoule, would the solution outlined on https://ampbyexample.com/advanced/copy_button/preview/ work for you and unblock you?

[catherinehoule]

@aghassemi That works but feels a bit hacky... I was wondering if there was plans to make this issue happening since it's been sitting in soon state for a while. Thanks for the quick answer !

[catherinehoule]

@aghassemi Would you happen to have a solution that works with a screen reader using the arrows.
On mac, it works using the tab to navigate thru button in the example then click but still screen readers users uses arrow to read documents. And on PC I've been told that it doesn't work at all.
(I tried adding keypressed to the onclick)

[shishirraven]

Using Iframe for copy seems to be a overkill.
For me I just needed a button to allow users to copy Email ID,
Just to make it easier. But including Iframe Javascript will make the page heavier.

What is the best solution?

[westonruter]

Just came across this. I have a WordPress plugin for adding syntax highlighting to code blocks (which is used on blog.amp.dev). Various users have asked for a Copy to Clipboard button to go next to the code block: westonruter/syntax-highlighting-code-block#192

But this is blocked by not having the capability in AMP.

[mhdfasilwyd]

Any updates?

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed in 7 days if no further activity occurs. Thank you for your contributions.

[NicoHood]

Will this still get implemented?

[bantilan]

Just an update to those who are searching for clipboard function - since it's hard to find answer in the internet, you can use the copy(), copy-success and copy-error:

example code:

<button on="tap:inputTarget.copy();copy-success:inputCopySuccess.show();copy-error:inputCopyError.show()">Copy</button>

tap:input_id_to_copy.copy(); Use this to specify the input you want to copy. For example:
<input id="inputTarget" value="Sample Input Value" />

copy-success:element_id_to_show_for_success.show(); Utilize this to display a success message when the value is copied successfully. Example:
<span id="inputCopySuccess" hidden class="copy-success">Value copied successfully!</span>

copy-error:element_id_to_show_for_error.show(); Apply this function to show an error message if the copying fails. For instance:
<span id="inputCopyError" hidden class="copy-error">Error while copying!</span>

or simply use this one:

tap:AMP.copy(text='Hello AMP!');copy-success:staticTextCopySuccess.show()