clipboard.js

const $ = window.jQuery = require('jquery');
const ClipboardJS = require('clipboard');

function clearTooltip(e) {
  e.currentTarget.setAttribute('class', 'copy-button');
  e.currentTarget.removeAttribute('aria-label');
}

function showTooltip(elem, msg) {
  elem.setAttribute('class', 'copy-button tooltipped tooltipped-s');
  elem.setAttribute('aria-label', msg);
}

function fallbackMessage(action) {
  let actionMsg = '';
  const actionKey = (action === 'cut' ? 'X' : 'C');
  if (/iPhone|iPad/i.test(navigator.userAgent)) {
    actionMsg = 'No support :(';
  } else if (/Mac/i.test(navigator.userAgent)) {
    actionMsg = `Press ⌘-${actionKey} to ${action}`;
  } else {
    actionMsg = `Press Ctrl-${actionKey} to ${action}`;
  }
  return actionMsg;
}

$(document).ready(() => {
  const clipboardBtn = new ClipboardJS('.copy-button');
  clipboardBtn.on('success', (e) => {
    e.clearSelection();
    // console.info('Action:', e.action);
    // console.info('Text:', e.text);
    // console.info('Trigger:', e.trigger);
    showTooltip(e.trigger, 'Copied!');
  });
  clipboardBtn.on('error', (e) => {
    // console.error('Action:', e.action);
    // console.error('Trigger:', e.trigger);
    showTooltip(e.trigger, fallbackMessage(e.action));
  });

  const btns = document.querySelectorAll('.copy-button');
  for (let i = 0; i < btns.length; i++) {
    btns[i].addEventListener('mouseleave', clearTooltip);
    btns[i].addEventListener('blur', clearTooltip);
  }

  // var clipboardDemos = new ClipboardJS('[data-clipboard-demo]');
  // clipboardDemos.on('success', function (e) {
  //   e.clearSelection();
  //   console.info('Action:', e.action);
  //   console.info('Text:', e.text);
  //   console.info('Trigger:', e.trigger);
  //   showTooltip(e.trigger, 'Copied!');
  // });
  // clipboardDemos.on('error', function (e) {
  //   console.error('Action:', e.action);
  //   console.error('Trigger:', e.trigger);
  //   showTooltip(e.trigger, fallbackMessage(e.action));
  // });

  // var snippets = document.querySelectorAll('.snippet');
  // [].forEach.call(snippets, function (snippet) {
  //   snippet.firstChild.insertAdjacentHTML('beforebegin', '<button class="btn" data-clipboard-snippet><img class="clippy" width="13" src="assets/images/clippy.svg" alt="Copy to clipboard"></button>');
  // });
  // var clipboardSnippets = new ClipboardJS('[data-clipboard-snippet]', {
  //   target: function (trigger) {
  //     return trigger.nextElementSibling;
  //   }
  // });
  // clipboardSnippets.on('success', function (e) {
  //   e.clearSelection();
  //   showTooltip(e.trigger, 'Copied!');
  // });
  // clipboardSnippets.on('error', function (e) {
  //   showTooltip(e.trigger, fallbackMessage(e.action));
  // });
});