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

Updates custom events

Browse Source
This commit is contained in:
Zeno Rocha 2015-09-21 10:26:59 -07:00
parent 079df6d52b
commit 69ef493350
3 changed files with 20 additions and 29 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
assets/main.js
View File

@ -5,29 +5,27 @@ document.addEventListener('DOMContentLoaded', function() {
var btns = clipboard.triggers;
for (var i = 0; i < btns.length; i++) {
btns[i].addEventListener('copy', complete);
btns[i].addEventListener('cut', complete);
btns[i].addEventListener('success', function(e) {
console.info('Action:', e.detail.action);
console.info('Text:', e.detail.text);
e.currentTarget.classList.add('tooltipped', 'tooltipped-s');
e.currentTarget.setAttribute('aria-label', 'Copied!');
});
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) {
btns[i].addEventListener('error', function(e) {
var flashes = document.querySelectorAll('.flash');
for (var j = 0; j < btns.length; j++) {
btns[j].disabled = true;
flashes[j].textContent = e.detail;
flashes[j].classList.remove('hidden');
}
});
}
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!');
}
});

2
dist/clipboard.min.js vendored
View File

@ -1 +1 @@
!function a(b,c,d){function e(g,h){if(!c[g]){if(!b[g]){var i="function"==typeof require&&require;if(!h&&i)return i(g,!0);if(f)return f(g,!0);var j=new Error("Cannot find module '"+g+"'");throw j.code="MODULE_NOT_FOUND",j}var k=c[g]={exports:{}};b[g][0].call(k.exports,function(a){var c=b[g][1][a];return e(c?c:a)},k,k.exports,a,b,c,d)}return c[g].exports}for(var f="function"==typeof require&&require,g=0;g<d.length;g++)e(d[g]);return e}({1:[function(a,b,c){(function(a){function c(){try{var a=new d("cat",{detail:{foo:"bar"}});return"cat"===a.type&&"bar"===a.detail.foo}catch(b){}return!1}var d=a.CustomEvent;b.exports=c()?d:"function"==typeof document.createEvent?function(a,b){var c=document.createEvent("CustomEvent");return b?c.initCustomEvent(a,b.bubbles,b.cancelable,b.detail):c.initCustomEvent(a,!1,!1,void 0),c}:function(a,b){var c=document.createEventObject();return c.type=a,b?(c.bubbles=Boolean(b.bubbles),c.cancelable=Boolean(b.cancelable),c.detail=b.detail):(c.bubbles=!1,c.cancelable=!1,c.detail=void 0),c}}).call(this,"undefined"!=typeof global?global:"undefined"!=typeof self?self:"undefined"!=typeof window?window:{})},{}],2:[function(a,b,c){(function(d){"use strict";function e(a,b){if(!(a instanceof b))throw new TypeError("Cannot call a class as a function")}c.__esModule=!0;var f=a("custom-event"),g=function(){function a(b){var c=this;if(e(this,a),this.triggers=document.querySelectorAll(b),!this.triggers.length)throw new Error("No matches were found for the provided selector");[].forEach.call(this.triggers,function(a){return c.bind(a)})}return a.prototype.bind=function(a){var b=this;a.addEventListener("click",function(a){return b.validate(a)})},a.prototype.validate=function(a){var b=a.currentTarget,c=b.getAttribute("data-action")||"copy",d=b.getAttribute("data-target"),e=b.getAttribute("data-text");if("copy"!==c&&"cut"!==c)throw new Error('Invalid "data-action" value, use either "copy" or "cut"');if(!d&&!e)throw new Error('Missing required attributes, use either "data-target" or "data-text"');if(d&&(d=document.getElementById(d),!d))throw new Error('Invalid "data-target" selector, use a value that matches an ID');new h(c,d,e,b)},a}();c["default"]=g;var h=function(){function a(b,c,d,f){e(this,a),this.action=b,this.target=c,this.text=d,this.trigger=f,this.selectedText="",this.text?this.selectValue():this.target&&this.selectTarget()}return a.prototype.selectValue=function(){var a=document.createElement("input");a.style.opacity=0,a.style.zIndex=-1,a.value=this.text,this.selectedText=this.text,document.body.appendChild(a),a.select(),this.copy(),document.body.removeChild(a)},a.prototype.selectTarget=function(){if("INPUT"===this.target.nodeName||"TEXTAREA"===this.target.nodeName)this.target.select(),this.selectedText=this.target.value;else{var a=document.createRange(),b=window.getSelection();a.selectNode(this.target),b.addRange(a),this.selectedText=b.toString()}this.copy()},a.prototype.copy=function(){var a=void 0;try{a=document.execCommand(this.action)}catch(b){a=!1}finally{a?this.fireEventDetails():this.fireNoSupport(),this.clearSelection()}},a.prototype.clearSelection=function(){this.target&&this.target.blur(),window.getSelection().removeAllRanges()},a.prototype.fireEventDetails=function(){var a=new f(this.action,{detail:this.selectedText});this.trigger.dispatchEvent(a)},a.prototype.fireNoSupport=function(){var a=new f("no-support");this.trigger.dispatchEvent(a)},a}();d.Clipboard=g,b.exports=c["default"]}).call(this,"undefined"!=typeof global?global:"undefined"!=typeof self?self:"undefined"!=typeof window?window:{})},{"custom-event":1}]},{},[2]);
!function a(b,c,d){function e(g,h){if(!c[g]){if(!b[g]){var i="function"==typeof require&&require;if(!h&&i)return i(g,!0);if(f)return f(g,!0);var j=new Error("Cannot find module '"+g+"'");throw j.code="MODULE_NOT_FOUND",j}var k=c[g]={exports:{}};b[g][0].call(k.exports,function(a){var c=b[g][1][a];return e(c?c:a)},k,k.exports,a,b,c,d)}return c[g].exports}for(var f="function"==typeof require&&require,g=0;g<d.length;g++)e(d[g]);return e}({1:[function(a,b,c){(function(a){function c(){try{var a=new d("cat",{detail:{foo:"bar"}});return"cat"===a.type&&"bar"===a.detail.foo}catch(b){}return!1}var d=a.CustomEvent;b.exports=c()?d:"function"==typeof document.createEvent?function(a,b){var c=document.createEvent("CustomEvent");return b?c.initCustomEvent(a,b.bubbles,b.cancelable,b.detail):c.initCustomEvent(a,!1,!1,void 0),c}:function(a,b){var c=document.createEventObject();return c.type=a,b?(c.bubbles=Boolean(b.bubbles),c.cancelable=Boolean(b.cancelable),c.detail=b.detail):(c.bubbles=!1,c.cancelable=!1,c.detail=void 0),c}}).call(this,"undefined"!=typeof global?global:"undefined"!=typeof self?self:"undefined"!=typeof window?window:{})},{}],2:[function(a,b,c){(function(d){"use strict";function e(a,b){if(!(a instanceof b))throw new TypeError("Cannot call a class as a function")}c.__esModule=!0;var f=a("custom-event"),g=function(){function a(b){var c=this;if(e(this,a),this.triggers=document.querySelectorAll(b),!this.triggers.length)throw new Error("No matches were found for the provided selector");[].forEach.call(this.triggers,function(a){return c.bind(a)})}return a.prototype.bind=function(a){var b=this;a.addEventListener("click",function(a){return b.validate(a)})},a.prototype.validate=function(a){var b=a.currentTarget,c=b.getAttribute("data-action")||"copy",d=b.getAttribute("data-target"),e=b.getAttribute("data-text");if("copy"!==c&&"cut"!==c)throw new Error('Invalid "data-action" value, use either "copy" or "cut"');if(!d&&!e)throw new Error('Missing required attributes, use either "data-target" or "data-text"');if(d&&(d=document.getElementById(d),!d))throw new Error('Invalid "data-target" selector, use a value that matches an ID');new h(c,d,e,b)},a}();c["default"]=g;var h=function(){function a(b,c,d,f){e(this,a),this.action=b,this.target=c,this.text=d,this.trigger=f,this.selectedText="",this.text?this.selectValue():this.target&&this.selectTarget()}return a.prototype.selectValue=function(){var a=document.createElement("input");a.style.opacity=0,a.style.zIndex=-1,a.value=this.text,this.selectedText=this.text,document.body.appendChild(a),a.select(),this.copy(),document.body.removeChild(a)},a.prototype.selectTarget=function(){if("INPUT"===this.target.nodeName||"TEXTAREA"===this.target.nodeName)this.target.select(),this.selectedText=this.target.value;else{var a=document.createRange(),b=window.getSelection();a.selectNode(this.target),b.addRange(a),this.selectedText=b.toString()}this.copy()},a.prototype.copy=function(){var a=void 0;try{a=document.execCommand(this.action)}catch(b){a=!1}a?this.fireEvent("success",{action:this.action,text:this.selectedText}):this.fireEvent("error","Cannot complete "+this.action+" operation"),this.clearSelection()},a.prototype.clearSelection=function(){this.target&&this.target.blur(),window.getSelection().removeAllRanges()},a.prototype.fireEvent=function(a,b){var c=new f(a,{detail:b});this.trigger.dispatchEvent(c)},a}();d.Clipboard=g,b.exports=c["default"]}).call(this,"undefined"!=typeof global?global:"undefined"!=typeof self?self:"undefined"!=typeof window?window:{})},{"custom-event":1}]},{},[2]);

27
index.html
View File

@ -57,9 +57,7 @@ allowtransparency="true" frameborder="0" scrolling="0" width="156" height="30"><
<p>The easiest way to copy some content to the clipboard, is to include a <code>data-text</code> attribute in your trigger element.</p>
<div id="example-1" class="example">
<div class="flash flash-error hidden">
Sorry, your browser do not support copy text to clipboard.
</div>
<div class="flash flash-error hidden"></div>
<button class="btn" data-action="copy" data-text="Just because you can doesn't mean you should — clipboard.js">Copy to clipboard</button>
</div>
@ -73,9 +71,7 @@ allowtransparency="true" frameborder="0" scrolling="0" width="156" height="30"><
<p>The value you include on this attribute needs to match another's element <code>id</code> attribute.</p>
<div id="example-2" class="example">
<div class="flash flash-error hidden">
Sorry, your browser do not support copy text to clipboard.
</div>
<div class="flash flash-error hidden"></div>
<div class="input-group">
<input id="foo" type="text" value="https://github.com/zenorocha/clipboard.js.git">
@ -99,9 +95,7 @@ allowtransparency="true" frameborder="0" scrolling="0" width="156" height="30"><
<p>If you omit this attribute, <code>copy</code> will be used by default.</p>
<div id="example-3" class="example">
<div class="flash flash-error hidden">
Sorry, your browser do not support copy text to clipboard.
</div>
<div class="flash flash-error hidden"></div>
<div class="input-group">
<textarea id="bar" cols="62" rows="4" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false">Mussum ipsum cacilds, vidis litro abertis. Consetis adipiscings elitis. Pra lá , depois divoltis porris, paradis. Paisis, filhis, espiritis santis. Mé faiz elementum girarzis, nisi eros vermeio, in elementis mé pra quem é amistosis quis leo. Manduma pindureta quium dia nois paga.</textarea>
@ -125,9 +119,9 @@ allowtransparency="true" frameborder="0" scrolling="0" width="156" height="30"><
<h1 id="events">Events</h1>
<p>There are cases where you'd like to capture what has been copied/cut or even check if this API is supported.</p>
<p>There are cases where you'd like to capture what has been copied/cut or even check if there was an error.</p>
<p>That's why we fire custom events such as <code>copy</code>, <code>cut</code>, and <code>no-support</code> for you to listen and implement your custom logic.</p>
<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>
<p>But to achieve that, first you need to access the <code>triggers</code> property from your clipboard instance.</p>
@ -137,13 +131,13 @@ var btns = clipboard.triggers;</code></pre>
<p>Internally, this property is just a collections of nodes resulted from a <code>querySelectorAll</code> operation. So all you have to do now is loop through that collection and attach listeners.</p>
<pre><code class="js">for (var i = 0; i &lt; btns.length; i++) {
btns[i].addEventListener('copy', function(e) {
console.info('Event:', e.type);
console.info('Text:', e.detail);
btns[i].addEventListener('success', function(e) {
console.info('Action:', e.detail.action);
console.info('Text:', e.detail.text);
});
btns[i].addEventListener('no-support', function(e) {
alert('Sorry, your browser sucks :P');
btns[i].addEventListener('error', function(e) {
alert(e.detail);
});
}
</code></pre>
@ -175,7 +169,6 @@ var btns = clipboard.triggers;</code></pre>
<p>Safari ✘</p>
</li>
</ul>
<p>For instructions on how to detect support, check <a href="#events">Events</a> section.</p>
</main>
<footer class="footer gradient text-center">