feat: add emoji-click event

README.md

@@ -27,10 +27,27 @@ Design goals:
 import 'emoji-picker-element';
 ```
 
-Or via [unpkg](https://unpkg.com):
+Then listen for `emoji-click` events:
 
 ```js
-import 'https://unpkg.com/emoji-picker-element'
+const element = document.querySelector('emoji-picker');
+element.addEventListener('emoji-click', event => console.log(event.detail))
+```
+
+This will log:
+
+```json
+{
+  "annotation": "grinning face",
+  "group": 0,
+  "order": 1,
+  "shortcodes": [ "gleeful" ],
+  "tags": [ "face", "grin" ],
+  "tokens": [ ":d", "face", "gleeful", "grin", "grinning" ],
+  "unicode": "😀",
+  "version": 1,
+  "emoticon": ":D"
+}
 ```
 
 ## API
@@ -60,13 +77,17 @@ picker.dataSource = '/my-emoji.json';
 
 #### i18n structure
 
-Note that some of these values are only visible to users of screen readers (but you should still support them if you internationalize your app!).
+The default English (`"en"`) `i81n` object:
 
 ```json
 {
+  "emojiUnsupported": "Your browser does not support color emoji.",
   "loading": "Loading…",
+  "networkError": "Could not load emoji. Try refreshing.",
   "regionLabel": "Emoji picker",
   "search": "Search",
+  "skinToneLabel": "Choose a skin tone",
+  "searchResultsLabel": "Search results",
   "categoriesLabel": "Categories",
   "categories": {
     "smileys-emotion": "Smileys and emoticons",
@@ -82,6 +103,9 @@ Note that some of these values are only visible to users of screen readers (but
 }
 ```
 
+Note that some of these values are only visible to users of screen readers. 
+But you should still support them if you internationalize your app!
+
 #### Styling
 
 `emoji-picker-element` uses Shadow DOM, so its inner styling is not accessible except via the API described below.

package.json

@@ -75,6 +75,7 @@
     "global": [
       "btoa",
       "crypto",
+      "CustomEvent",
       "fetch",
       "indexedDB",
       "IDBKeyRange",

src/picker/components/Picker/Picker.html

@@ -64,6 +64,7 @@
          aria-label={searchMode ? i18n.searchResultsLabel : i18n.categories[currentCategory.name]}
          id={searchMode ? '' : `tab-${currentCategory.group}`}
          tabindex="0"
+         on:click={onEmojiClick}
     >
         <div class="emoji-menu"
              role={searchMode ? 'listbox' : 'menu'}

src/picker/components/Picker/Picker.js

@@ -176,6 +176,24 @@ function onNavKeydown (event) {
   }
 }
 
+// eslint-disable-next-line no-unused-vars
+async function onEmojiClick (event) {
+  const { target } = event
+  if (!target.classList.contains('emoji')) {
+    return
+  }
+  event.preventDefault()
+  event.stopPropagation()
+  const unicode = target.id.substring(6) // remove 'emoji-'
+
+  const emojiData = currentEmojis.find(_ => _.unicode === unicode)
+  rootElement.dispatchEvent(new CustomEvent('emoji-click', {
+    detail: emojiData,
+    bubbles: true,
+    composed: true
+  }))
+}
+
 export {
   locale,
   dataSource,

test.html

@@ -12,6 +12,7 @@
 </div>
 <script type="module">
   import './index.js'
+  document.querySelector('emoji-picker').addEventListener('emoji-click', e => console.log(e))
 </script>
 </body>
 </html>