feature: x-clipboard directive

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)
+        })
     })
 }