Add button to copy to clipboard

layouts/_default/single.html

@@ -9,6 +9,7 @@
       <a href="https://twitter.com/intent/tweet?text={{ .Permalink }}"><i class="mx-1 fa fa-twitter" aria-hidden="true"></i></a>
       <a href="https://www.facebook.com/sharer/sharer.php?u={{ .Permalink }}"><i class="mx-1 fa fa-facebook" aria-hidden="true"></i></a>
       <a href="http://www.reddit.com/submit?url={{ .Permalink }}"><i class="mx-1 fa fa-reddit" aria-hidden="true"></i></a>
+      <a href="#" data-clipboard-text="Because you can doesn't mean you should — clipboard.js" title="Copy link to clipboard"><i class="mx-1 fa fa-link" aria-hidden="true"></i></a>
     </h3>
   </div>
 </div>

package.json

@@ -19,6 +19,7 @@
   },
   "dependencies": {
     "bootstrap": "4.0.0-beta.2",
+    "clipboard": "1.7.1",
     "font-awesome": "4.7.0",
     "jquery": "3.2.1",
     "lg-thumbnail": "1.1.0",

static/src/js/index.js

@@ -3,10 +3,12 @@
 require('./jquery-global');
 require('bootstrap');
 
+
 require('lightgallery/dist/js/lightgallery');
 require('lg-thumbnail/dist/lg-thumbnail');
 
 require('plyr').setup();
+var Clipboard = require('clipboard');
 
 
 $('.image').each(function () {  // setup div-image hybrids
@@ -49,3 +51,14 @@ $('.navbar-brand').on('click', function (event) {
   }
   event.preventDefault();
 });
+
+var clipboard = new Clipboard('a');
+clipboard.on('success', function (e) {
+  var ele = $(e.trigger);
+  ele.find('i').attr('class', 'fa fa-check');
+  ele.attr('title', 'Copied!');
+});
+
+$('[data-clipboard-text]').on('click', function (event) {
+  event.preventDefault();
+});