Clipboard.js + modifications (manual target method)

Interested in using Clipboard.js for your project?
I do not recommend anyone to implement Clipboard.js using the steps outlined in this post! Use this post to help – which includes everything bundled up into a no-bloat plugin!

Introduction

The HTML of the code snippet will always look like this:

<div class="code-snippet">
  <pre id="unique-ID"><code>
<--CODE TO SHARE HERE-->
  </code></pre>
  <button class="btn" data-clipboard-target="#unique-ID">
  </button>
</div>

Clipboard.js

Clipboard.js is an amazing library, created by a web wizard called Zeno Rocha, which allows you to add click-to-copy-to-clipboard functionality to pre code right away with very minimal setup required. Although this is something you probably could create yourself with ease, this library is extremely lightweight and bloat-free – I would recommend using this.

Steps

Here is how I installed Clipboard.js

Firstly, I downloaded the library from here and saved it in my custom Oxygen functions plugin (not required, but highly recommended).

I then added the following 2 snippets, credit to Alan Smith…

In my custom oxygen functions plugin to enqueue the scripts into WordPress:

// enqueue Clipboard.js
add_action('wp_enqueue_scripts', 'load_responsive_javascript');
function load_responsive_javascript() {
    wp_enqueue_script('clipboard', get_stylesheet_directory_uri().
        '/js/clipboard.js', array('jquery'), '1.0.0');
}

And the following in my custom oxygen functions plugin script file:

// Clipboard.js
var btns = document.querySelectorAll("button");
var clipboard = new ClipboardJS(btns);
clipboard.on("success", function(e) {
    console.log(e);
});
clipboard.on("error", function(e) {
    console.log(e);
});

That’s it! I was able to use clipboard.js right away after using the aforementioned HTML skeleton. However, there were 4 small things I tweaked…

Customisation

1. Deselecting code after running Clipboard.js

By default, Clipboard.js leaves whatever is copied, selected (so the pre code is highlighted). This wasn’t a big deal but I thought it looked a bit off so after a lot of trial and error, I found and adapted the following snippet:

// deselect copied pre code
function clearSelection() {
  var e;
  if ((e = document.selection) && e.empty) e.empty();
  else {
    window.getSelection && window.getSelection().removeAllRanges();
    var t = document.activeElement;
    if (t) {
      var n = t.nodeName.toLowerCase();
      ("textarea" == n || ("input" == n && "text" == t.type)) &&
        (t.selectionStart = t.selectionEnd);
    }
  }
}

Credit to Tim Down on Stack Overflow for this snippet.

2. Change trigger style

I then decided to change the look and feel of the button element. So I added in my own SVG to the button element by adding the following snippet in the HTML skeleton:

// filepath to copy icon to be added into button in HTML skeleton
<img src="https://bricks.farhan.app/wp-content/plugins/oxygen function/assets/copy.svg">

With a little bit of CSS styling:

/* style button */
.btn {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  display: inline-block;
  border: none;
  padding: 1rem 1rem;
  margin: 0;
  background: 0 0;
  cursor: pointer;
}
.btn:hover {
  background-color: #e8e8e8;
  border-radius: 6px;
}

3. Add trigger event feedback

Once the button/trigger was clicked, I wanted the image to disappear and feedback “Copied!”. This was achieved with a little bit of jQuery:

// on-click feedback "Copied!"
jQuery(".btn").on("click", function () {
  jQuery(this).text("Copied!"), jQuery(this).addClass("copied");
});

With a little bit of CSS styling:

/* style "Copied!" text*/
.copied {
  font-size: 1.4rem;
  color: #000;
  cursor: default;
}
.copied:hover {
  background: 0 0;
  border-radius: none;
}

4. Add timeout/reset trigger style

The final addition is getting the post-click feedback to reset back to the icon. I added the following snippet into the above jQuery code:

// after 800ms, replace inner text with icon again
setTimeout(() => {
  jQuery(this).html(
    '<img src="http://bricks.farhan.app/wp-content/uploads/2022/02/copy.svg">'
  ),
    jQuery(this).removeClass("copied");
}, 800);

Finally, how to use this!

All I have to do is simply copy and paste the following HTML skeleton wherever I wish to use it and ensure I do the following:

<div class="code-snippet">
  <pre id="unique-ID"><code>
<--CODE TO SHARE HERE-->
  </code></pre>
  <button class="btn" data-clipboard-target="#unique-ID">
  </button>
</div>

i) Change pre ID to the same thing as the data-clipboard-target attribute value

ii) Enter code in between the <code></code> tags

iii) Use this to decode HTML, this to minify CSS and this to minify JavaScript

Note: The pre element’s ID needs to match the data-clipboard-target attribute value in the button/trigger as this is how Clipboard.js knows what to copy.

Final thoughts

Whilst I am sure the above effects can easily be achieved by making direct tweaks to the Clipboard.js files or even adopting other solutions such as popper.js but I knew enough basic HTML and jQuery to do it myself. I am aware many people in the WordPress and Oxygen community love to share their own code without wanting to download another plugin to add this functionality so this DIY method might be appreciated.