Creates a new instance of Clipboard for snippet buttons #68

assets/scripts/snippets.js

@@ -1,17 +1,21 @@
-(function() {
-  'use strict';
+var snippets = document.querySelectorAll('.snippet');
 
-  var identifier = 0;
-  var snippets = Array.prototype.slice.call(document.querySelectorAll('pre.snippet'));
+[].forEach.call(snippets, function(snippet) {
+    snippet.firstChild.insertAdjacentHTML('beforebegin', '<button class="btn" data-clipboard-snippet><img class="clippy" width="13" src="assets/images/clippy.svg" alt="Copy to clipboard"></button>');
+});
 
-  snippets.forEach(function(snippet) {
-    snippet.id = 'snip' + identifier;
+var clipboardSnippets = new Clipboard('[data-clipboard-snippet]', {
+    target: function(trigger) {
+        return trigger.nextElementSibling;
+    }
+});
 
-    var copyBtn = document.createElement('span');
+clipboardSnippets.on('success', function(e) {
+    e.clearSelection();
 
-    copyBtn.className = 'btn clip';
-    copyBtn.setAttribute('data-clipboard-target', '#snip' + identifier++);
+    showTooltip(e.trigger, 'Copied!');
+});
 
-    snippet.parentElement.insertBefore(copyBtn, snippet);
-  });
-})();
+clipboardSnippets.on('error', function(e) {
+    showTooltip(e.trigger, fallbackMessage(e.action));
+});

assets/styles/main.css

@@ -100,45 +100,9 @@ h3 {
     opacity: .3;
 }
 
-/* Code
-   ========================================================================== */
-
-pre code {
-    font-size: 14px;
-    line-height: 20px;
-}
-
-span.btn.clip {
-    float: right;
-    height: 2em;
-    margin: 0.25vw 0 0 0.25vw;
-    background-image: url("../images/clippy.svg");
-    background-size: 60%;
-    background-position: center;
-    background-repeat: no-repeat;
-}
-
-code {
-    background-color: #E8F5F2;
-    border-radius: 3px;
-    color: #1BC1A1;
-    font-size: 85%;
-    margin: 0;
-    padding: 0.2em;
-}
-
-.hljs-keyword {
-    color: #008080;
-    font-weight: normal;
-}
-
 /* Example
    ========================================================================== */
 
-.flash {
-    margin-bottom: 15px;
-}
-
 .example {
     position: relative;
     margin: 15px 0 0;
@@ -146,6 +110,7 @@ code {
     background-color: #fff;
     border-radius: 4px 4px 0 0;
     border: 1px solid #ddd;
+    z-index: 2;
 }
 
 .example p {
@@ -165,12 +130,12 @@ code {
     border-radius: 4px 0 4px 0;
 }
 
-.example + pre {
+.example + .snippet {
     background: #f8f8f8;
     border-radius: 4px;
     border: 1px solid #ddd;
     clear: both;
-    margin-top: -20px;
+    top: -20px;
     padding: 20px 0 0;
 }
 
@@ -192,6 +157,53 @@ textarea {
     width: 100%;
 }
 
+/* Code
+   ========================================================================== */
+
+.snippet {
+    position: relative;
+    overflow: visible;
+}
+
+.snippet code {
+    font-size: 14px;
+    line-height: 20px;
+}
+
+.snippet .btn {
+    -webkit-transition: opacity 0.3s ease-in-out;
+    -o-transition: opacity 0.3s ease-in-out;
+    transition: opacity 0.3s ease-in-out;
+    opacity: 0;
+    padding: 2px 6px;
+    position: absolute;
+    right: 4px;
+    top: 4px;
+}
+
+.snippet:hover .btn {
+    opacity: 1;
+}
+
+.example + .snippet .btn {
+    top: 22px;
+    right: 2px;
+}
+
+code {
+    background-color: #E8F5F2;
+    border-radius: 3px;
+    color: #1BC1A1;
+    font-size: 85%;
+    margin: 0;
+    padding: 0.2em;
+}
+
+.hljs-keyword {
+    color: #008080;
+    font-weight: normal;
+}
+
 /* Support
    ========================================================================== */