2.0.11

Support more HTML input types. Close #800 (#808 )
* Support more HTML input types. * Improve test description. Remove .only * Apply logic only when target is an input element
2023-08-10 21:12:48 +03:00 · 2022-05-04 14:51:40 -03:00 · 2022-05-04 14:47:44 -03:00 · 2022-05-04 14:45:44 -03:00 · 2022-05-04 09:32:02 +01:00 · 2022-04-28 17:15:48 -03:00
20 changed files with 623 additions and 834 deletions
--- a/bower.json
+++ b/bower.json
@@ -1,6 +1,6 @@
 {
  "name": "clipboard",
-  "version": "2.0.9",
+  "version": "2.0.11",
  "description": "Modern copy to clipboard. No Flash. Just 3kb",
  "license": "MIT",
  "main": "dist/clipboard.js",
--- a/demo/constructor-node.html
+++ b/demo/constructor-node.html
@@ -20,11 +20,15 @@
      var clipboard = new ClipboardJS(btn);

      clipboard.on('success', function (e) {
-        console.log(e);
+        console.info('Action:', e.action);
+        console.info('Text:', e.text);
+        console.info('Trigger:', e.trigger);
      });

      clipboard.on('error', function (e) {
-        console.log(e);
+        console.info('Action:', e.action);
+        console.info('Text:', e.text);
+        console.info('Trigger:', e.trigger);
      });
    </script>
  </body>
--- a/demo/constructor-nodelist.html
+++ b/demo/constructor-nodelist.html
@@ -20,11 +20,15 @@
      var clipboard = new ClipboardJS(btns);

      clipboard.on('success', function (e) {
-        console.log(e);
+        console.info('Action:', e.action);
+        console.info('Text:', e.text);
+        console.info('Trigger:', e.trigger);
      });

      clipboard.on('error', function (e) {
-        console.log(e);
+        console.info('Action:', e.action);
+        console.info('Text:', e.text);
+        console.info('Trigger:', e.trigger);
      });
    </script>
  </body>
--- a/demo/constructor-selector.html
+++ b/demo/constructor-selector.html
@@ -19,11 +19,15 @@
      var clipboard = new ClipboardJS('.btn');

      clipboard.on('success', function (e) {
-        console.log(e);
+        console.info('Action:', e.action);
+        console.info('Text:', e.text);
+        console.info('Trigger:', e.trigger);
      });

      clipboard.on('error', function (e) {
-        console.log(e);
+        console.info('Action:', e.action);
+        console.info('Text:', e.text);
+        console.info('Trigger:', e.trigger);
      });
    </script>
  </body>
--- a/demo/function-target.html
+++ b/demo/function-target.html
@@ -22,11 +22,15 @@
      });

      clipboard.on('success', function (e) {
-        console.log(e);
+        console.info('Action:', e.action);
+        console.info('Text:', e.text);
+        console.info('Trigger:', e.trigger);
      });

      clipboard.on('error', function (e) {
-        console.log(e);
+        console.info('Action:', e.action);
+        console.info('Text:', e.text);
+        console.info('Trigger:', e.trigger);
      });
    </script>
  </body>
--- a/demo/function-text.html
+++ b/demo/function-text.html
@@ -21,11 +21,15 @@
      });

      clipboard.on('success', function (e) {
-        console.log(e);
+        console.info('Action:', e.action);
+        console.info('Text:', e.text);
+        console.info('Trigger:', e.trigger);
      });

      clipboard.on('error', function (e) {
-        console.log(e);
+        console.info('Action:', e.action);
+        console.info('Text:', e.text);
+        console.info('Trigger:', e.trigger);
      });
    </script>
  </body>
--- a/demo/target-div.html
+++ b/demo/target-div.html
@@ -24,11 +24,15 @@
      var clipboard = new ClipboardJS('.btn');

      clipboard.on('success', function (e) {
-        console.log(e);
+        console.info('Action:', e.action);
+        console.info('Text:', e.text);
+        console.info('Trigger:', e.trigger);
      });

      clipboard.on('error', function (e) {
-        console.log(e);
+        console.info('Action:', e.action);
+        console.info('Text:', e.text);
+        console.info('Trigger:', e.trigger);
      });
    </script>
  </body>
--- a/demo/target-input-number.html
+++ b/demo/target-input-number.html
@@ -0,0 +1,37 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <title>target-input-number</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+  </head>
+  <body>
+    <!-- 1. Define some markup -->
+    <input id="foo" type="number" value="0" />
+    <button
+      class="btn"
+      data-clipboard-action="copy"
+      data-clipboard-target="#foo"
+    >
+      Copy
+    </button>
+
+    <!-- 2. Include library -->
+    <script src="../dist/clipboard.min.js"></script>
+
+    <!-- 3. Instantiate clipboard -->
+    <script>
+      var clipboard = new ClipboardJS('.btn');
+
+      clipboard.on('success', function (e) {
+        console.info('Action:', e.action);
+        console.info('Text:', e.text);
+        console.info('Trigger:', e.trigger);
+      });
+
+      clipboard.on('error', function (e) {
+        console.log(e);
+      });
+    </script>
+  </body>
+</html>
--- a/demo/target-input.html
+++ b/demo/target-input.html
@@ -24,7 +24,9 @@
      var clipboard = new ClipboardJS('.btn');

      clipboard.on('success', function (e) {
-        console.log(e);
+        console.info('Action:', e.action);
+        console.info('Text:', e.text);
+        console.info('Trigger:', e.trigger);
      });

      clipboard.on('error', function (e) {
--- a/demo/target-textarea.html
+++ b/demo/target-textarea.html
@@ -24,11 +24,15 @@
      var clipboard = new ClipboardJS('.btn');

      clipboard.on('success', function (e) {
-        console.log(e);
+        console.info('Action:', e.action);
+        console.info('Text:', e.text);
+        console.info('Trigger:', e.trigger);
      });

      clipboard.on('error', function (e) {
-        console.log(e);
+        console.info('Action:', e.action);
+        console.info('Text:', e.text);
+        console.info('Trigger:', e.trigger);
      });
    </script>
  </body>
--- a/dist/clipboard.js
+++ b/dist/clipboard.js
@@ -1,5 +1,5 @@
 /*!
- * clipboard.js v2.0.9
+ * clipboard.js v2.0.11
 * https://clipboardjs.com/
 *
 * Licensed MIT © Zeno Rocha
@@ -94,6 +94,21 @@ function createFakeElement(value) {



+/**
+ * Create fake copy action wrapper using a fake element.
+ * @param {String} target
+ * @param {Object} options
+ * @return {String}
+ */
+
+var fakeCopyAction = function fakeCopyAction(value, options) {
+  var fakeElement = createFakeElement(value);
+  options.container.appendChild(fakeElement);
+  var selectedText = select_default()(fakeElement);
+  command('copy');
+  fakeElement.remove();
+  return selectedText;
+};
 /**
 * Copy action wrapper.
 * @param {String|HTMLElement} target
@@ -101,6 +116,7 @@ function createFakeElement(value) {
 * @return {String}
 */

+
 var ClipboardActionCopy = function ClipboardActionCopy(target) {
  var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {
    container: document.body
@@ -108,11 +124,10 @@ var ClipboardActionCopy = function ClipboardActionCopy(target) {
  var selectedText = '';

  if (typeof target === 'string') {
-    var fakeElement = createFakeElement(target);
-    options.container.appendChild(fakeElement);
-    selectedText = select_default()(fakeElement);
-    command('copy');
-    fakeElement.remove();
+    selectedText = fakeCopyAction(target, options);
+  } else if (target instanceof HTMLInputElement && !['text', 'search', 'url', 'tel', 'password'].includes(target === null || target === void 0 ? void 0 : target.type)) {
+    // If input type doesn't support `setSelectionRange`. Simulate it. https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/setSelectionRange
+    selectedText = fakeCopyAction(target.value, options);
  } else {
    selectedText = select_default()(target);
    command('copy');
@@ -287,23 +302,23 @@ var Clipboard = /*#__PURE__*/function (_Emitter) {
    key: "onClick",
    value: function onClick(e) {
      var trigger = e.delegateTarget || e.currentTarget;
-      var selectedText = actions_default({
-        action: this.action(trigger),
+      var action = this.action(trigger) || 'copy';
+      var text = actions_default({
+        action: action,
        container: this.container,
        target: this.target(trigger),
        text: this.text(trigger)
      }); // Fires an event based on the copy operation result.

-      this.emit(selectedText ? 'success' : 'error', {
-        action: this.action,
-        text: selectedText,
+      this.emit(text ? 'success' : 'error', {
+        action: action,
+        text: text,
        trigger: trigger,
        clearSelection: function clearSelection() {
          if (trigger) {
            trigger.focus();
          }

-          document.activeElement.blur();
          window.getSelection().removeAllRanges();
        }
      });
--- a/dist/clipboard.min.js
+++ b/dist/clipboard.min.js
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.js
+++ b/package.js
@@ -3,7 +3,7 @@
 Package.describe({
  name: 'zenorocha:clipboard',
  summary: 'Modern copy to clipboard. No Flash. Just 3kb.',
-  version: '2.0.9',
+  version: '2.0.11',
  git: 'https://github.com/zenorocha/clipboard.js',
 });

--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
  "name": "clipboard",
-  "version": "2.0.9",
+  "version": "2.0.11",
  "description": "Modern copy to clipboard. No Flash. Just 2kb",
  "homepage": "https://clipboardjs.com",
  "repository": "zenorocha/clipboard.js",
--- a/src/actions/copy.js
+++ b/src/actions/copy.js
@@ -2,6 +2,22 @@ import select from 'select';
 import command from '../common/command';
 import createFakeElement from '../common/create-fake-element';

+/**
+ * Create fake copy action wrapper using a fake element.
+ * @param {String} target
+ * @param {Object} options
+ * @return {String}
+ */
+const fakeCopyAction = (value, options) => {
+  const fakeElement = createFakeElement(value);
+  options.container.appendChild(fakeElement);
+  const selectedText = select(fakeElement);
+  command('copy');
+  fakeElement.remove();
+
+  return selectedText;
+};
+
 /**
 * Copy action wrapper.
 * @param {String|HTMLElement} target
@@ -14,11 +30,13 @@ const ClipboardActionCopy = (
 ) => {
  let selectedText = '';
  if (typeof target === 'string') {
-    const fakeElement = createFakeElement(target);
-    options.container.appendChild(fakeElement);
-    selectedText = select(fakeElement);
-    command('copy');
-    fakeElement.remove();
+    selectedText = fakeCopyAction(target, options);
+  } else if (
+    target instanceof HTMLInputElement &&
+    !['text', 'search', 'url', 'tel', 'password'].includes(target?.type)
+  ) {
+    // If input type doesn't support `setSelectionRange`. Simulate it. https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/setSelectionRange
+    selectedText = fakeCopyAction(target.value, options);
  } else {
    selectedText = select(target);
    command('copy');
--- a/src/clipboard.d.ts
+++ b/src/clipboard.d.ts
@@ -39,7 +39,7 @@ declare class ClipboardJS {
  /**
   * Fires a copy action
   */
-   static copy(target: string | Element, options: CopyActionOptions): string;
+  static copy(target: string | Element, options?: CopyActionOptions): string;

   /**
   * Fires a cut action
--- a/src/clipboard.js
+++ b/src/clipboard.js
@@ -69,23 +69,23 @@ class Clipboard extends Emitter {
   */
  onClick(e) {
    const trigger = e.delegateTarget || e.currentTarget;
-    const selectedText = ClipboardActionDefault({
-      action: this.action(trigger),
+    const action = this.action(trigger) || 'copy';
+    const text = ClipboardActionDefault({
+      action,
      container: this.container,
      target: this.target(trigger),
      text: this.text(trigger),
    });

    // Fires an event based on the copy operation result.
-    this.emit(selectedText ? 'success' : 'error', {
-      action: this.action,
-      text: selectedText,
+    this.emit(text ? 'success' : 'error', {
+      action,
+      text,
      trigger,
      clearSelection() {
        if (trigger) {
          trigger.focus();
        }
-        document.activeElement.blur();
        window.getSelection().removeAllRanges();
      },
    });
--- a/test/actions/copy.js
+++ b/test/actions/copy.js
@@ -51,5 +51,19 @@ describe('ClipboardActionCopy', () => {

      assert.equal(selectedText, text);
    });
+
+    it('should select its value in a input number based on text', () => {
+      const value = 1;
+      document.querySelector('#input').setAttribute('type', 'number');
+      document.querySelector('#input').setAttribute('value', value);
+      const selectedText = ClipboardActionCopy(
+        document.querySelector('#input'),
+        {
+          container: document.body,
+        }
+      );
+
+      assert.equal(Number(selectedText), value);
+    });
  });
 });
--- a/test/clipboard.js
+++ b/test/clipboard.js
@@ -158,6 +158,7 @@ describe('Clipboard', () => {

      clipboard.on('success', (e) => {
        assert.property(e, 'action');
+        assert.equal(e.action, 'copy');
        assert.property(e, 'text');
        assert.property(e, 'trigger');
        assert.property(e, 'clearSelection');
@@ -170,16 +171,16 @@ describe('Clipboard', () => {
  });

  describe('#clearSelection', () => {
-    it('should remove focus from target and text selection', (done) => {
+    it('should clear text selection without moving focus', (done) => {
      let clipboard = new Clipboard('.btn');

      clipboard.on('success', (e) => {
+        e.clearSelection();
+
        let selectedElem = document.activeElement;
        let selectedText = window.getSelection().toString();

-        e.clearSelection();
-
-        assert.equal(selectedElem, document.body);
+        assert.equal(selectedElem, e.trigger);
        assert.equal(selectedText, '');

        done();
Author	SHA1	Message	Date
Beto Muniz	2b2f9eef6f	2.0.11	2022-05-04 14:51:40 -03:00
Beto Muniz	21db7250ed	Support more HTML input types. Close #800 (#808 ) * Support more HTML input types. * Improve test description. Remove .only * Apply logic only when target is an input element	2022-05-04 14:47:44 -03:00
Patrick H. Lauke	08169bce8c	Fix #805 don't `blur()` the trigger after a clipboard action (#807 ) * Remove the `blur()` following a clipboard action It's pointless to set `focus()` on the trigger first, if in the next step you're just going to `blur()` the active element anyway. * Tweak test to not expect active element to be body Since it's now not `blur()`ing anymore * Fix test see https://github.com/zenorocha/clipboard.js/pull/807#discussion_r862080076	2022-05-04 14:45:44 -03:00
dependabot[bot]	c7c7fda422	chore(deps): bump ansi-regex from 3.0.0 to 3.0.1 (#806 ) Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>	2022-05-04 09:32:02 +01:00
Shabai Liu	9b0c87b184	Fix type for copy function (#795 ) Co-authored-by: Shabai Liu <shabai_liu@apple.com>	2022-04-28 17:15:48 -03:00
dependabot[bot]	98c96a1136	chore(deps): bump minimist from 1.2.5 to 1.2.6 (#803 ) Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>	2022-04-22 09:40:26 +01:00
dependabot[bot]	7bb4433be0	chore(deps-dev): bump karma from 6.3.14 to 6.3.16 (#799 )	2022-03-06 13:53:54 +00:00
dependabot[bot]	67067f316f	Bump pathval from 1.1.0 to 1.1.1 (#796 ) Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>	2022-02-18 16:08:43 +00:00
dependabot[bot]	2d11cf1a9d	Bump karma from 6.0.0 to 6.3.14 (#797 ) Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>	2022-02-18 16:08:32 +00:00
dependabot[bot]	88bb463cc5	Bump follow-redirects from 1.14.7 to 1.14.8 (#798 ) Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>	2022-02-18 16:08:20 +00:00
Beto Muniz	98d92f2a42	2.0.10	2022-02-02 12:21:27 -03:00
Beto Muniz	7d675f5fc1	Fix Event API. Update demos. Update tests (#793 )	2022-02-02 12:13:00 -03:00