devs
/
emoji-picker-element
mirror of https://github.com/nolanlawson/emoji-picker-element.git
4
0
Fork 0
Code Issues Projects Releases Wiki Activity

docs: smaller custom svg json file (#70)

This commit is contained in:
Nolan Lawson 2020-11-02 17:31:13 -08:00 committed by GitHub
parent 76472f4529
commit 253e982b73
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 36 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
bin/processCustomEmoji.js
View File

@ -154,9 +154,7 @@ async function main () {
const name = filename.replace('.svg', '')
const category = getCategory(name)
const res = {
name: name,
shortcodes: [name],
url: `./custom/${filename}`
name
}
if (category) {
res.category = category
@ -165,7 +163,14 @@ async function main () {
})
.filter(({ name }) => !remove(name))
await writeFile('./docs/custom.json', JSON.stringify(customEmojis), 'utf8')
// use a smaller JSON format to transfer over the wire
const categoriesToCustomEmoji = {}
for (const { name, category = '' } of customEmojis) {
categoriesToCustomEmoji[category] = categoriesToCustomEmoji[category] || []
categoriesToCustomEmoji[category].push(name)
}
await writeFile('./docs/custom.json', JSON.stringify(categoriesToCustomEmoji), 'utf8')
await Promise.all(customEmojis.map(async ({ name }) => {
const svg = await readFile(`./node_modules/flat-color-icons/svg/${name}.svg`, 'utf8')
const optimized = await svgo.optimize(svg)

2
docs/custom.json
View File

File diff suppressed because one or more lines are too long

32
docs/index.html
View File

@ -1,8 +1,8 @@
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="modulepreload" href="https://cdn.jsdelivr.net/npm/emoji-picker-element@1/picker.js">
<link rel="modulepreload" href="https://cdn.jsdelivr.net/npm/emoji-picker-element@1/database.js">
<link rel="modulepreload" href="https://cdn.jsdelivr.net/npm/emoji-picker-element@^1/picker.js">
<link rel="modulepreload" href="https://cdn.jsdelivr.net/npm/emoji-picker-element@^1/database.js">
<link rel="icon" href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.8em%22 font-size=%2280%22>😀</text></svg>">
<meta charset="UTF-8">
<title>emoji-picker-element</title>
@ -175,11 +175,12 @@
</div>
</main>
<script type="module">
import 'https://cdn.jsdelivr.net/npm/emoji-picker-element@1/picker.js'
import 'https://cdn.jsdelivr.net/npm/emoji-picker-element@1/database.js' // avoid extra round-trip
import 'https://cdn.jsdelivr.net/npm/emoji-picker-element@^1/picker.js'
import 'https://cdn.jsdelivr.net/npm/emoji-picker-element@^1/database.js' // avoid extra round-trip
const $ = document.querySelector.bind(document)
const $$ = _ => Array.from(document.querySelectorAll(_))
let customEmoji
// See https://stackoverflow.com/a/8533927
function supportsSelector (selector) {
@ -219,8 +220,26 @@
return true
}
async function loadCustomEmoji () {
if (customEmoji) {
return
}
const categoriesToCustomEmoji = (await (await fetch('./custom.json')).json())
customEmoji = []
for (const [ category, names ] of Object.entries(categoriesToCustomEmoji)) {
for (const name of names) {
customEmoji.push({
category: category || undefined,
name,
shortcodes: [name],
url: `./custom/${name}.svg`
})
}
}
}
const focusVisiblePolyfillPromise = !supportsSelector(':focus-visible') &&
import('https://cdn.jsdelivr.net/npm/focus-visible@5/dist/focus-visible.js')
import('https://cdn.jsdelivr.net/npm/focus-visible@^5/dist/focus-visible.js')
document.addEventListener('DOMContentLoaded', async () => {
const picker = $('emoji-picker')
@ -241,7 +260,8 @@
})
$('#custom').addEventListener('change', async e => {
if (e.target.checked) {
picker.customEmoji = await (await fetch('./custom.json')).json()
await loadCustomEmoji()
picker.customEmoji = customEmoji
} else {
picker.customEmoji = []
}