<!DOCTYPE html> <html class="zg-html"> <head> <meta charset="utf-8"> <title>ZingGrid: Emojis</title> <script nonce="undefined" src="https://cdn.jsdelivr.net/npm/emoji-mart@latest/dist/browser.js"></script> <!-- Will not work until Emoji Column has been added to ZingGrid --> <script nonce="undefined" src="https://cdn.zinggrid.com/zinggrid.min.js"></script> <style> .zg-body { background: #e6e6e6; } zing-grid[loading] { height: nullpx; } </style> </head> <body class="zg-body"> <zing-grid editor-controls layout-controls spellcheck="false" data='[ { "name": "Camdyn", "title": "DevRel", "icon": "🤠" } ]'> <zg-colgroup> <zg-column index="name"></zg-column> <zg-column index="title"></zg-column> <zg-column index="icon" type="emoji" editor="emojiPicker"></zg-column> <!-- type-emoji-shortcode="shortcodeConverter" --> </zg-colgroup> </zing-grid> <script> ZingGrid.setLicense(['26ccbfec16b8be9ee98c7d57bee6e498']); // References let picker = null; let oDOMInput = null; let zgRef = document.querySelector('zing-grid'); const pickerOptions = { onEmojiSelect: handleChange }; function handleChange(data) { // Set editor value to picker value let beforeInsert = oDOMInput.value.slice(0, oDOMInput.selectionStart); let afterInsert = oDOMInput.value.slice(oDOMInput.selectionEnd); oDOMInput.value = `${beforeInsert}${data.native}${afterInsert}`; } // Custom emoji picker let editor = { init($cell, editorField) { // Create ZGEditorRow input field oDOMInput = document.createElement('input'); oDOMInput.type = 'text'; oDOMInput.autoComplete = 'off'; oDOMInput.ariaInvalid = false; editorField.appendChild(oDOMInput); // Unable to get position of `editorField` w/o setTimeout setTimeout(() => { // Different styles applied depending on editor type const editorType = zgRef.editor; let styles = null; if (editorType === 'inline') { // Determine position of inline field and place under const editorBCR = editorField.getBoundingClientRect(); styles = `position: fixed; z-index: 999; top:${editorBCR.top + 47}px; left:${editorBCR.left}px;`; } else { // Placed under model field styles = `position: relative;`; } // Picker must be newly created every time else does not display all options after first edit picker = new EmojiMart.Picker(pickerOptions); // Styled to position under cell and make it placed outside and in front of grid picker.setAttribute('style', styles); // Placed in `editorField`, else navigating through picker submits editing changes editorField.appendChild(picker); }, 0); }, onOpen($cell, editorField, mData) { if (!mData) { mData = editorField.value || ''; } oDOMInput.value = String(mData); }, onClose(editorField) { // Destroy picker editorField.removeChild(picker); delete picker; // Update editor value return editorField.querySelector('input').value; }, }; ZingGrid.registerEditor(editor, 'emojiPicker'); </script> </body> </html>
<!DOCTYPE html> <html class="zg-html"> <head> <meta charset="utf-8"> <title>ZingGrid: Emojis</title> <script src="https://cdn.jsdelivr.net/npm/emoji-mart@latest/dist/browser.js"></script> <!-- Will not work until Emoji Column has been added to ZingGrid --> <script src="https://cdn.zinggrid.com/zinggrid.min.js"></script> </head> <body class="zg-body"> <zing-grid editor-controls layout-controls spellcheck="false" data='[ { "name": "Camdyn", "title": "DevRel", "icon": "🤠" } ]'> <zg-colgroup> <zg-column index="name"></zg-column> <zg-column index="title"></zg-column> <zg-column index="icon" type="emoji" editor="emojiPicker"></zg-column> <!-- type-emoji-shortcode="shortcodeConverter" --> </zg-colgroup> </zing-grid> </body> </html>
.zg-body { background: #e6e6e6; }
// References let picker = null; let oDOMInput = null; let zgRef = document.querySelector('zing-grid'); const pickerOptions = { onEmojiSelect: handleChange }; function handleChange(data) { // Set editor value to picker value let beforeInsert = oDOMInput.value.slice(0, oDOMInput.selectionStart); let afterInsert = oDOMInput.value.slice(oDOMInput.selectionEnd); oDOMInput.value = `${beforeInsert}${data.native}${afterInsert}`; } // Custom emoji picker let editor = { init($cell, editorField) { // Create ZGEditorRow input field oDOMInput = document.createElement('input'); oDOMInput.type = 'text'; oDOMInput.autoComplete = 'off'; oDOMInput.ariaInvalid = false; editorField.appendChild(oDOMInput); // Unable to get position of `editorField` w/o setTimeout setTimeout(() => { // Different styles applied depending on editor type const editorType = zgRef.editor; let styles = null; if (editorType === 'inline') { // Determine position of inline field and place under const editorBCR = editorField.getBoundingClientRect(); styles = `position: fixed; z-index: 999; top:${editorBCR.top + 47}px; left:${editorBCR.left}px;`; } else { // Placed under model field styles = `position: relative;`; } // Picker must be newly created every time else does not display all options after first edit picker = new EmojiMart.Picker(pickerOptions); // Styled to position under cell and make it placed outside and in front of grid picker.setAttribute('style', styles); // Placed in `editorField`, else navigating through picker submits editing changes editorField.appendChild(picker); }, 0); }, onOpen($cell, editorField, mData) { if (!mData) { mData = editorField.value || ''; } oDOMInput.value = String(mData); }, onClose(editorField) { // Destroy picker editorField.removeChild(picker); delete picker; // Update editor value return editorField.querySelector('input').value; }, }; ZingGrid.registerEditor(editor, 'emojiPicker');