Merge pull request #12690 from twbs/docs_zeroclipboard

Add ZeroClipboard to docs

Gruntfile.js

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

docs/assets/css/_src/docs.css

@@ -1133,13 +1133,9 @@ h1[id] {
   font-size: inherit;
   color: #333; /* Effectively the base text color */
 }
-.highlight pre .lineno {
+.highlight pre code:first-child {
   display: inline-block;
-  width: 22px;
-  padding-right: 5px;
-  margin-right: 10px;
-  color: #bebec5;
-  text-align: right;
+  padding-right: 45px;
 }
 
 
@@ -1466,3 +1462,38 @@ 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;
+  display: none;
+}
+.btn-clipboard {
+  position: absolute;
+  top: 0;
+  right: 0;
+  z-index: 10;
+  display: block;
+  padding: 5px 8px;
+  font-size: 12px;
+  color: #777;
+  cursor: pointer;
+  background-color: #fff;
+  border: 1px solid #e1e1e8;
+  border-radius: 0 4px 0 4px;
+}
+.btn-clipboard-hover {
+  color: #fff;
+  background-color: #563d7c;
+  border-color: #563d7c;
+}
+
+@media (min-width: 768px) {
+  .zero-clipboard {
+    display: block;
+  }
+}

docs/assets/js/_src/application.js

@@ -9,28 +9,32 @@
  * details, see http://creativecommons.org/licenses/by/3.0/.
  */
 
+/* global ZeroClipboard */
 
 !function ($) {
   'use strict';
 
   $(function () {
 
+    // Scrollspy
     var $window = $(window)
     var $body   = $(document.body)
 
     $body.scrollspy({
       target: '.bs-docs-sidebar'
     })
-
     $window.on('load', function () {
       $body.scrollspy('refresh')
     })
 
+
+    // Kill links
     $('.bs-docs-container [href=#]').click(function (e) {
       e.preventDefault()
     })
 
-    // back to top
+
+    // Sidenav affixing
     setTimeout(function () {
       var $sideBar = $('.bs-docs-sidebar')
 
@@ -71,7 +75,7 @@
       })
     })();
 
-    // tooltip demo
+    // Tooltip and popover demos
     $('.tooltip-demo').tooltip({
       selector: '[data-toggle="tooltip"]',
       container: 'body'
@@ -85,23 +89,72 @@
       container: '.bs-docs-navbar .nav'
     })
 
-    // popover demo
+    // Default popover demo
     $('.bs-docs-popover').popover()
 
-    // Popover dismiss on next click
-    $('.bs-docs-popover-dismiss').popover({
-      trigger: 'focus'
+    // Button state demo
+    $('#loading-example-btn').click(function () {
+      var btn = $(this)
+      btn.button('loading')
+      setTimeout(function () {
+        btn.button('reset')
+      }, 3000)
+    })
+
+
+    // Config ZeroClipboard
+    ZeroClipboard.config({
+      moviePath: '/assets/flash/ZeroClipboard.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="btn-clipboard">Copy</span></div>'
+
+      if (previous.hasClass('bs-example')) {
+        previous.before(btnHtml.replace(/btn-clipboard/, 'btn-clipboard with-example'))
+      } else {
+        highlight.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')
+        .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')
+    })
+
+    // Notify copy failure
+    zeroClipboard.on('noflash wrongflash', function () {
+      htmlBridge
+        .attr('title', 'Flash required')
+        .tooltip('fixTitle')
+        .tooltip('show')
     })
 
-    // button state demo
-    $('#loading-example-btn')
-      .click(function () {
-        var btn = $(this)
-        btn.button('loading')
-        setTimeout(function () {
-          btn.button('reset')
-        }, 3000)
-      })
   })
 
 }(jQuery)