Integrate ZeroClipboard to easily copy code snippets

Gruntfile.js

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

docs/assets/css/docs.css

@@ -1413,3 +1413,36 @@ h1[id] {
   -moz-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;
+  border-left: 1px solid transparent;
+  border-bottom: 1px solid transparent;
+  border-color: #e1e1e8;
+  padding: 5px 10px;
+  cursor: pointer;
+  border-radius: 0 4px 0 0;
+  z-index: 10;
+}
+
+
+.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/application.js

@@ -27,11 +27,31 @@
       document.querySelector('head').appendChild(msViewportStyle)
     }
 
+    // Config ZeroClipboard
+    ZeroClipboard.config({
+      moviePath: '/assets/flash/zero-clipboard.swf',
+      hoverClass: 'btn-clipboard-hover'
+    })
+
+    // 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)
 
     var navHeight = $('.navbar').outerHeight(true) + 10
+    var zeroClipboard = new ZeroClipboard($('.btn-clipboard'))
+    var htmlBridge = $('#global-zeroclipboard-html-bridge')
 
     $body.scrollspy({
       target: '.bs-sidebar',
@@ -96,6 +116,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)