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

Adds tooltips and updates button labels

Browse Source
This commit is contained in:
Zeno Rocha
2015-09-21 00:52:45 -07:00
parent 98548fbd06
commit ebce15d919
3 changed files with 20 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
assets/main.css
View File

@@ -96,6 +96,10 @@ h3 {
top: 3px; top: 3px;
} }
.btn[disabled] .clippy {
opacity: .3;
}
/* Code /* Code
========================================================================== */ ========================================================================== */

20
assets/main.js
View File

@@ -5,14 +5,12 @@ document.addEventListener('DOMContentLoaded', function() {
var btns = clipboard.triggers; var btns = clipboard.triggers;
for (var i = 0; i < btns.length; i++) { for (var i = 0; i < btns.length; i++) {
btns[i].addEventListener('copy', function(e) { btns[i].addEventListener('copy', complete);
console.info('Event:', e.type); btns[i].addEventListener('cut', complete);
console.info('Text:', e.detail);
});
btns[i].addEventListener('cut', function(e) { btns[i].addEventListener('mouseleave', function(e) {
console.info('Event:', e.type); e.currentTarget.classList.remove('tooltipped', 'tooltipped-s');
console.info('Text:', e.detail); e.currentTarget.removeAttribute('aria-label');
}); });
btns[i].addEventListener('no-support', function(e) { btns[i].addEventListener('no-support', function(e) {
@@ -24,4 +22,12 @@ document.addEventListener('DOMContentLoaded', function() {
} }
}); });
} }
function complete(e) {
console.info('Event:', e.type);
console.info('Text:', e.detail);
e.currentTarget.classList.add('tooltipped', 'tooltipped-s');
e.currentTarget.setAttribute('aria-label', 'Copied!');
}
}); });

6
index.html
View File

@@ -61,7 +61,7 @@ allowtransparency="true" frameborder="0" scrolling="0" width="156" height="30"><
Sorry, your browser do not support copy text to clipboard. Sorry, your browser do not support copy text to clipboard.
</div> </div>
<button class="btn" data-action="copy" data-text="Just because you can doesn't mean you should — clipboard.js">Copy to the clipboard</button> <button class="btn" data-action="copy" data-text="Just because you can doesn't mean you should — clipboard.js">Copy to clipboard</button>
</div> </div>
<pre><code class="html">&lt;!-- Trigger --&gt; <pre><code class="html">&lt;!-- Trigger --&gt;
@@ -80,7 +80,7 @@ allowtransparency="true" frameborder="0" scrolling="0" width="156" height="30"><
<div class="input-group"> <div class="input-group">
<input id="foo" type="text" value="https://github.com/zenorocha/clipboard.js.git"> <input id="foo" type="text" value="https://github.com/zenorocha/clipboard.js.git">
<span class="input-group-button"> <span class="input-group-button">
<button class="btn" type="button" data-action="copy" data-target="foo"> <button aria-label="Copy to clipboard" class="btn" type="button" data-action="copy" data-target="foo">
<img class="clippy" src="assets/clippy.svg" width="13" alt="Clipboard icon"> <img class="clippy" src="assets/clippy.svg" width="13" alt="Clipboard icon">
</button> </button>
</span> </span>
@@ -108,7 +108,7 @@ allowtransparency="true" frameborder="0" scrolling="0" width="156" height="30"><
</div> </div>
<div class="form-actions"> <div class="form-actions">
<button class="btn" type="button" data-action="cut" data-target="bar"> <button class="btn" type="button" data-action="cut" data-target="bar">
Cut to the clipboard Cut to clipboard
</button> </button>
</div> </div>
</div> </div>