mess around with emoji
This commit is contained in:
Nolan Lawson
parent
ed70196379
commit
b2d3c5cc38
|
|
@ -33,6 +33,7 @@
|
|||
"emojibase-data": "^5.0.1",
|
||||
"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",
|
||||
|
|
|
|||
|
|
@ -1,13 +1,16 @@
|
|||
import cjs from 'rollup-plugin-commonjs'
|
||||
import resolve from 'rollup-plugin-node-resolve'
|
||||
import json from 'rollup-plugin-json'
|
||||
import svelte from 'rollup-plugin-svelte'
|
||||
|
||||
const baseConfig = {
|
||||
plugins: [
|
||||
resolve(),
|
||||
cjs(),
|
||||
json(),
|
||||
svelte({
|
||||
customElement: true
|
||||
customElement: true,
|
||||
css: true
|
||||
})
|
||||
]
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,20 +1,51 @@
|
|||
<svelte:options tag={null} />
|
||||
<section
|
||||
class="lite-emoji-picker"
|
||||
aria-label={i18n.sectionLabel}>
|
||||
<div role="tablist" aria-label={i18n.categories}></div>
|
||||
aria-label={i18n.regionLabel}>
|
||||
<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]}
|
||||
</button>
|
||||
{/each}
|
||||
</div>
|
||||
<div>
|
||||
<input id="lite-emoji-picker-search" type="text">
|
||||
{#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>
|
||||
</section>
|
||||
<style>
|
||||
/* via https://stackoverflow.com/a/19758620 */
|
||||
.sr-only {
|
||||
position: absolute;
|
||||
width: 1px;
|
||||
height: 1px;
|
||||
padding: 0;
|
||||
margin: -1px;
|
||||
overflow: hidden;
|
||||
clip: rect(0, 0, 0, 0);
|
||||
border: 0;
|
||||
}
|
||||
</style>
|
||||
<script>
|
||||
export let i18n = {
|
||||
sectionLabel: 'Emoji picker',
|
||||
categories: 'Categories',
|
||||
search: 'Search emoji'
|
||||
}
|
||||
import * as i18n from './i18n/en.json'
|
||||
import { categories } from './categories'
|
||||
|
||||
export { categories, i18n }
|
||||
</script>
|
||||
|
|
@ -0,0 +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'
|
||||
]
|
||||
|
|
@ -0,0 +1,16 @@
|
|||
{
|
||||
"regionLabel": "Emoji picker",
|
||||
"search": "Search",
|
||||
"categoriesLabel": "Categories",
|
||||
"categories": {
|
||||
"smileys-emotion": "Smileys and emoticons",
|
||||
"people-body": "People and body",
|
||||
"animals-nature": "Animals and nature",
|
||||
"food-drink": "Food and drink",
|
||||
"travel-places": "Travel and places",
|
||||
"activities": "Activities",
|
||||
"objects": "Objects",
|
||||
"symbols": "Symbols",
|
||||
"flags": "Flags"
|
||||
}
|
||||
}
|
||||
|
|
@ -7,12 +7,16 @@
|
|||
<body>
|
||||
<h1>Ad-hoc test</h1>
|
||||
<script type="module">
|
||||
import * as liteEmojiPicker from '../pkg/dist-web/index.js'
|
||||
import * as liteEmojiPicker from '../dist/es/index.js'
|
||||
|
||||
(async () => {
|
||||
const emojiBaseData = await (await fetch('../node_modules/emojibase-data/en/compact.json')).json()
|
||||
await liteEmojiPicker.loadData(emojiBaseData)
|
||||
window.liteEmojiPicker = liteEmojiPicker
|
||||
|
||||
customElements.define('lite-emoji-picker', liteEmojiPicker.Picker)
|
||||
const picker = document.createElement('lite-emoji-picker')
|
||||
document.body.appendChild(picker)
|
||||
})()
|
||||
</script>
|
||||
</body>
|
||||
|
|
|
|||
|
|
@ -1296,6 +1296,13 @@ rollup-plugin-commonjs@^10.1.0:
|
|||
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"
|
||||
|
|
@ -1316,7 +1323,7 @@ rollup-plugin-svelte@^5.2.1:
|
|||
rollup-pluginutils "^2.8.2"
|
||||
sourcemap-codec "^1.4.8"
|
||||
|
||||
rollup-pluginutils@^2.8.1, rollup-pluginutils@^2.8.2:
|
||||
rollup-pluginutils@^2.5.0, rollup-pluginutils@^2.8.1, 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==
|
||||
|
|
|
|||
Loading…
Reference in New Issue