Merge pull request #13 from github/clipboard-copied-event

dgraham · web-flow · commit e160deb2559a · 2019-03-29T09:51:48.000-06:00
Dispatch clipboard-copy event
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-copy` event is dispatched from
+the `<clipboard-copy>` element:
 
 ```js
-document.addEventListener('copy', function(event) {
-  const button = document.activeElement
+document.addEventListener('clipboard-copy', 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-copy', 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,27 +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-copy', {bubbles: true}))
+  }
+
   if (text) {
-    copyText(button, text)
+    copyText(text).then(trigger)
   } else if (id) {
-    copyTarget(button, id)
+    const node = button.ownerDocument.getElementById(id)
+    if (node) copyTarget(node).then(trigger)
   }
 }
 
-function copyTarget(button: Element, id: string) {
-  const content = button.ownerDocument.getElementById(id)
-  if (!content) return
-
+function copyTarget(content: Element) {
   if (content instanceof HTMLInputElement || content instanceof HTMLTextAreaElement) {
     if (content.type === 'hidden') {
-      copyText(button, content.value)
+      return copyText(content.value)
     } else {
-      copyInput(button, content)
+      return copyInput(content)
     }
   } else if (content instanceof HTMLAnchorElement && content.hasAttribute('href')) {
-    copyText(button, content.href)
+    return copyText(content.href)
   } else {
-    copyNode(button, content)
+    return copyNode(content)
   }
 }
 
diff --git a/src/clipboard.js b/src/clipboard.js
@@ -10,12 +10,16 @@ function createNode(text: string): Element {
   return node
 }
 
-export function copyNode(button: Element, node: Element) {
-  if (writeAsync(button, node.textContent)) return
+export function copyNode(node: Element): Promise<void> {
+  if ('clipboard' in navigator) {
+    // eslint-disable-next-line flowtype/no-flow-fix-me-comments
+    // $FlowFixMe Clipboard is not defined in Flow yet.
+    return navigator.clipboard.writeText(node.textContent)
+  }
 
   const selection = getSelection()
   if (selection == null) {
-    return
+    return Promise.reject(new Error())
   }
 
   selection.removeAllRanges()
@@ -26,37 +30,40 @@ export function copyNode(button: Element, node: Element) {
 
   document.execCommand('copy')
   selection.removeAllRanges()
+  return Promise.resolve()
 }
 
-export function copyText(button: Element, text: string) {
-  if (writeAsync(button, text)) return
+export function copyText(text: string): Promise<void> {
+  if ('clipboard' in navigator) {
+    // eslint-disable-next-line flowtype/no-flow-fix-me-comments
+    // $FlowFixMe Clipboard is not defined in Flow yet.
+    return navigator.clipboard.writeText(text)
+  }
 
   const body = document.body
-  if (!body) return
+  if (!body) {
+    return Promise.reject(new Error())
+  }
 
   const node = createNode(text)
   body.appendChild(node)
-  copyNode(button, node)
+  copyNode(node)
   body.removeChild(node)
+  return Promise.resolve()
 }
 
-export function copyInput(button: Element, node: HTMLInputElement | HTMLTextAreaElement) {
-  if (writeAsync(button, node.value)) return
+export function copyInput(node: HTMLInputElement | HTMLTextAreaElement): Promise<void> {
+  if ('clipboard' in navigator) {
+    // eslint-disable-next-line flowtype/no-flow-fix-me-comments
+    // $FlowFixMe Clipboard is not defined in Flow yet.
+    return navigator.clipboard.writeText(node.value)
+  }
 
   node.select()
   document.execCommand('copy')
   const selection = getSelection()
   if (selection != null) {
     selection.removeAllRanges()
   }
-}
-
-function writeAsync(button: Element, text: string): boolean {
-  const clipboard = navigator.clipboard
-  if (!clipboard) return false
-
-  clipboard.writeText(text).then(function() {
-    button.dispatchEvent(new CustomEvent('copy', {bubbles: true}))
-  })
-  return true
+  return Promise.resolve()
 }
diff --git a/test/test.js b/test/test.js
@@ -65,7 +65,7 @@ describe('clipboard-copy element', function() {
       })
 
       whenCopied = new Promise(resolve => {
-        document.addEventListener('copy', () => resolve(copiedText), {once: true})
+        document.addEventListener('clipboard-copy', () => resolve(copiedText), {once: true})
       })
     })
 

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-copy', function() {`
`14`	`14`	`const notice = document.getElementById('notice')`
`15`	`15`	`notice.hidden = false`
`16`	`16`	`setTimeout(function() {`