Fix nav resize and nav link selection

Author: lsegal

templates/default/fulldoc/html/css/style.css

@@ -9,8 +9,6 @@ body {
   margin: 0;
   padding: 0;
   display: flex;
-  display: -webkit-flex;
-  display: -ms-flexbox;
 }
 
 #nav {
@@ -28,11 +26,7 @@ body {
   height: 100%;
   position: relative;
   display: flex;
-  display: -webkit-flex;
-  display: -ms-flexbox;
   flex-shrink: 0;
-  -webkit-flex-shrink: 0;
-  -ms-flex: 1 0;
 }
 #resizer {
   position: absolute;
@@ -45,8 +39,6 @@ body {
 }
 #main {
   flex: 5 1;
-  -webkit-flex: 5 1;
-  -ms-flex: 5 1;
   outline: none;
   position: relative;
   background: #fff;
@@ -56,7 +48,8 @@ body {
 }
 
 @media (max-width: 920px) {
-  .nav_wrap { width: 100%; top: 0; right: 0; overflow: visible; position: absolute; }
+  body { display: block; }
+  .nav_wrap { width: 80vw !important; top: 0; right: 0; overflow: visible; position: absolute; }
   #resizer { display: none; }
   #nav {
     z-index: 9999;
@@ -205,13 +198,9 @@ p.inherited {
   width: 100%;
   font-size: 1em;
   display: flex;
-  display: -webkit-flex;
-  display: -ms-flexbox;
 }
 .box_info dl dt {
   flex-shrink: 0;
-  -webkit-flex-shrink: 1;
-  -ms-flex-shrink: 1;
   width: 100px;
   text-align: right;
   font-weight: bold;
@@ -222,8 +211,6 @@ p.inherited {
 }
 .box_info dl dd {
   flex-grow: 1;
-  -webkit-flex-grow: 1;
-  -ms-flex: 1;
   max-width: 420px;
   padding: 6px 0;
   padding-right: 20px;

templates/default/fulldoc/html/js/app.js

@@ -1,4 +1,4 @@
-(function () {
+window.__app = function () {
   var localStorage = {},
     sessionStorage = {};
   try {
@@ -277,17 +277,18 @@
         }
 
         sessionStorage.navWidth = e.pageX.toString();
-        $(".nav_wrap").css("width", e.pageX);
-        $(".nav_wrap").css("-ms-flex", "inherit");
+        $(".nav_wrap").css("width", Math.max(200, e.pageX));
         e.preventDefault();
         e.stopPropagation();
       },
       false
     );
 
     if (sessionStorage.navWidth) {
-      $(".nav_wrap").css("width", parseInt(sessionStorage.navWidth, 10));
-      $(".nav_wrap").css("-ms-flex", "inherit");
+      $(".nav_wrap").css(
+        "width",
+        Math.max(200, parseInt(sessionStorage.navWidth, 10))
+      );
     }
   }
 
@@ -326,23 +327,36 @@
 
     window.addEventListener(
       "message",
-      function (e) {
+      async (e) => {
         if (e.data.action === "navigate") {
-          fetch(e.data.url)
-            .then((response) => response.text())
-            .then((text) => {
-              const parser = new DOMParser();
-              const doc = parser.parseFromString(text, "text/html");
-              document.title = doc.querySelector("head title").innerText;
-              const content = doc.querySelector("#main").innerHTML;
-              document.querySelector("#main").innerHTML = content;
-              const url = new URL(e.data.url, "https://localhost");
-              const hash = decodeURIComponent(url.hash ?? "");
-              if (hash) {
-                document.getElementById(hash.substring(1)).scrollIntoView();
-              }
-              history.pushState({}, document.title, e.data.url);
-            });
+          const response = await fetch(e.data.url);
+          const text = await response.text();
+          const parser = new DOMParser();
+          const doc = parser.parseFromString(text, "text/html");
+
+          const classListLink =
+            document.getElementById("class_list_link").classList;
+
+          document.documentElement.replaceChild(doc.head, document.head);
+          const content = doc.querySelector("#main").innerHTML;
+          document.querySelector("#main").innerHTML = content;
+
+          document.head.querySelectorAll("script").forEach((script) => {
+            const newScript = document.createElement("script");
+            newScript.textContent = script.textContent;
+            script.parentNode.replaceChild(newScript, script);
+          });
+
+          window.__app();
+
+          document.getElementById("class_list_link").classList = classListLink;
+
+          const url = new URL(e.data.url, "https://localhost");
+          const hash = decodeURIComponent(url.hash ?? "");
+          if (hash) {
+            document.getElementById(hash.substring(1)).scrollIntoView();
+          }
+          history.pushState({}, document.title, e.data.url);
         }
       },
       false
@@ -363,4 +377,5 @@
     mainFocus();
     navigationChange();
   });
-})();
+};
+window.__app();

templates/default/fulldoc/html/js/full_list.js

@@ -195,6 +195,13 @@ function highlight() {
   });
 }
 
+function isInView(element) {
+  const rect = element.getBoundingClientRect();
+  const windowHeight =
+    window.innerHeight || document.documentElement.clientHeight;
+  return rect.left >= 0 && rect.bottom <= windowHeight;
+}
+  
 /**
  * Expands the tree to the target element and its immediate
  * children.
@@ -210,7 +217,7 @@ function expandTo(path) {
     $(el).find('> div > a.toggle').attr('aria-expanded', 'true');
   });
 
-  if($target[0]) {
+  if($target[0] && !isInView($target[0])) {
     window.scrollTo(window.scrollX, $target.offset().top - 250);
     highlight();
   }