Triggers a custom event after copying/cutting commands

This commit is contained in:
Zeno Rocha 2015-09-19 11:37:52 -07:00
parent 718c1b33f0
commit 76ab07a186
2 changed files with 24 additions and 9 deletions

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}();
"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(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 CustomEvent(a,{detail:b});c.dispatchEvent(d)}},{key:"triggers",get:function(){return document.querySelectorAll(this._triggers)},set:function(a){return this._triggers=a}}]),a}();

View File

@ -38,10 +38,10 @@ class Clipboard {
let textAttr = e.currentTarget.getAttribute('data-text');
if (textAttr) {
this.selectValue(textAttr, actionAttr);
this.selectValue(actionAttr, textAttr, e.currentTarget);
}
else if (targetAttr) {
this.selectTarget(targetAttr, actionAttr);
this.selectTarget(actionAttr, targetAttr, e.currentTarget);
}
else {
throw new Error('Missing "data-target" or "data-text" attribute');
@ -50,7 +50,7 @@ class Clipboard {
e.preventDefault();
}
selectValue(textAttr, actionAttr) {
selectValue(actionAttr, textAttr, currentTrigger) {
let fake = document.createElement('input');
fake.value = textAttr;
@ -60,35 +60,50 @@ class Clipboard {
document.body.appendChild(fake);
fake.select();
this.copy(actionAttr);
this.copy(actionAttr, textAttr, currentTrigger);
document.body.removeChild(fake);
}
selectTarget(targetAttr, actionAttr) {
selectTarget(actionAttr, targetAttr, currentTrigger) {
let selectedText = '';
let target = document.getElementById(targetAttr);
if (target.nodeName === 'INPUT' || target.nodeName === 'TEXTAREA') {
target.select();
selectedText = target.value;
}
else {
let range = document.createRange();
let selection = window.getSelection();
range.selectNode(target);
window.getSelection().addRange(range);
selection.addRange(range);
selectedText = selection.toString();
}
this.copy(actionAttr);
this.copy(actionAttr, selectedText, currentTrigger);
}
copy(actionAttr) {
copy(actionAttr, selectedText, currentTrigger) {
try {
let successful = document.execCommand(actionAttr);
if (!successful) throw 'Invalid "data-action" attribute';
this.dispatchEvent(actionAttr, selectedText, currentTrigger);
window.getSelection().removeAllRanges();
}
catch (err) {
throw new Error(err);
}
}
dispatchEvent(actionAttr, selectedText, currentTrigger) {
var event = new CustomEvent(actionAttr, {
detail: selectedText
});
currentTrigger.dispatchEvent(event);
}
}