Refactor and restyle.

Gruntfile.js

@@ -137,7 +137,7 @@ module.exports = function (grunt) {
         },
         src: [
           'docs/assets/js/_vendor/holder.js',
-          'docs/assets/js/_vendor/zero-clipboard.js',
+          'docs/assets/js/_vendor/zero-clipboard.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;
 }
 
 
@@ -1467,35 +1463,37 @@ h1[id] {
           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;
-  padding: 5px 10px;
+  display: block;
+  padding: 5px 8px;
+  font-size: 12px;
+  color: #777;
   cursor: pointer;
-  border-color: #e1e1e8;
-  border-bottom: 1px solid transparent;
-  border-left: 1px solid transparent;
-  border-radius: 0 4px 0 0;
+  background-color: #fff;
+  border: 1px solid #e1e1e8;
+  border-radius: 0 4px 0 4px;
 }
-
-
 .btn-clipboard-hover {
-  background-color: #e1e1e8;
+  color: #fff;
+  background-color: #563d7c;
+  border-color: #563d7c;
 }
 
-@media (max-width: 768px) {
-  .btn-clipboard.with-example {
-    top: 10px;
-    border: 1px solid #e1e1e8;
-    border-radius: 0;
+@media (min-width: 768px) {
+  .zero-clipboard {
+    display: block;
   }
 }

docs/assets/js/_src/application.js

@@ -15,35 +15,25 @@
 
   $(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)
-      }
-    })
-
+    // 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')
 
@@ -84,7 +74,7 @@
       })
     })();
 
-    // tooltip demo
+    // Tooltip and popover demos
     $('.tooltip-demo').tooltip({
       selector: '[data-toggle="tooltip"]',
       container: 'body'
@@ -98,53 +88,68 @@
       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)
     })
 
-    // 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/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="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(client) {
       htmlBridge
-        .data('placement', 'left')
-        .attr('title', 'copy to clipboard')
+        .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(client) {
       htmlBridge
-        .attr('title', 'copied!')
+        .attr('title', 'Copied!')
         .tooltip('fixTitle')
         .tooltip('show')
-        .attr('title', 'copy to clipboard')
+        .attr('title', 'Copy')
         .tooltip('fixTitle')
     })
 
     // Notify copy failure
     zeroClipboard.on('noflash wrongflash', function(client) {
       htmlBridge
-        .attr('title', 'flash not supported!')
+        .attr('title', 'Flash required')
         .tooltip('fixTitle')
         .tooltip('show')
     })