Replace ZeroClipboard with clipboard.js (backported from v4).

docs/assets/js/src/application.js

@@ -9,7 +9,7 @@
  * details, see https://creativecommons.org/licenses/by/3.0/.
  */
 
-/* global ZeroClipboard, anchors */
+/* global ClipboardJS: false, anchors: false */
 
 !function ($) {
   'use strict';
@@ -125,50 +125,47 @@
       $(this).siblings('.progress').find('.progress-bar-striped').toggleClass('active')
     })
 
-    // Config ZeroClipboard
-    ZeroClipboard.config({
-      moviePath: '/assets/flash/ZeroClipboard.swf',
-      hoverClass: 'btn-clipboard-hover'
-    })
-
     // Insert copy to clipboard button before .highlight
-    $('.highlight').each(function () {
-      var btnHtml = '<div class="zero-clipboard"><span class="btn-clipboard">Copy</span></div>'
+    $('figure.highlight, div.highlight').each(function () {
+      var btnHtml = '<div class="bs-clipboard"><button type="button" class="btn-clipboard" title="Copy to clipboard">Copy</button></div>'
       $(this).before(btnHtml)
-    })
-    var zeroClipboard = new ZeroClipboard($('.btn-clipboard'))
-    var $htmlBridge = $('#global-zeroclipboard-html-bridge')
-
-    // Handlers for ZeroClipboard
-    zeroClipboard.on('load', function () {
-      $htmlBridge
-        .data('placement', 'top')
-        .attr('title', 'Copy to clipboard')
+      $('.btn-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 () {
-        $htmlBridge
-          .attr('title', 'Copied!')
-          .tooltip('fixTitle')
-          .tooltip('show')
-          .attr('title', 'Copy to clipboard')
-          .tooltip('fixTitle')
-      })
+        .on('mouseleave', function () {
+          // Explicitly hide tooltip, since after clicking it remains
+          // focused (as it's a button), so tooltip would otherwise
+          // remain visible until focus is moved away
+          $(this).tooltip('hide')
+        })
     })
 
-    // Hide copy button when no Flash is found
-    // or wrong Flash version is present
-    zeroClipboard.on('noflash wrongflash', function () {
-      $('.zero-clipboard').remove()
-      ZeroClipboard.destroy()
+    var clipboard = new ClipboardJS('.btn-clipboard', {
+      target: function (trigger) {
+        return trigger.parentNode.nextElementSibling
+      }
+    })
+
+    clipboard.on('success', function (e) {
+      $(e.trigger)
+        .attr('title', 'Copied!')
+        .tooltip('fixTitle')
+        .tooltip('show')
+        .attr('title', 'Copy to clipboard')
+        .tooltip('fixTitle')
+
+      e.clearSelection()
+    })
+
+    clipboard.on('error', function (e) {
+      var modifierKey = /Mac/i.test(navigator.userAgent) ? '\u2318' : 'Ctrl-'
+      var fallbackMsg = 'Press ' + modifierKey + 'C to copy'
+
+      $(e.trigger)
+        .attr('title', fallbackMsg)
+        .tooltip('fixTitle')
+        .tooltip('show')
+        .attr('title', 'Copy to clipboard')
+        .tooltip('fixTitle')
     })
 
   })

docs/assets/less/clipboard-js.less

@@ -0,0 +1,39 @@
+// clipboard.js
+//
+// JS-based `Copy` buttons for code snippets.
+
+.bs-clipboard {
+  position: relative;
+  display: none;
+  float: right;
+
+  + .highlight {
+    margin-top: 0;
+  }
+}
+
+.btn-clipboard {
+  position: absolute;
+  top: 0;
+  right: 0;
+  z-index: 10;
+  display: block;
+  padding: .25rem .5rem;
+  font-size: 12px;
+  color: #818a91;
+  cursor: pointer;
+  background-color: transparent;
+  border: 0;
+  border-radius: .25rem;
+
+  &:hover {
+    color: #fff;
+    background-color: #027de7;
+  }
+}
+
+@media (min-width: @screen-sm-min) {
+  .bs-clipboard {
+    display: block;
+  }
+}

docs/assets/less/docs.less

@@ -34,7 +34,7 @@
 @import "glyphicons.less";
 @import "customizer.less";
 @import "brand.less";
-@import "zero-clipboard.less";
+@import "clipboard-js.less";
 @import "anchor.less";
 @import "algolia.less";
 @import "misc.less";

docs/assets/less/examples.less

@@ -50,7 +50,7 @@
 
 // Tweak display of the code snippets when following an example
 .bs-example + .highlight,
-.bs-example + .zero-clipboard + .highlight {
+.bs-example + .bs-clipboard + .highlight {
   margin: -15px -15px 15px;
   border-width: 0 0 1px;
   border-radius: 0;
@@ -68,7 +68,7 @@
     box-shadow: none;
   }
   .bs-example + .highlight,
-  .bs-example + .zero-clipboard + .highlight {
+  .bs-example + .bs-clipboard + .highlight {
     margin-top: -16px;
     margin-right: 0;
     margin-left: 0;
@@ -76,6 +76,10 @@
     border-bottom-right-radius: 4px;
     border-bottom-left-radius: 4px;
   }
+  .bs-example + .bs-clipboard .btn-clipboard {
+    top: -15px; // due to padding .bs-example has
+    border-top-right-radius: 0;
+  }
   .bs-example-standalone {
     border-radius: 4px;
   }

docs/assets/less/zero-clipboard.less

@@ -1,33 +0,0 @@
-.zero-clipboard {
-  position: relative;
-  display: none;
-}
-.btn-clipboard {
-  position: absolute;
-  top: 0;
-  right: 0;
-  z-index: 10;
-  display: block;
-  padding: 5px 8px;
-  font-size: 12px;
-  color: #767676;
-  cursor: pointer;
-  background-color: #fff;
-  border: 1px solid #e1e1e8;
-  border-radius: 0 4px;
-}
-.btn-clipboard-hover {
-  color: #fff;
-  background-color: #563d7c;
-  border-color: #563d7c;
-}
-
-@media (min-width: @screen-sm-min) {
-  .zero-clipboard {
-    display: block;
-  }
-  .bs-example + .zero-clipboard .btn-clipboard {
-    top: -16px;
-    border-top-right-radius: 0;
-  }
-}

grunt/configBridge.json

@@ -12,7 +12,7 @@
     ],
     "docsJs": [
       "/docs/3.4/assets/js/vendor/holder.min.js",
-      "/docs/3.4/assets/js/vendor/ZeroClipboard.min.js",
+      "/docs/3.4/assets/js/vendor/clipboard.min.js",
       "/docs/3.4/assets/js/vendor/anchor.min.js",
       "/docs/3.4/assets/js/src/application.js"
     ]