Add switchDetailsContent function

android/app/src/main/assets/public/index.html

@@ -55,21 +55,21 @@
         </sidebar>
         <sidebar class="second" id="roomsbar">
             <roomtopbar>
-                <inherit></inherit>
+                <inherit style="display: flex;"></inherit>
             </roomtopbar>
             <roomcontent2>
             </roomcontent2>
         </sidebar>
         <roomcontent>
             <roomtopbar>
-                <inherit></inherit>
+                <inherit style="display: flex;"></inherit>
             </roomtopbar>
             <roomcontent2>
             </roomcontent2>
         </roomcontent>
         <sidebar class="second" id="roomdetailsbar" style="display: none;">
             <roomtopbar>
-                <inherit></inherit>
+                <inherit style="display: flex;"></inherit>
             </roomtopbar>
             <roomcontent2>
             </roomcontent2>

android/app/src/main/assets/public/main.js

@@ -47,10 +47,13 @@ try {
 
     var roomContentMain = document.getElementsByTagName("roomcontent2")[1];
 
+    var roomDetailsMain = document.getElementsByTagName("roomcontent2")[2];
+
     var roomContentBar = roomContent.children[0];
 
     var roomsTopBar = document.getElementsByTagName("roomtopbar")[0];
     var roomTopBar = document.getElementsByTagName("roomtopbar")[1];
+    var detailsTopBar = document.getElementsByTagName("roomtopbar")[2];
 
     var sidebarProfile = document.getElementById("sidebar-profile");
     var sidebarProfileButton = sidebarProfile.children.item(1);
@@ -786,6 +789,58 @@ async function switchRoomContent(title, content, showRoomBar, icon = "", skipMob
     roomsTopBarTransition.style.opacity = "";
 
     
+}
+async function switchDetailsContent(title, content)
+{
+    let roomsTopBarTransition = detailsTopBar.children.item(0);
+
+    roomDetailsMain.style.transform = "scale(0.85)";
+    roomDetailsMain.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) {
+    }
+    else
+    {
+        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);
+        }
+    }
+
+    roomDetailsMain.innerHTML = doc.body.innerHTML;
+
+    roomDetailsMain.style.transform = "";
+    roomDetailsMain.style.opacity = "";
+
+    roomsTopBarTransition.style.transform = "";
+    roomsTopBarTransition.style.opacity = "";
+
+
 }
 function clickCollapseDms()
 {

android/app/src/main/assets/public/style.css

@@ -374,7 +374,7 @@ blah, inherit, .inherit {
     all: inherit;
     padding: 0;
     margin: 0;
-    display: flex;
+    display: inline;
     opacity: 1;
     border: none;
 }

webroot/main.js

@@ -47,10 +47,13 @@ try {
 
     var roomContentMain = document.getElementsByTagName("roomcontent2")[1];
 
+    var roomDetailsMain = document.getElementsByTagName("roomcontent2")[2];
+
     var roomContentBar = roomContent.children[0];
 
     var roomsTopBar = document.getElementsByTagName("roomtopbar")[0];
     var roomTopBar = document.getElementsByTagName("roomtopbar")[1];
+    var detailsTopBar = document.getElementsByTagName("roomtopbar")[2];
 
     var sidebarProfile = document.getElementById("sidebar-profile");
     var sidebarProfileButton = sidebarProfile.children.item(1);
@@ -786,6 +789,58 @@ async function switchRoomContent(title, content, showRoomBar, icon = "", skipMob
     roomsTopBarTransition.style.opacity = "";
 
     
+}
+async function switchDetailsContent(title, content)
+{
+    let roomsTopBarTransition = detailsTopBar.children.item(0);
+
+    roomDetailsMain.style.transform = "scale(0.85)";
+    roomDetailsMain.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) {
+    }
+    else
+    {
+        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);
+        }
+    }
+
+    roomDetailsMain.innerHTML = doc.body.innerHTML;
+
+    roomDetailsMain.style.transform = "";
+    roomDetailsMain.style.opacity = "";
+
+    roomsTopBarTransition.style.transform = "";
+    roomsTopBarTransition.style.opacity = "";
+
+
 }
 function clickCollapseDms()
 {