TopBar transitions

webroot/main.js

@@ -29,9 +29,6 @@ try {
     
     var loadingStatus = document.getElementById("loadingstatus");
 
-    var collapseDmsBtn = document.getElementById("collapse-dms");
-    var collapseGroupsBtn = document.getElementById("collapse-groups");
-
     var addDmBtn = document.getElementById("add-dm-btn");
     var addGroupBtn = document.getElementById("add-group-btn");
 
@@ -45,13 +42,14 @@ try {
 
     var roomDetailsBar = document.getElementById("roomdetailsbar");
     var roomContent = document.getElementsByTagName("roomcontent")[0];
-    var roomsBar = document.getElementById("roomsbar");
+    var roomsBar = document.getElementsByTagName("roomcontent2")[0];
     var sideBar = document.getElementsByTagName("sidebar")[0];
 
-    var roomContentMain = document.getElementsByTagName("roomcontent2")[0];
+    var roomContentMain = document.getElementsByTagName("roomcontent2")[1];
 
     var roomContentBar = roomContent.children[0];
 
+    var roomsTopBar = document.getElementsByTagName("roomtopbar")[0];
     var roomTopBar = document.getElementsByTagName("roomtopbar")[1];
 
     var sidebarProfile = document.getElementById("sidebar-profile");
@@ -685,11 +683,60 @@ function showFixedContextMenu(rect, html) {
 
     fixedContextMenu.classList.add("show");
 }
+async function switchRoomsBar(title, content) {
+    let roomsTopBarTransition = roomsTopBar.children.item(0);
+    
+    roomsBar.style.transform = "scale(0.85)";
+    roomsBar.style.opacity = "0";
+
+    roomsTopBarTransition.style.transform = "scale(0.85)";
+    roomsTopBarTransition.style.opacity = "0";
+    
+
+    await delay(200);
+
+    roomsTopBarTransition.innerHTML = processBlah(title);
+    
+
+    let parser = new DOMParser();
+    let doc = parser.parseFromString(content, "text/html");
+
+    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);
+        }
+    }
+
+    roomsBar.innerHTML = doc.body.innerHTML;
+
+    roomsBar.style.transform = "";
+    roomsBar.style.opacity = "";
+
+    roomsTopBarTransition.style.transform = "";
+    roomsTopBarTransition.style.opacity = "";
+}
 async function switchRoomContent(title, content, showRoomBar, icon = "", skipMobileSlide = false)
 {
+    let roomsTopBarTransition = roomTopBar.children.item(0);
+    
     roomContentMain.style.transform = "scale(0.85)";
     roomContentMain.style.opacity = "0";
 
+    roomsTopBarTransition.style.transform = "scale(0.85)";
+    roomsTopBarTransition.style.opacity = "0";
+
     const rem = parseFloat(getComputedStyle(document.documentElement).fontSize);
     if (window.innerWidth <= 52 * rem && !skipMobileSlide) {
         if (title != "title.splash") //do not show splash on mobile
@@ -706,7 +753,7 @@ async function switchRoomContent(title, content, showRoomBar, icon = "", skipMob
     
     let detailsBtnHtml = showRoomBar ? detailsBtn : '';
 
-    roomTopBar.innerHTML = `${backBtnHtml}${icon}<space></space><inherit>${processBlah(title)}</inherit><div class="flex-spacer"></div>${detailsBtnHtml}`;
+    roomsTopBarTransition.innerHTML = `${backBtnHtml}${icon}<space></space><inherit>${processBlah(title)}</inherit><div class="flex-spacer"></div>${detailsBtnHtml}`;
     roomDetailsBar.style.display = showRoomBar ? "flex" : "none";
 
     let parser = new DOMParser();
@@ -735,25 +782,37 @@ async function switchRoomContent(title, content, showRoomBar, icon = "", skipMob
     roomContentMain.style.transform = "";
     roomContentMain.style.opacity = "";
 
+    roomsTopBarTransition.style.transform = "";
+    roomsTopBarTransition.style.opacity = "";
+
     
 }
-collapseDmsBtn.addEventListener("click", () => {
+function clickCollapseDms()
+{
+    var collapseDmsBtn = document.getElementById("collapse-dms");
+    
     collapseDmsBtn.classList.toggle("collapsed");
-});
-collapseGroupsBtn.addEventListener("click", () => {
+}
+function clickCollapseGroups()
+{
+    var collapseGroupsBtn = document.getElementById("collapse-groups");
+    
     collapseGroupsBtn.classList.toggle("collapsed");
-});
-addDmBtn.addEventListener("click", async () => {
-    switchRoomContent("title.create.dm", addDmScreen, false);
-});
-addGroupBtn.addEventListener("click", async () => {
+}
+function clickAddGroup()
+{
     switchRoomContent("title.create.group", createGroupScreen, false);
-});
+}
+function clickAddDm()
+{
+    switchRoomContent("title.create.dm", addDmScreen, false);
+}
 
 
 var indicatorBeforeFixedMenu;
 sidebarAddButton.addEventListener("click", (e) => {
     e.stopPropagation();
+    console.log("hi")
     if (fixedContextMenu.classList.contains("show")) {
         fixedContextMenu.classList.remove("show");
         setActiveSidebarIndicator(indicatorBeforeFixedMenu);
@@ -768,7 +827,9 @@ document.addEventListener("click", (e) => {
     if (fixedContextMenu.classList.contains("show")) {
         if (!fixedContextMenu.contains(e.target)) {
             fixedContextMenu.classList.remove("show");
-            setActiveSidebarIndicator(indicatorBeforeFixedMenu);
+            if (!e.target.closest('sidebarelement')) {
+                setActiveSidebarIndicator(indicatorBeforeFixedMenu);
+            }
         }
     }
 
@@ -803,6 +864,7 @@ function gotoJoinSpace() {
 function gotoHome() {
     setActiveSidebarIndicator(sidebarHomeIndicator);
     switchRoomContent("title.splash", splashScreen, false);
+    switchRoomsBar("title.home", homeRoomBar);
 }
 
 function setActiveSidebarIndicator(element, skipDisabling = false)
@@ -833,18 +895,70 @@ function mobileNavBack() {
 function mobileNavDetails() {
     mainScreen.classList.add('mobile-details');
 }
+
+
 let touchStartX = 0;
 let touchEndX = 0;
 let touchStartY = 0;
 let touchEndY = 0;
+let touchMoved = false;
+
 document.addEventListener('touchstart', e => {
     touchStartX = e.changedTouches[0].screenX;
     touchStartY = e.changedTouches[0].screenY;
-});
+    touchMoved = false;
+
+    activeTouchButton = e.target.closest('button, input');
+    if (activeTouchButton) {
+        activeTouchButton.classList.add('is-pressed');
+    }
+}, { passive: true });
+
+document.addEventListener('touchmove', e => {
+    if (!touchMoved) {
+        const rem = parseFloat(getComputedStyle(document.documentElement).fontSize);
+        let diffX = Math.abs(e.changedTouches[0].screenX - touchStartX);
+        let diffY = Math.abs(e.changedTouches[0].screenY - touchStartY);
+        if (diffX > rem || diffY > rem) {
+            touchMoved = true;
+
+            if (activeTouchButton) {
+                activeTouchButton.classList.remove('is-pressed');
+                activeTouchButton = null;
+            }
+        }
+    }
+}, { passive: true });
+
 document.addEventListener('touchend', e => {
     touchEndX = e.changedTouches[0].screenX;
     touchEndY = e.changedTouches[0].screenY;
     handleMobileSwipe();
+
+    if (activeTouchButton) {
+        activeTouchButton.classList.remove('is-pressed');
+
+        if (!touchMoved) {
+            if (e.cancelable) {
+                e.preventDefault();
+            }
+            activeTouchButton.click();
+        }
+        activeTouchButton = null;
+    }
+});
+
+document.addEventListener('touchcancel', () => {
+    if (activeTouchButton) {
+        activeTouchButton.classList.remove('is-pressed');
+        activeTouchButton = null;
+    }
+});
+
+document.addEventListener('contextmenu', e => {
+    if (e.target.closest('button')) {
+        e.preventDefault();
+    }
 });
 function handleMobileSwipe() {
     const rem = parseFloat(getComputedStyle(document.documentElement).fontSize);
@@ -853,7 +967,7 @@ function handleMobileSwipe() {
     let diffX = touchEndX - touchStartX;
     let diffY = touchEndY - touchStartY;
 
-    if (Math.abs(diffX) > Math.abs(diffY) && Math.abs(diffX) > 60) {
+    if (Math.abs(diffX) > Math.abs(diffY) && Math.abs(diffX) > 4 * rem) {
         if (diffX > 0) {
             mobileNavBack();
         } else {