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
Show Stats 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;
}
.btn[disabled] .clippy {
opacity: .3;
}
/* Code
========================================================================== */

20
assets/main.js
View File

@ -5,14 +5,12 @@ document.addEventListener('DOMContentLoaded', function() {
var btns = clipboard.triggers;
for (var i = 0; i < btns.length; i++) {
btns[i].addEventListener('copy', function(e) {
console.info('Event:', e.type);
console.info('Text:', e.detail);
});
btns[i].addEventListener('copy', complete);
btns[i].addEventListener('cut', complete);
btns[i].addEventListener('cut', function(e) {
console.info('Event:', e.type);
console.info('Text:', e.detail);
btns[i].addEventListener('mouseleave', function(e) {
e.currentTarget.classList.remove('tooltipped', 'tooltipped-s');
e.currentTarget.removeAttribute('aria-label');
});
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.
</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>
<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">
<input id="foo" type="text" value="https://github.com/zenorocha/clipboard.js.git">
<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">
</button>
</span>
@ -108,7 +108,7 @@ allowtransparency="true" frameborder="0" scrolling="0" width="156" height="30"><
</div>
<div class="form-actions">
<button class="btn" type="button" data-action="cut" data-target="bar">
Cut to the clipboard
Cut to clipboard
</button>
</div>
</div>