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 documentation for custom events

Browse Source
This commit is contained in:
Zeno Rocha 2015-09-19 16:05:52 -07:00
parent d4f94a3d8f
commit e4f9aa0d7a
3 changed files with 40 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
demo.css
View File

@ -77,6 +77,7 @@ a:focus {
h1 {
margin-top: 80px;
color: #1BC1A1;
}
h3 {
@ -96,8 +97,9 @@ pre code {
}
code {
background-color: rgba(0, 0, 0, 0.04);
background-color: #E8F5F2;
border-radius: 3px;
color: #1BC1A1;
font-size: 85%;
margin: 0;
padding: 0.2em;

2
dist/clipboard.min.js vendored
View File

@ -1 +1 @@
"use strict";function _classCallCheck(a,b){if(!(a instanceof b))throw new TypeError("Cannot call a class as a function")}var _createClass=function(){function a(a,b){for(var c=0;c<b.length;c++){var d=b[c];d.enumerable=d.enumerable||!1,d.configurable=!0,"value"in d&&(d.writable=!0),Object.defineProperty(a,d.key,d)}}return function(b,c,d){return c&&a(b.prototype,c),d&&a(b,d),b}}(),Clipboard=function(){function a(b){_classCallCheck(this,a),this._triggers=b,this.init()}return _createClass(a,[{key:"init",value:function(){var a=this;if(!(this.triggers.length>0))throw new Error("The provided selector is empty");[].forEach.call(this.triggers,function(b){return a.bind(b)})}},{key:"bind",value:function(a){var b=this;a.addEventListener("click",function(a){return b.select(a)})}},{key:"select",value:function(a){var b=a.currentTarget.getAttribute("data-action")||"copy",c=a.currentTarget.getAttribute("data-target"),d=a.currentTarget.getAttribute("data-text");if(d)this.selectValue(d,b);else{if(!c)throw new Error('Missing "data-target" or "data-text" attribute');this.selectTarget(c,b)}a.preventDefault()}},{key:"selectValue",value:function(a,b){var c=document.createElement("input");c.value=a,c.style.opacity=0,c.style.zIndex=-1,document.body.appendChild(c),c.select(),this.copy(b),document.body.removeChild(c)}},{key:"selectTarget",value:function(a,b){var c=document.getElementById(a);if("INPUT"===c.nodeName||"TEXTAREA"===c.nodeName)c.select();else{var d=document.createRange();d.selectNode(c),window.getSelection().addRange(d)}this.copy(b)}},{key:"copy",value:function(a){try{var b=document.execCommand(a);if(!b)throw'Invalid "data-action" attribute';window.getSelection().removeAllRanges()}catch(c){throw new Error(c)}}},{key:"triggers",get:function(){return document.querySelectorAll(this._triggers)},set:function(a){return this._triggers=a}}]),a}();
!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(b){"use strict";function c(a,b){if(!(a instanceof b))throw new TypeError("Cannot call a class as a function")}var d=function(){function a(a,b){for(var c=0;c<b.length;c++){var d=b[c];d.enumerable=d.enumerable||!1,d.configurable=!0,"value"in d&&(d.writable=!0),Object.defineProperty(a,d.key,d)}}return function(b,c,d){return c&&a(b.prototype,c),d&&a(b,d),b}}(),e=a("custom-event"),f=function(){function a(b){c(this,a),this._triggers=b,this.init()}return d(a,[{key:"init",value:function(){var a=this;if(!(this.triggers.length>0))throw new Error("The provided selector is empty");[].forEach.call(this.triggers,function(b){return a.bind(b)})}},{key:"bind",value:function(a){var b=this;a.addEventListener("click",function(a){return b.select(a)})}},{key:"select",value:function(a){var b=a.currentTarget.getAttribute("data-action")||"copy",c=a.currentTarget.getAttribute("data-target"),d=a.currentTarget.getAttribute("data-text");if(d)this.selectValue(b,d,a.currentTarget);else{if(!c)throw new Error('Missing "data-target" or "data-text" attribute');this.selectTarget(b,c,a.currentTarget)}a.preventDefault()}},{key:"selectValue",value:function(a,b,c){var d=document.createElement("input");d.value=b,d.style.opacity=0,d.style.zIndex=-1,document.body.appendChild(d),d.select(),this.copy(a,b,c),document.body.removeChild(d)}},{key:"selectTarget",value:function(a,b,c){var d="",e=document.getElementById(b);if("INPUT"===e.nodeName||"TEXTAREA"===e.nodeName)e.select(),d=e.value;else{var f=document.createRange(),g=window.getSelection();f.selectNode(e),g.addRange(f),d=g.toString()}this.copy(a,d,c)}},{key:"copy",value:function(a,b,c){try{var d=document.execCommand(a);if(!d)throw'Invalid "data-action" attribute';this.dispatchEvent(a,b,c),window.getSelection().removeAllRanges()}catch(e){throw new Error(e)}}},{key:"dispatchEvent",value:function(a,b,c){var d=new e(a,{detail:b});c.dispatchEvent(d)}},{key:"triggers",get:function(){return document.querySelectorAll(this._triggers)},set:function(a){return this._triggers=a}}]),a}();b.Clipboard=f}).call(this,"undefined"!=typeof global?global:"undefined"!=typeof self?self:"undefined"!=typeof window?window:{})},{"custom-event":1}]},{},[2]);

38
index.html
View File

@ -44,7 +44,7 @@ allowtransparency="true" frameborder="0" scrolling="0" width="156" height="30"><
<p>Now, you need to instantiate it using a DOM selector. This selector corresponds to the trigger element, i.e. <code>&lt;button&gt;</code>.</p>
<pre><code class="html">&lt;script&gt; new Clipboard('.btn'); &lt;/script&gt;</code></pre>
<pre><code class="js">new Clipboard('.btn');</code></pre>
<h1>Usage</h1>
@ -109,6 +109,27 @@ allowtransparency="true" frameborder="0" scrolling="0" width="156" height="30"><
<p>As you may expect, the <code>cut</code> action only works on <code>&lt;input&gt;</code> or <code>&lt;textarea&gt;</code> elements.</p>
<h1>Events</h1>
<p>There are cases where you'd like to capture what has been copied/cut. That's why we fire custom events such as <code>copy</code> and <code>cut</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>
<pre><code class="js">var clipboard = new Clipboard('.btn');
var btns = clipboard.triggers;</code></pre>
<p>Internally, this property is just an array resulted from a <code>querySelectorAll</code> operation. So all you have to do now is loop through that array 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);
});
}
</code></pre>
<p>For a live demonstration, just open your console :)</p>
<h1>Browser Support</h1>
<p>This library relies on both <a href="https://developer.mozilla.org/en-US/docs/Web/API/Selection">Selection</a> and <a href="https://developer.mozilla.org/en-US/docs/Web/API/Document/execCommand">execCommand</a> APIs. When combined, they're supported in the following browsers.</p>
@ -146,7 +167,20 @@ allowtransparency="true" frameborder="0" scrolling="0" width="156" height="30"><
<script src="dist/clipboard.min.js"></script>
<script>
document.addEventListener('DOMContentLoaded', function() {
new Clipboard('.btn');
var clipboard = new Clipboard('.btn');
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('cut', function(e) {
console.info('Event:', e.type);
console.info('Text:', e.detail);
});
}
});
</script>