Adding "Copy to clipboard" buttons to Google Sites

 Google Sites has many good aspects, but it is pretty tight when it comes to customizations.

I have written some pages that ask the reader to copy some code and run it in a command window. The code is typically several lines, and selecting it can be a bit awkward. In fact, one tester missed one character when selecting the text, and confusion ensued.

After a fair amount of bumping into walls, I have finally found something that's not perfect, but it works.

The main challenge is that Google places embed widgets deep in very tightly controlled sandboxes, so forget about accessing the content of the page from your JavaScript code -- that's never happening.

Let's say you want a button that puts the following multi-line text in the clipboard:

Now is the time
Four score and seven years ago
When in the course of human events

Insert an Embed widget and give it the following code:

<p id="txtBuff" style="height: 0px; width: 0px; clip-path: circle(0); font-size: 0px;">
Now is the time<br>
Four score and seven years ago<br>
When in the course of human events<br>
</p>
<button id="butt" type="button" style="background: #3f51b5; color: #FFFFFF; margin-top: 0.5em; border-radius: 6px;" onclick="let node = document.querySelector('#txtBuff'); const selection = window.getSelection(); const range = document.createRange(); range.selectNodeContents(node); selection.removeAllRanges(); selection.addRange(range); document.execCommand('copy'); this.innerHTML = 'Copied'; setTimeout(function(){selection.removeAllRanges();}, 500); setTimeout(function(){document.getElementById('butt').innerHTML = 'Copy to clipboard';}, 2000); console.log('Copy successful');">Copy to clipboard</button>


Screenshot of button
This will result in a button that looks like this: 

Unless of course you change its styles. When you click that button, its text will change to "Copied" for two seconds to let the user know that their click was effective, then return to the original "Copy to clipboard".

If you look at the code, you may wonder whether the id attributes need to be changed if you have multiple buttons on the same page. You don't need to worry about that, because each button will be in its own little sandbox and will not clash in any way with the other buttons.
Location: Oakland, CA 94610, USA

Comments

Post a Comment

Popular posts from this blog

Do you need a database gateway?

What is a database gateway? A database gateway is an appliance (usually a virtual one) that sits between your database server(s) and your database client(s). By acting as a proxy between them, at the wire protocol level, the gateway can monitor, redirect, inject, modify and reject requests and responses between database clients and database servers. In other words, a database gateway can change the way your databases and your applications work, without actually modifying your database or your client. This is no different than other types of gateways. For instance, when you look at a web page in your browser, it's entirely possible that it's not exactly the page that was sent by the site you're browsing. Many enterprises and ISPs have gateways that introspect HTML pages and add or remove ads, scripts, and other content. This happens transparently, and most people are completely unaware that this is happening. A database gateway works similarly: it receives requests from data...
Read more

Docker stop trick

It's often the little things that make you feel like you're using a solid piece of software. My latest example is how long it takes a Docker image to stop. By default, it can take ten seconds, and that's a long time. The latest build (276) of Gallium Data includes a minuscule modification to the script that starts the Java process: Before: /usr/bin/java -classpath "/galliumdata/jars/*" After: exec /usr/bin/java -classpath "/galliumdata/jars/*" That makes all the difference! Using exec replaces the bash process with the Java process, which means it will receive the termination signal sent by docker stop and shut down as soon as it receives the signal. That may not look like much, but ten seconds is a long time. Most of us will live about two and a half billion seconds. I'm probably at two-thirds of my life span, which means I have likely less than a billion seconds left. Even if I had a billion dollars in my bank account, I'm pretty ...
Read more