chore: update emoji-picker-element, use declarative format (#1840)

This commit is contained in:
Nolan Lawson 2020-08-25 16:46:02 -07:00 committed by GitHub
parent 2812e4521e
commit 07deb122f3
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 27 additions and 24 deletions

View file

@ -62,7 +62,7 @@
"cross-env": "^7.0.2",
"css-dedoupe": "^0.1.1",
"css-loader": "^3.6.0",
"emoji-picker-element": "^1.0.3",
"emoji-picker-element": "^1.1.0",
"emoji-regex": "^9.0.0",
"emojibase-data": "^5.0.1",
"encoding": "^0.1.13",

View file

@ -5,7 +5,15 @@
shrinkWidthToFit={true}
background="var(--main-bg)"
>
<div class="emoji-container" ref:container ></div>
<div class="emoji-container">
<emoji-picker
ref:picker
data-source="/emoji-all-en.json"
class={darkMode ? 'dark' : 'light'}
on:emoji-click="onEmojiSelected(event)"
on:keydown="onPickerKeydown(event)"
></emoji-picker>
</div>
</ModalDialog>
<style>
:global(emoji-picker) {
@ -54,7 +62,7 @@
import { close } from '../helpers/closeDialog'
import { oncreate as onCreateDialog } from '../helpers/onCreateDialog'
import { isDarkTheme } from '../../../_utils/isDarkTheme'
import Picker from 'emoji-picker-element/picker'
import 'emoji-picker-element/picker'
import 'focus-visible'
import { registerShadowRoot, unregisterShadowRoot } from '../../../_thirdparty/a11y-dialog/a11y-dialog'
import { doubleRAF } from '../../../_utils/doubleRAF'
@ -97,23 +105,11 @@
export default {
async oncreate () {
onCreateDialog.call(this)
const { customEmoji, darkMode } = this.get()
const { customEmoji } = this.get()
const { enableGrayscale, isUserTouching } = this.store.get()
const picker = new Picker({
dataSource: '/emoji-all-en.json',
customEmoji
})
picker.classList.add(darkMode ? 'dark' : 'light')
picker.addEventListener('emoji-click', this.onEmojiSelected.bind(this))
// workaround for shortcuts -- see acceptShortcutEvent() in shortcuts.js
picker.addEventListener('keydown', event => {
if (event.key === 'Backspace' &&
picker.shadowRoot.activeElement &&
picker.shadowRoot.activeElement.tagName === 'INPUT') {
event.stopPropagation() // prevent our hotkeys from activating when pressing backspace in the input
}
})
// break into shadow DOM to fix grayscale in Welness grayscale mode
const { picker } = this.refs
picker.customEmoji = customEmoji
// break into shadow DOM to fix grayscale in Wellness grayscale mode
if (enableGrayscale) {
const style = document.createElement('style')
style.textContent = '.emoji { filter: grayscale(100%); }'
@ -124,7 +120,6 @@
if (process.env.LEGACY && !HTMLElement.prototype.attachShadow.toString().includes('[native code]')) {
applyShadowDomPolyfill(picker)
}
this.refs.container.appendChild(picker)
this.on('destroy', () => unregisterShadowRoot(picker.shadowRoot))
if (!isUserTouching) { // auto focus the input on desktop
doubleRAF(() => { // triple rAF because a11y tries to focus as well
@ -151,6 +146,14 @@
const { realm } = this.get()
insertEmoji(realm, event.detail.emoji)
this.close()
},
onPickerKeydown (event) {
// workaround for shortcuts -- see acceptShortcutEvent() in shortcuts.js
if (event.key === 'Backspace' &&
event.target.shadowRoot.activeElement &&
event.target.shadowRoot.activeElement.tagName === 'INPUT') {
event.stopPropagation() // prevent our hotkeys from activating when pressing backspace in the input
}
}
}
}

View file

@ -3693,10 +3693,10 @@ emittery@^0.4.1:
resolved "https://registry.yarnpkg.com/emittery/-/emittery-0.4.1.tgz#abe9d3297389ba424ac87e53d1c701962ce7433d"
integrity sha512-r4eRSeStEGf6M5SKdrQhhLK5bOwOBxQhIE3YSTnZE3GpKiLfnnhE+tPtrJE79+eDJgm39BM6LSoI8SCx4HbwlQ==
emoji-picker-element@^1.0.3:
version "1.0.3"
resolved "https://registry.yarnpkg.com/emoji-picker-element/-/emoji-picker-element-1.0.3.tgz#62f945c49fd9e79f5809ba7037cce413f55f712f"
integrity sha512-b/RyfC6sjaDulvDptCIgZYFA++utpdBLUh63D8x7smPV4eSYYA1o5rfrgjoy9GKITNDrCLm9Ugbqd8dLz7HcGg==
emoji-picker-element@^1.1.0:
version "1.1.0"
resolved "https://registry.yarnpkg.com/emoji-picker-element/-/emoji-picker-element-1.1.0.tgz#d07b7aaee15ba307d90cd13d5d97045a1650d808"
integrity sha512-0ledPSn6sKqEdHzEbrNIse3iMAlxWM4EO/ZZY5r51eetd1Sc+oDHfHP0UFt2XvmIHBYpTYShDEKsyahu/Nte1A==
emoji-regex@^7.0.1:
version "7.0.3"