Fire a custom clipboard-copied event

mislav · dgraham · commit f30e32c37f7f · 2019-03-28T09:50:33.000-06:00
This is more predictable than native `copy` event and guarantees that
the event will always be fired from the `&lt;clipboard-copy&gt;` element.
diff --git a/README.md b/README.md
@@ -52,18 +52,16 @@ import 'clipboard-copy-element'
 
 ## Events
 
-After copying to the clipboard, a [copy][] event is dispatched that can be
-used to notify the user with confirmation, like a tooltip or button highlight.
+After copying to the clipboard, a `clipboard-copied` event is dispatched from
+the `<clipboard-copy>` element:
 
 ```js
-document.addEventListener('copy', function(event) {
-  const button = document.activeElement
+document.addEventListener('clipboard-copied', function(event) {
+  const button = event.target
   button.classList.add('highlight')
 })
 ```
 
-[copy]: https://developer.mozilla.org/en-US/docs/Web/Events/copy
-
 ## Browser support
 
 Browsers without native [custom element support][support] require a [polyfill][].
diff --git a/examples/index.html b/examples/index.html
@@ -10,7 +10,7 @@
       }
     </style>
     <script>
-      document.addEventListener('copy', function() {
+      document.addEventListener('clipboard-copied', function() {
         const notice = document.getElementById('notice')
         notice.hidden = false
         setTimeout(function() {
diff --git a/src/clipboard-copy-element.js b/src/clipboard-copy-element.js
@@ -5,25 +5,30 @@ import {copyInput, copyNode, copyText} from './clipboard'
 function copy(button: HTMLElement) {
   const id = button.getAttribute('for')
   const text = button.getAttribute('value')
+
+  function trigger() {
+    button.dispatchEvent(new CustomEvent('clipboard-copied', {bubbles: true}))
+  }
+
   if (text) {
-    copyText(text)
+    copyText(text).then(trigger)
   } else if (id) {
     const node = button.ownerDocument.getElementById(id)
-    if (node) copyTarget(node)
+    if (node) copyTarget(node).then(trigger)
   }
 }
 
 function copyTarget(content: Element) {
   if (content instanceof HTMLInputElement || content instanceof HTMLTextAreaElement) {
     if (content.type === 'hidden') {
-      copyText(content.value)
+      return copyText(content.value)
     } else {
-      copyInput(content)
+      return copyInput(content)
     }
   } else if (content instanceof HTMLAnchorElement && content.hasAttribute('href')) {
     copyText(button, content.href)
   } else {
-    copyNode(content)
+    return copyNode(content)
   }
 }
 

Original file line number	Diff line number	Diff line change
`@@ -10,7 +10,7 @@`
`10`	`10`	`}`
`11`	`11`	`</style>`
`12`	`12`	`<script>`
`13`		`- document.addEventListener('copy', function() {`
	`13`	`+ document.addEventListener('clipboard-copied', function() {`
`14`	`14`	`const notice = document.getElementById('notice')`
`15`	`15`	`notice.hidden = false`
`16`	`16`	`setTimeout(function() {`