implementing copy code buttons throughout the site

I implemented a copy code button for the CDN links in the Getting Started section a while back, and just sent a PR updating the code to disable the button upon click.

I like the idea of adding buttons to the rest of the code snippets, but unsure of how to go about it, so I wanted to open up a discussion here. By using document.getElementById() for each button we'd end up with a ton of code, so another solution might be using document.getElementsByClassName() with other complexities added.

A few points on design:

1. I think less intrusive Materialize copy icons + the inserted 'Copied!' text, at the top right corner of the gray code boxes would work best going forward. Without the current teal button, though I think it works for the CDN section.

2. As a somewhat different example, I also like how the Bootstrap team did theirs - https://getbootstrap.com - just scroll down to the Installation section. We also have tooltips, but they might be a bit much.

[DanielRuf]

document.getElementsByClassName()

Or we can use document.querySelector(All). One of these should work without any problems.

1. I think less intrusive Materialize copy icons + the inserted 'Copied!' text, at the top right corner of the gray code boxes would work best going forward. Without the current teal button, though I think it works for the CDN section.

I really like this idea.

2. As a somewhat different example, I also like how the Bootstrap team did theirs - [getbootstrap.com](https://getbootstrap.com) - just scroll down to the Installation section. We also have tooltips, but they might be a bit much.

Personally I think this is like a white "white horse" or "weißer Schimmel" in German (pleonasm, superfluous information), the tooltip does not make much sense in a UX way (it adds no additional information, most users already know what a copy button does, it is like having an image with a tooltip "this is an image"). No idea why they did this.

It seems they added it here but I see no clear or good reason for a tooltip there: twbs/bootstrap@ea1d69c

@DanielRuf I think the only possibly necessary reason for a tooltip would be not enough space to insert 'Copied!" next to or near the button. In Bootstrap's case, animating the buttons / text or adding a hover effect wouldn't really fit their aesthetic. Something more subtle like that could work for us though.

Good call on querySelectorAll() - I still need to play around with the newer button from @warrenrodrigues
and see if I can make any progress there.

I should note, Mozilla has an interesting doc about using the Clipboard API vs Document.execCommand(). What do you think about these 2 options?

https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/Interact_with_the_clipboard
https://caniuse.com/?search=clipboard%20api

[DanielRuf]

I think the clipboard API is the way to go since execCommand is deprecated / obsolete.

So I've been working on this and got multiple buttons working, using the Clipboard API! I think using icons looks a bit better, but I'm having some trouble with alignment within the pre tag. @warrenrodrigues your code for the timeout is still included here.

If anyone has ideas or other solutions, feel free to chime in.

https://codepen.io/christinavoudouris/pen/oNWqYLK (icons only)
https://codepen.io/christinavoudouris/pen/PomRmxj (flat buttons)

[wuda-io]

Can this be closed?

[warrenrodrigues]

Can be closed for now. At some point, I will submit a new PR to resolve this, as discussed in the currently closed PR #161 (comment)