diff --git a/public/s/js/comments.js b/public/s/js/comments.js index 4dc0a69..c2e0ca0 100644 --- a/public/s/js/comments.js +++ b/public/s/js/comments.js @@ -37,6 +37,9 @@ class CommentSystem { this.customEmojis[e.name] = e.url; }); console.log('Loaded Emojis:', this.customEmojis); + + // Preload images to prevent NS Binding Aborted errors + this.preloadEmojiImages(); } else { this.customEmojis = {}; } @@ -46,6 +49,17 @@ class CommentSystem { } } + preloadEmojiImages() { + // Preload all emoji images into browser cache + if (!this.customEmojis) return; + + Object.values(this.customEmojis).forEach(url => { + const img = new Image(); + img.src = url; + // No need to append to DOM, just loading into cache + }); + } + // ... renderEmoji(match, name) { @@ -645,13 +659,37 @@ class CommentSystem { if (actions) { actions.prepend(trigger); + // Create picker once and cache it + let picker = null; + let closeHandler = null; + trigger.addEventListener('click', (e) => { e.preventDefault(); - let picker = container.querySelector('.emoji-picker'); + + // If picker already exists, toggle visibility if (picker) { - picker.remove(); + const isVisible = picker.style.display !== 'none'; + if (isVisible) { + picker.style.display = 'none'; + if (closeHandler) { + document.removeEventListener('click', closeHandler); + closeHandler = null; + } + } else { + picker.style.display = 'block'; + closeHandler = (ev) => { + if (!picker.contains(ev.target) && ev.target !== trigger) { + picker.style.display = 'none'; + document.removeEventListener('click', closeHandler); + closeHandler = null; + } + }; + setTimeout(() => document.addEventListener('click', closeHandler), 0); + } return; } + + // Create picker only once picker = document.createElement('div'); picker.className = 'emoji-picker'; @@ -661,6 +699,14 @@ class CommentSystem { const img = document.createElement('img'); img.src = url; img.title = `:${name}:`; + img.loading = 'lazy'; // Use native lazy loading + + // Add error handling for failed loads + img.onerror = () => { + console.warn(`Failed to load emoji: ${name}`); + img.style.display = 'none'; + }; + img.onclick = (ev) => { ev.stopPropagation(); textarea.value += ` :${name}: `; @@ -672,15 +718,17 @@ class CommentSystem { picker.innerHTML = '
No emojis found
'; } - const closeHandler = (ev) => { + trigger.after(picker); + + // Set up close handler + closeHandler = (ev) => { if (!picker.contains(ev.target) && ev.target !== trigger) { - picker.remove(); + picker.style.display = 'none'; document.removeEventListener('click', closeHandler); + closeHandler = null; } }; setTimeout(() => document.addEventListener('click', closeHandler), 0); - - trigger.after(picker); }); } }