clipboardrouge.js

// Clipboard
// This makes the button blink 250 miliseconds

function sleep(ms) {
  return new Promise(resolve => setTimeout(resolve, ms));
}

async function buttonBlink(btn, style) {
  btn.classList.remove("btn-light");
  btn.classList.add(style);
  await sleep(250); //Blink ms
  btn.classList.remove(style);
  btn.classList.add("btn-light");
}
// End


// Select highlghted codes
var codeChunk = document.querySelectorAll("pre.highlight");

// Loop to add buttons
for (var i = 0; i < codeChunk.length; i++) {

  var pre = codeChunk.item(i);
  var btn = document.createElement("button");
  // Prepare button
  btn.innerHTML = "<i class='far fa-copy'></i>"; // Icon to be displayed on the button

  // Inline styling - may be a new css class, to be added in the next section
  btn.style.position = "absolute";
  btn.style.right = "1em";

  // Button: CSS - Add new classes
  btn.classList.add("btn", "btn--primary");

  // Identifier for ClipboardJS
  btn.setAttribute("data-clipboard-copy", "");

  // aria-label: btn.setAttribute("aria-label", "Copy to clipboard");
  // etc.

  // Insert button
  pre.insertBefore(btn, pre.firstChild);

}
// End

// Copy to clipboard
var clipboard = new ClipboardJS("[data-clipboard-copy]", {
  target: function (trigger) {
    return trigger.nextElementSibling;
  }
});

// Messages and make the button blink
clipboard.on("success", function (e) {
  e.clearSelection();
  buttonBlink(e.trigger, "btn--success");
  console.info("Action:", e.action);
  console.info("Text:", e.text);
  console.info("Trigger:", e.trigger);
});

clipboard.on("error", function (e) {
  e.clearSelection();
  buttonBlink(e.trigger, "btn--danger");
  console.info("Action:", e.action);
  console.info("Trigger:", e.trigger);
});
// Finish