Isolate actions strategies in order to code improvement and programmatic usage. (#749)

* Isolate cut, copy and core helper functions.

* Update tests to accommodate new proposal

* Add/update tests

* Add tests to static copy/cut methods

* Update condition syntax based on PR reviews

* Migrate clipboard-action-default to functional approach. Update tests. Add tests

* Improve folder structure. Clean up code.

* Add types. Fix tsd check env. Improve in-code doc comments

* Improve in-code doc comments

src/actions/copy.js

@@ -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;

src/actions/cut.js

@@ -0,0 +1,15 @@
+import select from 'select';
+import command from '../common/command';
+
+/**
+ * Cut action wrapper.
+ * @param {String|HTMLElement} target
+ * @return {String}
+ */
+const ClipboardActionCut = (target) => {
+  const selectedText = select(target);
+  command('cut');
+  return selectedText;
+};
+
+export default ClipboardActionCut;

src/actions/default.js

@@ -0,0 +1,53 @@
+import ClipboardActionCut from './cut';
+import ClipboardActionCopy from './copy';
+
+/**
+ * Inner function which performs selection from either `text` or `target`
+ * properties and then executes copy or cut operations.
+ * @param {Object} options
+ */
+const ClipboardActionDefault = (options = {}) => {
+  // Defines base properties passed from constructor.
+  const { action = 'copy', container, target, text } = options;
+
+  // Sets the `action` to be performed which can be either 'copy' or 'cut'.
+  if (action !== 'copy' && action !== 'cut') {
+    throw new Error('Invalid "action" value, use either "copy" or "cut"');
+  }
+
+  // Sets the `target` property using an element that will be have its content copied.
+  if (target !== undefined) {
+    if (target && typeof target === 'object' && target.nodeType === 1) {
+      if (action === 'copy' && target.hasAttribute('disabled')) {
+        throw new Error(
+          'Invalid "target" attribute. Please use "readonly" instead of "disabled" attribute'
+        );
+      }
+
+      if (
+        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'
+        );
+      }
+    } else {
+      throw new Error('Invalid "target" value, use a valid Element');
+    }
+  }
+
+  // Define selection strategy based on `text` property.
+  if (text) {
+    return ClipboardActionCopy(text, { container });
+  }
+
+  // Defines which selection strategy based on `target` property.
+  if (target) {
+    return action === 'cut'
+      ? ClipboardActionCut(target)
+      : ClipboardActionCopy(target, { container });
+  }
+};
+
+export default ClipboardActionDefault;

src/clipboard-action.js

@@ -1,221 +0,0 @@
-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,
-   */
-  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);
-  }
-
-  /**
-   * 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;

src/clipboard.d.ts

@@ -2,11 +2,7 @@
 
 type Action = 'cut' | 'copy';
 type Response = 'success' | 'error';
-
-type Options = {
-  text?: string;
-  action?: Action;
-  target?: Element;
+type CopyActionOptions = {
   container?: Element;
 };
 
@@ -38,6 +34,17 @@ declare class ClipboardJS {
    * Checks if clipboard.js is supported
    */
   static isSupported(): boolean;
+
+
+  /**
+   * Fires a copy action
+   */
+   static copy(target: string | Element, options: CopyActionOptions): string;
+
+   /**
+   * Fires a cut action
+   */
+  static cut(target: string | Element): string;
 }
 
 declare namespace ClipboardJS {

src/clipboard.js

@@ -1,6 +1,8 @@
 import Emitter from 'tiny-emitter';
 import listen from 'good-listener';
-import ClipboardAction from './clipboard-action';
+import ClipboardActionDefault from './actions/default';
+import ClipboardActionCut from './actions/cut';
+import ClipboardActionCopy from './actions/copy';
 
 /**
  * Helper function to retrieve attribute value.
@@ -67,18 +69,25 @@ class Clipboard extends Emitter {
    */
   onClick(e) {
     const trigger = e.delegateTarget || e.currentTarget;
-
-    if (this.clipboardAction) {
-      this.clipboardAction = null;
-    }
-
-    this.clipboardAction = new ClipboardAction({
+    const selectedText = ClipboardActionDefault({
       action: this.action(trigger),
+      container: this.container,
       target: this.target(trigger),
       text: this.text(trigger),
-      container: this.container,
+    });
+
+    // Fires an event based on the copy operation result.
+    this.emit(selectedText ? 'success' : 'error', {
+      action: this.action,
+      text: selectedText,
       trigger,
-      emitter: this,
+      clearSelection() {
+        if (trigger) {
+          trigger.focus();
+        }
+        document.activeElement.blur();
+        window.getSelection().removeAllRanges();
+      },
     });
   }
 
@@ -102,6 +111,25 @@ class Clipboard extends Emitter {
     }
   }
 
+  /**
+   * Allow fire programmatically a copy action
+   * @param {String|HTMLElement} target
+   * @param {Object} options
+   * @returns Text copied.
+   */
+  static copy(target, options = { container: document.body }) {
+    return ClipboardActionCopy(target, options);
+  }
+
+  /**
+   * Allow fire programmatically a cut action
+   * @param {String|HTMLElement} target
+   * @returns Text cutted.
+   */
+  static cut(target) {
+    return ClipboardActionCut(target);
+  }
+
   /**
    * Returns the support of the given action, or all actions if no action is
    * given.
@@ -131,11 +159,6 @@ class Clipboard extends Emitter {
    */
   destroy() {
     this.listener.destroy();
-
-    if (this.clipboardAction) {
-      this.clipboardAction.destroy();
-      this.clipboardAction = null;
-    }
   }
 }
 

src/clipboard.test-d.ts

@@ -1,4 +1,4 @@
 import { expectType } from 'tsd';
-import Clipboard from './clipboard';
+import * as Clipboard from './clipboard';
 
 expectType<Clipboard>(new Clipboard('.btn'));

src/common/command.js

@@ -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;
+  }
+}

src/common/create-fake-element.js

@@ -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;
+}