diff --git a/demo.css b/demo.css index ef142ee..358ee56 100644 --- a/demo.css +++ b/demo.css @@ -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; diff --git a/dist/clipboard.min.js b/dist/clipboard.min.js index cdab0e0..03707ea 100644 --- a/dist/clipboard.min.js +++ b/dist/clipboard.min.js @@ -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;c0))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}(); \ No newline at end of file +!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;g0))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]); diff --git a/index.html b/index.html index 347cea8..ba6d65e 100644 --- a/index.html +++ b/index.html @@ -44,7 +44,7 @@ allowtransparency="true" frameborder="0" scrolling="0" width="156" height="30"><

Now, you need to instantiate it using a DOM selector. This selector corresponds to the trigger element, i.e. <button>.

-
<script> new Clipboard('.btn'); </script>
+
new Clipboard('.btn');

Usage

@@ -109,6 +109,27 @@ allowtransparency="true" frameborder="0" scrolling="0" width="156" height="30"><

As you may expect, the cut action only works on <input> or <textarea> elements.

+

Events

+ +

There are cases where you'd like to capture what has been copied/cut. That's why we fire custom events such as copy and cut for you to listen and implement your custom logic.

+ +

But to achieve that, first you need to access the triggers property from your clipboard instance.

+ +
var clipboard = new Clipboard('.btn');
+var btns = clipboard.triggers;
+ +

Internally, this property is just an array resulted from a querySelectorAll operation. So all you have to do now is loop through that array and attach listeners.

+ +
for (var i = 0; i < btns.length; i++) {
+    btns[i].addEventListener('copy', function(e) {
+        console.info('Event:', e.type);
+        console.info('Text:', e.detail);
+    });
+}
+
+ +

For a live demonstration, just open your console :)

+

Browser Support

This library relies on both Selection and execCommand APIs. When combined, they're supported in the following browsers.

@@ -146,7 +167,20 @@ allowtransparency="true" frameborder="0" scrolling="0" width="156" height="30"><