More animations

webroot/main.js

@@ -66,6 +66,7 @@ try {
     var sidebarInboxIndicator = sidebarInbox.children.item(0);
 
 
+    var fixedContextMenu = document.getElementById("fixed-context-menu");
     
 } catch (e) {
 }
@@ -653,22 +654,44 @@ password = localStorage.getItem('password');
 host = localStorage.getItem('host');
 mainJS();
 
-collapseDmsBtn.addEventListener("click", () => {
-    collapseDmsBtn.classList.toggle("collapsed");
-});
-collapseGroupsBtn.addEventListener("click", () => {
-    collapseGroupsBtn.classList.toggle("collapsed");
-});
 
+function showFixedContextMenu(rect, html) {
+    let parser = new DOMParser();
+    let doc = parser.parseFromString(html, "text/html");
 
-//Invite to dm, addDmScreen, false
-async function switchRoomContent(title, content, showRoomBar)
+    let blahTags = doc.getElementsByTagName("blah");
+    for (let i = 0; i < blahTags.length; i++) {
+        blahTags[i].innerHTML = processBlah(blahTags[i].innerHTML);
+    }
+    blahTags = doc.getElementsByClassName("blah");
+    for (let i = 0; i < blahTags.length; i++) {
+        blahTags[i].innerHTML = processBlah(blahTags[i].innerHTML);
+    }
+
+    let placeholders = doc.querySelectorAll("[placeholder]");
+    for (let i = 0; i < placeholders.length; i++) {
+        if (placeholders[i].placeholder.startsWith("{blah("))
+        {
+            let value = placeholders[i].placeholder.split("{blah(")[1].split(")}")[0];
+            placeholders[i].placeholder = processBlah(value);
+        }
+
+    }
+
+    fixedContextMenu.innerHTML = doc.body.innerHTML;
+
+    fixedContextMenu.style.left = `${rect.right + 10}px`;
+    fixedContextMenu.style.top = `${rect.top}px`;
+
+    fixedContextMenu.classList.add("show");
+}
+async function switchRoomContent(title, content, showRoomBar, icon = "")
 {
     roomContentMain.style.transform = "scale(0.85)";
     roomContentMain.style.opacity = "0";
     await delay(200);
 
-    roomTopBar.innerHTML = processBlah(title);
+    roomTopBar.innerHTML = `${icon}<space></space><inherit>${processBlah(title)}</inherit>`
     roomDetailsBar.style.display = showRoomBar ? "flex" : "none";
     
     //content blah parsing
@@ -700,7 +723,12 @@ async function switchRoomContent(title, content, showRoomBar)
     roomContentMain.style.transform = "";
     roomContentMain.style.opacity = "";
 }
-
+collapseDmsBtn.addEventListener("click", () => {
+    collapseDmsBtn.classList.toggle("collapsed");
+});
+collapseGroupsBtn.addEventListener("click", () => {
+    collapseGroupsBtn.classList.toggle("collapsed");
+});
 addDmBtn.addEventListener("click", async () => {
     switchRoomContent("title.create.dm", addDmScreen, false);
 });
@@ -708,20 +736,68 @@ addGroupBtn.addEventListener("click", async () => {
     switchRoomContent("title.create.group", createGroupScreen, false);
 });
 
+
+var indicatorBeforeFixedMenu;
+sidebarAddButton.addEventListener("click", (e) => {
+    e.stopPropagation();
+    if (fixedContextMenu.classList.contains("show")) {
+        fixedContextMenu.classList.remove("show");
+        setActiveSidebarIndicator(indicatorBeforeFixedMenu);
+    } else {
+        setActiveSidebarIndicator(sidebarAddIndicator, true);
+        const rect = sidebarAddButton.getBoundingClientRect();
+        showFixedContextMenu(rect, addSpaceMenu);
+    }
+});
+
+document.addEventListener("click", (e) => {
+    if (fixedContextMenu.classList.contains("show")) {
+        if (!fixedContextMenu.contains(e.target)) {
+            fixedContextMenu.classList.remove("show");
+            setActiveSidebarIndicator(indicatorBeforeFixedMenu);
+        }
+    }
+});
+
+
+
 function gotoSideProfilePopup() {
     
 }
 function gotoInbox() {
-
+    setActiveSidebarIndicator(sidebarInboxIndicator);
 }
-async function gotoCreateSpace() {
+function gotoCreateSpace() {
+    fixedContextMenu.classList.remove("show");
+    setActiveSidebarIndicator(sidebarAddIndicator);
     switchRoomContent("title.create.space", createSpaceScreen, false);
 }
+function gotoJoinSpace() {
+    fixedContextMenu.classList.remove("show");
+    setActiveSidebarIndicator(sidebarAddIndicator);
+    switchRoomContent("title.join.space", joinSpaceScreen, false);
+}
 function gotoHome() {
-
+    setActiveSidebarIndicator(sidebarHomeIndicator);
+    switchRoomContent("title.splash", splashScreen, false);
 }
 
-
+function setActiveSidebarIndicator(element, skipDisabling = false)
+{
+    let indicators = document.getElementsByTagName("indicator");
+    for (let i = 0; i < indicators.length; i++) {
+        if (indicators[i].classList.contains("active"))
+        {
+            indicatorBeforeFixedMenu = indicators[i];
+            if (!skipDisabling)
+            {
+                indicators[i].classList.remove("active");
+            }
+        }
+    }
+    
+    element.classList.add("active");
+}
 
 /* replaced with css
 sidebarHomeButton.addEventListener("mouseenter", () => {