Hugging Face's logo

Spaces:
build-small-hackathon
/
emoji_studio
Running

App Files Community
emoji_studio / script.js
Benat Froemming-Aldanondo
hide progress from js
84808dc
Raw
History Blame Contribute Delete
10.4 kB
if (window.__emojiStudioInit) return [];
window.__emojiStudioInit = true;
/* ── 1. Build the picker and attach it to <body> ── */
const picker = document.createElement('div');
picker.id = 'emoji-overlay-picker';
picker.innerHTML = `
 <div id="eop-header">
 <span>Your emojis</span>
 <button id="eop-close" title="Close">✕</button>
 </div>
 <div id="eop-grid"></div>
 <div id="eop-empty">No emojis yet, ask me to make one!</div>
`;
document.body.appendChild(picker);
/* Tooltip element — also on body, fixed */
const tooltip = document.createElement('div');
tooltip.className = 'eop-tip';
document.body.appendChild(tooltip);
/* ── 2. Helpers ── */
window.__eopOpen = false;
function openPicker() {
 const btn = document.getElementById('emoji-pick-btn');
 if (!btn) return;
 const r = btn.getBoundingClientRect();
 const pickerW = 280;
 let left = r.right - pickerW;
 if (left < 8) left = 8;
 const bottom = window.innerHeight - r.top + 8;
 picker.style.left = left + 'px';
 picker.style.bottom = bottom + 'px';
 picker.style.top = 'auto';
 picker.classList.add('eop-open');
 window.__eopOpen = true;
}
function closePicker() {
 picker.classList.remove('eop-open');
 window.__eopOpen = false;
 tooltip.style.display = 'none';
}
window.__syncComposer = function() {
 const composer = document.getElementById('composer');
 const ta = document.querySelector('#hidden-txt textarea, #hidden-txt input');
 if (!composer || !ta) return;
 let value = '';
 composer.childNodes.forEach(node => {
 if (node.nodeType === Node.TEXT_NODE) {
 value += node.textContent;
 } else if (node.tagName === 'IMG') {
 value += '<emoji>' + (node.dataset.emojiName || '') + '</emoji>';
 } else {
 value += node.textContent || '';
 }
 });
 ta.value = value;
 ta.dispatchEvent(new Event('input', { bubbles: true }));
};
function insertEmoji(name, src) {
 const composer = document.getElementById('composer');
 if (!composer) return;
 composer.focus();
 const img = document.createElement('img');
 img.src = src;
 img.alt = '<emoji>' + name + '</emoji>';
 img.className = 'ei';
 img.dataset.emojiName = name;
 img.draggable = false;
 const sel = window.getSelection();
 if (sel && sel.rangeCount) {
 const range = sel.getRangeAt(0);
 if (composer.contains(range.commonAncestorContainer)) {
 range.deleteContents();
 range.insertNode(img);
 range.setStartAfter(img);
 range.collapse(true);
 sel.removeAllRanges();
 sel.addRange(range);
 closePicker();
 window.__syncComposer();
 return;
 }
 }
 composer.appendChild(img);
 closePicker();
 window.__syncComposer();
}
/* ── 3. Render picker grid from inventory ── */
window.__renderEmojiPicker = function(inventory) {
 const grid = document.getElementById('eop-grid');
 const empty = document.getElementById('eop-empty');
 if (!grid || !empty) return;
 grid.innerHTML = '';
 const items = (inventory || []).filter(it => it.name && it.image_b64);
 if (items.length === 0) {
 grid.style.display = 'none';
 empty.style.display = 'block';
 } else {
 grid.style.display = 'grid';
 empty.style.display = 'none';
 items.forEach(it => {
 const btn = document.createElement('button');
 btn.className = 'eop-btn';
 btn.type = 'button';
 const img = document.createElement('img');
 img.src = 'data:image/png;base64,' + it.image_b64;
 img.alt = it.name;
 btn.appendChild(img);
 const label = it.name.slice(0, 28);
 btn.addEventListener('mouseenter', e => {
 tooltip.textContent = label;
 tooltip.style.display = 'block';
 const br = btn.getBoundingClientRect();
 tooltip.style.left = (br.left + br.width / 2 - tooltip.offsetWidth / 2) + 'px';
 tooltip.style.top = (br.top - tooltip.offsetHeight - 6) + 'px';
 });
 btn.addEventListener('mouseleave', () => { tooltip.style.display = 'none'; });
 btn.addEventListener('click', e => {
 e.stopPropagation();
 tooltip.style.display = 'none';
 insertEmoji(it.name, img.src);
 });
 grid.appendChild(btn);
 });
 }
};
/* ── 4. Wire the toggle button (poll until it exists) ── */
function wireToggleBtn() {
 const btn = document.getElementById('emoji-pick-btn');
 if (!btn) { setTimeout(wireToggleBtn, 200); return; }
/* Fix icon centering: the button itself and its Gradio wrapper div */
 btn.style.display = 'flex';
 btn.style.alignItems = 'center';
 btn.style.justifyContent = 'center';
 btn.style.lineHeight = '1';
 if (btn.parentElement) {
 btn.parentElement.style.display = 'flex';
 btn.parentElement.style.alignItems = 'center';
 btn.parentElement.style.justifyContent = 'center';
 btn.parentElement.style.padding = '0';
 }
btn.addEventListener('click', e => {
 e.stopPropagation();
 if (window.__eopOpen) { closePicker(); } else { openPicker(); }
 });
}
wireToggleBtn();
/* 4b. Watch picker-sync container for inventory updates */
function watchPickerSync() {
 const container = document.getElementById('picker-sync');
 if (!container) { setTimeout(watchPickerSync, 200); return; }
 function apply() {
 const target = container.querySelector('#picker-sync-data');
 if (!target) return;
 try {
 const raw = target.getAttribute('data-inv').replace(/&quot;/g, '"');
 const inv = JSON.parse(raw);
 if (window.__renderEmojiPicker) window.__renderEmojiPicker(inv);
 } catch(e) { console.error('picker sync parse error', e); }
 }
 const observer = new MutationObserver(apply);
 observer.observe(container, { childList: true, subtree: true });
 apply();
}
watchPickerSync();
function findDirectChild(el, ancestor) {
 while (el && el.parentElement !== ancestor) {
 el = el.parentElement;
 }
 return el;
}
function fixTopRowLayout() {
 const composer = document.getElementById('composer');
 const emojiBtn = document.getElementById('emoji-pick-btn');
 const topRow = document.getElementById('top-row');
 if (!composer || !emojiBtn || !topRow) { setTimeout(fixTopRowLayout, 200); return; }
const composerWrap = findDirectChild(composer, topRow);
 const emojiWrap = findDirectChild(emojiBtn, topRow);
if (composerWrap) {
 composerWrap.style.flex = '1 1 auto';
 composerWrap.style.width = 'auto';
 composerWrap.style.minWidth = '0';
 }
 if (emojiWrap) {
 emojiWrap.style.flex = '0 0 44px';
 emojiWrap.style.width = '44px';
 emojiWrap.style.display = 'flex';
 emojiWrap.style.alignItems = 'center';
 emojiWrap.style.justifyContent = 'center';
 emojiWrap.style.margin = '0';
 emojiWrap.style.padding = '0';
 }
}
fixTopRowLayout();
/* ── 5. Close picker on outside click ── */
document.addEventListener('click', e => {
 if (!window.__eopOpen) return;
 const btn = document.getElementById('emoji-pick-btn');
 if (picker.contains(e.target)) return;
 if (btn && btn.contains(e.target)) return;
 closePicker();
}, true);
/* ── 6. Close picker button ── */
document.addEventListener('click', e => {
 if (e.target && e.target.id === 'eop-close') closePicker();
});
/* ── 7. Composer: sync on input, Enter to send ── */
function wireComposer() {
 const composer = document.getElementById('composer');
 if (!composer) { setTimeout(wireComposer, 200); return; }
 composer.addEventListener('input', window.__syncComposer);
 composer.addEventListener('keydown', e => {
 if (e.key === 'Enter' && !e.shiftKey) {
 e.preventDefault();
 window.__syncComposer();
 const send = document.getElementById('send-btn');
 if (send) {
 send.click();
 setTimeout(() => {
 composer.innerHTML = '';
 window.__syncComposer();
 }, 60);
 }
 }
 });
 composer.addEventListener('paste', e => {
 e.preventDefault();
 const text = (e.clipboardData || window.clipboardData).getData('text');
 document.execCommand('insertText', false, text);
 });
}
wireComposer();
/* ── 8. Reposition picker on window resize/scroll ── */
window.addEventListener('resize', () => { if (window.__eopOpen) openPicker(); });
window.addEventListener('scroll', () => { if (window.__eopOpen) openPicker(); }, true);
/* ── 9. Open and close info overlay ── */
function wireInfoOverlay() {
 const btn = document.getElementById('info-btn');
 const overlay = document.getElementById('info-overlay');
 const close = document.getElementById('info-close');
 if (!btn || !overlay || !close) { setTimeout(wireInfoOverlay, 200); return; }
 btn.addEventListener('click', () => overlay.classList.add('open'));
 close.addEventListener('click', () => overlay.classList.remove('open'));
}
wireInfoOverlay();
/* ── Chat scroll and scrollbar management ── */
function setupChatScroll() {
 const chatDisplay = document.getElementById('chat-display');
 if (!chatDisplay) { setTimeout(setupChatScroll, 200); return; }
function scrollToBottom() {
 const wrap = document.getElementById('chat-scroll-wrap');
 if (!wrap) return;
 wrap.scrollTop = wrap.scrollHeight;
 }
const observer = new MutationObserver(() => {
 requestAnimationFrame(() => requestAnimationFrame(scrollToBottom));
 });
observer.observe(chatDisplay, { childList: true, subtree: true });
 window.addEventListener('resize', scrollToBottom);
}
setupChatScroll();
const observer = new MutationObserver(() => {
 document.querySelectorAll('.progress-text').forEach(el => {
 el.style.setProperty('display', 'none', 'important');
 });
});
observer.observe(document.body, { childList: true, subtree: true });