• Edit
  • Download
  • <!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');