feat(styleguide): add copy button to code tables

[#79279548]
pivotal-cf · Dec 27, 2014 · fe66dc1 · fe66dc1
1 parent c0194a2
commit fe66dc1
Show file tree

Hide file tree

Showing 6 changed files with 74 additions and 2 deletions.
diff --git a/gulpfile.js b/gulpfile.js
@@ -189,6 +189,7 @@ gulp.task('_otherAssets', [
   '_copySourceSansPro',
   '_copyStyleguideAssets',
   '_copyStaticfile',
+  '_copyZeroClipboard',
 ]);
 
 gulp.task('_cleanOtherAssets', function(done) {
@@ -199,6 +200,7 @@ gulp.task('_cleanOtherAssets', function(done) {
     'build/styleguide/*.js',
     'build/styleguide/github.css',
     'build/Staticfile',
+    'build/zeroclipboard',
   ], {force: true}, done);
 });
 
@@ -237,6 +239,14 @@ gulp.task('_copyStaticfile', ['_cleanOtherAssets'], function() {
     .pipe(gulp.dest('./build/'));
 });
 
+gulp.task('_copyZeroClipboard', ['_cleanOtherAssets'], function() {
+  return gulp.src([
+    'node_modules/zeroclipboard/dist/ZeroClipboard.js',
+    'node_modules/zeroclipboard/dist/ZeroClipboard.swf',
+  ])
+    .pipe(gulp.dest('./build/zeroclipboard/'));
+});
+
 
 
 gulp.task('_testAssets', [

diff --git a/hologram/code_example_templates/markup_table_template.html.erb b/hologram/code_example_templates/markup_table_template.html.erb
@@ -16,6 +16,9 @@
                 </pre>
               </div>
             </div>
+            <button class="btn btn-default btn-copy" data-btn-copy>
+              Copy
+            </button>
           </td>
         </tr>
       <% end %>

diff --git a/hologram/doc_assets/_header.html b/hologram/doc_assets/_header.html
@@ -10,8 +10,9 @@
     <link rel="stylesheet" href="syntax-highlighting/prism-okaida.css">
     <link rel="shortcut icon" href="images/favicon.ico" type="image/x-icon">
     <script src="pivotal-ui-react.js"></script>
-    <script src="styleguide/styleguide.js"></script>
+    <script src="zeroclipboard/ZeroClipboard.js"></script>
     <script src="http://fb.me/JSXTransformer-0.12.0.js"></script>
+    <script src="styleguide/styleguide.js"></script>
   </head>
   <body>
     <nav class="styleguide-header">

diff --git a/package.json b/package.json
@@ -66,7 +66,8 @@
     "react": "0.12.1",
     "react-bootstrap": "^0.13.0",
     "reactify": "0.17.1",
-    "stream-to-promise": "^1.0.4"
+    "stream-to-promise": "^1.0.4",
+    "zeroclipboard": "^2.1.6"
   },
   "scripts": {
     "test": "node_modules/gulp/bin/gulp.js ci --fatal"

diff --git a/src/styleguide/styleguide.js b/src/styleguide/styleguide.js
@@ -54,3 +54,36 @@ $(document).ready(function() {
     }
   });
 });
+
+/* Copy button */
+
+$(document).ready(function() {
+  ZeroClipboard.config({ swfPath: "zeroclipboard/ZeroClipboard.swf" });
+  var zc = new ZeroClipboard( $('[data-btn-copy]') );
+
+  $('[data-btn-copy]')
+    .data('placement', 'left')
+    .attr('title', 'Copy to clipboard');
+
+  $('[data-btn-copy]').tooltip();
+
+  zc.on('ready', function() {
+    zc.on('copy', function(e) {
+      var copyText = $(e.target).parent().find('.codeBlock').text();
+      e.clipboardData.setData('text/plain', copyText);
+    });
+
+    zc.on('aftercopy', function(e) {
+      $(e.target).attr('title', 'Copied!')
+        .tooltip('fixTitle')
+        .tooltip('show')
+        .attr('title', 'Copy to clipboard')
+        .tooltip('fixTitle');
+    });
+  });
+
+  zc.on('error', function(err) {
+    console.error('Zero clipboard error', err);
+    ZeroClipboard.destroy();
+  });
+});
diff --git a/src/styleguide/styleguide.scss b/src/styleguide/styleguide.scss
@@ -418,9 +418,32 @@ blockquote {
   }
 
   td {
+    position: relative;
     padding: 10px 10px;
     vertical-align: middle;
     background-color: $bg-color-example-code;
+
+    .btn-copy {
+      @include transition-pui(background, 0.5s, ease-out);
+
+      position: absolute;
+      display: none;
+      top: 0;
+      right: 0;
+      padding: 7px 20px;
+      border-left: 1px solid $shadow-2;
+      border-bottom: 1px solid $shadow-2;
+      border-radius: 0;
+
+      &.zeroclipboard-is-hover {
+        display: block;
+        background-color: $neutral-11;
+      }
+    }
+
+    &:hover .btn-copy {
+      display: block;
+    }
   }
 
   pre {
@@ -563,3 +586,4 @@ td.is-hidden {
     background-color: $neutral-11;
   }
 }
+