HTMLElement.prototype.wrap = function (wrapper) {
  this.parentNode.insertBefore(wrapper, this);
  this.parentNode.removeChild(this);
  wrapper.appendChild(this);
};

window.addEventListener('DOMContentLoaded', () => {
  document.querySelectorAll('figure.highlight').forEach(element => {
    const box = document.createElement('div');
    element.wrap(box);
    box.classList.add('highlight-container');
    box.insertAdjacentHTML('beforeend', '<div class="copy-btn"><i class="fa fa-clipboard"></i></div>');
    var button = element.parentNode.querySelector('.copy-btn');
    button.addEventListener('click', event => {
      var target = event.currentTarget;
      var code = [...target.parentNode.querySelectorAll('.code .line')].map(line => line.innerText).join('\n');
      var ta = document.createElement('textarea');
      ta.style.top = window.scrollY + 'px'; // Prevent page scrolling
      ta.style.position = 'absolute';
      ta.style.opacity = '0';
      ta.readOnly = true;
      ta.value = code;
      document.body.append(ta);
      const selection = document.getSelection();
      const selected = selection.rangeCount > 0 ? selection.getRangeAt(0) : false;
      ta.select();
      ta.setSelectionRange(0, code.length);
      ta.readOnly = false;
      var result = document.execCommand('copy');
      target.querySelector('i').className = result ? 'fa fa-check' : 'fa fa-times';
      ta.blur(); // For iOS
      target.blur();
      if (selected) {
        selection.removeAllRanges();
        selection.addRange(selected);
      }
      document.body.removeChild(ta);
    });
    button.addEventListener('mouseleave', event => {
      setTimeout(() => {
        event.target.querySelector('i').className = 'fa fa-clipboard';
      }, 300);
    });
  });
});