Merge pull request #19 from ryangjchandler/feature/on-copy-hook

feature: on copy hook

README.md

@@ -67,6 +67,20 @@ Since you can pass any properties through to the `$clipboard` function, if you p
 
 The clipboard will now contain `["foo","bar"]`.
 
+### Hooks
+
+If you are using the `npm` installation method for this package or the ESM distribution, you can use the `Clipboard.configure()` method to attach an `onCopy` hook to the clipboard.
+
+```js
+import Clipboard from '@ryangjchandler/alpine-clipboard'
+
+Alpine.plugin(Clipboard.configure({
+    onCopy: () => {
+        console.log('Copied!')
+    }
+}))
+```
+
 ## Versioning
 
 This projects follow the [Semantic Versioning](https://semver.org/) guidelines.

dist/alpine-clipboard.js

@@ -3,7 +3,9 @@
     factory();
 }((function () { 'use strict';
 
-    function clipboard (Alpine) {
+    let onCopy = () => {};
+
+    function Clipboard(Alpine) {
       Alpine.magic('clipboard', () => {
         return function (target) {
           if (typeof target === 'function') {
@@ -14,13 +16,21 @@
             target = JSON.stringify(target);
           }
 
-          return window.navigator.clipboard.writeText(target);
+          return window.navigator.clipboard.writeText(target).then(onCopy);
         };
       });
     }
 
+    Clipboard.configure = config => {
+      if (config.hasOwnProperty('onCopy') && typeof config.onCopy === 'function') {
+        onCopy = config.onCopy;
+      }
+
+      return Clipboard;
+    };
+
     document.addEventListener('alpine:initializing', () => {
-      clipboard(window.Alpine);
+      Clipboard(window.Alpine);
     });
 
 })));

dist/alpine-clipboard.js.map

@@ -1 +1 @@
-{"version":3,"file":"alpine-clipboard.js","sources":["../src/index.js","../builds/cdn.js"],"sourcesContent":["export default function (Alpine) {\n    Alpine.magic('clipboard', () => {\n        return function (target) {\n            if (typeof target === 'function') {\n                target = target()\n            }\n\n            if (typeof target === 'object') {\n                target = JSON.stringify(target)\n            }\n\n            return window.navigator.clipboard.writeText(target)\n        }\n    })\n}","import clipboard from '../src/index'\n\ndocument.addEventListener('alpine:initializing', () => {\n    clipboard(window.Alpine)\n})"],"names":["Alpine","magic","target","JSON","stringify","window","navigator","clipboard","writeText","document","addEventListener"],"mappings":";;;;;IAAe,oBAAUA,MAAV,EAAkB;IAC7BA,EAAAA,MAAM,CAACC,KAAP,CAAa,WAAb,EAA0B,MAAM;IAC5B,WAAO,UAAUC,MAAV,EAAkB;IACrB,UAAI,OAAOA,MAAP,KAAkB,UAAtB,EAAkC;IAC9BA,QAAAA,MAAM,GAAGA,MAAM,EAAf;IACH;;IAED,UAAI,OAAOA,MAAP,KAAkB,QAAtB,EAAgC;IAC5BA,QAAAA,MAAM,GAAGC,IAAI,CAACC,SAAL,CAAeF,MAAf,CAAT;IACH;;IAED,aAAOG,MAAM,CAACC,SAAP,CAAiBC,SAAjB,CAA2BC,SAA3B,CAAqCN,MAArC,CAAP;IACH,KAVD;IAWH,GAZD;IAaH;;ICZDO,QAAQ,CAACC,gBAAT,CAA0B,qBAA1B,EAAiD,MAAM;IACnDH,EAAAA,SAAS,CAACF,MAAM,CAACL,MAAR,CAAT;IACH,CAFD;;;;;;"}
+{"version":3,"file":"alpine-clipboard.js","sources":["../src/index.js","../builds/cdn.js"],"sourcesContent":["let onCopy = () => {}\n\nfunction Clipboard(Alpine) {\n    Alpine.magic('clipboard', () => {\n        return function (target) {\n            if (typeof target === 'function') {\n                target = target()\n            }\n\n            if (typeof target === 'object') {\n                target = JSON.stringify(target)\n            }\n\n            return window.navigator.clipboard.writeText(target)\n                .then(onCopy)\n        }\n    })\n}\n\nClipboard.configure = (config) => {\n    if (config.hasOwnProperty('onCopy') && typeof config.onCopy === 'function') {\n        onCopy = config.onCopy\n    }\n\n    return Clipboard\n}\n\nexport default Clipboard;","import clipboard from '../src/index'\n\ndocument.addEventListener('alpine:initializing', () => {\n    clipboard(window.Alpine)\n})"],"names":["onCopy","Clipboard","Alpine","magic","target","JSON","stringify","window","navigator","clipboard","writeText","then","configure","config","hasOwnProperty","document","addEventListener"],"mappings":";;;;;IAAA,IAAIA,MAAM,GAAG,MAAM,EAAnB;;IAEA,SAASC,SAAT,CAAmBC,MAAnB,EAA2B;IACvBA,EAAAA,MAAM,CAACC,KAAP,CAAa,WAAb,EAA0B,MAAM;IAC5B,WAAO,UAAUC,MAAV,EAAkB;IACrB,UAAI,OAAOA,MAAP,KAAkB,UAAtB,EAAkC;IAC9BA,QAAAA,MAAM,GAAGA,MAAM,EAAf;IACH;;IAED,UAAI,OAAOA,MAAP,KAAkB,QAAtB,EAAgC;IAC5BA,QAAAA,MAAM,GAAGC,IAAI,CAACC,SAAL,CAAeF,MAAf,CAAT;IACH;;IAED,aAAOG,MAAM,CAACC,SAAP,CAAiBC,SAAjB,CAA2BC,SAA3B,CAAqCN,MAArC,EACFO,IADE,CACGX,MADH,CAAP;IAEH,KAXD;IAYH,GAbD;IAcH;;IAEDC,SAAS,CAACW,SAAV,GAAuBC,MAAD,IAAY;IAC9B,MAAIA,MAAM,CAACC,cAAP,CAAsB,QAAtB,KAAmC,OAAOD,MAAM,CAACb,MAAd,KAAyB,UAAhE,EAA4E;IACxEA,IAAAA,MAAM,GAAGa,MAAM,CAACb,MAAhB;IACH;;IAED,SAAOC,SAAP;IACH,CAND;;ICjBAc,QAAQ,CAACC,gBAAT,CAA0B,qBAA1B,EAAiD,MAAM;IACnDP,EAAAA,SAAS,CAACF,MAAM,CAACL,MAAR,CAAT;IACH,CAFD;;;;;;"}

src/index.js

@@ -1,4 +1,6 @@
-export default function (Alpine) {
+let onCopy = () => {}
+
+function Clipboard(Alpine) {
     Alpine.magic('clipboard', () => {
         return function (target) {
             if (typeof target === 'function') {
@@ -10,6 +12,17 @@ export default function (Alpine) {
             }
 
             return window.navigator.clipboard.writeText(target)
+                .then(onCopy)
         }
     })
-}
+}
+
+Clipboard.configure = (config) => {
+    if (config.hasOwnProperty('onCopy') && typeof config.onCopy === 'function') {
+        onCopy = config.onCopy
+    }
+
+    return Clipboard
+}
+
+export default Clipboard;