mirror of
https://github.com/zenorocha/clipboard.js.git
synced 2023-08-10 21:12:48 +03:00
Handles attributes with getters/setters and breaks code into two classes
This commit is contained in:
Zeno Rocha
parent
e72ce02c87
commit
56dd1aac22
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(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.position="absolute",a.style.left="-9999px",a.value=this.text,this.selectedText=this.text,document.body.appendChild(a),a.select(),this.copyText(),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.selectNodeContents(this.target),b.addRange(a),this.selectedText=b.toString()}this.copyText()},a.prototype.copyText=function(){var a=void 0;try{a=document.execCommand(this.action)}catch(b){a=!1}this.handleResult(a)},a.prototype.handleResult=function(a){a?(this.fireEvent("success",{action:this.action,text:this.selectedText}),this.clearSelection()):this.fireEvent("error","Cannot execute "+this.action+" operation")},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]);
|
||||
!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){"use strict";function d(a,b){if(!(a instanceof b))throw new TypeError("Cannot call a class as a function")}c.__esModule=!0;var e=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}}(),f=a("custom-event"),g=function(){function a(b){d(this,a),this.action=b.action,this.target=b.target,this.text=b.text,this.trigger=b.trigger,this.selectedText="",this.text?this.selectValue():this.target&&this.selectTarget()}return a.prototype.selectValue=function(){var a=document.createElement("input");a.style.position="absolute",a.style.left="-9999px",a.value=this.text,this.selectedText=this.text,document.body.appendChild(a),a.select(),this.copyText(),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.selectNodeContents(this.target),b.addRange(a),this.selectedText=b.toString()}this.copyText()},a.prototype.copyText=function(){var a=void 0;try{a=document.execCommand(this.action)}catch(b){a=!1}this.handleResult(a)},a.prototype.handleResult=function(a){a?this.fireEvent("success",{action:this.action,text:this.selectedText,clearSelection:this.clearSelection.bind(this)}):this.fireEvent("error",{action:this.action,clearSelection:this.clearSelection.bind(this)})},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)},e(a,[{key:"action",set:function(a){if(this._action=a||"copy","copy"!==this._action&&"cut"!==this._action)throw new Error('Invalid "data-action" value, use either "copy" or "cut"')},get:function(){return this._action}},{key:"target",set:function(a){if(a&&(this._target=document.getElementById(a),!this._target))throw new Error('Invalid "data-target" selector, use a value that matches an ID')},get:function(){return this._target}}]),a}();c["default"]=g,b.exports=c["default"]},{"custom-event":1}],3:[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=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}}(),g=a("./clipboard-action"),h=function(){function a(b){var c=this;e(this,a),this.triggers=document.querySelectorAll(b),[].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.initialize(a)})},a.prototype.initialize=function(a){new g({action:a.currentTarget.getAttribute("data-action"),target:a.currentTarget.getAttribute("data-target"),text:a.currentTarget.getAttribute("data-text"),trigger:a.currentTarget})},f(a,[{key:"triggers",set:function(a){if(!a.length)throw new Error("No matches were found for the provided selector");this._triggers=a},get:function(){return this._triggers}}]),a}();c["default"]=h,d.Clipboard=h,b.exports=c["default"]}).call(this,"undefined"!=typeof global?global:"undefined"!=typeof self?self:"undefined"!=typeof window?window:{})},{"./clipboard-action":2}]},{},[3]);
|
||||
123
src/clipboard-action.js
Normal file
123
src/clipboard-action.js
Normal file
@ -0,0 +1,123 @@
|
||||
var CustomEvent = require('custom-event');
|
||||
|
||||
export default class ClipboardAction {
|
||||
constructor(options) {
|
||||
this.action = options.action;
|
||||
this.target = options.target;
|
||||
this.text = options.text;
|
||||
this.trigger = options.trigger;
|
||||
|
||||
this.selectedText = '';
|
||||
|
||||
if (this.text) {
|
||||
this.selectValue();
|
||||
}
|
||||
else if (this.target) {
|
||||
this.selectTarget();
|
||||
}
|
||||
}
|
||||
|
||||
selectValue() {
|
||||
let fake = document.createElement('input');
|
||||
|
||||
fake.style.position = 'absolute';
|
||||
fake.style.left = '-9999px';
|
||||
fake.value = this.text;
|
||||
this.selectedText = this.text;
|
||||
|
||||
document.body.appendChild(fake);
|
||||
|
||||
fake.select();
|
||||
this.copyText();
|
||||
|
||||
document.body.removeChild(fake);
|
||||
}
|
||||
|
||||
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.selectNodeContents(this.target);
|
||||
selection.addRange(range);
|
||||
this.selectedText = selection.toString();
|
||||
}
|
||||
|
||||
this.copyText();
|
||||
}
|
||||
|
||||
copyText() {
|
||||
let succeeded;
|
||||
|
||||
try {
|
||||
succeeded = document.execCommand(this.action);
|
||||
}
|
||||
catch (err) {
|
||||
succeeded = false;
|
||||
}
|
||||
|
||||
this.handleResult(succeeded);
|
||||
}
|
||||
|
||||
handleResult(succeeded) {
|
||||
if (succeeded) {
|
||||
this.fireEvent('success', {
|
||||
action: this.action,
|
||||
text: this.selectedText,
|
||||
clearSelection: this.clearSelection.bind(this)
|
||||
});
|
||||
}
|
||||
else {
|
||||
this.fireEvent('error', {
|
||||
action: this.action,
|
||||
clearSelection: this.clearSelection.bind(this)
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
clearSelection() {
|
||||
if (this.target) {
|
||||
this.target.blur();
|
||||
}
|
||||
|
||||
window.getSelection().removeAllRanges();
|
||||
}
|
||||
|
||||
fireEvent(type, detail) {
|
||||
let event = new CustomEvent(type, {
|
||||
detail: detail
|
||||
});
|
||||
|
||||
this.trigger.dispatchEvent(event);
|
||||
}
|
||||
|
||||
set action(action) {
|
||||
this._action = action || 'copy';
|
||||
|
||||
if (this._action !== 'copy' && this._action !== 'cut') {
|
||||
throw new Error('Invalid "data-action" value, use either "copy" or "cut"');
|
||||
}
|
||||
}
|
||||
|
||||
get action() {
|
||||
return this._action;
|
||||
}
|
||||
|
||||
set target(target) {
|
||||
if (target) {
|
||||
this._target = document.getElementById(target);
|
||||
|
||||
if (!this._target) {
|
||||
throw new Error('Invalid "data-target" selector, use a value that matches an ID');
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
get target() {
|
||||
return this._target;
|
||||
}
|
||||
}
|
||||
137
src/clipboard.js
137
src/clipboard.js
@ -1,134 +1,35 @@
|
||||
var CustomEvent = require('custom-event');
|
||||
var ClipboardAction = require('./clipboard-action');
|
||||
|
||||
export default class Clipboard {
|
||||
constructor(triggers) {
|
||||
this.triggers = document.querySelectorAll(triggers);
|
||||
|
||||
if (!this.triggers.length) {
|
||||
throw new Error('No matches were found for the provided selector');
|
||||
}
|
||||
|
||||
[].forEach.call(this.triggers, (trigger) => this.bind(trigger));
|
||||
}
|
||||
|
||||
bind(trigger) {
|
||||
trigger.addEventListener('click', (e) => this.validate(e));
|
||||
trigger.addEventListener('click', (e) => this.initialize(e));
|
||||
}
|
||||
|
||||
validate(e) {
|
||||
let trigger = e.currentTarget;
|
||||
let action = trigger.getAttribute('data-action') || 'copy';
|
||||
let target = trigger.getAttribute('data-target');
|
||||
let text = trigger.getAttribute('data-text');
|
||||
|
||||
if (action !== 'copy' && action !== 'cut') {
|
||||
throw new Error('Invalid "data-action" value, use either "copy" or "cut"');
|
||||
}
|
||||
|
||||
if (!target && !text) {
|
||||
throw new Error('Missing required attributes, use either "data-target" or "data-text"');
|
||||
}
|
||||
|
||||
if (target) {
|
||||
target = document.getElementById(target);
|
||||
if (!target) throw new Error('Invalid "data-target" selector, use a value that matches an ID');
|
||||
}
|
||||
|
||||
new ClipboardAction(action, target, text, trigger);
|
||||
}
|
||||
}
|
||||
|
||||
class ClipboardAction {
|
||||
constructor(action, target, text, trigger) {
|
||||
this.action = action;
|
||||
this.target = target;
|
||||
this.text = text;
|
||||
this.trigger = trigger;
|
||||
|
||||
this.selectedText = '';
|
||||
|
||||
if (this.text) {
|
||||
this.selectValue();
|
||||
}
|
||||
else if (this.target) {
|
||||
this.selectTarget();
|
||||
}
|
||||
}
|
||||
|
||||
selectValue() {
|
||||
let fake = document.createElement('input');
|
||||
|
||||
fake.style.position = 'absolute';
|
||||
fake.style.left = '-9999px';
|
||||
fake.value = this.text;
|
||||
this.selectedText = this.text;
|
||||
|
||||
document.body.appendChild(fake);
|
||||
|
||||
fake.select();
|
||||
this.copyText();
|
||||
|
||||
document.body.removeChild(fake);
|
||||
}
|
||||
|
||||
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.selectNodeContents(this.target);
|
||||
selection.addRange(range);
|
||||
this.selectedText = selection.toString();
|
||||
}
|
||||
|
||||
this.copyText();
|
||||
}
|
||||
|
||||
copyText() {
|
||||
let succeeded;
|
||||
|
||||
try {
|
||||
succeeded = document.execCommand(this.action);
|
||||
}
|
||||
catch (err) {
|
||||
succeeded = false;
|
||||
}
|
||||
|
||||
this.handleResult(succeeded);
|
||||
}
|
||||
|
||||
handleResult(succeeded) {
|
||||
if (succeeded) {
|
||||
this.fireEvent('success', {
|
||||
action: this.action,
|
||||
text: this.selectedText
|
||||
});
|
||||
|
||||
this.clearSelection();
|
||||
}
|
||||
else {
|
||||
this.fireEvent('error', `Cannot execute ${this.action} operation`);
|
||||
}
|
||||
}
|
||||
|
||||
clearSelection() {
|
||||
if (this.target) {
|
||||
this.target.blur();
|
||||
}
|
||||
|
||||
window.getSelection().removeAllRanges();
|
||||
}
|
||||
|
||||
fireEvent(type, detail) {
|
||||
let event = new CustomEvent(type, {
|
||||
detail: detail
|
||||
initialize(e) {
|
||||
new ClipboardAction({
|
||||
action : e.currentTarget.getAttribute('data-action'),
|
||||
target : e.currentTarget.getAttribute('data-target'),
|
||||
text : e.currentTarget.getAttribute('data-text'),
|
||||
trigger : e.currentTarget
|
||||
});
|
||||
}
|
||||
|
||||
this.trigger.dispatchEvent(event);
|
||||
set triggers(triggers) {
|
||||
if (!triggers.length) {
|
||||
throw new Error('No matches were found for the provided selector');
|
||||
}
|
||||
|
||||
this._triggers = triggers;
|
||||
}
|
||||
|
||||
get triggers() {
|
||||
return this._triggers;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user