From 66bf3a7975cea907404515ac73d069bab6c0b4b5 Mon Sep 17 00:00:00 2001
From: Jon Kilroy <jkilroy@gmail.com>
Date: Mon, 31 Oct 2022 16:13:20 -0500
Subject: [PATCH] feat: support `target` to be set dynamically (#379)

---
 README.md                                     |  2 +-
 tests/dummy/app/controllers/application.js    |  5 +++++
 tests/dummy/app/templates/application.hbs     | 21 +++++++++++++++++++
 tests/fastboot/fastboot-test.js               |  2 +-
 .../components/copy-button-test.js            | 21 ++++++++++++++++++-
 5 files changed, 48 insertions(+), 3 deletions(-)

diff --git a/README.md b/README.md
index 90736b1..0f8dc27 100644
--- a/README.md
+++ b/README.md
@@ -51,7 +51,7 @@ http://jkusa.github.io/ember-cli-clipboard
 ### Arguments
 
 - `text` - string value or action that returns a string to be copied
-- `target` - selector string of element from which to copy text
+- `target` - selector string of element or action that returns an element from which to copy text
 - `action` - string value of operation: `copy` or `cut` (default is copy)
 - `container` - selector string or element object of containing element. "For use in Bootstrap Modals or with any other library that changes the focus you'll want to set the focused element as the container value".
 - `delegateClickEvent` - clipboard.js defaults event listeners to the body in order to reduce memory footprint if there are hundreds of event listeners on a page. If you want to scope the event listener to the copy button, set this property to `false`
diff --git a/tests/dummy/app/controllers/application.js b/tests/dummy/app/controllers/application.js
index 03daff5..b511bb5 100644
--- a/tests/dummy/app/controllers/application.js
+++ b/tests/dummy/app/controllers/application.js
@@ -8,6 +8,11 @@ export default class ApplicationController extends Controller {
     return uuidv1();
   }
 
+  @action
+  getTarget() {
+    return document.querySelector('#url-text');
+  }
+
   @action
   getSuccessMessage(type) {
     return {
diff --git a/tests/dummy/app/templates/application.hbs b/tests/dummy/app/templates/application.hbs
index 7e4ecaf..080c001 100644
--- a/tests/dummy/app/templates/application.hbs
+++ b/tests/dummy/app/templates/application.hbs
@@ -80,6 +80,27 @@
 &lt;/CopyButton&gt;</CodeBlock>
   </DocSection>
 
+  <DocSection @title="Get Text From Dynamic Target" as |showMessage|>
+    <input id="url-text" class="application__textfield" type="text" value="https://jkusa.github.io/ember-cli-clipboard">
+    <CopyButton
+      class="application__copy-button"
+      @target={{this.getTarget}}
+      @onSuccess={{pipe (fn this.getSuccessMessage "copy") showMessage}}
+      @onError={{pipe (fn this.getErrorMessage "copy") showMessage}}
+    >
+      Copy URL
+    </CopyButton>
+    {{! template-lint-disable block-indentation no-unbalanced-curlies}}
+    <CodeBlock>&lt;input id="url" type="text" value="https://jkusa.github.io/ember-cli-clipboard/"&gt;
+&lt;CopyButton
+ @target=\{{this.getTarget}}
+ @onSuccess=\{{this.onSuccess}}
+ @onError=\{{this.onError}}
+&gt;
+  Copy URL
+&lt;/CopyButton&gt;</CodeBlock>
+  </DocSection>
+
   <DocSection @title="Cut Text From Target Element" as |showMessage|>
     <textarea id="textarea" class="application__textfield" rows="3">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </textarea>
     <CopyButton
diff --git a/tests/fastboot/fastboot-test.js b/tests/fastboot/fastboot-test.js
index dfc19c9..80378e5 100644
--- a/tests/fastboot/fastboot-test.js
+++ b/tests/fastboot/fastboot-test.js
@@ -8,7 +8,7 @@ module('FastBoot | fastboot', function (hooks) {
     await visit('/');
     assert
       .dom('button.copy-btn')
-      .exists({ count: 4 }, '`<CopyButton>` renders in FastBoot');
+      .exists({ count: 5 }, '`<CopyButton>` renders in FastBoot');
     assert
       .dom('.application__supported-text')
       .hasText(
diff --git a/tests/integration/components/copy-button-test.js b/tests/integration/components/copy-button-test.js
index e8cfb75..db8a1c5 100644
--- a/tests/integration/components/copy-button-test.js
+++ b/tests/integration/components/copy-button-test.js
@@ -56,7 +56,7 @@ module('Integration | Component | copy button', function (hooks) {
   test('components renders text', async function (assert) {
     assert.expect(2);
 
-    await render(hbs`{{copy-button}}`);
+    await render(hbs`<CopyButton />`);
 
     assert.dom('*').hasText('', 'Component renders no text without block');
 
@@ -177,6 +177,25 @@ module('Integration | Component | copy button', function (hooks) {
       .doesNotHaveAttribute('disabled', 'disabled correctly bound to type');
   });
 
+  test('dynamic target', async function (assert) {
+    assert.expect(1);
+
+    this.getTarget = () => {
+      assert.ok(true);
+      return document.querySelector('#url-text');
+    };
+
+    await render(hbs`
+      <input id="url-text" type="text" value="https://github.com/jkusa/ember-cli-clipboard">
+      <CopyButton
+        @target={{this.getTarget}}
+      >
+        Click To Copy
+      </CopyButton>
+    `);
+    await click('.copy-btn');
+  });
+
   test('attributeBindings', async function (assert) {
     assert.expect(8);