123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204 |
- import select from 'select';
- /**
- * Inner class which performs selection from either `text` or `target`
- * properties and then executes copy or cut operations.
- */
- class ClipboardAction {
- /**
- * @param {Object} options
- */
- constructor(options) {
- this.resolveOptions(options);
- this.initSelection();
- }
- /**
- * Defines base properties passed from constructor.
- * @param {Object} options
- */
- resolveOptions(options = {}) {
- this.action = options.action;
- this.container = options.container;
- this.emitter = options.emitter;
- this.target = options.target;
- this.text = options.text;
- this.trigger = options.trigger;
- this.selectedText = '';
- }
- /**
- * Decides which selection strategy is going to be applied based
- * on the existence of `text` and `target` properties.
- */
- initSelection() {
- if (this.text) {
- this.selectFake();
- }
- else if (this.target) {
- this.selectTarget();
- }
- }
- /**
- * Creates a fake textarea element, sets its value from `text` property,
- * and makes a selection on it.
- */
- selectFake() {
- const isRTL = document.documentElement.getAttribute('dir') == 'rtl';
- this.removeFake();
- this.fakeHandlerCallback = () => this.removeFake();
- this.fakeHandler = this.container.addEventListener('click', this.fakeHandlerCallback) || true;
- 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;
- this.container.appendChild(this.fakeElem);
- this.selectedText = select(this.fakeElem);
- this.copyText();
- }
- /**
- * 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);
- }
- /**
- * Fires an event based on the copy operation result.
- * @param {Boolean} succeeded
- */
- handleResult(succeeded) {
- this.emitter.emit(succeeded ? 'success' : 'error', {
- action: this.action,
- text: this.selectedText,
- trigger: this.trigger,
- clearSelection: this.clearSelection.bind(this)
- });
- }
- /**
- * Moves focus away from `target` and back to the trigger, removes current selection.
- */
- clearSelection() {
- if (this.trigger) {
- this.trigger.focus();
- }
- document.activeElement.blur();
- window.getSelection().removeAllRanges();
- }
- /**
- * Sets the `action` to be performed which can be either 'copy' or 'cut'.
- * @param {String} action
- */
- set action(action = 'copy') {
- this._action = action;
- if (this._action !== 'copy' && this._action !== 'cut') {
- throw new Error('Invalid "action" value, use either "copy" or "cut"');
- }
- }
- /**
- * Gets the `action` property.
- * @return {String}
- */
- get action() {
- return this._action;
- }
- /**
- * Sets the `target` property using an element
- * that will be have its content copied.
- * @param {Element} target
- */
- set target(target) {
- if (target !== undefined) {
- if (target && typeof target === 'object' && target.nodeType === 1) {
- if (this.action === 'copy' && target.hasAttribute('disabled')) {
- throw new Error('Invalid "target" attribute. Please use "readonly" instead of "disabled" attribute');
- }
- if (this.action === 'cut' && (target.hasAttribute('readonly') || target.hasAttribute('disabled'))) {
- throw new Error('Invalid "target" attribute. You can\'t cut text from elements with "readonly" or "disabled" attributes');
- }
- this._target = target;
- }
- else {
- throw new Error('Invalid "target" value, use a valid Element');
- }
- }
- }
- /**
- * Gets the `target` property.
- * @return {String|HTMLElement}
- */
- get target() {
- return this._target;
- }
- /**
- * Destroy lifecycle.
- */
- destroy() {
- this.removeFake();
- }
- }
- export default ClipboardAction;
|