• Edit
  • Download
    1. <!DOCTYPE html>
    2. <html class="zg-html">
    3.  
    4. <head>
    5.   <meta charset="utf-8">
    6.   <title>ZingGrid: Emojis</title>
    7.   <script nonce="undefined" src="https://cdn.jsdelivr.net/npm/emoji-mart@latest/dist/browser.js"></script>
    8.   <!-- Will not work until Emoji Column has been added to ZingGrid -->
    9.   <script nonce="undefined" src="https://cdn.zinggrid.com/zinggrid.min.js"></script>
    10.   <style>
    11.     .zg-body {
    12.       background: #e6e6e6;
    13.     }
    14.  
    15.     zing-grid[loading] {
    16.       height: nullpx;
    17.     }
    18.   </style>
    19. </head>
    20.  
    21. <body class="zg-body">
    22.   <zing-grid editor-controls layout-controls spellcheck="false" data='[
    23.         { "name": "Camdyn", "title": "DevRel", "icon": "🤠" }
    24.       ]'>
    25.     <zg-colgroup>
    26.       <zg-column index="name"></zg-column>
    27.       <zg-column index="title"></zg-column>
    28.       <zg-column index="icon" type="emoji" editor="emojiPicker"></zg-column>
    29.       <!-- type-emoji-shortcode="shortcodeConverter" -->
    30.     </zg-colgroup>
    31.   </zing-grid>
    32.   <script>
    33.     ZingGrid.setLicense(['26ccbfec16b8be9ee98c7d57bee6e498']); // References
    34.     let picker = null;
    35.     let oDOMInput = null;
    36.     let zgRef = document.querySelector('zing-grid');
    37.     const pickerOptions = {
    38.       onEmojiSelect: handleChange
    39.     };
    40.  
    41.     function handleChange(data) {
    42.       // Set editor value to picker value
    43.       let beforeInsert = oDOMInput.value.slice(0, oDOMInput.selectionStart);
    44.       let afterInsert = oDOMInput.value.slice(oDOMInput.selectionEnd);
    45.       oDOMInput.value = `${beforeInsert}${data.native}${afterInsert}`;
    46.     }
    47.     // Custom emoji picker
    48.     let editor = {
    49.       init($cell, editorField) {
    50.         // Create ZGEditorRow input field
    51.         oDOMInput = document.createElement('input');
    52.         oDOMInput.type = 'text';
    53.         oDOMInput.autoComplete = 'off';
    54.         oDOMInput.ariaInvalid = false;
    55.         editorField.appendChild(oDOMInput);
    56.         // Unable to get position of `editorField` w/o setTimeout
    57.         setTimeout(() => {
    58.           // Different styles applied depending on editor type
    59.           const editorType = zgRef.editor;
    60.           let styles = null;
    61.           if (editorType === 'inline') {
    62.             // Determine position of inline field and place under
    63.             const editorBCR = editorField.getBoundingClientRect();
    64.             styles = `position: fixed; z-index: 999; top:${editorBCR.top + 47}px; left:${editorBCR.left}px;`;
    65.           } else {
    66.             // Placed under model field
    67.             styles = `position: relative;`;
    68.           }
    69.           // Picker must be newly created every time else does not display all options after first edit
    70.           picker = new EmojiMart.Picker(pickerOptions);
    71.           // Styled to position under cell and make it placed outside and in front of grid
    72.           picker.setAttribute('style', styles);
    73.           // Placed in `editorField`, else navigating through picker submits editing changes
    74.           editorField.appendChild(picker);
    75.         }, 0);
    76.       },
    77.       onOpen($cell, editorField, mData) {
    78.         if (!mData) {
    79.           mData = editorField.value || '';
    80.         }
    81.         oDOMInput.value = String(mData);
    82.       },
    83.       onClose(editorField) {
    84.         // Destroy picker
    85.         editorField.removeChild(picker);
    86.         delete picker;
    87.         // Update editor value
    88.         return editorField.querySelector('input').value;
    89.       },
    90.     };
    91.     ZingGrid.registerEditor(editor, 'emojiPicker');
    92.   </script>
    93. </body>
    94.  
    95. </html>
    1. <!DOCTYPE html>
    2. <html class="zg-html">
    3.  
    4. <head>
    5.   <meta charset="utf-8">
    6.   <title>ZingGrid: Emojis</title>
    7.   <script src="https://cdn.jsdelivr.net/npm/emoji-mart@latest/dist/browser.js"></script>
    8.   <!-- Will not work until Emoji Column has been added to ZingGrid -->
    9.   <script src="https://cdn.zinggrid.com/zinggrid.min.js"></script>
    10. </head>
    11.  
    12. <body class="zg-body">
    13.   <zing-grid editor-controls layout-controls spellcheck="false" data='[
    14.         { "name": "Camdyn", "title": "DevRel", "icon": "🤠" }
    15.       ]'>
    16.     <zg-colgroup>
    17.       <zg-column index="name"></zg-column>
    18.       <zg-column index="title"></zg-column>
    19.       <zg-column index="icon" type="emoji" editor="emojiPicker"></zg-column>
    20.       <!-- type-emoji-shortcode="shortcodeConverter" -->
    21.     </zg-colgroup>
    22.   </zing-grid>
    23. </body>
    24.  
    25. </html>
    1. .zg-body {
    2.   background: #e6e6e6;
    3. }
    1. // References
    2. let picker = null;
    3. let oDOMInput = null;
    4. let zgRef = document.querySelector('zing-grid');
    5. const pickerOptions = {
    6.   onEmojiSelect: handleChange
    7. };
    8.  
    9. function handleChange(data) {
    10.   // Set editor value to picker value
    11.   let beforeInsert = oDOMInput.value.slice(0, oDOMInput.selectionStart);
    12.   let afterInsert = oDOMInput.value.slice(oDOMInput.selectionEnd);
    13.   oDOMInput.value = `${beforeInsert}${data.native}${afterInsert}`;
    14. }
    15. // Custom emoji picker
    16. let editor = {
    17.   init($cell, editorField) {
    18.     // Create ZGEditorRow input field
    19.     oDOMInput = document.createElement('input');
    20.     oDOMInput.type = 'text';
    21.     oDOMInput.autoComplete = 'off';
    22.     oDOMInput.ariaInvalid = false;
    23.     editorField.appendChild(oDOMInput);
    24.     // Unable to get position of `editorField` w/o setTimeout
    25.     setTimeout(() => {
    26.       // Different styles applied depending on editor type
    27.       const editorType = zgRef.editor;
    28.       let styles = null;
    29.       if (editorType === 'inline') {
    30.         // Determine position of inline field and place under
    31.         const editorBCR = editorField.getBoundingClientRect();
    32.         styles = `position: fixed; z-index: 999; top:${editorBCR.top + 47}px; left:${editorBCR.left}px;`;
    33.       } else {
    34.         // Placed under model field
    35.         styles = `position: relative;`;
    36.       }
    37.       // Picker must be newly created every time else does not display all options after first edit
    38.       picker = new EmojiMart.Picker(pickerOptions);
    39.       // Styled to position under cell and make it placed outside and in front of grid
    40.       picker.setAttribute('style', styles);
    41.       // Placed in `editorField`, else navigating through picker submits editing changes
    42.       editorField.appendChild(picker);
    43.     }, 0);
    44.   },
    45.   onOpen($cell, editorField, mData) {
    46.     if (!mData) {
    47.       mData = editorField.value || '';
    48.     }
    49.     oDOMInput.value = String(mData);
    50.   },
    51.   onClose(editorField) {
    52.     // Destroy picker
    53.     editorField.removeChild(picker);
    54.     delete picker;
    55.     // Update editor value
    56.     return editorField.querySelector('input').value;
    57.   },
    58. };
    59. ZingGrid.registerEditor(editor, 'emojiPicker');