Add a Copy to clipboard button to your page

Video transcript

Here's the transcript of the video which you can see above. It details how you go about adding a "Copy to clipboard" button to your example code - just like is done on the RGraph website. Here's the transcript of the video:

In this video I'm going to explain a feature that I added to the RGraph website that allows you to easily copy the text from an example block of code to your clipboard, by way of a small copy button in the top right corner of each such example.

What you can see now is an example page that shows the "Copy to clipboard" technique in action. In this example we have a code block showing some example source code and to make a horizontal scroll bar appear, there is a long comment at very top of the code.

Now, if we use the scrollbar to scroll right you can see that the "Copy" button in the top right corner doesn't move - it stays where it is. This is done by adding some html and we'll go through that in a second.

To show this example working we can copy the title manually and paste that into the textarea like so. So lets highlight the title... copy that with ctrl+c... and then paste that into the textarea (ctrl+v)... wonderful... we've got the title on our clipboard. So if we delete that little bit of text there and come back up to the pre-tag... ok and this time we're going to use the "Copy" button. So if we click on that it changes to "Copied" for a few seconds and then changes back and if we come back down to the textarea and paste in the contents with ctrl+v we get the the contents of the pre-tag that were copied onto the clipboard

OK, now if we view the source of the page so that we can go through that.

The first thing that we have in the source code are some css definitions that set the background-color and the positioning of the pre-tag. The pre-tag is what will contain our code and is wrapped in a div-tag which has the class “codeblock”.

First, in this css, we give the body some style to change the default font family and size, the div.codeblock styles are defined and there are only three of them and then there are the styles to give the pre-tag some padding and a horizontal scrollbar should one be necessary.

Then we move on to the main copyToClipboard function. This function is given two arguments - the text that is to be copied to the clipboard and a span-tag. The span-tag is what you click on to actually do the copying and it's given to the copyToClipboard function so that it can be changed to “Copied”, for example, for a few seconds just to give some visual feedback to the user that the text has actually been copied to their clipboard.

Now, if we look at the copyToClipboard function, the first thing that's done is that the label is removed from the text that we've been passed because we don't want to copy that to the clipboard as well as the main text.

Then, the clipboard api is used which uses promises and copies the text from the pre-tag onto the clipboard. If this is successful, it then calls the showNotification function, passing it the span-tag and if there's an error an alert is shown to the user.

Now we move on to the showNotification function. This function takes the span-tag as the sole argument and what it does is create another span-tag, configures it by adding some css styles to it and then appends it as a child of the original span-tag that was passed in as an argument. The new span-tag that we just created is set to entirely cover the original span-tag that contains the word "Copy". The new tag contains the word "Copied" so when it’s created you see the original word "Copy" replaced with the word "Copied". It then fades out and is removed after a few seconds.

Lets move on to the addEventListener function which adds a listener to the DOMContentLoaded event - so essentially this is the entry point to the code. The first thing that this function does is get a collection of all of the pre-tags on the page by using the document.getElementsByTagName function. It then loops through the resulting collection.

If there's a custom "data-copy" attribute on this pre-tag and it’s set to false then this pre-tag is ignored. This gives you an easy way to prevent a tag from having a "Copy" button added to it should you wish to do so.

A new div-tag is created and the pre-tag is then wrapped in that div-tag by using the wrapElement function which is defined below. The div-tag is given the class "codeblock" which means that it inherits the styles that we set earlier in our css and a few extra styles are then set to give it a background color and make it stand out on the page.

A new span-tag is then created - this is the "Copy" button that people will click on. This span-tag has various styles set on it and is positioned absolutely in the top right-hand corner.

The span-tag is then appended to the div-tag wrapper - not the pre-tag - so that when the pre-tag is scrolled left or right, the span-tag and the "Copy" link that it holds, will stay in the top right-hand corner.

Finally, a click event listener is added so that when you click the "Copy" button it calls the copyToClipboard function that we talked about earlier. The function is passed the text, minus the "Copy" label and the span-tag dom node.

The last small function is the wrapElement function that’s used to wrap one dom element with another. In our case, this function is used to wrap the pre-tags with the div-tags that have been created here.

And finally, there’s the small bit of html code that makes up the page. We have the heading, some text, and then the pre-tag that’s the subject of this whole endeavour. Note that the pre-tag has the class of code specified. Up above in the DOMContentLoaded function, as the main loop through all of the pre-tags starts, as well as checking for a "data-copy" attribute it checks too for a "code" css class and if this is not present a "copy" link is not added. This makes it easy for you to exclude a particular pre-tag from having a "copy" link added.

And that’s all there is to adding a “Copy to clipboard” button to your code samples. Thanks for listening and if you have any questions then feel free to post me a message in the RGraph support forum. See you in the next video.