96 lines
2.3 KiB
HTML
96 lines
2.3 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<title>Ad-hoc emoji-picker-element test</title>
|
|
<meta name="viewport" content="width=device-width">
|
|
<style>
|
|
html {
|
|
font-family: sans-serif;
|
|
}
|
|
body {
|
|
margin: 0 auto;
|
|
max-width: 600px;
|
|
}
|
|
emoji-picker {
|
|
margin: 0 auto;
|
|
}
|
|
@media screen and (max-width: 320px) {
|
|
emoji-picker {
|
|
width: 100%;
|
|
--num-columns: 6;
|
|
--category-emoji-size: 1.125rem;
|
|
}
|
|
}
|
|
@media screen and (max-width: 240px) {
|
|
emoji-picker {
|
|
height: 80vh;
|
|
}
|
|
}
|
|
pre {
|
|
margin: 5px;
|
|
padding: 5px;
|
|
background: #333;
|
|
color: white;
|
|
position: fixed;
|
|
right: 0;
|
|
bottom: 0;
|
|
}
|
|
|
|
button.delete {
|
|
position: fixed;
|
|
left: 5px;
|
|
bottom: 5px;
|
|
padding: 5px;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<button class="delete">Delete database</button>
|
|
<script type="module">
|
|
import { Picker, Database } from '/index.js'
|
|
(async () => {
|
|
if (typeof PerformanceObserver !== 'undefined') {
|
|
const observer = new PerformanceObserver(entries => {
|
|
const entry = entries.getEntriesByName('initialLoad')[0]
|
|
if (entry) {
|
|
const pre = document.createElement('pre')
|
|
pre.classList.add('load-time')
|
|
pre.innerHTML = 'initialLoad: ' + entry.duration.toFixed(2) + 'ms'
|
|
document.body.appendChild(pre)
|
|
observer.disconnect()
|
|
}
|
|
})
|
|
observer.observe({
|
|
entryTypes: ['measure']
|
|
})
|
|
}
|
|
|
|
const opts = {
|
|
dataSource: '/node_modules/emoji-picker-element-data/en/emojibase/data.json'
|
|
}
|
|
|
|
document.querySelector('.delete').addEventListener('click', () => {
|
|
new Database(opts).delete()
|
|
})
|
|
|
|
const params = new URLSearchParams(location.search)
|
|
if (params.has('worker')) {
|
|
const worker = new Worker('/test/adhoc/worker.js', { type: 'module' })
|
|
await new Promise((resolve, reject) => {
|
|
worker.addEventListener('message', () => {
|
|
worker.terminate()
|
|
resolve()
|
|
})
|
|
worker.addEventListener('error', reject)
|
|
worker.postMessage('init')
|
|
})
|
|
}
|
|
const picker = new Picker(opts)
|
|
picker.addEventListener('emoji-click', e => console.log(e))
|
|
document.body.appendChild(picker)
|
|
})()
|
|
</script>
|
|
</body>
|
|
</html>
|