mirror of
https://github.com/zenorocha/clipboard.js.git
synced 2023-08-10 21:12:48 +03:00
Isolate cut, copy and core helper functions.
This commit is contained in:
parent
734d36b6ff
commit
b0aa1dfaca
1
.gitignore
vendored
1
.gitignore
vendored
@ -4,3 +4,4 @@ bower_components
|
||||
node_modules
|
||||
yarn-error.log
|
||||
yarn.lock
|
||||
.DS_Store
|
||||
|
28
demo/target-programmatic-copy.html
Normal file
28
demo/target-programmatic-copy.html
Normal file
@ -0,0 +1,28 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<title>target-programmatic-copy</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
</head>
|
||||
<body>
|
||||
<!-- 1. Define some markup -->
|
||||
<textarea id="bar">hello</textarea>
|
||||
<button id="btn">
|
||||
Copy
|
||||
</button>
|
||||
|
||||
<!-- 2. Include library -->
|
||||
<script src="../dist/clipboard.min.js"></script>
|
||||
|
||||
<!-- 3. Instantiate clipboard -->
|
||||
<script>
|
||||
var btn = document.querySelector('#btn');
|
||||
|
||||
btn.addEventListener('click', () => {
|
||||
const textCopied = ClipboardJS.copy(document.querySelector('#bar'));
|
||||
console.log('copied!', textCopied);
|
||||
})
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
28
demo/target-programmatic-cut.html
Normal file
28
demo/target-programmatic-cut.html
Normal file
@ -0,0 +1,28 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<title>target-programmatic-cut</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
</head>
|
||||
<body>
|
||||
<!-- 1. Define some markup -->
|
||||
<textarea id="bar">hello</textarea>
|
||||
<button id="btn">
|
||||
Cut
|
||||
</button>
|
||||
|
||||
<!-- 2. Include library -->
|
||||
<script src="../dist/clipboard.min.js"></script>
|
||||
|
||||
<!-- 3. Instantiate clipboard -->
|
||||
<script>
|
||||
var btn = document.querySelector('#btn');
|
||||
|
||||
btn.addEventListener('click', () => {
|
||||
const textCut = ClipboardJS.cut(document.querySelector('#bar'));
|
||||
console.log('cut!', textCut);
|
||||
})
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
27
demo/text-programmatic-copy.html
Normal file
27
demo/text-programmatic-copy.html
Normal file
@ -0,0 +1,27 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<title>text-programmatic-copy</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
</head>
|
||||
<body>
|
||||
<!-- 1. Define some markup -->
|
||||
<button id="btn">
|
||||
Copy
|
||||
</button>
|
||||
|
||||
<!-- 2. Include library -->
|
||||
<script src="../dist/clipboard.min.js"></script>
|
||||
|
||||
<!-- 3. Instantiate clipboard -->
|
||||
<script>
|
||||
var btn = document.querySelector('#btn');
|
||||
|
||||
btn.addEventListener('click', () => {
|
||||
const textCopied = ClipboardJS.copy('123');
|
||||
console.log('copied!', textCopied);
|
||||
})
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
254
dist/clipboard.js
vendored
254
dist/clipboard.js
vendored
@ -17,7 +17,7 @@
|
||||
return /******/ (function() { // webpackBootstrap
|
||||
/******/ var __webpack_modules__ = ({
|
||||
|
||||
/***/ 134:
|
||||
/***/ 747:
|
||||
/***/ (function(__unused_webpack_module, __webpack_exports__, __webpack_require__) {
|
||||
|
||||
"use strict";
|
||||
@ -36,7 +36,93 @@ var listen_default = /*#__PURE__*/__webpack_require__.n(listen);
|
||||
// EXTERNAL MODULE: ./node_modules/select/src/select.js
|
||||
var src_select = __webpack_require__(817);
|
||||
var select_default = /*#__PURE__*/__webpack_require__.n(src_select);
|
||||
;// CONCATENATED MODULE: ./src/clipboard-action.js
|
||||
;// CONCATENATED MODULE: ./src/common/command.js
|
||||
/**
|
||||
* Executes a given operation type.
|
||||
* @param {String} type
|
||||
* @return {Boolean}
|
||||
*/
|
||||
function command(type) {
|
||||
try {
|
||||
return document.execCommand(type);
|
||||
} catch (err) {
|
||||
return false;
|
||||
}
|
||||
}
|
||||
;// CONCATENATED MODULE: ./src/clipboard-action-cut.js
|
||||
|
||||
|
||||
/**
|
||||
* Cut action wrapper.
|
||||
* @param {HTMLElement} target
|
||||
* @return {String}
|
||||
*/
|
||||
|
||||
var ClipboardActionCut = function ClipboardActionCut(target) {
|
||||
var selectedText = select_default()(target);
|
||||
command('cut');
|
||||
return selectedText;
|
||||
};
|
||||
|
||||
/* harmony default export */ var clipboard_action_cut = (ClipboardActionCut);
|
||||
;// CONCATENATED MODULE: ./src/common/create-fake-element.js
|
||||
/**
|
||||
* Creates a fake textarea element with a value.
|
||||
* @param {String} value
|
||||
* @return {HTMLElement}
|
||||
*/
|
||||
function createFakeElement(value) {
|
||||
var isRTL = document.documentElement.getAttribute('dir') === 'rtl';
|
||||
var fakeElement = document.createElement('textarea'); // Prevent zooming on iOS
|
||||
|
||||
fakeElement.style.fontSize = '12pt'; // Reset box model
|
||||
|
||||
fakeElement.style.border = '0';
|
||||
fakeElement.style.padding = '0';
|
||||
fakeElement.style.margin = '0'; // Move element out of screen horizontally
|
||||
|
||||
fakeElement.style.position = 'absolute';
|
||||
fakeElement.style[isRTL ? 'right' : 'left'] = '-9999px'; // Move element to the same position vertically
|
||||
|
||||
var yPosition = window.pageYOffset || document.documentElement.scrollTop;
|
||||
fakeElement.style.top = "".concat(yPosition, "px");
|
||||
fakeElement.setAttribute('readonly', '');
|
||||
fakeElement.value = value;
|
||||
return fakeElement;
|
||||
}
|
||||
;// CONCATENATED MODULE: ./src/clipboard-action-copy.js
|
||||
|
||||
|
||||
|
||||
/**
|
||||
* Copy action wrapper.
|
||||
* @param {String|HTMLElement} target
|
||||
* @param {Object} options
|
||||
* @return {String}
|
||||
*/
|
||||
|
||||
var ClipboardActionCopy = function ClipboardActionCopy(target) {
|
||||
var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {
|
||||
container: document.body
|
||||
};
|
||||
var selectedText = '';
|
||||
|
||||
if (typeof target === 'string') {
|
||||
var fakeElement = createFakeElement(target);
|
||||
options.container.appendChild(fakeElement);
|
||||
selectedText = select_default()(fakeElement);
|
||||
command('copy');
|
||||
fakeElement.remove();
|
||||
} else {
|
||||
selectedText = select_default()(target);
|
||||
command('copy');
|
||||
}
|
||||
|
||||
return selectedText;
|
||||
};
|
||||
|
||||
/* harmony default export */ var clipboard_action_copy = (ClipboardActionCopy);
|
||||
;// CONCATENATED MODULE: ./src/clipboard-action-default.js
|
||||
function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
|
||||
|
||||
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
|
||||
@ -46,17 +132,18 @@ function _defineProperties(target, props) { for (var i = 0; i < props.length; i+
|
||||
function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; }
|
||||
|
||||
|
||||
|
||||
/**
|
||||
* Inner class which performs selection from either `text` or `target`
|
||||
* properties and then executes copy or cut operations.
|
||||
*/
|
||||
|
||||
var ClipboardAction = /*#__PURE__*/function () {
|
||||
var ClipboardActionDefault = /*#__PURE__*/function () {
|
||||
/**
|
||||
* @param {Object} options
|
||||
*/
|
||||
function ClipboardAction(options) {
|
||||
_classCallCheck(this, ClipboardAction);
|
||||
function ClipboardActionDefault(options) {
|
||||
_classCallCheck(this, ClipboardActionDefault);
|
||||
|
||||
this.resolveOptions(options);
|
||||
this.initSelection();
|
||||
@ -67,7 +154,7 @@ var ClipboardAction = /*#__PURE__*/function () {
|
||||
*/
|
||||
|
||||
|
||||
_createClass(ClipboardAction, [{
|
||||
_createClass(ClipboardActionDefault, [{
|
||||
key: "resolveOptions",
|
||||
value: function resolveOptions() {
|
||||
var options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
|
||||
@ -88,103 +175,20 @@ var ClipboardAction = /*#__PURE__*/function () {
|
||||
key: "initSelection",
|
||||
value: function initSelection() {
|
||||
if (this.text) {
|
||||
this.selectFake();
|
||||
this.selectedText = clipboard_action_copy(this.text, {
|
||||
container: this.container
|
||||
});
|
||||
} else if (this.target) {
|
||||
this.selectTarget();
|
||||
if (this.action === 'cut') {
|
||||
this.selectedText = clipboard_action_cut(this.target);
|
||||
} else if (this.action === 'copy') {
|
||||
this.selectedText = clipboard_action_copy(this.target, {
|
||||
container: this.container
|
||||
});
|
||||
}
|
||||
}
|
||||
/**
|
||||
* Creates a fake textarea element, sets its value from `text` property,
|
||||
*/
|
||||
|
||||
}, {
|
||||
key: "createFakeElement",
|
||||
value: function createFakeElement() {
|
||||
var isRTL = document.documentElement.getAttribute('dir') === 'rtl';
|
||||
this.fakeElem = document.createElement('textarea'); // Prevent zooming on iOS
|
||||
|
||||
this.fakeElem.style.fontSize = '12pt'; // Reset box model
|
||||
|
||||
this.fakeElem.style.border = '0';
|
||||
this.fakeElem.style.padding = '0';
|
||||
this.fakeElem.style.margin = '0'; // Move element out of screen horizontally
|
||||
|
||||
this.fakeElem.style.position = 'absolute';
|
||||
this.fakeElem.style[isRTL ? 'right' : 'left'] = '-9999px'; // Move element to the same position vertically
|
||||
|
||||
var yPosition = window.pageYOffset || document.documentElement.scrollTop;
|
||||
this.fakeElem.style.top = "".concat(yPosition, "px");
|
||||
this.fakeElem.setAttribute('readonly', '');
|
||||
this.fakeElem.value = this.text;
|
||||
return this.fakeElem;
|
||||
}
|
||||
/**
|
||||
* Get's the value of fakeElem,
|
||||
* and makes a selection on it.
|
||||
*/
|
||||
|
||||
}, {
|
||||
key: "selectFake",
|
||||
value: function selectFake() {
|
||||
var _this = this;
|
||||
|
||||
var fakeElem = this.createFakeElement();
|
||||
|
||||
this.fakeHandlerCallback = function () {
|
||||
return _this.removeFake();
|
||||
};
|
||||
|
||||
this.fakeHandler = this.container.addEventListener('click', this.fakeHandlerCallback) || true;
|
||||
this.container.appendChild(fakeElem);
|
||||
this.selectedText = select_default()(fakeElem);
|
||||
this.copyText();
|
||||
this.removeFake();
|
||||
}
|
||||
/**
|
||||
* Only removes the fake element after another click event, that way
|
||||
* a user can hit `Ctrl+C` to copy because selection still exists.
|
||||
*/
|
||||
|
||||
}, {
|
||||
key: "removeFake",
|
||||
value: function removeFake() {
|
||||
if (this.fakeHandler) {
|
||||
this.container.removeEventListener('click', this.fakeHandlerCallback);
|
||||
this.fakeHandler = null;
|
||||
this.fakeHandlerCallback = null;
|
||||
}
|
||||
|
||||
if (this.fakeElem) {
|
||||
this.container.removeChild(this.fakeElem);
|
||||
this.fakeElem = null;
|
||||
}
|
||||
}
|
||||
/**
|
||||
* Selects the content from element passed on `target` property.
|
||||
*/
|
||||
|
||||
}, {
|
||||
key: "selectTarget",
|
||||
value: function selectTarget() {
|
||||
this.selectedText = select_default()(this.target);
|
||||
this.copyText();
|
||||
}
|
||||
/**
|
||||
* Executes the copy operation based on the current selection.
|
||||
*/
|
||||
|
||||
}, {
|
||||
key: "copyText",
|
||||
value: function copyText() {
|
||||
var succeeded;
|
||||
|
||||
try {
|
||||
succeeded = document.execCommand(this.action);
|
||||
} catch (err) {
|
||||
succeeded = false;
|
||||
}
|
||||
|
||||
this.handleResult(succeeded);
|
||||
this.handleResult(Boolean(this.selectedText));
|
||||
}
|
||||
/**
|
||||
* Fires an event based on the copy operation result.
|
||||
@ -220,15 +224,6 @@ var ClipboardAction = /*#__PURE__*/function () {
|
||||
* @param {String} action
|
||||
*/
|
||||
|
||||
}, {
|
||||
key: "destroy",
|
||||
|
||||
/**
|
||||
* Destroy lifecycle.
|
||||
*/
|
||||
value: function destroy() {
|
||||
this.removeFake();
|
||||
}
|
||||
}, {
|
||||
key: "action",
|
||||
set: function set() {
|
||||
@ -282,10 +277,10 @@ var ClipboardAction = /*#__PURE__*/function () {
|
||||
}
|
||||
}]);
|
||||
|
||||
return ClipboardAction;
|
||||
return ClipboardActionDefault;
|
||||
}();
|
||||
|
||||
/* harmony default export */ var clipboard_action = (ClipboardAction);
|
||||
/* harmony default export */ var clipboard_action_default = (ClipboardActionDefault);
|
||||
;// CONCATENATED MODULE: ./src/clipboard.js
|
||||
function clipboard_typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { clipboard_typeof = function _typeof(obj) { return typeof obj; }; } else { clipboard_typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return clipboard_typeof(obj); }
|
||||
|
||||
@ -312,6 +307,8 @@ function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.g
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
/**
|
||||
* Helper function to retrieve attribute value.
|
||||
* @param {String} suffix
|
||||
@ -348,6 +345,8 @@ var Clipboard = /*#__PURE__*/function (_Emitter) {
|
||||
clipboard_classCallCheck(this, Clipboard);
|
||||
|
||||
_this = _super.call(this);
|
||||
_this.ClipboardActionCut = clipboard_action_cut.bind(_assertThisInitialized(_this));
|
||||
_this.ClipboardActionCopy = clipboard_action_copy.bind(_assertThisInitialized(_this));
|
||||
|
||||
_this.resolveOptions(options);
|
||||
|
||||
@ -395,11 +394,11 @@ var Clipboard = /*#__PURE__*/function (_Emitter) {
|
||||
value: function onClick(e) {
|
||||
var trigger = e.delegateTarget || e.currentTarget;
|
||||
|
||||
if (this.clipboardAction) {
|
||||
this.clipboardAction = null;
|
||||
if (this.ClipboardActionDefault) {
|
||||
this.ClipboardActionDefault = null;
|
||||
}
|
||||
|
||||
this.clipboardAction = new clipboard_action({
|
||||
this.ClipboardActionDefault = new clipboard_action_default({
|
||||
action: this.action(trigger),
|
||||
target: this.target(trigger),
|
||||
text: this.text(trigger),
|
||||
@ -432,12 +431,6 @@ var Clipboard = /*#__PURE__*/function (_Emitter) {
|
||||
return document.querySelector(selector);
|
||||
}
|
||||
}
|
||||
/**
|
||||
* Returns the support of the given action, or all actions if no action is
|
||||
* given.
|
||||
* @param {String} [action]
|
||||
*/
|
||||
|
||||
}, {
|
||||
key: "defaultText",
|
||||
|
||||
@ -457,12 +450,27 @@ var Clipboard = /*#__PURE__*/function (_Emitter) {
|
||||
value: function destroy() {
|
||||
this.listener.destroy();
|
||||
|
||||
if (this.clipboardAction) {
|
||||
this.clipboardAction.destroy();
|
||||
this.clipboardAction = null;
|
||||
if (this.ClipboardActionDefault) {
|
||||
this.ClipboardActionDefault = null;
|
||||
}
|
||||
}
|
||||
}], [{
|
||||
key: "copy",
|
||||
value: function copy(target) {
|
||||
return clipboard_action_copy(target);
|
||||
}
|
||||
}, {
|
||||
key: "cut",
|
||||
value: function cut(target) {
|
||||
return clipboard_action_cut(target);
|
||||
}
|
||||
/**
|
||||
* Returns the support of the given action, or all actions if no action is
|
||||
* given.
|
||||
* @param {String} [action]
|
||||
*/
|
||||
|
||||
}, {
|
||||
key: "isSupported",
|
||||
value: function isSupported() {
|
||||
var action = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : ['copy', 'cut'];
|
||||
@ -948,7 +956,7 @@ module.exports.TinyEmitter = E;
|
||||
/******/ // module exports must be returned from runtime so entry inlining is disabled
|
||||
/******/ // startup
|
||||
/******/ // Load entry module and return exports
|
||||
/******/ return __webpack_require__(134);
|
||||
/******/ return __webpack_require__(747);
|
||||
/******/ })()
|
||||
.default;
|
||||
});
|
2
dist/clipboard.min.js
vendored
2
dist/clipboard.min.js
vendored
File diff suppressed because one or more lines are too long
29
src/clipboard-action-copy.js
Normal file
29
src/clipboard-action-copy.js
Normal file
@ -0,0 +1,29 @@
|
||||
import select from 'select';
|
||||
import command from './common/command';
|
||||
import createFakeElement from './common/create-fake-element';
|
||||
|
||||
/**
|
||||
* Copy action wrapper.
|
||||
* @param {String|HTMLElement} target
|
||||
* @param {Object} options
|
||||
* @return {String}
|
||||
*/
|
||||
const ClipboardActionCopy = (
|
||||
target,
|
||||
options = { container: document.body }
|
||||
) => {
|
||||
let selectedText = '';
|
||||
if (typeof target === 'string') {
|
||||
const fakeElement = createFakeElement(target);
|
||||
options.container.appendChild(fakeElement);
|
||||
selectedText = select(fakeElement);
|
||||
command('copy');
|
||||
fakeElement.remove();
|
||||
} else {
|
||||
selectedText = select(target);
|
||||
command('copy');
|
||||
}
|
||||
return selectedText;
|
||||
};
|
||||
|
||||
export default ClipboardActionCopy;
|
15
src/clipboard-action-cut.js
Normal file
15
src/clipboard-action-cut.js
Normal file
@ -0,0 +1,15 @@
|
||||
import select from 'select';
|
||||
import command from './common/command';
|
||||
|
||||
/**
|
||||
* Cut action wrapper.
|
||||
* @param {HTMLElement} target
|
||||
* @return {String}
|
||||
*/
|
||||
const ClipboardActionCut = (target) => {
|
||||
const selectedText = select(target);
|
||||
command('cut');
|
||||
return selectedText;
|
||||
};
|
||||
|
||||
export default ClipboardActionCut;
|
@ -1,10 +1,11 @@
|
||||
import select from 'select';
|
||||
import ClipboardActionCut from './clipboard-action-cut';
|
||||
import ClipboardActionCopy from './clipboard-action-copy';
|
||||
|
||||
/**
|
||||
* Inner class which performs selection from either `text` or `target`
|
||||
* properties and then executes copy or cut operations.
|
||||
*/
|
||||
class ClipboardAction {
|
||||
class ClipboardActionDefault {
|
||||
/**
|
||||
* @param {Object} options
|
||||
*/
|
||||
@ -34,98 +35,20 @@ class ClipboardAction {
|
||||
*/
|
||||
initSelection() {
|
||||
if (this.text) {
|
||||
this.selectFake();
|
||||
this.selectedText = ClipboardActionCopy(this.text, {
|
||||
container: this.container,
|
||||
});
|
||||
} else if (this.target) {
|
||||
this.selectTarget();
|
||||
if (this.action === 'cut') {
|
||||
this.selectedText = ClipboardActionCut(this.target);
|
||||
} else if (this.action === 'copy') {
|
||||
this.selectedText = ClipboardActionCopy(this.target, {
|
||||
container: this.container,
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Creates a fake textarea element, sets its value from `text` property,
|
||||
*/
|
||||
createFakeElement() {
|
||||
const isRTL = document.documentElement.getAttribute('dir') === 'rtl';
|
||||
|
||||
this.fakeElem = document.createElement('textarea');
|
||||
// Prevent zooming on iOS
|
||||
this.fakeElem.style.fontSize = '12pt';
|
||||
// Reset box model
|
||||
this.fakeElem.style.border = '0';
|
||||
this.fakeElem.style.padding = '0';
|
||||
this.fakeElem.style.margin = '0';
|
||||
// Move element out of screen horizontally
|
||||
this.fakeElem.style.position = 'absolute';
|
||||
this.fakeElem.style[isRTL ? 'right' : 'left'] = '-9999px';
|
||||
// Move element to the same position vertically
|
||||
let yPosition = window.pageYOffset || document.documentElement.scrollTop;
|
||||
this.fakeElem.style.top = `${yPosition}px`;
|
||||
|
||||
this.fakeElem.setAttribute('readonly', '');
|
||||
this.fakeElem.value = this.text;
|
||||
|
||||
return this.fakeElem;
|
||||
}
|
||||
|
||||
/**
|
||||
* Get's the value of fakeElem,
|
||||
* and makes a selection on it.
|
||||
*/
|
||||
selectFake() {
|
||||
const fakeElem = this.createFakeElement();
|
||||
|
||||
this.fakeHandlerCallback = () => this.removeFake();
|
||||
|
||||
this.fakeHandler =
|
||||
this.container.addEventListener('click', this.fakeHandlerCallback) ||
|
||||
true;
|
||||
|
||||
this.container.appendChild(fakeElem);
|
||||
|
||||
this.selectedText = select(fakeElem);
|
||||
|
||||
this.copyText();
|
||||
|
||||
this.removeFake();
|
||||
}
|
||||
|
||||
/**
|
||||
* Only removes the fake element after another click event, that way
|
||||
* a user can hit `Ctrl+C` to copy because selection still exists.
|
||||
*/
|
||||
removeFake() {
|
||||
if (this.fakeHandler) {
|
||||
this.container.removeEventListener('click', this.fakeHandlerCallback);
|
||||
this.fakeHandler = null;
|
||||
this.fakeHandlerCallback = null;
|
||||
}
|
||||
|
||||
if (this.fakeElem) {
|
||||
this.container.removeChild(this.fakeElem);
|
||||
this.fakeElem = null;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Selects the content from element passed on `target` property.
|
||||
*/
|
||||
selectTarget() {
|
||||
this.selectedText = select(this.target);
|
||||
this.copyText();
|
||||
}
|
||||
|
||||
/**
|
||||
* Executes the copy operation based on the current selection.
|
||||
*/
|
||||
copyText() {
|
||||
let succeeded;
|
||||
|
||||
try {
|
||||
succeeded = document.execCommand(this.action);
|
||||
} catch (err) {
|
||||
succeeded = false;
|
||||
}
|
||||
|
||||
this.handleResult(succeeded);
|
||||
this.handleResult(Boolean(this.selectedText));
|
||||
}
|
||||
|
||||
/**
|
||||
@ -209,13 +132,6 @@ class ClipboardAction {
|
||||
get target() {
|
||||
return this._target;
|
||||
}
|
||||
|
||||
/**
|
||||
* Destroy lifecycle.
|
||||
*/
|
||||
destroy() {
|
||||
this.removeFake();
|
||||
}
|
||||
}
|
||||
|
||||
export default ClipboardAction;
|
||||
export default ClipboardActionDefault;
|
@ -1,6 +1,8 @@
|
||||
import Emitter from 'tiny-emitter';
|
||||
import listen from 'good-listener';
|
||||
import ClipboardAction from './clipboard-action';
|
||||
import ClipboardActionDefault from './clipboard-action-default';
|
||||
import ClipboardActionCut from './clipboard-action-cut';
|
||||
import ClipboardActionCopy from './clipboard-action-copy';
|
||||
|
||||
/**
|
||||
* Helper function to retrieve attribute value.
|
||||
@ -29,6 +31,8 @@ class Clipboard extends Emitter {
|
||||
constructor(trigger, options) {
|
||||
super();
|
||||
|
||||
this.ClipboardActionCut = ClipboardActionCut.bind(this);
|
||||
this.ClipboardActionCopy = ClipboardActionCopy.bind(this);
|
||||
this.resolveOptions(options);
|
||||
this.listenClick(trigger);
|
||||
}
|
||||
@ -68,11 +72,11 @@ class Clipboard extends Emitter {
|
||||
onClick(e) {
|
||||
const trigger = e.delegateTarget || e.currentTarget;
|
||||
|
||||
if (this.clipboardAction) {
|
||||
this.clipboardAction = null;
|
||||
if (this.ClipboardActionDefault) {
|
||||
this.ClipboardActionDefault = null;
|
||||
}
|
||||
|
||||
this.clipboardAction = new ClipboardAction({
|
||||
this.ClipboardActionDefault = new ClipboardActionDefault({
|
||||
action: this.action(trigger),
|
||||
target: this.target(trigger),
|
||||
text: this.text(trigger),
|
||||
@ -102,6 +106,14 @@ class Clipboard extends Emitter {
|
||||
}
|
||||
}
|
||||
|
||||
static copy(target) {
|
||||
return ClipboardActionCopy(target);
|
||||
}
|
||||
|
||||
static cut(target) {
|
||||
return ClipboardActionCut(target);
|
||||
}
|
||||
|
||||
/**
|
||||
* Returns the support of the given action, or all actions if no action is
|
||||
* given.
|
||||
@ -132,9 +144,8 @@ class Clipboard extends Emitter {
|
||||
destroy() {
|
||||
this.listener.destroy();
|
||||
|
||||
if (this.clipboardAction) {
|
||||
this.clipboardAction.destroy();
|
||||
this.clipboardAction = null;
|
||||
if (this.ClipboardActionDefault) {
|
||||
this.ClipboardActionDefault = null;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
12
src/common/command.js
Normal file
12
src/common/command.js
Normal file
@ -0,0 +1,12 @@
|
||||
/**
|
||||
* Executes a given operation type.
|
||||
* @param {String} type
|
||||
* @return {Boolean}
|
||||
*/
|
||||
export default function command(type) {
|
||||
try {
|
||||
return document.execCommand(type);
|
||||
} catch (err) {
|
||||
return false;
|
||||
}
|
||||
}
|
26
src/common/create-fake-element.js
Normal file
26
src/common/create-fake-element.js
Normal file
@ -0,0 +1,26 @@
|
||||
/**
|
||||
* Creates a fake textarea element with a value.
|
||||
* @param {String} value
|
||||
* @return {HTMLElement}
|
||||
*/
|
||||
export default function createFakeElement(value) {
|
||||
const isRTL = document.documentElement.getAttribute('dir') === 'rtl';
|
||||
const fakeElement = document.createElement('textarea');
|
||||
// Prevent zooming on iOS
|
||||
fakeElement.style.fontSize = '12pt';
|
||||
// Reset box model
|
||||
fakeElement.style.border = '0';
|
||||
fakeElement.style.padding = '0';
|
||||
fakeElement.style.margin = '0';
|
||||
// Move element out of screen horizontally
|
||||
fakeElement.style.position = 'absolute';
|
||||
fakeElement.style[isRTL ? 'right' : 'left'] = '-9999px';
|
||||
// Move element to the same position vertically
|
||||
let yPosition = window.pageYOffset || document.documentElement.scrollTop;
|
||||
fakeElement.style.top = `${yPosition}px`;
|
||||
|
||||
fakeElement.setAttribute('readonly', '');
|
||||
fakeElement.value = value;
|
||||
|
||||
return fakeElement;
|
||||
}
|
@ -1,7 +1,7 @@
|
||||
import Emitter from 'tiny-emitter';
|
||||
import ClipboardAction from '../src/clipboard-action';
|
||||
import ClipboardActionDefault from '../src/clipboard-action-default';
|
||||
|
||||
describe('ClipboardAction', () => {
|
||||
describe('ClipboardActionDefault', () => {
|
||||
before(() => {
|
||||
global.input = document.createElement('input');
|
||||
global.input.setAttribute('id', 'input');
|
||||
@ -20,7 +20,7 @@ describe('ClipboardAction', () => {
|
||||
|
||||
describe('#resolveOptions', () => {
|
||||
it('should set base properties', () => {
|
||||
let clip = new ClipboardAction({
|
||||
let clip = new ClipboardActionDefault({
|
||||
emitter: new Emitter(),
|
||||
container: document.body,
|
||||
text: 'foo',
|
||||
@ -41,7 +41,7 @@ describe('ClipboardAction', () => {
|
||||
// Set document direction
|
||||
document.documentElement.setAttribute('dir', 'rtl');
|
||||
|
||||
let clip = new ClipboardAction({
|
||||
let clip = new ClipboardActionDefault({
|
||||
emitter: new Emitter(),
|
||||
container: document.body,
|
||||
text: 'foo',
|
||||
@ -57,7 +57,7 @@ describe('ClipboardAction', () => {
|
||||
describe('#set action', () => {
|
||||
it('should throw an error since "action" is invalid', (done) => {
|
||||
try {
|
||||
let clip = new ClipboardAction({
|
||||
let clip = new ClipboardActionDefault({
|
||||
text: 'foo',
|
||||
action: 'paste',
|
||||
});
|
||||
@ -74,7 +74,7 @@ describe('ClipboardAction', () => {
|
||||
describe('#set target', () => {
|
||||
it('should throw an error since "target" do not match any element', (done) => {
|
||||
try {
|
||||
let clip = new ClipboardAction({
|
||||
let clip = new ClipboardActionDefault({
|
||||
target: document.querySelector('#foo'),
|
||||
});
|
||||
} catch (e) {
|
||||
@ -86,7 +86,7 @@ describe('ClipboardAction', () => {
|
||||
|
||||
describe('#selectText', () => {
|
||||
it('should create a fake element and select its value', () => {
|
||||
let clip = new ClipboardAction({
|
||||
let clip = new ClipboardActionDefault({
|
||||
emitter: new Emitter(),
|
||||
container: document.body,
|
||||
text: 'blah',
|
||||
@ -100,7 +100,7 @@ describe('ClipboardAction', () => {
|
||||
|
||||
describe('#removeFake', () => {
|
||||
it('should remove a temporary fake element', () => {
|
||||
let clip = new ClipboardAction({
|
||||
let clip = new ClipboardActionDefault({
|
||||
emitter: new Emitter(),
|
||||
container: document.body,
|
||||
text: 'blah',
|
||||
@ -114,7 +114,7 @@ describe('ClipboardAction', () => {
|
||||
|
||||
describe('#selectTarget', () => {
|
||||
it('should select text from editable element', () => {
|
||||
let clip = new ClipboardAction({
|
||||
let clip = new ClipboardActionDefault({
|
||||
emitter: new Emitter(),
|
||||
container: document.body,
|
||||
target: document.querySelector('#input'),
|
||||
@ -124,7 +124,7 @@ describe('ClipboardAction', () => {
|
||||
});
|
||||
|
||||
it('should select text from non-editable element', () => {
|
||||
let clip = new ClipboardAction({
|
||||
let clip = new ClipboardActionDefault({
|
||||
emitter: new Emitter(),
|
||||
container: document.body,
|
||||
target: document.querySelector('#paragraph'),
|
||||
@ -152,7 +152,7 @@ describe('ClipboardAction', () => {
|
||||
done();
|
||||
});
|
||||
|
||||
let clip = new ClipboardAction({
|
||||
let clip = new ClipboardActionDefault({
|
||||
emitter,
|
||||
target: document.querySelector('#input'),
|
||||
});
|
||||
@ -167,7 +167,7 @@ describe('ClipboardAction', () => {
|
||||
done();
|
||||
});
|
||||
|
||||
let clip = new ClipboardAction({
|
||||
let clip = new ClipboardActionDefault({
|
||||
emitter,
|
||||
target: document.querySelector('#input'),
|
||||
});
|
||||
@ -176,7 +176,7 @@ describe('ClipboardAction', () => {
|
||||
|
||||
describe('#handleResult', () => {
|
||||
it('should fire a success event with certain properties', (done) => {
|
||||
let clip = new ClipboardAction({
|
||||
let clip = new ClipboardActionDefault({
|
||||
emitter: new Emitter(),
|
||||
container: document.body,
|
||||
target: document.querySelector('#input'),
|
||||
@ -195,7 +195,7 @@ describe('ClipboardAction', () => {
|
||||
});
|
||||
|
||||
it('should fire a error event with certain properties', (done) => {
|
||||
let clip = new ClipboardAction({
|
||||
let clip = new ClipboardActionDefault({
|
||||
emitter: new Emitter(),
|
||||
container: document.body,
|
||||
target: document.querySelector('#input'),
|
||||
@ -215,7 +215,7 @@ describe('ClipboardAction', () => {
|
||||
|
||||
describe('#clearSelection', () => {
|
||||
it('should remove focus from target and text selection', () => {
|
||||
let clip = new ClipboardAction({
|
||||
let clip = new ClipboardActionDefault({
|
||||
emitter: new Emitter(),
|
||||
container: document.body,
|
||||
target: document.querySelector('#input'),
|
||||
@ -233,7 +233,7 @@ describe('ClipboardAction', () => {
|
||||
|
||||
describe('#destroy', () => {
|
||||
it('should destroy an existing fake element', () => {
|
||||
let clip = new ClipboardAction({
|
||||
let clip = new ClipboardActionDefault({
|
||||
emitter: new Emitter(),
|
||||
container: document.body,
|
||||
text: 'blah',
|
||||
|
@ -1,5 +1,5 @@
|
||||
import Clipboard from '../src/clipboard';
|
||||
import ClipboardAction from '../src/clipboard-action';
|
||||
import ClipboardActionDefault from '../src/clipboard-action-default';
|
||||
|
||||
describe('Clipboard', () => {
|
||||
before(() => {
|
||||
@ -75,11 +75,14 @@ describe('Clipboard', () => {
|
||||
});
|
||||
|
||||
describe('#onClick', () => {
|
||||
it('should create a new instance of ClipboardAction', () => {
|
||||
it('should create a new instance of ClipboardActionDefault', () => {
|
||||
let clipboard = new Clipboard('.btn');
|
||||
|
||||
clipboard.onClick(global.event);
|
||||
assert.instanceOf(clipboard.clipboardAction, ClipboardAction);
|
||||
assert.instanceOf(
|
||||
clipboard.clipboardActionDefault,
|
||||
ClipboardActionDefault
|
||||
);
|
||||
});
|
||||
|
||||
it("should use an event's currentTarget when not equal to target", () => {
|
||||
@ -90,7 +93,10 @@ describe('Clipboard', () => {
|
||||
};
|
||||
|
||||
clipboard.onClick(bubbledEvent);
|
||||
assert.instanceOf(clipboard.clipboardAction, ClipboardAction);
|
||||
assert.instanceOf(
|
||||
clipboard.clipboardActionDefault,
|
||||
ClipboardActionDefault
|
||||
);
|
||||
});
|
||||
|
||||
it('should throw an exception when target is invalid', (done) => {
|
||||
@ -121,7 +127,7 @@ describe('Clipboard', () => {
|
||||
});
|
||||
|
||||
describe('#destroy', () => {
|
||||
it('should destroy an existing instance of ClipboardAction', () => {
|
||||
it('should destroy an existing instance of ClipboardActionDefault', () => {
|
||||
let clipboard = new Clipboard('.btn');
|
||||
|
||||
clipboard.onClick(global.event);
|
||||
|
Loading…
x
Reference in New Issue
Block a user