123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778 |
- <div id="emoji-container">
- <select id="emoji-category" class="mojitab" >
- : for $categories.keys() -> $category {
- <option value="<: $category :>"><: $category :></option>
- : }
- </select>
- <div id="emojis">
- : for $categories.keys() -> $category {
- <span id="<: $category :>" class="mojipane" style="display:none">
- : for $categories[$category] -> $emoji {
- <span class="emoji"><: $emoji :></span>
- : }
- </span>
- : }
- </div>
- </div>
- <script>
- class TcmsEmojiPicker {
- constructor () {
- this.clearBinds();
- }
- binds = [];
- switchEmojiDropDown (e) {
- var panes = document.querySelectorAll('.mojipane');
- for (var pane of panes) {
- pane.style.display="none";
- }
- var theId = e.target.value;
- var el = document.getElementById(theId);
- if ( el === null ) {
- console.log('no such element '+el);
- return;
- }
- el.style.display = 'inline-block';
- }
- emitEmoji (e) {
- var emoji = e.target.innerText;
- // Emit the emoji to all the bound components.
- for (var bind of this.binds) {
- if (!bind) {
- continue;
- }
- bind.value = bind.value+emoji;
- }
- }
- addBinds (elements) {
- for (var element of elements) {
- this.binds.push(element);
- }
- }
- clearBinds () {
- this.binds = [];
- }
- };
- addEventListener("load", function () {
- window.emojiPicker = new TcmsEmojiPicker();
- var cat = document.getElementById('emoji-category');
- cat.addEventListener("change", function (e) { window.emojiPicker.switchEmojiDropDown(e) });
- const ev = new Event("change");
- cat.dispatchEvent(ev);
- // Setup the listeners on the emojis themselves
- var mojis = document.querySelectorAll('.emoji');
- for (emoji of mojis) {
- emoji.addEventListener("click", function (e) { window.emojiPicker.emitEmoji(e) } );
- }
- const emojiEvent = new Event("emojiComponentReady");
- window.dispatchEvent(emojiEvent);
- });
- </script>
|