Merge pull request #25 from ryangjchandler/feature/x-clipboard

README.md

@@ -55,6 +55,28 @@ To copy some data to the clipboard, invoke `$clipboard` from an event handler in
 </div>
 ```
 
+### Directive
+
+This package also includes an `x-clipboard` directive that can be added to any element (usually a `button`) and it will copy the result of the expression on `click`.
+
+```html
+<div x-data="{ input: 'Foo!' }">
+    <button x-clipboard="input">
+        Copy to Clipboard
+    </button>
+</div>
+```
+
+If you are rendering on the server, you might prefer to copy raw content instead of evaluating the expression as JavaScript. This can be done by adding the `.raw` modifier to the directive.
+
+Here's a Blade snippet as an example:
+
+```blade
+<button x-clipboard.raw="{{ $post->url() }}">
+    Copy to Clipboard
+</button>
+```
+
 ### `Object` and `Array`
 
 Since you can pass any properties through to the `$clipboard` function, if you pass through an `Object` or `Array`, it will be run through `JSON.stringify` before being copied to the clipboard.

dist/alpine-clipboard.js

@@ -5,19 +5,37 @@
 
     let onCopy = () => {};
 
-    function Clipboard(Alpine) {
-      Alpine.magic('clipboard', () => {
-        return function (target) {
-          if (typeof target === 'function') {
-            target = target();
-          }
+    const copy = target => {
+      if (typeof target === 'function') {
+        target = target();
+      }
 
-          if (typeof target === 'object') {
-            target = JSON.stringify(target);
-          }
+      if (typeof target === 'object') {
+        target = JSON.stringify(target);
+      }
 
-          return window.navigator.clipboard.writeText(target).then(onCopy);
-        };
+      return window.navigator.clipboard.writeText(target).then(onCopy);
+    };
+
+    function Clipboard(Alpine) {
+      Alpine.magic('clipboard', () => {
+        return copy;
+      });
+      Alpine.directive('clipboard', (el, {
+        modifiers,
+        expression
+      }, {
+        evaluateLater,
+        cleanup
+      }) => {
+        const getCopyContent = modifiers.includes('raw') ? c => c(expression) : evaluateLater(expression);
+
+        const clickHandler = () => getCopyContent(copy);
+
+        el.addEventListener('click', clickHandler);
+        cleanup(() => {
+          el.removeEventListener('click', clickHandler);
+        });
       });
     }
 

examples/index.html

@@ -21,5 +21,13 @@
         <button type="button" @click="$clipboard(items)">Copy the JSON representation of `items` to your clipboard</button>
     </div>
 
+    <div x-data="{ text: 'boo' }">
+        <button x-clipboard="text">This uses clipboard directive to copy the text "boo" to your clipboard.</button>
+
+        <button x-clipboard.raw="Here is some raw text to copy to the clipboard.">
+            This will let you copy any raw text in the directive.
+        </button>
+    </div>
+
     <script src="../dist/alpine-clipboard.js"></script>
 </body>

src/index.js

@@ -1,19 +1,32 @@
 let onCopy = () => {}
 
+const copy = (target) => {
+    if (typeof target === 'function') {
+        target = target()
+    }
+
+    if (typeof target === 'object') {
+        target = JSON.stringify(target)
+    }
+
+    return window.navigator.clipboard.writeText(target)
+        .then(onCopy)
+}
+
 function Clipboard(Alpine) {
     Alpine.magic('clipboard', () => {
-        return function (target) {
-            if (typeof target === 'function') {
-                target = target()
-            }
-
-            if (typeof target === 'object') {
-                target = JSON.stringify(target)
-            }
-
-            return window.navigator.clipboard.writeText(target)
-                .then(onCopy)
-        }
+        return copy
+    })
+
+    Alpine.directive('clipboard', (el, { modifiers, expression }, { evaluateLater, cleanup }) => {
+        const getCopyContent = modifiers.includes('raw') ? c => c(expression) : evaluateLater(expression)
+        const clickHandler = () => getCopyContent(copy)
+
+        el.addEventListener('click', clickHandler)
+
+        cleanup(() => {
+            el.removeEventListener('click', clickHandler)
+        })
     })
 }