Doc: Navbar will hide when iframed and send its size to its parent

doc/gulpfile.js

@@ -139,6 +139,8 @@ exports.build = build;
 
 exports.default = series(build, run);
 
+exports.clean = series(clean);
+
 exports.debug = series(useDebug, build, run);
 
 exports.strict = series(useDebug, useStrict, build, run);

doc/templates/uno/component/navbar.js

@@ -1,3 +1,76 @@
+/**
+ * Remove the content of the navbar.
+ *
+ * Note: For styling reasons its more convenient to keep the navbar. And just empty the content.
+ */
+function removeNavbar() {
+    const navBar = document.querySelector("header > nav");
+    navBar.innerHTML="";
+}
+
+/**
+ * Load the navbar from the uno website
+ */
+function initializeNavbar() {
+
+    const navbar = document.querySelector("header > .navbar");
+    if (document.body.classList.contains("front-page")) {
+        let last_known_scroll_position = 0;
+        let ticking = false;
+
+        function doSomething(scroll_pos) {
+            if (scroll_pos >= 100) navbar.classList.add("scrolled");
+            else navbar.classList.remove("scrolled");
+        }
+
+        window.addEventListener("scroll", function () {
+            last_known_scroll_position = window.scrollY;
+
+            if (!ticking) {
+                window.requestAnimationFrame(function () {
+                    doSomething(last_known_scroll_position);
+                    ticking = false;
+                });
+
+                ticking = true;
+            }
+        });
+    }
+
+    const unoMenuReq = new XMLHttpRequest();
+    const unoMenuEndpoint = "https://platform.uno/wp-json/wp/v2/menu";
+    const $navbar = document.getElementById("navbar");
+    let wordpressMenuHasLoaded = false;
+
+    unoMenuReq.open("get", unoMenuEndpoint, true);
+
+    if (typeof navbar !== "undefined") {
+        unoMenuReq.onload = function () {
+            if (unoMenuReq.status === 200 && unoMenuReq.responseText) {
+                $navbar.innerHTML = JSON.parse(
+                    unoMenuReq.responseText
+                );
+                wordpressMenuHasLoaded = true;
+                $(document).trigger("wordpressMenuHasLoaded");
+            }
+        };
+        unoMenuReq.onerror = function (e) {
+        };
+        unoMenuReq.send();
+    }
+
+    $(document).ajaxComplete(function (event, xhr, settings) {
+        const docFxNavbarHasLoaded = settings.url === "toc.html";
+
+        if (docFxNavbarHasLoaded && wordpressMenuHasLoaded) {
+            const $docfxNavbar = $navbar.getElementsByClassName("navbar-nav");
+            $docfxNavbar[0].className += " hidden";
+
+        }
+    });
+
+}
+
 /**
  * Changes the logo on resize
  */

doc/templates/uno/constant.js

@@ -4,3 +4,4 @@ const filtered = 'filtered';
 const show = 'show';
 const hide = 'hide';
 const collapsed = 'collapsed';
+const iframed = window.self !== window.top;

doc/templates/uno/main.js

@@ -3,62 +3,14 @@
 document.addEventListener(
     "DOMContentLoaded",
     function () {
+        resizeObserver.observe(document.getElementsByClassName("body-content")[0]);
 
-        const navbar = document.querySelector("header > .navbar");
-        if (document.body.classList.contains("front-page")) {
-            let last_known_scroll_position = 0;
-            let ticking = false;
-
-            function doSomething(scroll_pos) {
-                if (scroll_pos >= 100) navbar.classList.add("scrolled");
-                else navbar.classList.remove("scrolled");
-            }
-
-            window.addEventListener("scroll", function () {
-                last_known_scroll_position = window.scrollY;
-
-                if (!ticking) {
-                    window.requestAnimationFrame(function () {
-                        doSomething(last_known_scroll_position);
-                        ticking = false;
-                    });
-
-                    ticking = true;
-                }
-            });
-        }
-
-        const unoMenuReq = new XMLHttpRequest();
-        const unoMenuEndpoint = "https://platform.uno/wp-json/wp/v2/menu";
-        const $navbar = document.getElementById("navbar");
-        let wordpressMenuHasLoaded = false;
-
-        unoMenuReq.open("get", unoMenuEndpoint, true);
-
-        if (typeof navbar !== "undefined") {
-            unoMenuReq.onload = function () {
-                if (unoMenuReq.status === 200 && unoMenuReq.responseText) {
-                    $navbar.innerHTML = JSON.parse(
-                        unoMenuReq.responseText
-                    );
-                    wordpressMenuHasLoaded = true;
-                    $(document).trigger("wordpressMenuHasLoaded");
-                }
-            };
-            unoMenuReq.onerror = function (e) {};
-            unoMenuReq.send();
+        if (iframed) {
+            removeNavbar();
+        } else {
+            initializeNavbar();
         }
 
-        $( document ).ajaxComplete(function( event, xhr, settings ) {
-            const docFxNavbarHasLoaded = settings.url === "toc.html";
-
-            if (docFxNavbarHasLoaded && wordpressMenuHasLoaded) {
-                const $docfxNavbar = $navbar.getElementsByClassName("navbar-nav");
-                $docfxNavbar[0].className += " hidden";
-
-            }
-        });
-
         document.addEventListener(
             "click",
             function (e) {
@@ -76,3 +28,4 @@ document.addEventListener(
     },
     false
 );
+

doc/templates/uno/render.js

@@ -5,11 +5,14 @@ enableSearch();
 renderTables();
 renderAlerts();
 renderLinks();
-renderNavbar();
 renderSidebar();
 renderAffix();
-renderFooter();
-renderLogo();
+
+if (!iframed) {
+    renderNavbar();
+    renderLogo();
+    renderFooter();
+}
 
 breakText();
 renderTabs();

doc/templates/uno/service/search.js

@@ -153,7 +153,7 @@ function enableSearch() {
 
             postSearchQuery(worker, query);
 
-        }).then(r => r.resolve());
+        });
     }
 
     /**

doc/templates/uno/service/utility.js

@@ -163,3 +163,20 @@ function breakText() {
         $(this).breakWord();
     });
 }
+
+/**
+ * This observer will post a message containing the new height every time it changes.
+ *
+ * @type {ResizeObserver}
+ */
+const resizeObserver = new ResizeObserver(entries => {
+    for (let entry of entries) {
+        let height = 0;
+        if (entry.contentBoxSize) {
+            height = entry.contentBoxSize[0].blockSize;
+        } else {
+            height = entry.contentRect.height;
+        }
+        window.parent.postMessage(["setHeight", height], "*");
+    }
+});