diff --git a/assets/main.css b/assets/main.css index a56830a..5872209 100644 --- a/assets/main.css +++ b/assets/main.css @@ -96,6 +96,10 @@ h3 { top: 3px; } +.btn[disabled] .clippy { + opacity: .3; +} + /* Code ========================================================================== */ diff --git a/assets/main.js b/assets/main.js index 93f4d0b..190d772 100644 --- a/assets/main.js +++ b/assets/main.js @@ -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!'); + } }); diff --git a/index.html b/index.html index edc5b00..eb7ba76 100644 --- a/index.html +++ b/index.html @@ -61,7 +61,7 @@ allowtransparency="true" frameborder="0" scrolling="0" width="156" height="30">< Sorry, your browser do not support copy text to clipboard. - +
<!-- Trigger -->
@@ -80,7 +80,7 @@ allowtransparency="true" frameborder="0" scrolling="0" width="156" height="30"><
@@ -108,7 +108,7 @@ allowtransparency="true" frameborder="0" scrolling="0" width="156" height="30"><
- Cut to the clipboard
+ Cut to clipboard