mirror/clipboard.js
1
0
Fork 0
mirror of https://github.com/zenorocha/clipboard.js.git synced 2023-08-10 21:12:48 +03:00
Code Issues Projects Releases Wiki Activity

Add copy buttons to code snippets

Browse Source
This commit is contained in:
Vitor Cortez 2015-10-04 19:15:28 -03:00 committed by Zeno Rocha
parent 9abeb45708
commit 39f7cda714
4 changed files with 38 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
assets/scripts/main.js
View File

@ -8,7 +8,7 @@ for (var i = 0; i < btns.length; i++) {
}
function showTooltip(elem, msg) {
elem.setAttribute('class', 'btn tooltipped tooltipped-s');
elem.setAttribute('class', elem.className.indexOf('clip') === -1 ? 'btn tooltipped tooltipped-s': 'btn clip tooltipped tooltipped-s');
elem.setAttribute('aria-label', msg);
}

17
assets/scripts/snippets.js Normal file
View File

@ -0,0 +1,17 @@
(function() {
'use strict';
var identifier = 0;
var snippets = Array.prototype.slice.call(document.querySelectorAll('pre.snippet'));
snippets.forEach(function(snippet) {
snippet.id = 'snip' + identifier;
var copyBtn = document.createElement('span');
copyBtn.className = 'btn clip';
copyBtn.setAttribute('data-clipboard-target', '#snip' + identifier++);
snippet.parentElement.insertBefore(copyBtn, snippet);
});
})();

10
assets/styles/main.css
View File

@ -108,6 +108,16 @@ pre code {
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;

19
index.html
View File

@ -41,11 +41,11 @@ allowtransparency="true" frameborder="0" scrolling="0" width="156" height="30"><
<p>You can get it on npm.</p>
<pre><code class="js">npm install clipboard --save</code></pre>
<pre class="snippet"><code class="js">npm install clipboard --save</code></pre>
<p>Or bower, too.</p>
<pre><code class="js">bower install clipboard --save</code></pre>
<pre class="snippet"><code class="js">bower install clipboard --save</code></pre>
<p>If you're not into package management, just <a href="https://github.com/zenorocha/clipboard.js/archive/master.zip">download a ZIP</a> file.</p>
@ -53,15 +53,15 @@ allowtransparency="true" frameborder="0" scrolling="0" width="156" height="30"><
<p>First, include the script located on the <code>dist</code> folder.</p>
<pre><code class="html">&lt;script src="dist/clipboard.min.js"&gt;&lt;/script&gt;</code></pre>
<pre class="snippet"><code class="html">&lt;script src="dist/clipboard.min.js"&gt;&lt;/script&gt;</code></pre>
<p>Or load it from a CDN.</p>
<pre><code class="html">&lt;script src="https://cdn.rawgit.com/zenorocha/clipboard.js/master/dist/clipboard.min.js"&gt;&lt;/script&gt;</code></pre>
<pre class="snippet"><code class="html">&lt;script src="https://cdn.rawgit.com/zenorocha/clipboard.js/master/dist/clipboard.min.js"&gt;&lt;/script&gt;</code></pre>
<p>Now, you need to instantiate it using a DOM selector. This selector corresponds to the trigger element(s), for example <code>&lt;button class="btn"&gt;</code>.</p>
<pre><code class="js">new Clipboard('.btn');</code></pre>
<pre class="snippet"><code class="js">new Clipboard('.btn');</code></pre>
<p>Internally, we need to fetch all elements that matches with your selector and attach event listeners for each one. But guess what? If you have hundreds of matches, this operation can consume a lot of memory.</p>
@ -140,7 +140,7 @@ allowtransparency="true" frameborder="0" scrolling="0" width="156" height="30"><
<p>That's why we fire custom events such as <code>success</code> and <code>error</code> for you to listen and implement your custom logic.</p>
<pre><code class="js">var clipboard = new Clipboard('.btn');
<pre class="snippet"><code class="js">var clipboard = new Clipboard('.btn');
clipboard.on('success', function(e) {
console.info('Action:', e.action);
@ -163,7 +163,7 @@ clipboard.on('error', function(e) {
<p>For instance, if you want to dynamically set a <code>target</code>, you'll need to return a Node.</p>
<pre><code class="js">new Clipboard('.btn', {
<pre class="snippet"><code class="js">new Clipboard('.btn', {
target: function(trigger) {
return trigger.nextElementSibling;
}
@ -171,7 +171,7 @@ clipboard.on('error', function(e) {
<p>If you want to dynamically set a <code>text</code>, you'll return a String.</p>
<pre><code class="js">new Clipboard('.btn', {
<pre class="snippet"><code class="js">new Clipboard('.btn', {
text: function(trigger) {
return trigger.getAttribute('aria-label');
}
@ -179,7 +179,7 @@ clipboard.on('error', function(e) {
<p>Also, with are working with single page apps, you may want to manage the lifecycle of the DOM more precisely. Here's how you clean up the events and objects that we create.</p>
<pre><code class="js">var clipboard = new Clipboard('.btn');
<pre class="snippet"><code class="js">var clipboard = new Clipboard('.btn');
clipboard.destroy();</code></pre>
<h1 id="browser-support">Browser Support</h1>
@ -226,6 +226,7 @@ clipboard.destroy();</code></pre>
<script src="assets/scripts/clipboard.js"></script>
<script src="assets/scripts/main.js"></script>
<script src="assets/scripts/snippets.js"></script>
<!-- Google Analytics -->
<script>