44 lines
1.5 KiB
HTML
44 lines
1.5 KiB
HTML
<!doctype html>
|
|
<html lang=en>
|
|
<head>
|
|
<title>emoji-picker-element: using Twemoji</title>
|
|
</head>
|
|
<body>
|
|
<h1>emoji-picker-element: using Twemoji</h1>
|
|
<p>
|
|
This demo shows how to use emoji-picker-element with Twemoji.
|
|
Note that this carries a performance cost because of 1) using MutationObserver to monitor for DOM changes, and 2) downloading Twemoji images.
|
|
Use this approach with care.
|
|
</p>
|
|
<emoji-picker></emoji-picker>
|
|
<script src="https://twemoji.maxcdn.com/v/14.0.0/twemoji.min.js" integrity="sha384-L1ViA0v9uyiBlZsOGT/z9RVgs+Gku2SDCuzaAoLco0hEgfYZYiztb+pRgWYHkDwb" crossorigin="anonymous"></script>
|
|
<script type="module" src="https://cdn.jsdelivr.net/npm/emoji-picker-element@^1/index.js"></script>
|
|
<script type="module">
|
|
const picker = document.querySelector('emoji-picker')
|
|
|
|
// Adjust twemoji styles
|
|
const style = document.createElement('style')
|
|
style.textContent = `.twemoji {
|
|
width: var(--emoji-size);
|
|
height: var(--emoji-size);
|
|
pointer-events: none;
|
|
}`
|
|
picker.shadowRoot.appendChild(style)
|
|
|
|
const observer = new MutationObserver(() => {
|
|
for (const emoji of picker.shadowRoot.querySelectorAll('.emoji')) {
|
|
// Avoid infinite loops of MutationObserver
|
|
if (!emoji.querySelector('.twemoji')) {
|
|
// Do not use default 'emoji' class name because it conflicts with emoji-picker-element's
|
|
twemoji.parse(emoji, { className: 'twemoji' })
|
|
}
|
|
}
|
|
})
|
|
observer.observe(picker.shadowRoot, {
|
|
subtree: true,
|
|
childList: true
|
|
})
|
|
|
|
</script>
|
|
</body>
|
|
</html> |