Integrate ZeroClipboard to easily copy code snippets

Gruntfile.js

@@ -137,6 +137,7 @@ module.exports = function (grunt) {
         },
         src: [
           'docs/assets/js/_vendor/holder.js',
+          'docs/assets/js/_vendor/zero-clipboard.js',
           'docs/assets/js/_src/application.js'
         ],
         dest: 'docs/assets/js/docs.min.js'

docs/assets/css/_src/docs.css

@@ -1466,3 +1466,36 @@ h1[id] {
   -webkit-box-shadow: 0 0 8px rgba(82,168,236,.6);
           box-shadow: 0 0 8px rgba(82,168,236,.6);
 }
+
+/*
+ * ZeroClipboard styles
+ */
+
+.zero-clipboard {
+  position: relative;
+}
+
+.btn-clipboard {
+  position: absolute;
+  right: 0;
+  z-index: 10;
+  padding: 5px 10px;
+  cursor: pointer;
+  border-color: #e1e1e8;
+  border-bottom: 1px solid transparent;
+  border-left: 1px solid transparent;
+  border-radius: 0 4px 0 0;
+}
+
+
+.btn-clipboard-hover {
+  background-color: #e1e1e8;
+}
+
+@media (max-width: 768px) {
+  .btn-clipboard.with-example {
+    top: 10px;
+    border: 1px solid #e1e1e8;
+    border-radius: 0;
+  }
+}

docs/assets/js/_src/application.js

@@ -15,6 +15,19 @@
 
   $(function () {
 
+    // Insert copy to clipboard button before .highlight or .bs-example
+    $('.highlight').each(function() {
+      var highlight = $(this)
+      var previous = highlight.prev()
+      var btnHtml = '<div class="zero-clipboard"><span class="glyphicon glyphicon-list-alt btn-clipboard"></span></div>'
+
+      if (previous.hasClass('bs-example')) {
+        previous.before(btnHtml.replace(/btn-clipboard/, 'btn-clipboard with-example'))
+      } else {
+        highlight.before(btnHtml)
+      }
+    })
+
     var $window = $(window)
     var $body   = $(document.body)
 
@@ -102,6 +115,40 @@
           btn.button('reset')
         }, 3000)
       })
+
+    // Handlers for ZeroClipboard
+    zeroClipboard.on('load', function(client) {
+      htmlBridge
+        .data('placement', 'left')
+        .attr('title', 'copy to clipboard')
+        .tooltip()
+    })
+
+    // Copy to clipboard
+    zeroClipboard.on('dataRequested', function(client) {
+      var highlight = $(this).parent().nextAll('.highlight').first()
+
+      client.setText(highlight.text())
+    })
+
+    // Notify copy success and reset tooltip title
+    zeroClipboard.on('complete', function(client) {
+      htmlBridge
+        .attr('title', 'copied!')
+        .tooltip('fixTitle')
+        .tooltip('show')
+        .attr('title', 'copy to clipboard')
+        .tooltip('fixTitle')
+    })
+
+    // Notify copy failure
+    zeroClipboard.on('noflash wrongflash', function(client) {
+      htmlBridge
+        .attr('title', 'flash not supported!')
+        .tooltip('fixTitle')
+        .tooltip('show')
+    })
+
   })
 
 }(jQuery)