more progress

This commit is contained in:
Nolan Lawson 2020-05-16 20:36:21 -07:00
parent 58e1667770
commit 6b8197b775
12 changed files with 234 additions and 82 deletions

View File

@ -0,0 +1,12 @@
import allEmoji from 'emojibase-data/en/data.json'
const versions = [...new Set(allEmoji.map(_ => _.version))].sort((a, b) => a < b ? -1 : 1)
export const versionsAndTestEmoji = versions.map(version => {
// find one good representative emoji to test. Ideally its should be one that's short
const emoji = allEmoji.find(_ => _.version === version).emoji
return {
emoji,
version
}
})

View File

@ -9,7 +9,8 @@
],
"sideEffects": false,
"scripts": {
"build": "rollup -c",
"build": "NODE_ENV=production rollup -c",
"dev": "NODE_ENV=development rollup -c -w",
"lint": "standard",
"lint:fix": "standard --fix",
"test": "echo \"Error: no test specified\" && exit 1"
@ -30,11 +31,14 @@
},
"homepage": "https://github.com/nolanlawson/lite-emoji-picker#readme",
"devDependencies": {
"@rollup/plugin-commonjs": "^11.1.0",
"@rollup/plugin-json": "^4.0.3",
"@rollup/plugin-node-resolve": "^7.1.3",
"@rollup/plugin-replace": "^2.3.2",
"emojibase-data": "^5.0.1",
"esm": "^3.2.25",
"if-emoji": "^0.1.0",
"rollup": "^2.8.2",
"rollup-plugin-commonjs": "^10.1.0",
"rollup-plugin-json": "^4.0.0",
"rollup-plugin-node-resolve": "^5.2.0",
"rollup-plugin-svelte": "^5.2.1",
"standard": "^14.3.3",
"svelte": "^3.22.2"

View File

@ -1,13 +1,18 @@
import cjs from 'rollup-plugin-commonjs'
import resolve from 'rollup-plugin-node-resolve'
import json from 'rollup-plugin-json'
import cjs from '@rollup/plugin-commonjs'
import resolve from '@rollup/plugin-node-resolve'
import json from '@rollup/plugin-json'
import replace from '@rollup/plugin-replace'
import svelte from 'rollup-plugin-svelte'
import { versionsAndTestEmoji } from './bin/versionsAndTestEmoji'
const baseConfig = {
plugins: [
resolve(),
cjs(),
json(),
replace({
'process.env.VERSIONS_AND_TEST_EMOJI': JSON.stringify(versionsAndTestEmoji)
}),
svelte({
customElement: true,
css: true

View File

@ -3,9 +3,7 @@ import { assertNonEmptyString } from './utils/assertNonEmptyString'
import { assertETag } from './utils/assertETag'
import { assertEmojiBaseData } from './utils/assertEmojiBaseData'
import { assertNumber } from './utils/assertNumber'
const DEFAULT_DATA_SOURCE = 'https://cdn.jsdelivr.net/npm/emojibase-data@5/en/compact.json'
const DEFAULT_LOCALE = 'en'
import { DEFAULT_DATA_SOURCE, DEFAULT_LOCALE } from './constants'
export class Database {
constructor ({ dataSource = DEFAULT_DATA_SOURCE, locale = DEFAULT_LOCALE } = {}) {

View File

@ -12,3 +12,6 @@ export const KEY_ETAG = 'eTag'
export const KEY_URL = 'url'
export const MODE_READONLY = 'readonly'
export const MODE_READWRITE = 'readwrite'
export const DEFAULT_DATA_SOURCE = 'https://cdn.jsdelivr.net/npm/emojibase-data@5/en/data.json'
export const DEFAULT_LOCALE = 'en'

View File

@ -1,5 +1,5 @@
export function transformEmojiBaseData (emojiBaseData) {
return emojiBaseData.map(({ annotation, emoticon, group, order, shortcodes, tags, unicode }) => {
return emojiBaseData.map(({ annotation, emoticon, group, order, shortcodes, tags, emoji, version }) => {
const tokens = [].concat(shortcodes).concat(tags).map(_ => _.toLowerCase())
const res = {
annotation,
@ -8,7 +8,8 @@ export function transformEmojiBaseData (emojiBaseData) {
shortcodes,
tags,
tokens,
unicode
unicode: emoji,
version
}
if (emoticon) {
res.emoticon = emoticon

View File

@ -1,5 +1,6 @@
export function assertEmojiBaseData (emojiBaseData) {
if (!emojiBaseData || !Array.isArray(emojiBaseData) || !emojiBaseData.length || !emojiBaseData[0].unicode) {
throw new Error('Expected emojibase data, but data is in wrong format')
if (!emojiBaseData || !Array.isArray(emojiBaseData) ||
!emojiBaseData.length || !emojiBaseData[0].emoji || !emojiBaseData[0].version) {
throw new Error('Expected emojibase full (not compact) data, but data is in wrong format')
}
}

View File

@ -1,38 +1,46 @@
<svelte:options tag={null} />
<section
class="lite-emoji-picker"
class="lep-picker"
aria-label={i18n.regionLabel}>
<div>
<input
id="lite-emoji-picker-search"
type="text"
placeholder={i18n.search}
autocapitalize="none"
spellcheck="true"
>
<label class="lep-sr-only" for="lite-emoji-picker-search">{i18n.search}</label>
</div>
<div role="tablist" aria-label={i18n.categoriesLabel}>
{#each categories as category, i}
<button role="tab" aria-controls="lite-emoji-picker-tab-{i}">
{i18n.categories[category]}
{#each categories as category (category.group)}
<button role="tab"
aria-controls="lite-emoji-picker-tab-{category.group}"
on:click={() => handleCategoryClick(category)}>
{i18n.categories[category.name]}
</button>
{/each}
</div>
<div>
{#each categories as category, i}
<div role="tabpanel" id="lite-emoji-picker-tab-{i}">
tab for {i18n.categories[category]}
</div>
{/each}
</div>
<div>
<input
id="lite-emoji-picker-search"
type="text"
placeholder={i18n.search}
autocapitalize="none"
spellcheck="true"
>
<label class="sr-only" for="lite-emoji-picker-search">{i18n.search}</label>
</div>
<div role="tabpanel" aria-label="Emoji">
<div role="tabpanel"
aria-label={i18n.categories[currentCategory.name]}
id="lite-emoji-picker-tab-{currentCategory.group}">
<ul class="lep-emoji-menu" role="menu">
{#each currentEmojis as emoji (emoji.unicode)}
<li class="lep-emoji-item" role="presentation">
<button role="menuitem" class="lep-emoji">
{emoji.unicode}
</button>
</li>
{/each}
</ul>
</div>
</section>
<style>
.lep-picker {
--lep-num-columns: 8;
}
/* via https://stackoverflow.com/a/19758620 */
.sr-only {
.lep-sr-only {
position: absolute;
width: 1px;
height: 1px;
@ -42,10 +50,68 @@
clip: rect(0, 0, 0, 0);
border: 0;
}
.lep-shown {
display: block;
}
.lep-not-shown {
display: none;
}
ul.lep-emoji-menu {
list-style: none;
display: grid;
grid-template-columns: repeat(var(--lep-num-columns), 1fr);
justify-content: center;
align-items: center;
}
li.lep-emoji-item {
display: flex;
}
button.lep-emoji {
font-size: 1.5rem;
border: none;
background: none;
box-shadow: none;
cursor: pointer;
flex: 1;
font-family: "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Twemoji Mozilla",
"Noto Color Emoji", "EmojiOne Color", "Android Emoji";
}
</style>
<script context="module">
import { determineEmojiSupportLevel } from './utils/determineEmojiSupportLevel'
export const emojiSupportLevel = determineEmojiSupportLevel()
console.log('emojiSupportLevel', emojiSupportLevel)
</script>
<script>
import * as i18n from './i18n/en.json'
import i18n from './i18n/en.json'
import { categories } from './categories'
import { DEFAULT_LOCALE, DEFAULT_DATA_SOURCE } from '../database/constants'
import { Database } from '../database/Database'
export { categories, i18n }
let currentEmojis = []
let locale = DEFAULT_LOCALE
let dataSource = DEFAULT_DATA_SOURCE
let currentCategory = categories[0]
$: database = new Database({ dataSource, locale })
$: {
getEmojisByGroup(currentCategory.group).then(emojis => {
currentEmojis = emojis
})
}
async function getEmojisByGroup(group) {
const emojis = await database.getEmojiByGroup(group)
return emojis.filter(emoji => emoji.version <= emojiSupportLevel)
}
function handleCategoryClick(category) {
currentCategory = category
}
export {
categories,
locale,
dataSource,
i18n
}
</script>

View File

@ -1,12 +1,12 @@
// via https://unpkg.com/browse/emojibase-data@5.0.1/meta/groups.json
export const categories = [
'smileys-emotion',
'people-body',
'animals-nature',
'food-drink',
'travel-places',
'activities',
'objects',
'symbols',
'flags'
{group: 0, name: 'smileys-emotion'},
{group: 1, name: 'people-body'},
{group: 3, name: 'animals-nature'},
{group: 4, name: 'food-drink'},
{group: 5, name: 'travel-places'},
{group: 6, name: 'activities'},
{group: 7, name: 'objects'},
{group: 8, name: 'symbols'},
{group: 9, name: 'flags'}
]

View File

@ -1,4 +1,5 @@
{
"loading": "Loading…",
"regionLabel": "Emoji picker",
"search": "Search",
"categoriesLabel": "Categories",

View File

@ -0,0 +1,17 @@
// rather than check every emoji ever, which would be expensive, just check some representatives from the
// different emoji releases to determine what the font supports
import isEmoji from 'if-emoji'
const versionsAndTestEmoji = process.env.VERSIONS_AND_TEST_EMOJI
export function determineEmojiSupportLevel () {
const versionsWithSupports = versionsAndTestEmoji.map(({ version, emoji }) => {
const supported = isEmoji(emoji)
return {
version,
supported
}
})
console.log("versionsWithSupports", versionsWithSupports)
return versionsWithSupports.filter(_ => _.supported).map(_ => _.version).sort((a, b) => a < b ? 1 : -1)[0]
}

110
yarn.lock
View File

@ -23,6 +23,54 @@
chalk "^2.0.0"
js-tokens "^4.0.0"
"@rollup/plugin-commonjs@^11.1.0":
version "11.1.0"
resolved "https://registry.yarnpkg.com/@rollup/plugin-commonjs/-/plugin-commonjs-11.1.0.tgz#60636c7a722f54b41e419e1709df05c7234557ef"
integrity sha512-Ycr12N3ZPN96Fw2STurD21jMqzKwL9QuFhms3SD7KKRK7oaXUsBU9Zt0jL/rOPHiPYisI21/rXGO3jr9BnLHUA==
dependencies:
"@rollup/pluginutils" "^3.0.8"
commondir "^1.0.1"
estree-walker "^1.0.1"
glob "^7.1.2"
is-reference "^1.1.2"
magic-string "^0.25.2"
resolve "^1.11.0"
"@rollup/plugin-json@^4.0.3":
version "4.0.3"
resolved "https://registry.yarnpkg.com/@rollup/plugin-json/-/plugin-json-4.0.3.tgz#747e2c2884c5a0fa00b66c9c0f3f1012cddca534"
integrity sha512-QMUT0HZNf4CX17LMdwaslzlYHUKTYGuuk34yYIgZrNdu+pMEfqMS55gck7HEeHBKXHM4cz5Dg1OVwythDdbbuQ==
dependencies:
"@rollup/pluginutils" "^3.0.8"
"@rollup/plugin-node-resolve@^7.1.3":
version "7.1.3"
resolved "https://registry.yarnpkg.com/@rollup/plugin-node-resolve/-/plugin-node-resolve-7.1.3.tgz#80de384edfbd7bfc9101164910f86078151a3eca"
integrity sha512-RxtSL3XmdTAE2byxekYLnx+98kEUOrPHF/KRVjLH+DEIHy6kjIw7YINQzn+NXiH/NTrQLAwYs0GWB+csWygA9Q==
dependencies:
"@rollup/pluginutils" "^3.0.8"
"@types/resolve" "0.0.8"
builtin-modules "^3.1.0"
is-module "^1.0.0"
resolve "^1.14.2"
"@rollup/plugin-replace@^2.3.2":
version "2.3.2"
resolved "https://registry.yarnpkg.com/@rollup/plugin-replace/-/plugin-replace-2.3.2.tgz#da4e0939047f793c2eb5eedfd6c271232d0a033f"
integrity sha512-KEEL7V2tMNOsbAoNMKg91l1sNXBDoiP31GFlqXVOuV5691VQKzKBh91+OKKOG4uQWYqcFskcjFyh1d5YnZd0Zw==
dependencies:
"@rollup/pluginutils" "^3.0.8"
magic-string "^0.25.5"
"@rollup/pluginutils@^3.0.8":
version "3.0.10"
resolved "https://registry.yarnpkg.com/@rollup/pluginutils/-/pluginutils-3.0.10.tgz#a659b9025920378494cd8f8c59fbf9b3a50d5f12"
integrity sha512-d44M7t+PjmMrASHbhgpSbVgtL6EFyX7J4mYxwQ/c5eoaE6N2VgCgEcWVzNnwycIloti+/MpwFr8qfw+nRw00sw==
dependencies:
"@types/estree" "0.0.39"
estree-walker "^1.0.1"
picomatch "^2.2.2"
"@types/color-name@^1.1.1":
version "1.1.1"
resolved "https://registry.yarnpkg.com/@types/color-name/-/color-name-1.1.1.tgz#1c1261bbeaa10a8055bbc5d8ab84b7b2afc846a0"
@ -199,6 +247,11 @@ color-name@~1.1.4:
resolved "https://registry.yarnpkg.com/color-name/-/color-name-1.1.4.tgz#c2a09a87acbde69543de6f63fa3995c826c536a2"
integrity sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==
commondir@^1.0.1:
version "1.0.1"
resolved "https://registry.yarnpkg.com/commondir/-/commondir-1.0.1.tgz#ddd800da0c66127393cca5950ea968a3aaf1253b"
integrity sha1-3dgA2gxmEnOTzKWVDqloo6rxJTs=
concat-map@0.0.1:
version "0.0.1"
resolved "https://registry.yarnpkg.com/concat-map/-/concat-map-0.0.1.tgz#d8a96bd77fd68df7793a73036a3ba0d5405d477b"
@ -489,6 +542,11 @@ eslint@~6.8.0:
text-table "^0.2.0"
v8-compile-cache "^2.0.3"
esm@^3.2.25:
version "3.2.25"
resolved "https://registry.yarnpkg.com/esm/-/esm-3.2.25.tgz#342c18c29d56157688ba5ce31f8431fbb795cc10"
integrity sha512-U1suiZ2oDVWv4zPO56S0NcR5QriEahGtdN2OR6FiOG4WJvcjBVFB0qI4+eKoWFH483PKGuLuu6V8Z4T5g63UVA==
espree@^6.1.2:
version "6.2.1"
resolved "https://registry.yarnpkg.com/espree/-/espree-6.2.1.tgz#77fc72e1fd744a2052c20f38a5b575832e82734a"
@ -532,6 +590,11 @@ estree-walker@^0.6.1:
resolved "https://registry.yarnpkg.com/estree-walker/-/estree-walker-0.6.1.tgz#53049143f40c6eb918b23671d1fe3219f3a1b362"
integrity sha512-SqmZANLWS0mnatqbSfRP5g8OXZC12Fgg1IwNtLsyHDzJizORW4khDfjPqJZsemPWBB2uqykUah5YpQ6epsqC/w==
estree-walker@^1.0.1:
version "1.0.1"
resolved "https://registry.yarnpkg.com/estree-walker/-/estree-walker-1.0.1.tgz#31bc5d612c96b704106b477e6dd5d8aa138cb700"
integrity sha512-1fMXF3YP4pZZVozF8j/ZLfvnR8NSIljt56UhbZ5PeeDmmGHpgpdwQt7ITlGvYaQukCvuBRMLEiKiYC+oeIg4cg==
esutils@^2.0.2:
version "2.0.3"
resolved "https://registry.yarnpkg.com/esutils/-/esutils-2.0.3.tgz#74d2eb4de0b8da1293711910d50775b9b710ef64"
@ -640,7 +703,7 @@ glob-parent@^5.0.0:
dependencies:
is-glob "^4.0.1"
glob@^7.0.5, glob@^7.1.3:
glob@^7.0.5, glob@^7.1.2, glob@^7.1.3:
version "7.1.6"
resolved "https://registry.yarnpkg.com/glob/-/glob-7.1.6.tgz#141f33b81a7c2492e125594307480c46679278a6"
integrity sha512-LwaxwyZ72Lk7vZINtNNrywX0ZuLyStrdDtabefZKAY5ZGJhVtgdznluResxNmPitE0SAO+O26sWTHeKSI2wMBA==
@ -698,6 +761,11 @@ iconv-lite@^0.4.24:
dependencies:
safer-buffer ">= 2.1.2 < 3"
if-emoji@^0.1.0:
version "0.1.0"
resolved "https://registry.yarnpkg.com/if-emoji/-/if-emoji-0.1.0.tgz#85e1b036c6425a30f249e9034ff4400ceaa33947"
integrity sha1-heGwNsZCWjDySekDT/RADOqjOUc=
ignore@^4.0.6:
version "4.0.6"
resolved "https://registry.yarnpkg.com/ignore/-/ignore-4.0.6.tgz#750e3db5862087b4737ebac8207ffd1ef27b25fc"
@ -924,7 +992,7 @@ loose-envify@^1.4.0:
dependencies:
js-tokens "^3.0.0 || ^4.0.0"
magic-string@^0.25.2:
magic-string@^0.25.2, magic-string@^0.25.5:
version "0.25.7"
resolved "https://registry.yarnpkg.com/magic-string/-/magic-string-0.25.7.tgz#3f497d6fd34c669c6798dcb821f2ef31f5445051"
integrity sha512-4CrMT5DOHTDk4HYDlzmwu4FVCcIYI8gauveasrdCu2IKIFOJ3f0v/8MDGJCDL9oD2ppz/Av1b0Nj345H9M+XIA==
@ -1163,6 +1231,11 @@ path-type@^2.0.0:
dependencies:
pify "^2.0.0"
picomatch@^2.2.2:
version "2.2.2"
resolved "https://registry.yarnpkg.com/picomatch/-/picomatch-2.2.2.tgz#21f333e9b6b8eaff02468f5146ea406d345f4dad"
integrity sha512-q0M/9eZHzmr0AulXyPwNfZjtwZ/RBZlbN3K3CErVrk50T2ASYI7Bye0EvekFY3IP1Nt2DHu0re+V2ZHIpMkuWg==
pify@^2.0.0:
version "2.3.0"
resolved "https://registry.yarnpkg.com/pify/-/pify-2.3.0.tgz#ed141a6ac043a849ea588498e7dca8b15330e90c"
@ -1263,7 +1336,7 @@ resolve-from@^4.0.0:
resolved "https://registry.yarnpkg.com/resolve-from/-/resolve-from-4.0.0.tgz#4abcd852ad32dd7baabfe9b40e00a36db5f392e6"
integrity sha512-pb/MYmXstAkysRFx8piNI1tGFNQIFA3vkE3Gq4EuA1dF6gHp/+vgZqsCGJapvy8N3Q+4o7FwvquPJcnZ7RYy4g==
resolve@^1.10.0, resolve@^1.10.1, resolve@^1.11.0, resolve@^1.11.1, resolve@^1.13.1:
resolve@^1.10.0, resolve@^1.10.1, resolve@^1.11.0, resolve@^1.13.1, resolve@^1.14.2:
version "1.17.0"
resolved "https://registry.yarnpkg.com/resolve/-/resolve-1.17.0.tgz#b25941b54968231cc2d1bb76a79cb7f2c0bf8444"
integrity sha512-ic+7JYiV8Vi2yzQGFWOkiZD5Z9z7O2Zhm9XMaTxdJExKasieFCr+yXZ/WmXsckHiKl12ar0y6XiXDx3m4RHn1w==
@ -1285,35 +1358,6 @@ rimraf@2.6.3:
dependencies:
glob "^7.1.3"
rollup-plugin-commonjs@^10.1.0:
version "10.1.0"
resolved "https://registry.yarnpkg.com/rollup-plugin-commonjs/-/rollup-plugin-commonjs-10.1.0.tgz#417af3b54503878e084d127adf4d1caf8beb86fb"
integrity sha512-jlXbjZSQg8EIeAAvepNwhJj++qJWNJw1Cl0YnOqKtP5Djx+fFGkp3WRh+W0ASCaFG5w1jhmzDxgu3SJuVxPF4Q==
dependencies:
estree-walker "^0.6.1"
is-reference "^1.1.2"
magic-string "^0.25.2"
resolve "^1.11.0"
rollup-pluginutils "^2.8.1"
rollup-plugin-json@^4.0.0:
version "4.0.0"
resolved "https://registry.yarnpkg.com/rollup-plugin-json/-/rollup-plugin-json-4.0.0.tgz#a18da0a4b30bf5ca1ee76ddb1422afbb84ae2b9e"
integrity sha512-hgb8N7Cgfw5SZAkb3jf0QXii6QX/FOkiIq2M7BAQIEydjHvTyxXHQiIzZaTFgx1GK0cRCHOCBHIyEkkLdWKxow==
dependencies:
rollup-pluginutils "^2.5.0"
rollup-plugin-node-resolve@^5.2.0:
version "5.2.0"
resolved "https://registry.yarnpkg.com/rollup-plugin-node-resolve/-/rollup-plugin-node-resolve-5.2.0.tgz#730f93d10ed202473b1fb54a5997a7db8c6d8523"
integrity sha512-jUlyaDXts7TW2CqQ4GaO5VJ4PwwaV8VUGA7+km3n6k6xtOEacf61u0VXwN80phY/evMcaS+9eIeJ9MOyDxt5Zw==
dependencies:
"@types/resolve" "0.0.8"
builtin-modules "^3.1.0"
is-module "^1.0.0"
resolve "^1.11.1"
rollup-pluginutils "^2.8.1"
rollup-plugin-svelte@^5.2.1:
version "5.2.1"
resolved "https://registry.yarnpkg.com/rollup-plugin-svelte/-/rollup-plugin-svelte-5.2.1.tgz#f9d362d1b1d8cef0fa3782f2270f9261b715644c"
@ -1323,7 +1367,7 @@ rollup-plugin-svelte@^5.2.1:
rollup-pluginutils "^2.8.2"
sourcemap-codec "^1.4.8"
rollup-pluginutils@^2.5.0, rollup-pluginutils@^2.8.1, rollup-pluginutils@^2.8.2:
rollup-pluginutils@^2.8.2:
version "2.8.2"
resolved "https://registry.yarnpkg.com/rollup-pluginutils/-/rollup-pluginutils-2.8.2.tgz#72f2af0748b592364dbd3389e600e5a9444a351e"
integrity sha512-EEp9NhnUkwY8aif6bxgovPHMoMoNr2FulJziTndpt5H9RdwC47GSGuII9XxpSdzVGM0GWrNPHV6ie1LTNJPaLQ==