mirror of
https://github.com/zenorocha/clipboard.js.git
synced 2023-08-10 21:12:48 +03:00
Breaks code into two classes
This commit is contained in:
Zeno Rocha
parent
24f4bc77ed
commit
66c18fbcb4
2
dist/clipboard.min.js
vendored
2
dist/clipboard.min.js
vendored
|
|
@ -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(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){var d=document.queryCommandSupported(a);try{var e=document.execCommand(a);if(!e)throw new Error('Invalid "data-action" attribute');this.dispatchEvent(a,b,c),window.getSelection().removeAllRanges()}catch(f){d=!1}d||this.notSupported(c)}},{key:"dispatchEvent",value:function(a,b,c){var d=new e(a,{detail:b});c.dispatchEvent(d)}},{key:"notSupported",value:function(a){var b=new e("no-support");a.dispatchEvent(b)}},{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]);
|
||||
!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=document.querySelectorAll(b),this.init()}return d(a,[{key:"init",value:function(){var a=this;if(0===this.triggers.length)throw new Error("The provided selector is empty");[].forEach.call(this.triggers,function(b){return a.bind(b)})}},{key:"bind",value:function(a){a.addEventListener("click",function(a){var b=a.currentTarget.getAttribute("data-action"),c=a.currentTarget.getAttribute("data-target"),d=a.currentTarget.getAttribute("data-text");if("copy"===!b||"cut"===!b)throw new Error('Invalid "data-action" attribute');if(!c&&!d)throw new Error('Missing "data-target" or "data-text" attribute');new g({action:b,target:c,text:d,trigger:a.currentTarget})})}}]),a}(),g=function(){function a(b){c(this,a),this.action=b.action||"copy",this.target=document.getElementById(b.target),this.text=b.text,this.trigger=b.trigger,this.selectedText="",this.text?this.selectValue():this.target&&this.selectTarget()}return d(a,[{key:"selectValue",value: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)}},{key:"selectTarget",value: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()}},{key:"copy",value:function(){var a=document.queryCommandSupported(this.action);try{document.execCommand(this.action),this.fireEventDetails(),window.getSelection().removeAllRanges()}catch(b){a=!1}a||this.fireNoSupport()}},{key:"fireEventDetails",value:function(){var a=new e(this.action,{detail:this.selectedText});this.trigger.dispatchEvent(a)}},{key:"fireNoSupport",value:function(){var a=new e("no-support");this.trigger.dispatchEvent(a)}}]),a}();b.Clipboard=f}).call(this,"undefined"!=typeof global?global:"undefined"!=typeof self?self:"undefined"!=typeof window?window:{})},{"custom-event":1}]},{},[2]);
|
||||
|
|
@ -17,8 +17,8 @@
|
|||
"uglify": "^0.1.5"
|
||||
},
|
||||
"scripts": {
|
||||
"publish": "npm run compile && npm run minify",
|
||||
"compile": "browserify src/clipboard.js -t babelify --outfile dist/clipboard.min.js",
|
||||
"publish": "npm run build && npm run minify",
|
||||
"build": "browserify src/clipboard.js -t babelify --outfile dist/clipboard.min.js",
|
||||
"minify": "uglify -s dist/clipboard.min.js -o dist/clipboard.min.js"
|
||||
}
|
||||
}
|
||||
|
|
|
|||
127
src/clipboard.js
127
src/clipboard.js
|
|
@ -2,120 +2,119 @@ var CustomEvent = require('custom-event');
|
|||
|
||||
class Clipboard {
|
||||
|
||||
// Constructor
|
||||
|
||||
constructor(triggers) {
|
||||
this._triggers = triggers;
|
||||
this.triggers = document.querySelectorAll(triggers);
|
||||
this.init();
|
||||
}
|
||||
|
||||
// Getters & Setters
|
||||
|
||||
get triggers() {
|
||||
return document.querySelectorAll(this._triggers);
|
||||
}
|
||||
|
||||
set triggers(val) {
|
||||
return this._triggers = val;
|
||||
}
|
||||
|
||||
// Methods
|
||||
|
||||
init() {
|
||||
if (this.triggers.length > 0) {
|
||||
[].forEach.call(this.triggers, (trigger) => this.bind(trigger));
|
||||
}
|
||||
else {
|
||||
if (this.triggers.length === 0) {
|
||||
throw new Error('The provided selector is empty');
|
||||
}
|
||||
|
||||
[].forEach.call(this.triggers, (trigger) => this.bind(trigger));
|
||||
}
|
||||
|
||||
bind(trigger) {
|
||||
trigger.addEventListener('click', (e) => this.select(e));
|
||||
trigger.addEventListener('click', function(e) {
|
||||
let action = e.currentTarget.getAttribute('data-action');
|
||||
let target = e.currentTarget.getAttribute('data-target');
|
||||
let text = e.currentTarget.getAttribute('data-text');
|
||||
|
||||
if (!action === 'copy' || !action === 'cut') {
|
||||
throw new Error('Invalid "data-action" attribute');
|
||||
}
|
||||
else if (!target && !text) {
|
||||
throw new Error('Missing "data-target" or "data-text" attribute');
|
||||
}
|
||||
|
||||
new ClipboardAction({
|
||||
action : action,
|
||||
target : target,
|
||||
text : text,
|
||||
trigger : e.currentTarget
|
||||
});
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
class ClipboardAction {
|
||||
constructor(options) {
|
||||
this.action = options.action || 'copy';
|
||||
this.target = document.getElementById(options.target);
|
||||
this.text = options.text;
|
||||
this.trigger = options.trigger;
|
||||
|
||||
this.selectedText = '';
|
||||
|
||||
if (this.text) {
|
||||
this.selectValue();
|
||||
}
|
||||
else if (this.target) {
|
||||
this.selectTarget();
|
||||
}
|
||||
}
|
||||
|
||||
select(e) {
|
||||
let actionAttr = e.currentTarget.getAttribute('data-action') || 'copy';
|
||||
let targetAttr = e.currentTarget.getAttribute('data-target');
|
||||
let textAttr = e.currentTarget.getAttribute('data-text');
|
||||
|
||||
if (textAttr) {
|
||||
this.selectValue(actionAttr, textAttr, e.currentTarget);
|
||||
}
|
||||
else if (targetAttr) {
|
||||
this.selectTarget(actionAttr, targetAttr, e.currentTarget);
|
||||
}
|
||||
else {
|
||||
throw new Error('Missing "data-target" or "data-text" attribute');
|
||||
}
|
||||
|
||||
e.preventDefault();
|
||||
}
|
||||
|
||||
selectValue(actionAttr, textAttr, currentTrigger) {
|
||||
selectValue() {
|
||||
let fake = document.createElement('input');
|
||||
|
||||
fake.value = textAttr;
|
||||
fake.style.opacity = 0;
|
||||
fake.style.zIndex = -1;
|
||||
fake.value = this.text;
|
||||
this.selectedText = this.text;
|
||||
|
||||
document.body.appendChild(fake);
|
||||
|
||||
fake.select();
|
||||
this.copy(actionAttr, textAttr, currentTrigger);
|
||||
this.copy();
|
||||
|
||||
document.body.removeChild(fake);
|
||||
}
|
||||
|
||||
selectTarget(actionAttr, targetAttr, currentTrigger) {
|
||||
let selectedText = '';
|
||||
let target = document.getElementById(targetAttr);
|
||||
|
||||
if (target.nodeName === 'INPUT' || target.nodeName === 'TEXTAREA') {
|
||||
target.select();
|
||||
selectedText = target.value;
|
||||
selectTarget() {
|
||||
if (this.target.nodeName === 'INPUT' || this.target.nodeName === 'TEXTAREA') {
|
||||
this.target.select();
|
||||
this.selectedText = this.target.value;
|
||||
}
|
||||
else {
|
||||
let range = document.createRange();
|
||||
let selection = window.getSelection();
|
||||
|
||||
range.selectNode(target);
|
||||
range.selectNode(this.target);
|
||||
selection.addRange(range);
|
||||
selectedText = selection.toString();
|
||||
this.selectedText = selection.toString();
|
||||
}
|
||||
|
||||
this.copy(actionAttr, selectedText, currentTrigger);
|
||||
this.copy();
|
||||
}
|
||||
|
||||
copy(actionAttr, selectedText, currentTrigger) {
|
||||
let supported = document.queryCommandSupported(actionAttr);
|
||||
copy() {
|
||||
let supported = document.queryCommandSupported(this.action);
|
||||
|
||||
try {
|
||||
let successful = document.execCommand(actionAttr);
|
||||
document.execCommand(this.action);
|
||||
|
||||
if (!successful) throw new Error('Invalid "data-action" attribute');
|
||||
|
||||
this.dispatchEvent(actionAttr, selectedText, currentTrigger);
|
||||
this.fireEventDetails();
|
||||
window.getSelection().removeAllRanges();
|
||||
}
|
||||
catch (err) {
|
||||
supported = false;
|
||||
}
|
||||
|
||||
if (!supported) this.notSupported(currentTrigger);
|
||||
if (!supported) this.fireNoSupport();
|
||||
}
|
||||
|
||||
dispatchEvent(actionAttr, selectedText, currentTrigger) {
|
||||
let event = new CustomEvent(actionAttr, {
|
||||
detail: selectedText
|
||||
fireEventDetails() {
|
||||
let event = new CustomEvent(this.action, {
|
||||
detail: this.selectedText
|
||||
});
|
||||
|
||||
currentTrigger.dispatchEvent(event);
|
||||
this.trigger.dispatchEvent(event);
|
||||
}
|
||||
|
||||
notSupported(currentTrigger) {
|
||||
fireNoSupport() {
|
||||
let event = new CustomEvent('no-support');
|
||||
currentTrigger.dispatchEvent(event);
|
||||
this.trigger.dispatchEvent(event);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user