From 7e3f448bd1861f9a01b22622e022e646a3fd4449 Mon Sep 17 00:00:00 2001
From: jkusa <jkilroy@gmail.com>
Date: Fri, 4 Nov 2022 22:15:45 -0500
Subject: [PATCH] feat: support direct use of the clipboard modifier

Introduced `data-clipboard-id` attribute instead of setting an
elements `id`
---
 README.md                                 | 22 ++++++++++++++++++----
 addon-test-support/index.js               |  2 +-
 addon/components/copy-button.hbs          |  2 +-
 addon/modifiers/clipboard.js              | 10 +++++++++-
 tests/dummy/app/templates/application.hbs | 23 +++++++++++++++++++++++
 5 files changed, 52 insertions(+), 7 deletions(-)

diff --git a/README.md b/README.md
index 0f8dc27..df239dc 100644
--- a/README.md
+++ b/README.md
@@ -12,7 +12,7 @@ http://jkusa.github.io/ember-cli-clipboard
 
 ## Usage
 
-### Angle Bracket Invocation
+### CopyButton Component
 
 ```hbs
 <!-- Set text directly -->
@@ -48,7 +48,7 @@ http://jkusa.github.io/ember-cli-clipboard
 </CopyButton>
 ```
 
-### Arguments
+#### Arguments
 
 - `text` - string value or action that returns a string to be copied
 - `target` - selector string of element or action that returns an element from which to copy text
@@ -59,7 +59,7 @@ http://jkusa.github.io/ember-cli-clipboard
 
 Any HTML [button attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#Attributes) passed to the component will be "splatted" on the button element. The one exception to this is the `type` attribute due to this [issue](https://github.com/emberjs/ember.js/issues/18232) < Ember `3.25.x`.
 
-### Actions
+#### Actions
 
 The following clipboard.js custom events are sent as actions
 
@@ -68,7 +68,21 @@ The following clipboard.js custom events are sent as actions
 
 More information about the clipboard.js events can be found [here](https://github.com/zenorocha/clipboard.js/#events)
 
-## Template Helper
+### Clipboard Element Modifier
+
+Under the hood the `<CopyButton>` component is powered by a `{{clipboard}}` element modifier. This can be used directly as an alternative to the `<CopyButton>` component. It has the same argument contract as the `<CopyButton>` component except for the exclusion of the `buttonType` argument.
+
+```hbs
+<button
+  class='button is-outline'
+  type='button'
+  {{clipboard text='text to be copied' onSuccess=this.onSuccess}}
+>
+  Click To Copy
+</button>
+```
+
+### Template Helper
 
 The helper `is-clipboard-supported` can be used to check if [clipboard.js](http://zenorocha.github.io/clipboard.js/) is supported or not.
 
diff --git a/addon-test-support/index.js b/addon-test-support/index.js
index 159d4f1..908f3c5 100644
--- a/addon-test-support/index.js
+++ b/addon-test-support/index.js
@@ -47,7 +47,7 @@ export function _fireComponentAction(owner, selector, actionName) {
  */
 function _getComponentBySelector(owner, selector = '.copy-btn') {
   const renderTree = Ember._captureRenderTree(owner);
-  const guid = document.querySelector(selector).id;
+  const guid = document.querySelector(selector).dataset.clipboardId;
   return _findComponentInstance(renderTree[0], guid);
 }
 
diff --git a/addon/components/copy-button.hbs b/addon/components/copy-button.hbs
index 9bcda8d..bd78a30 100644
--- a/addon/components/copy-button.hbs
+++ b/addon/components/copy-button.hbs
@@ -1,7 +1,7 @@
 <button
   class='copy-btn'
   type={{this.buttonType}}
-  id={{this.guid}}
+  data-clipboard-id={{this.guid}}
   ...attributes
   {{clipboard
     text=this.text
diff --git a/addon/modifiers/clipboard.js b/addon/modifiers/clipboard.js
index 4951a95..84ba76b 100644
--- a/addon/modifiers/clipboard.js
+++ b/addon/modifiers/clipboard.js
@@ -2,6 +2,7 @@ import { modifier } from 'ember-modifier';
 import ClipboardJS from 'clipboard';
 import { isBlank } from '@ember/utils';
 import { capitalize } from '@ember/string';
+import { guidFor } from '@ember/object/internals';
 
 const CLIPBOARD_EVENTS = ['success', 'error'];
 
@@ -27,7 +28,14 @@ export default modifier(function clipboard(element, params, hash) {
     element.setAttribute('data-clipboard-target', target);
   }
 
-  const trigger = delegateClickEvent === false ? element : `#${element.id}`;
+  if (isBlank(element.dataset.clipboardId)) {
+    element.setAttribute('data-clipboard-id', guidFor(element));
+  }
+
+  const trigger =
+    delegateClickEvent === false
+      ? element
+      : `[data-clipboard-id=${element.dataset.clipboardId}]`;
 
   const clipboard = new ClipboardJS(trigger, {
     text: typeof text === 'function' ? text : undefined,
diff --git a/tests/dummy/app/templates/application.hbs b/tests/dummy/app/templates/application.hbs
index 080c001..6472924 100644
--- a/tests/dummy/app/templates/application.hbs
+++ b/tests/dummy/app/templates/application.hbs
@@ -123,6 +123,29 @@
 &lt;/CopyButton&gt;</CodeBlock>
   </DocSection>
 
+  <DocSection @title="Clipboard Element Modifier" as |showMessage|>
+    <button
+      class="application__copy-button"
+      type="button"
+      {{clipboard
+        text='element modifier'
+        onSuccess=(pipe (fn this.getSuccessMessage "copy") showMessage)
+      }}
+    >
+      Copy Text
+    </button>
+    {{! template-lint-disable block-indentation no-unbalanced-curlies}}
+    <CodeBlock>&lt;button
+ type="button"
+ \{{clipboard
+   text="clipboard modifier"
+   onSuccess=this.onSuccess
+ }}
+&gt;
+  Copy Text
+&lt;/button&gt;</CodeBlock>
+  </DocSection>
+
   <DocSection @title="Check If Clipboard Is Supported">
     <p class="application__supported-text">
       {{#if (is-clipboard-supported)}}