Add clipboard JS

Author: cotes2020

_includes/js-selector.html

@@ -14,7 +14,7 @@
 
 {% if page.layout == 'post' or page.layout == 'page' %}
   <!-- image lazy-loading & popup -->
-  <script src="https://cdn.jsdelivr.net/combine/npm/lozad/dist/lozad.min.js,npm/magnific-popup@1/dist/jquery.magnific-popup.min.js"></script>
+  <script src="https://cdn.jsdelivr.net/combine/npm/lozad/dist/lozad.min.js,npm/magnific-popup@1/dist/jquery.magnific-popup.min.js,npm/clipboard@2/dist/clipboard.min.js"></script>
 {% endif %}
 
 {% if page.layout == 'home'

_javascript/utils/clipboard.js

@@ -0,0 +1,40 @@
+/*
+ * Initial the clipboard.js object, see: <https://github.com/zenorocha/clipboard.js>
+ *
+ * Dependencies:
+ *   - popper.js (https://github.com/popperjs/popper-core)
+ *   - clipboard.js (https://github.com/zenorocha/clipboard.js)
+ */
+$(function() {
+  const btnSelector = '.code-header>button';
+
+  var clipboard = new ClipboardJS(btnSelector, {
+    target(trigger) {
+      return trigger.parentNode.nextElementSibling;
+    }
+  });
+
+  function setTooltip(btn, msg) {
+    $(btn).tooltip('hide')
+      .attr('data-original-title', msg)
+      .tooltip('show');
+  }
+
+  function hideTooltip(btn) {
+    setTimeout(function() {
+      $(btn).tooltip('hide');
+    }, 1000);
+  }
+
+  $(btnSelector).tooltip({
+    trigger: 'click',
+    placement: 'left'
+  });
+
+  clipboard.on('success', function(e) {
+    e.clearSelection();
+    setTooltip(e.trigger, 'Copied!');
+    hideTooltip(e.trigger);
+  });
+
+});