Merge pull request #17751 from twbs/v4-dev-xmr-clipboardjs

Replace ZeroClipboard with clipboard.js.

docs/assets/js/src/application.js

@@ -9,7 +9,7 @@
  * details, see https://creativecommons.org/licenses/by/3.0/.
  */
 
-/* global ZeroClipboard, anchors */
+/* global Clipboard, anchors */
 
 !function ($) {
   'use strict';
@@ -36,49 +36,39 @@
       e.preventDefault()
     })
 
-    // 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>'
+      var btnHtml = '<div class="bd-clipboard"><span class="btn-clipboard" title="Copy to clipboard">Copy</span></div>'
       $(this).before(btnHtml)
+      $('.btn-clipboard').tooltip()
     })
-    var zeroClipboard = new ZeroClipboard($('.btn-clipboard'))
-    var $htmlBridge = $('#global-zeroclipboard-html-bridge')
 
-    // Handlers for ZeroClipboard
+    var clipboard = new Clipboard('.btn-clipboard', {
-    zeroClipboard.on('load', function () {
+      target: function (trigger) {
-      $htmlBridge
+        return trigger.parentNode.nextElementSibling
-        .data('placement', 'top')
+      }
+    })
+
+    clipboard.on('success', function (e) {
+      $(e.trigger)
+        .attr('title', 'Copied!')
+        .tooltip('_fixTitle')
+        .tooltip('show')
         .attr('title', 'Copy to clipboard')
-        .tooltip()
+        .tooltip('_fixTitle')
 
-      // Copy to clipboard
+      e.clearSelection()
-      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')
-      })
     })
 
-    // Hide copy button when no Flash is found
+    clipboard.on('error', function (e) {
-    // or wrong Flash version is present
+      var fallbackMsg = /Mac/i.test(navigator.userAgent) ? 'Press \u2318 to copy' : 'Press Ctrl-C to copy'
-    zeroClipboard.on('noflash wrongflash', function () {
+
-      $('.zero-clipboard').remove()
+      $(e.trigger)
-      ZeroClipboard.destroy()
+        .attr('title', fallbackMsg)
+        .tooltip('_fixTitle')
+        .tooltip('show')
+        .attr('title', 'Copy to clipboard')
+        .tooltip('_fixTitle')
     })
 
   })

docs/assets/scss/_clipboard-js.scss

@@ -1,8 +1,8 @@
-// ZeroClipboard
+// clipboard.js
 //
 // Flash-based `Copy` buttons for code snippets.
 
-.zero-clipboard {
+.bd-clipboard {
   position: relative;
   display: none;
   float: right;
@@ -28,7 +28,7 @@
 }
 
 @media (min-width: 768px) {
-  .zero-clipboard {
+  .bd-clipboard {
     display: block;
   }
 }

docs/assets/scss/_component-examples.scss

@@ -75,7 +75,7 @@
   }
 
   + .highlight,
-  + .zero-clipboard + .highlight {
+  + .clipboard + .highlight {
     margin-top: 0;
   }
 

docs/assets/scss/docs.scss

@@ -57,7 +57,7 @@ $bd-info:           #5bc0de;
 @import "team";
 @import "browser-bugs";
 @import "brand";
-@import "zeroclipboard";
+@import "clipboard-js";
 
 // Load docs dependencies
 @import "syntax";

grunt/configBridge.json

@@ -1,9 +1,9 @@
 {
   "paths": {
     "docsJs": [
-      "../assets/js/vendor/holder.min.js",
-      "../assets/js/vendor/ZeroClipboard.min.js",
       "../assets/js/vendor/anchor.min.js",
+      "../assets/js/vendor/clipboard.min.js",
+      "../assets/js/vendor/holder.min.js",
       "../assets/js/vendor/tether.min.js",
       "../assets/js/src/application.js"
     ]