docs: move demos to this repo (#306)
This commit is contained in:
Nolan Lawson
GitHub
parent
e113939a92
commit
25f71d6fac
10
README.md
10
README.md
|
|
@ -128,11 +128,11 @@ This will log:
|
|||
### Examples
|
||||
|
||||
- [Demo](https://nolanlawson.github.io/emoji-picker-element) ([source](https://github.com/nolanlawson/emoji-picker-element/blob/master/docs/index.html))
|
||||
- [Button with tooltip/popover](https://bl.ocks.org/nolanlawson/raw/781e7084e4c17acb921357489d51a5b0/) ([source](https://bl.ocks.org/nolanlawson/781e7084e4c17acb921357489d51a5b0))
|
||||
- [Inserting emoji into a text input](https://bl.ocks.org/nolanlawson/raw/4f13bc639cdb3483efca8b657f30a1e0/) ([source](https://bl.ocks.org/nolanlawson/4f13bc639cdb3483efca8b657f30a1e0))
|
||||
- [In a React app](https://bl.ocks.org/nolanlawson/raw/fa60717eceb719b729e10d522c62c9ec/) ([source](https://bl.ocks.org/nolanlawson/fa60717eceb719b729e10d522c62c9ec))
|
||||
- [With Twemoji](https://bl.ocks.org/nolanlawson/raw/fead700a0325aabd92670d56d6d422d8) ([source](https://bl.ocks.org/nolanlawson/fead700a0325aabd92670d56d6d422d8)) (**Note:** has a performance cost. Use with care.)
|
||||
- [Fallback for missing flag emoji on Windows](https://bl.ocks.org/nolanlawson/raw/1c67a41fb24978bab93a44ed1d62fab2/) ([source](https://gist.github.com/nolanlawson/1c67a41fb24978bab93a44ed1d62fab2))
|
||||
- [Button with tooltip/popover](https://nolanlawson.github.io/emoji-picker-element/tooltip/index.html) ([source](https://github.com/nolanlawson/emoji-picker-element/blob/master/docs/tooltip/index.html))
|
||||
- [Inserting emoji into a text input](https://nolanlawson.github.io/emoji-picker-element/input/index.html) ([source](https://github.com/nolanlawson/emoji-picker-element/blob/master/docs/input/index.html))
|
||||
- [In a React app](https://nolanlawson.github.io/emoji-picker-element/react/index.html) ([source](https://github.com/nolanlawson/emoji-picker-element/blob/master/docs/react/index.html))
|
||||
- [With Twemoji](https://nolanlawson.github.io/emoji-picker-element/twemoji/index.html) ([source](https://github.com/nolanlawson/emoji-picker-element/blob/master/docs/twemoji/index.html)) (**Note:** has a performance cost. Use with care.)
|
||||
- [Fallback for missing flag emoji on Windows](https://nolanlawson.github.io/emoji-picker-element/flags/index.html) ([source](https://github.com/nolanlawson/emoji-picker-element/blob/master/docs/flags/index.html))
|
||||
|
||||
## Styling
|
||||
|
||||
|
|
|
|||
|
|
@ -0,0 +1,25 @@
|
|||
<!doctype html>
|
||||
<html lang=en>
|
||||
<head>
|
||||
<title>emoji-picker-element: Windows flag emoji fallback</title>
|
||||
</head>
|
||||
<body>
|
||||
<h1>emoji-picker-element: Windows flag emoji fallback</h1>
|
||||
<p>
|
||||
On Windows 10/11, country flag emoji are currently
|
||||
<a href="https://github.com/nolanlawson/emoji-picker-element/issues/269">not rendered as flags</a>.
|
||||
This demo shows how to use emoji-picker-element with
|
||||
<a href="https://github.com/talkjs/country-flag-emoji-polyfill">country-flag-emoji-polyfill</a>,
|
||||
which replaces the missing country flag emoji with
|
||||
Mozilla's <a href="https://github.com/mozilla/twemoji-colr">twemoji-colr</a> web font.
|
||||
</p>
|
||||
<emoji-picker></emoji-picker>
|
||||
<script type="module" src="https://cdn.jsdelivr.net/npm/emoji-picker-element@^1/index.js"></script>
|
||||
<script type="module">
|
||||
import { polyfillCountryFlagEmojis } from 'https://cdn.skypack.dev/country-flag-emoji-polyfill@v0.1.1'
|
||||
|
||||
// Use "Twemoji Mozilla" font-family name because emoji-picker-element places that first in the font-family list
|
||||
polyfillCountryFlagEmojis('Twemoji Mozilla')
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,32 @@
|
|||
<!doctype html>
|
||||
<html lang=en>
|
||||
<head>
|
||||
<title>emoji-picker element: inserting characters into text input</title>
|
||||
<style> label, div {
|
||||
padding: 10px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<h1>emoji-picker element: inserting characters into text input</h1>
|
||||
<div>
|
||||
This demo shows how to use emoji-picker-element to insert emoji into the current cursor position in a text input.
|
||||
It uses <a href="https://www.npmjs.com/package/insert-text-at-cursor" target="_blank">insert-text-at-cursor</a>
|
||||
for convenience.
|
||||
</div>
|
||||
<label>
|
||||
Type here:
|
||||
<input type=text placeholder="Type here">
|
||||
</label>
|
||||
<div>Choose an emoji:</div>
|
||||
<emoji-picker></emoji-picker>
|
||||
<script type="module">
|
||||
import 'https://cdn.jsdelivr.net/npm/emoji-picker-element@^1/index.js'
|
||||
import insertText from 'https://cdn.jsdelivr.net/npm/insert-text-at-cursor@0.3.0/index.js'
|
||||
|
||||
document.querySelector('emoji-picker').addEventListener('emoji-click', e => {
|
||||
insertText(document.querySelector('input'), e.detail.unicode)
|
||||
})
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,30 @@
|
|||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<title>emoji-picker-element React example</title>
|
||||
</head>
|
||||
<body>
|
||||
<div></div>
|
||||
<script type="module">
|
||||
import * as React from "https://cdn.skypack.dev/react@^17";
|
||||
import * as ReactDOM from "https://cdn.skypack.dev/react-dom@^17";
|
||||
import "https://cdn.skypack.dev/emoji-picker-element@^1";
|
||||
|
||||
const Picker = () => {
|
||||
const ref = React.useRef(null)
|
||||
|
||||
React.useEffect(() => {
|
||||
ref.current.addEventListener('emoji-click', event => {
|
||||
console.log('Emoji clicked!', event)
|
||||
})
|
||||
ref.current.skinToneEmoji = '👍'
|
||||
}, [])
|
||||
|
||||
return React.createElement('emoji-picker', { ref })
|
||||
}
|
||||
|
||||
ReactDOM.render(React.createElement(Picker), document.querySelector('div'))
|
||||
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,29 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>emoji-picker tooltip demo</title>
|
||||
<style>
|
||||
.tooltip:not(.shown) {
|
||||
display: none;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<button onclick="toggle()">Click me</button>
|
||||
<div class="tooltip" role="tooltip">
|
||||
<emoji-picker></emoji-picker>
|
||||
</div>
|
||||
<script src="https://unpkg.com/@popperjs/core@2"></script>
|
||||
<script type="module" src="https://unpkg.com/emoji-picker-element@1"></script>
|
||||
<script>
|
||||
const button = document.querySelector('button')
|
||||
const tooltip = document.querySelector('.tooltip')
|
||||
Popper.createPopper(button, tooltip)
|
||||
|
||||
function toggle() {
|
||||
tooltip.classList.toggle('shown')
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,44 @@
|
|||
<!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>
|
||||
Loading…
Reference in New Issue