feat: support direct use of the clipboard modifier

Introduced `data-clipboard-id` attribute instead of setting an elements `id`
jkusa · Nov 9, 2022 · 7e3f448 · 7e3f448
1 parent 3169422
commit 7e3f448
Show file tree

Hide file tree

Showing 5 changed files with 52 additions and 7 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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)}}