410 lines
14 KiB
JavaScript
410 lines
14 KiB
JavaScript
/* Emoji Autocomplete - paste into Owncast Admin > Custom JavaScript */
|
|
(function () {
|
|
"use strict";
|
|
|
|
var MAX_ROWS = 3;
|
|
var ITEM_SIZE = 38; // px, matches CSS width/height of li
|
|
var ITEM_GAP = 3; // px, matches CSS gap
|
|
var POPUP_PADDING = 4; // px, matches CSS padding
|
|
var allEmojis = []; // {name, native?, url?, keywords?}
|
|
var autocompleteActive = false;
|
|
var autocompleteQuery = "";
|
|
var autocompleteIndex = 0;
|
|
var colonNode = null; // the Text node containing the ':'
|
|
var colonOffset = 0; // character offset of ':' within that node
|
|
var popupEl = null;
|
|
|
|
// ── Load emoji data ──────────────────────────────────────────────────
|
|
|
|
async function loadEmojis() {
|
|
var customList = [];
|
|
try {
|
|
var customResponse = await fetch("/api/emoji");
|
|
var custom = await customResponse.json();
|
|
customList = (custom || []).map(function (e) {
|
|
return { name: e.name, url: e.url };
|
|
});
|
|
} catch (ex) {
|
|
/* no custom emoji */
|
|
return;
|
|
}
|
|
|
|
try {
|
|
var cdnResponse = await fetch(
|
|
"https://cdn.jsdelivr.net/npm/@emoji-mart/data@1/sets/1/native.json",
|
|
);
|
|
var data = await cdnResponse.json();
|
|
|
|
var standardList = [];
|
|
var emojis = data.emojis || {};
|
|
Object.keys(emojis).forEach(function (key) {
|
|
var e = emojis[key];
|
|
var native = e.skins && e.skins[0] && e.skins[0].native;
|
|
if (native) {
|
|
standardList.push({
|
|
name: e.id || key,
|
|
native: native,
|
|
keywords: e.keywords || [],
|
|
});
|
|
}
|
|
});
|
|
|
|
// Read emoji-mart frequency data from localStorage
|
|
var freqMap = {};
|
|
try {
|
|
var stored = localStorage.getItem("emoji-mart.frequently");
|
|
if (stored) freqMap = JSON.parse(stored);
|
|
} catch (ex) {
|
|
/* ignore */
|
|
}
|
|
|
|
var merged = customList.concat(standardList);
|
|
merged.sort(function (a, b) {
|
|
var aCustom = a.url ? 0 : 1;
|
|
var bCustom = b.url ? 0 : 1;
|
|
if (aCustom !== bCustom) return aCustom - bCustom;
|
|
var fa = freqMap[a.name] || 0;
|
|
var fb = freqMap[b.name] || 0;
|
|
if (fb !== fa) return fb - fa;
|
|
return a.name.localeCompare(b.name);
|
|
});
|
|
allEmojis = merged;
|
|
} catch (ex) {
|
|
// If CDN fails, at least use custom emoji
|
|
allEmojis = customList;
|
|
}
|
|
}
|
|
|
|
// ── Filtering ────────────────────────────────────────────────────────
|
|
|
|
function matchesQuery(emoji, q) {
|
|
var lower = q.toLowerCase();
|
|
if (emoji.name.toLowerCase().startsWith(lower)) return true;
|
|
if (emoji.keywords) {
|
|
for (var i = 0; i < emoji.keywords.length; i++) {
|
|
if (emoji.keywords[i].toLowerCase().startsWith(lower))
|
|
return true;
|
|
}
|
|
}
|
|
return false;
|
|
}
|
|
|
|
function filterEmojis(query) {
|
|
if (!query) return allEmojis;
|
|
return allEmojis.filter(function (e) {
|
|
return matchesQuery(e, query);
|
|
});
|
|
}
|
|
|
|
// ── Popup rendering ─────────────────────────────────────────────────
|
|
|
|
function getOrCreatePopup() {
|
|
if (popupEl) return popupEl;
|
|
popupEl = document.createElement("ul");
|
|
popupEl.id = "emoji-autocomplete-popup";
|
|
return popupEl;
|
|
}
|
|
|
|
function getMaxVisible(container) {
|
|
var width = container.clientWidth;
|
|
var usable = width - POPUP_PADDING * 2;
|
|
var cols = Math.max(
|
|
1,
|
|
Math.floor((usable + ITEM_GAP) / (ITEM_SIZE + ITEM_GAP)),
|
|
);
|
|
return cols * MAX_ROWS;
|
|
}
|
|
|
|
function showPopup(filtered) {
|
|
var chatInput = document.getElementById("chat-input");
|
|
if (!chatInput) return;
|
|
|
|
var popup = getOrCreatePopup();
|
|
popup.innerHTML = "";
|
|
|
|
var count = Math.min(filtered.length, getMaxVisible(chatInput));
|
|
for (let i = 0; i < count; i++) {
|
|
var li = document.createElement("li");
|
|
li.setAttribute("title", ":" + filtered[i].name + ":");
|
|
if (i === autocompleteIndex) li.className = "selected";
|
|
|
|
if (filtered[i].native) {
|
|
li.textContent = filtered[i].native;
|
|
} else if (filtered[i].url) {
|
|
var img = document.createElement("img");
|
|
img.src = filtered[i].url;
|
|
img.alt = filtered[i].name;
|
|
img.className = "emoji";
|
|
li.appendChild(img);
|
|
}
|
|
|
|
li.addEventListener("mousedown", function (ev) {
|
|
ev.preventDefault();
|
|
insertEmoji(filtered[i]);
|
|
});
|
|
|
|
popup.appendChild(li);
|
|
}
|
|
|
|
if (!popup.parentNode) {
|
|
chatInput.insertBefore(popup, chatInput.firstChild);
|
|
}
|
|
|
|
// Scroll selected item into view
|
|
var selectedItem = popup.children[autocompleteIndex];
|
|
if (selectedItem) {
|
|
selectedItem.scrollIntoView({
|
|
inline: "nearest",
|
|
block: "nearest",
|
|
});
|
|
}
|
|
}
|
|
|
|
function hidePopup() {
|
|
autocompleteActive = false;
|
|
autocompleteQuery = "";
|
|
autocompleteIndex = 0;
|
|
colonNode = null;
|
|
colonOffset = 0;
|
|
if (popupEl && popupEl.parentNode) {
|
|
popupEl.parentNode.removeChild(popupEl);
|
|
}
|
|
}
|
|
|
|
// ── Emoji insertion ─────────────────────────────────────────────────
|
|
|
|
function insertNodeAndMoveCursor(range, node) {
|
|
var sel = window.getSelection();
|
|
range.insertNode(node);
|
|
sel.removeAllRanges();
|
|
var newRange = document.createRange();
|
|
newRange.setStartAfter(node);
|
|
newRange.collapse(true);
|
|
sel.addRange(newRange);
|
|
}
|
|
|
|
function insertEmoji(emoji) {
|
|
var sel = window.getSelection();
|
|
if (!sel || !colonNode) {
|
|
hidePopup();
|
|
return;
|
|
}
|
|
|
|
var range = document.createRange();
|
|
range.setStart(colonNode, colonOffset);
|
|
|
|
// End at current cursor position
|
|
var curRange = sel.getRangeAt(0);
|
|
range.setEnd(curRange.startContainer, curRange.startOffset);
|
|
range.deleteContents();
|
|
|
|
if (emoji.native) {
|
|
insertNodeAndMoveCursor(
|
|
range,
|
|
document.createTextNode(emoji.native),
|
|
);
|
|
} else if (emoji.url) {
|
|
var img = document.createElement("img");
|
|
img.src = emoji.url;
|
|
img.alt = ":" + emoji.name + ":";
|
|
img.title = ":" + emoji.name + ":";
|
|
img.className = "emoji";
|
|
insertNodeAndMoveCursor(range, img);
|
|
}
|
|
|
|
hidePopup();
|
|
}
|
|
|
|
// ── Colon detection ─────────────────────────────────────────────────
|
|
|
|
function detectAutocomplete() {
|
|
var sel = window.getSelection();
|
|
if (!sel || sel.rangeCount === 0) {
|
|
hidePopup();
|
|
return;
|
|
}
|
|
|
|
var range = sel.getRangeAt(0);
|
|
if (!range.collapsed) {
|
|
hidePopup();
|
|
return;
|
|
}
|
|
|
|
var container = range.startContainer;
|
|
var offset = range.startOffset;
|
|
if (container.nodeType !== Node.TEXT_NODE) {
|
|
hidePopup();
|
|
return;
|
|
}
|
|
|
|
var text = container.textContent || "";
|
|
var beforeCursor = text.slice(0, offset);
|
|
|
|
var colonIdx = beforeCursor.lastIndexOf(":");
|
|
if (colonIdx === -1) {
|
|
hidePopup();
|
|
return;
|
|
}
|
|
|
|
// Only trigger if ':' is at start, or preceded by whitespace / non-alnum
|
|
if (colonIdx > 0 && /[a-zA-Z0-9]/.test(beforeCursor[colonIdx - 1])) {
|
|
hidePopup();
|
|
return;
|
|
}
|
|
|
|
var query = beforeCursor.slice(colonIdx + 1);
|
|
if (/\s/.test(query)) {
|
|
hidePopup();
|
|
return;
|
|
}
|
|
|
|
colonNode = container;
|
|
colonOffset = colonIdx;
|
|
autocompleteQuery = query;
|
|
autocompleteIndex = 0;
|
|
autocompleteActive = true;
|
|
|
|
var filtered = filterEmojis(query);
|
|
if (filtered.length === 0) {
|
|
hidePopup();
|
|
return;
|
|
}
|
|
showPopup(filtered);
|
|
}
|
|
|
|
// ── Grid helpers ────────────────────────────────────────────────────
|
|
|
|
function getColumnsPerRow() {
|
|
if (!popupEl || !popupEl.children.length) return 1;
|
|
var firstTop = popupEl.children[0].getBoundingClientRect().top;
|
|
var cols = 0;
|
|
for (var i = 0; i < popupEl.children.length; i++) {
|
|
if (popupEl.children[i].getBoundingClientRect().top === firstTop) {
|
|
cols++;
|
|
} else {
|
|
break;
|
|
}
|
|
}
|
|
return cols || 1;
|
|
}
|
|
|
|
// ── Event listeners ─────────────────────────────────────────────────
|
|
|
|
function waitForChatInput() {
|
|
var input = document.getElementById("chat-input-content-editable");
|
|
if (input) {
|
|
attachListeners(input);
|
|
return;
|
|
}
|
|
// Poll until the chat input appears (it may load async)
|
|
var observer = new MutationObserver(function () {
|
|
var el = document.getElementById("chat-input-content-editable");
|
|
if (el) {
|
|
observer.disconnect();
|
|
attachListeners(el);
|
|
}
|
|
});
|
|
observer.observe(document.body, { childList: true, subtree: true });
|
|
}
|
|
|
|
function attachListeners(input) {
|
|
// Use capturing phase so we fire BEFORE React's delegated handlers
|
|
input.addEventListener("keydown", onKeyDown, true);
|
|
input.addEventListener("input", onInput, true);
|
|
|
|
// Also detect on selection changes (e.g., clicking after a colon)
|
|
document.addEventListener("selectionchange", function () {
|
|
if (document.activeElement === input) {
|
|
detectAutocomplete();
|
|
}
|
|
});
|
|
}
|
|
|
|
function onInput() {
|
|
detectAutocomplete();
|
|
}
|
|
|
|
function onKeyDown(e) {
|
|
if (!autocompleteActive) return; // let everything pass through to React
|
|
|
|
var filtered = filterEmojis(autocompleteQuery);
|
|
if (filtered.length === 0) {
|
|
hidePopup();
|
|
return;
|
|
}
|
|
|
|
switch (e.key) {
|
|
case "Enter":
|
|
e.preventDefault();
|
|
e.stopPropagation();
|
|
insertEmoji(filtered[autocompleteIndex] || filtered[0]);
|
|
return;
|
|
|
|
case "Tab":
|
|
e.preventDefault();
|
|
e.stopPropagation();
|
|
if (e.shiftKey) {
|
|
autocompleteIndex =
|
|
(autocompleteIndex - 1 + filtered.length) %
|
|
filtered.length;
|
|
} else {
|
|
autocompleteIndex =
|
|
(autocompleteIndex + 1) % filtered.length;
|
|
}
|
|
showPopup(filtered);
|
|
return;
|
|
|
|
case "ArrowRight":
|
|
e.preventDefault();
|
|
e.stopPropagation();
|
|
autocompleteIndex = Math.min(
|
|
autocompleteIndex + 1,
|
|
filtered.length - 1,
|
|
);
|
|
showPopup(filtered);
|
|
return;
|
|
|
|
case "ArrowLeft":
|
|
e.preventDefault();
|
|
e.stopPropagation();
|
|
autocompleteIndex = Math.max(autocompleteIndex - 1, 0);
|
|
showPopup(filtered);
|
|
return;
|
|
|
|
case "ArrowDown":
|
|
e.preventDefault();
|
|
e.stopPropagation();
|
|
var cols = getColumnsPerRow();
|
|
autocompleteIndex = Math.min(
|
|
autocompleteIndex + cols,
|
|
filtered.length - 1,
|
|
);
|
|
showPopup(filtered);
|
|
return;
|
|
|
|
case "ArrowUp":
|
|
e.preventDefault();
|
|
e.stopPropagation();
|
|
var colsUp = getColumnsPerRow();
|
|
autocompleteIndex = Math.max(autocompleteIndex - colsUp, 0);
|
|
showPopup(filtered);
|
|
return;
|
|
|
|
case "Escape":
|
|
e.preventDefault();
|
|
e.stopPropagation();
|
|
hidePopup();
|
|
return;
|
|
}
|
|
}
|
|
|
|
// ── Init ─────────────────────────────────────────────────────────────
|
|
|
|
loadEmojis();
|
|
if (document.readyState === "loading") {
|
|
document.addEventListener("DOMContentLoaded", waitForChatInput);
|
|
} else {
|
|
waitForChatInput();
|
|
}
|
|
})();
|