[Ceci n'est pas un emoji] FIX EMOJI BOARDS !

Louciole · Sep 10, 2024 · cc3d547 · cc3d547
1 parent 576e472
commit cc3d547
Show file tree

Hide file tree

Showing 4 changed files with 28 additions and 20 deletions.
diff --git a/static/framework/navigation.mjs b/static/framework/navigation.mjs
@@ -3,10 +3,10 @@ import {setElement} from "./sakura.mjs";
 
 export function initNav(){
     document.addEventListener('click', function (event) {
-        if (activeFM && !activeFM.contains(event.target)) {
-            activeFM.classList.toggle("visible")
+        if (global.state.activeFM && !global.state.activeFM.contains(event.target)) {
+            global.state.activeFM.classList.toggle("visible")
             if (!openingFM){
-                activeFM = undefined
+                global.state.activeFM = undefined
             }else{
                 openingFM=false
             }
@@ -116,40 +116,39 @@ export function goTo(id, target, selected=undefined, async=true, postInsert=unde
 window.goTo = goTo
 
 
-let activeFM;
 let openingFM = false;
 
 function toggleFM(id){
     const FM = document.getElementById(id)
-    if(FM !== activeFM){
+    if(FM !== global.state.activeFM){
         openingFM = true
-        if(activeFM){
-            activeFM.classList.toggle("visible")
+        if(global.state.activeFM){
+            global.state.activeFM.classList.toggle("visible")
         }
-        activeFM = FM
+        global.state.activeFM = FM
     }
 }
 window.toggleFM = toggleFM
 
 export function closeFM(){
-    if(activeFM){
-        activeFM.classList.toggle("visible")
-        activeFM = undefined
+    if(global.state.activeFM){
+        global.state.activeFM.classList.toggle("visible")
+        global.state.activeFM = undefined
     }
 }
 
 function toggleModale(id, event){
     const FM = document.getElementById(id)
-    if(FM !== activeFM){
+    if(FM !== global.state.activeFM){
         openingFM = true
         global.state.modaltarget = event.currentTarget
-        if(activeFM){
-            activeFM.classList.toggle("visible")
+        if(global.state.activeFM){
+            global.state.activeFM.classList.toggle("visible")
         }
         console.log(event.currentTarget,global.state.modaltarget)
         FM.style.top = event.clientY.toString().concat("px")
         FM.style.left = event.clientX.toString().concat("px")
-        activeFM = FM
+        global.state.activeFM = FM
     }
 }
 window.toggleModale = toggleModale

diff --git a/static/framework/templating.mjs b/static/framework/templating.mjs
@@ -37,7 +37,7 @@ function fillWith(template, list){
         request={"responseText":templates[template]}
     }else{
         request = xhr( '/static/templates/'.concat(template,".html"), undefined, "GET", false)
-        console.log("adding to cache",templates, template)
+        // console.log("adding to cache",templates, template)
         templates[template] = request.responseText
     }
 

diff --git a/static/navigation.mjs b/static/navigation.mjs
@@ -41,12 +41,21 @@ window.goToFriends = goToFriends
 function insertStandardEmoji(event,target){
     if (target === "currentInput"){
         // bug ? this does not trigger the typing event, we could use a real event instead
-        const input = document.querySelector("textarea.selected")
+        let input
+
+        //i know...
+        if(event.currentTarget.parentElement.parentElement.parentElement.parentElement.parentElement.id === "std-emoji-board"){
+            input = document.querySelector("#description-input")
+        }else{
+            input = document.querySelector("textarea.selected")
+        }
+
         if(!global.state.previousCursor){
             global.state.previousCursor = {start:0, end:0}
         }
         input.value = input.value.slice(0,global.state.previousCursor.start).concat(event.currentTarget.innerHTML,input.value.slice(global.state.previousCursor.end))
         global.state.previousCursor = {start: global.state.previousCursor.start+event.currentTarget.innerHTML.length, end:global.state.previousCursor.start+event.currentTarget.innerHTML.length}
+        input.dispatchEvent(new Event('input', { bubbles: true }))
     }else if(target === "status"){
         setElement("global.user.status.emoji",event.currentTarget.innerHTML)
         closeFM('emoji-board')

diff --git a/static/templates/conversation.html b/static/templates/conversation.html
@@ -37,7 +37,7 @@
         <div class="icon-wrapper">
             <img class="icon" src="/static/icons/material/gif.svg"/>
         </div>
-        <div class="icon-wrapper" onclick="toggleFM('emoji-board')">
+        <div class="icon-wrapper" onclick="toggleFM('conv-emoji-board')">
             <img class="icon" src="/static/icons/material/emoji.svg"/>
         </div>
     </div>
@@ -52,7 +52,7 @@
         ${_t("is typing")}...
     </div>
 </div>
-<div id="emoji-board" class="emoji-board">
+<div id="conv-emoji-board" class="emoji-board">
     <div class="menu">
         <div class="inline gap">
             <div class="cat">GIF</div>
@@ -74,7 +74,7 @@
             ${fillWith('scroll-emoji',global.state.emojis)}
         </div>
         <div class="scrollable">
-            ${fillWith('emoji-cat',global.state.emojis)}
+            ${fillWith('emoji-cat-input',global.state.emojis)}
         </div>
     </div>
     <div class="descriptor">