How to add emojis to ayano's comment widget

I originally coded this for my main website, but have finally gotten around to writing a tutorial for how I inputed this, please note that adding emojis mean editing both the JS file and the CSS file.

1. in your form section of your js html, remove the submit button and add

<div class="c-fl">
<button id="c-emojiToggle" class="emoji-button" type="button">
emoji
</button>
    <input id="c_submitButton" name="c_submitButton" type="submit" value="${s_submitButtonLabel}" disabled>
</div>
    <div id="c-emojiMenu" class="emoji-menu">
    <img src="/assets/images/emoji/tomatojune.png" draggable="false" alt="june being hit with tomatoes" data-code=":tomatojune:">
    <img src="/assets/images/emoji/tadajune.png" draggable="false" alt="june going 'tada'" data-code=":tadajune:">
</div>

this code does multiple things:

• add a flexbox for the emoji button and submit button for some nice spacing (with c-fl div)
• add a button to open and close the emoji menu
• add an emoji menu div, which holds every image that is used for emojis

this example shows what my emoji section looks like, to add your emojis you need to:

• change the image url to fit your image, all my images are 80 x 80.
• add alt text, the description is not only accessible to those who use screen readers but helps you know at a glance what emoji is which
• add the data code! this is the most important step, as the process for rending the emoji is clicking on the emoji adds the code (eg :yaycat:) into your text box, and sending the comment will have it render back into an emoji. I recommend having these all be specific to the image and recognisable so when clicking an emoji you know from the code which it is instead of something like :emoji1:

2. still in your js file, add this snippet above 'getComments();':

///// ADDING EMOJIS ////

const emojiMap = {
    ":tomatojune:": { // :tomatojune: or things around : shuld be the same as the data-code you used previously
      src: "/assets/images/emoji/tomatojune.png", // link to your emoji
      alt: "june being hit with tomatoes" // alt text
    },
    ":tadajune:": { 
      src: "/assets/images/emoji/tadajune.png",
      alt: "june going 'tada'" 
    }
    // addd one version for each emoji
  };
  
  const emojiToggle   = document.getElementById("c-emojiToggle");
  const emojiMenu     = document.getElementById("c-emojiMenu");
  const commentInput  = document.getElementById("entry.123456789"); // NUMBERS ARE FROM YOUR const s_textId VALUE USE THOSE!;
  
  // opens emoji section
  emojiToggle.addEventListener("click", () => {
    emojiMenu.classList.toggle("open");
  });
  
  
  // inserts data-code from emoji into text area from whereever your cursor is
  emojiMenu.addEventListener("click", (e) => {
    if (e.target && e.target.tagName === "IMG") {
      const code = e.target.getAttribute("data-code");
      insertAtCursor(commentInput, code);
    }
  });
  
  function insertAtCursor(field, text) {
    field.focus();
    if (field.selectionStart || field.selectionStart === 0) {
      const startPos = field.selectionStart;
      const endPos = field.selectionEnd;
      field.value =
        field.value.substring(0, startPos) +
        text +
        field.value.substring(endPos);
      field.selectionStart = field.selectionEnd = startPos + text.length;
    } else {
      field.value += text;
    }
  }
  
  // replaces emoji inside the comments to the actual image
  function replaceEmojiCodesInElement(el) {
    let html = el.innerHTML;
    for (const code in emojiMap) {
      const { src, alt } = emojiMap[code]; // get both src + alt
  
      const regex = new RegExp(
        code.replace(/([.*+?^=!:${}()|\[\]\/\\])/g, "\\$1"),
        "g"
      );
  
      html = html.replace(
        regex,
        `<img src="${src}" draggable="false" alt="${alt}" class="emoji" width="35" height="35">`
      );
    }
    el.innerHTML = html;
  }  
  
  // finds new comments and add emojis if they have emoji
  function processNewComments() {
    document.querySelectorAll(".c-text:not([data-emoji-processed])").forEach((el) => {
      replaceEmojiCodesInElement(el);
      el.setAttribute("data-emoji-processed", "true");
    });
  }
  
  window.addEventListener("load", processNewComments);
  
  const observer = new MutationObserver(() => {
    processNewComments();
  });
  observer.observe(document.body, { childList: true, subtree: true });

in the above snippet, the most important sections that you need to change are

• adding your emojimap content, this is the same as all the emojis you added in the html section. these need to be the same and consistent (eg the same image, same alt text and same data-code). AND
• in the const commentInput change the number in "entry.123456789" to your s_textId value, so the actual comments work

now, move to your CSS file that you use for your guestbook, here is the css I have added

/* EMOJI PICKER */

/* adds space between emoji button and submit button */
.c-fl {
display: flex; 
justify-content: space-between;
margin-bottom:5px;
}

.emoji-button {
padding: 6px 10px;
font-size: 18px;
cursor: pointer;
}

.emoji-menu {
display: none;
background: inherit; /* change bg as needed */
border: 1px solid black; /* same as above */
padding: 6px; /* i just like padding it makes it look nice */
margin-top: 0;
z-index: 100;
}

.emoji-menu.open {
display: flex;
flex-wrap: wrap;
gap: 6px;
}

.emoji-menu img {
width: 50px;
height: 50px;
cursor: pointer;
transition: transform 0.25s;
}

.emoji-menu img:hover {
transform: scale(1.15);
}

.emoji {
vertical-align: middle;
margin: 0 2px;
width: 35px;
height: 35px;
display: inline-block;
}

these are used to style the emojis, the menu and make things organised.

• .emoji is for the emojis that are added in comments
• the emoji menu img section is for the size of the emojis in the menu

---

Go back?