Make toggle button consistent across all subprojects

NichtStudioCode · NichtStudioCode · commit 045ffc280b99 · 2026-01-04T21:02:29.000+01:00
diff --git a/docs/cbf/assets/js/width-toggle.js b/docs/cbf/assets/js/width-toggle.js
@@ -1,38 +1,38 @@
 // Width toggle functionality
-document.addEventListener("DOMContentLoaded", function() {
+document.addEventListener("DOMContentLoaded", function () {
     const toggleButton = document.getElementById("md-width-toggle");
     const icons = window.__mdWidthIcons;
-    
+
     // Width modes cycle: slim -> wide -> full -> slim
     const modes = ["slim", "wide", "full"];
-    
+
     function capitalize(str) {
         return str.charAt(0).toUpperCase() + str.slice(1);
     }
-    
+
     function updateButton(mode) {
         toggleButton.innerHTML = mode === "full" ? icons.minimize : icons.maximize;
         const nextMode = modes[(modes.indexOf(mode) + 1) % modes.length];
         toggleButton.setAttribute("title", `Current: ${capitalize(mode)} - Click for ${capitalize(nextMode)}`);
     }
-    
+
     function applyMode(mode) {
         if (mode === "slim") {
             document.documentElement.removeAttribute("data-md-width");
         } else {
             document.documentElement.setAttribute("data-md-width", mode);
         }
     }
-    
+
     // Initialize button with saved preference
     const savedWidth = localStorage.getItem("md-width") || "slim";
     updateButton(savedWidth);
-    
+
     // Toggle handler - cycle through modes
-    toggleButton.addEventListener("click", function() {
+    toggleButton.addEventListener("click", function () {
         const currentMode = localStorage.getItem("md-width") || "slim";
         const nextMode = modes[(modes.indexOf(currentMode) + 1) % modes.length];
-        
+
         applyMode(nextMode);
         localStorage.setItem("md-width", nextMode);
         updateButton(nextMode);
diff --git a/docs/cbf/overrides/main.html b/docs/cbf/overrides/main.html
@@ -1,47 +1,47 @@
 {% extends "base.html" %}
-{% endblock %}
-{{ super() }}
-</script>
-})();
-    }
-        }
-            header.appendChild(btn);
-        } else {
-            searchButton.parentNode.insertBefore(btn, searchButton);
-        if (searchButton) {
-            || header.querySelector("label.md-header__button");
-        const searchButton = header.querySelector(".md-header__button.md-icon[for='__search']")
-    if (header) {
-    const header = document.querySelector(".md-header__inner");
-
-    btn.innerHTML = mode === "full" ? window.__mdWidthIcons.minimize : window.__mdWidthIcons.maximize;
-    btn.setAttribute("aria-label", "Toggle page width");
-    btn.className = "md-header__button md-width-toggle";
-    btn.id = "md-width-toggle";
-    const btn = document.createElement("button");
-    const mode = window.__mdWidthMode || "slim";
 
-    };
-        minimize: '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="-2 -2 28 28" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><g transform="rotate(45 12 12)"><path d="m14 10 7-7"/><path d="M20 10h-6V4"/><path d="m3 21 7-7"/><path d="M4 14h6v6"/></g></svg>'
-        maximize: '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="-2 -2 28 28" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><g transform="rotate(45 12 12)"><path d="M15 3h6v6"/><path d="m21 3-7 7"/><path d="m3 21 7-7"/><path d="M9 21H3v-6"/></g></svg>',
-    window.__mdWidthIcons = {
-(function() {
-// Inject toggle button immediately when header is available
+{% block styles %}
 <script>
-{% block content %}
-
-{% endblock %}
-{{ super() }}
+    (function () {
+        const savedWidth = localStorage.getItem("md-width") || "slim";
+        if (savedWidth === "wide" || savedWidth === "full") {
+            document.documentElement.setAttribute("data-md-width", savedWidth);
+        }
+        // Store for width-toggle.js to use
+        window.__mdWidthMode = savedWidth;
+    })();
 </script>
-})();
-    window.__mdWidthMode = savedWidth;
-    // Store for width-toggle.js to use
-    }
-        document.documentElement.setAttribute("data-md-width", savedWidth);
-    if (savedWidth === "wide" || savedWidth === "full") {
-    const savedWidth = localStorage.getItem("md-width") || "slim";
-(function() {
+{{ super() }}
+{% endblock %}
+
+{% block content %}
 <script>
-{% block styles %}
+    // Inject toggle button immediately when header is available
+    (function () {
+        window.__mdWidthIcons = {
+            maximize: '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="-2 -2 28 28" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><g transform="rotate(45 12 12)"><path d="M15 3h6v6"/><path d="m21 3-7 7"/><path d="m3 21 7-7"/><path d="M9 21H3v-6"/></g></svg>',
+            minimize: '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="-2 -2 28 28" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><g transform="rotate(45 12 12)"><path d="m14 10 7-7"/><path d="M20 10h-6V4"/><path d="m3 21 7-7"/><path d="M4 14h6v6"/></g></svg>'
+        };
 
+        const mode = window.__mdWidthMode || "slim";
+        const btn = document.createElement("button");
+        btn.id = "md-width-toggle";
+        btn.className = "md-header__button md-width-toggle";
+        btn.setAttribute("aria-label", "Toggle page width");
+        btn.innerHTML = mode === "full" ? window.__mdWidthIcons.minimize : window.__mdWidthIcons.maximize;
+
+        const header = document.querySelector(".md-header__inner");
+        if (header) {
+            const searchButton = header.querySelector(".md-header__button.md-icon[for='__search']")
+                || header.querySelector("label.md-header__button");
+            if (searchButton) {
+                searchButton.parentNode.insertBefore(btn, searchButton);
+            } else {
+                header.appendChild(btn);
+            }
+        }
+    })();
+</script>
+{{ super() }}
+{% endblock %}
 
diff --git a/docs/invui/assets/js/width-toggle.js b/docs/invui/assets/js/width-toggle.js
@@ -1,38 +1,38 @@
 // Width toggle functionality
-document.addEventListener("DOMContentLoaded", function() {
+document.addEventListener("DOMContentLoaded", function () {
     const toggleButton = document.getElementById("md-width-toggle");
     const icons = window.__mdWidthIcons;
-    
+
     // Width modes cycle: slim -> wide -> full -> slim
     const modes = ["slim", "wide", "full"];
-    
+
     function capitalize(str) {
         return str.charAt(0).toUpperCase() + str.slice(1);
     }
-    
+
     function updateButton(mode) {
         toggleButton.innerHTML = mode === "full" ? icons.minimize : icons.maximize;
         const nextMode = modes[(modes.indexOf(mode) + 1) % modes.length];
         toggleButton.setAttribute("title", `Current: ${capitalize(mode)} - Click for ${capitalize(nextMode)}`);
     }
-    
+
     function applyMode(mode) {
         if (mode === "slim") {
             document.documentElement.removeAttribute("data-md-width");
         } else {
             document.documentElement.setAttribute("data-md-width", mode);
         }
     }
-    
+
     // Initialize button with saved preference
     const savedWidth = localStorage.getItem("md-width") || "slim";
     updateButton(savedWidth);
-    
+
     // Toggle handler - cycle through modes
-    toggleButton.addEventListener("click", function() {
+    toggleButton.addEventListener("click", function () {
         const currentMode = localStorage.getItem("md-width") || "slim";
         const nextMode = modes[(modes.indexOf(currentMode) + 1) % modes.length];
-        
+
         applyMode(nextMode);
         localStorage.setItem("md-width", nextMode);
         updateButton(nextMode);
diff --git a/docs/invui/assets/stylesheets/extra.css b/docs/invui/assets/stylesheets/extra.css
@@ -61,4 +61,3 @@
         display: none;
     }
 }
-
diff --git a/docs/invui/overrides/main.html b/docs/invui/overrides/main.html
@@ -2,45 +2,45 @@
 
 {% block styles %}
 <script>
-(function() {
-    const savedWidth = localStorage.getItem("md-width") || "slim";
-    if (savedWidth === "wide" || savedWidth === "full") {
-        document.documentElement.setAttribute("data-md-width", savedWidth);
-    }
-    // Store for width-toggle.js to use
-    window.__mdWidthMode = savedWidth;
-})();
+    (function () {
+        const savedWidth = localStorage.getItem("md-width") || "slim";
+        if (savedWidth === "wide" || savedWidth === "full") {
+            document.documentElement.setAttribute("data-md-width", savedWidth);
+        }
+        // Store for width-toggle.js to use
+        window.__mdWidthMode = savedWidth;
+    })();
 </script>
 {{ super() }}
 {% endblock %}
 
 {% block content %}
 <script>
-// Inject toggle button immediately when header is available
-(function() {
-    window.__mdWidthIcons = {
-        maximize: '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="-2 -2 28 28" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><g transform="rotate(45 12 12)"><path d="M15 3h6v6"/><path d="m21 3-7 7"/><path d="m3 21 7-7"/><path d="M9 21H3v-6"/></g></svg>',
-        minimize: '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="-2 -2 28 28" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><g transform="rotate(45 12 12)"><path d="m14 10 7-7"/><path d="M20 10h-6V4"/><path d="m3 21 7-7"/><path d="M4 14h6v6"/></g></svg>'
-    };
+    // Inject toggle button immediately when header is available
+    (function () {
+        window.__mdWidthIcons = {
+            maximize: '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="-2 -2 28 28" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><g transform="rotate(45 12 12)"><path d="M15 3h6v6"/><path d="m21 3-7 7"/><path d="m3 21 7-7"/><path d="M9 21H3v-6"/></g></svg>',
+            minimize: '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="-2 -2 28 28" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><g transform="rotate(45 12 12)"><path d="m14 10 7-7"/><path d="M20 10h-6V4"/><path d="m3 21 7-7"/><path d="M4 14h6v6"/></g></svg>'
+        };
 
-    const mode = window.__mdWidthMode || "slim";
-    const btn = document.createElement("button");
-    btn.id = "md-width-toggle";
-    btn.className = "md-header__button md-width-toggle";
-    btn.setAttribute("aria-label", "Toggle page width");
-    btn.innerHTML = mode === "full" ? window.__mdWidthIcons.minimize : window.__mdWidthIcons.maximize;
+        const mode = window.__mdWidthMode || "slim";
+        const btn = document.createElement("button");
+        btn.id = "md-width-toggle";
+        btn.className = "md-header__button md-width-toggle";
+        btn.setAttribute("aria-label", "Toggle page width");
+        btn.innerHTML = mode === "full" ? window.__mdWidthIcons.minimize : window.__mdWidthIcons.maximize;
 
-    const header = document.querySelector(".md-header__inner");
-    if (header) {
-        const searchButton = header.querySelector(".md-header__button.md-icon[for='__search']")
-            || header.querySelector("label.md-header__button");
-        if (searchButton) {
-            searchButton.parentNode.insertBefore(btn, searchButton);
-        } else {
-            header.appendChild(btn);
+        const header = document.querySelector(".md-header__inner");
+        if (header) {
+            const searchButton = header.querySelector(".md-header__button.md-icon[for='__search']")
+                || header.querySelector("label.md-header__button");
+            if (searchButton) {
+                searchButton.parentNode.insertBefore(btn, searchButton);
+            } else {
+                header.appendChild(btn);
+            }
         }
-    }
-})();
+    })();
 </script>
 {{ super() }}
 {% endblock %}
diff --git a/docs/invui2/assets/js/width-toggle.js b/docs/invui2/assets/js/width-toggle.js
@@ -1,38 +1,38 @@
 // Width toggle functionality
-document.addEventListener("DOMContentLoaded", function() {
+document.addEventListener("DOMContentLoaded", function () {
     const toggleButton = document.getElementById("md-width-toggle");
     const icons = window.__mdWidthIcons;
-    
+
     // Width modes cycle: slim -> wide -> full -> slim
     const modes = ["slim", "wide", "full"];
-    
+
     function capitalize(str) {
         return str.charAt(0).toUpperCase() + str.slice(1);
     }
-    
+
     function updateButton(mode) {
         toggleButton.innerHTML = mode === "full" ? icons.minimize : icons.maximize;
         const nextMode = modes[(modes.indexOf(mode) + 1) % modes.length];
         toggleButton.setAttribute("title", `Current: ${capitalize(mode)} - Click for ${capitalize(nextMode)}`);
     }
-    
+
     function applyMode(mode) {
         if (mode === "slim") {
             document.documentElement.removeAttribute("data-md-width");
         } else {
             document.documentElement.setAttribute("data-md-width", mode);
         }
     }
-    
+
     // Initialize button with saved preference
     const savedWidth = localStorage.getItem("md-width") || "slim";
     updateButton(savedWidth);
-    
+
     // Toggle handler - cycle through modes
-    toggleButton.addEventListener("click", function() {
+    toggleButton.addEventListener("click", function () {
         const currentMode = localStorage.getItem("md-width") || "slim";
         const nextMode = modes[(modes.indexOf(currentMode) + 1) % modes.length];
-        
+
         applyMode(nextMode);
         localStorage.setItem("md-width", nextMode);
         updateButton(nextMode);
diff --git a/docs/invui2/overrides/main.html b/docs/invui2/overrides/main.html
@@ -2,45 +2,45 @@
 
 {% block styles %}
 <script>
-(function() {
-    const savedWidth = localStorage.getItem("md-width") || "slim";
-    if (savedWidth === "wide" || savedWidth === "full") {
-        document.documentElement.setAttribute("data-md-width", savedWidth);
-    }
-    // Store for width-toggle.js to use
-    window.__mdWidthMode = savedWidth;
-})();
+    (function () {
+        const savedWidth = localStorage.getItem("md-width") || "slim";
+        if (savedWidth === "wide" || savedWidth === "full") {
+            document.documentElement.setAttribute("data-md-width", savedWidth);
+        }
+        // Store for width-toggle.js to use
+        window.__mdWidthMode = savedWidth;
+    })();
 </script>
 {{ super() }}
 {% endblock %}
 
 {% block content %}
 <script>
-// Inject toggle button immediately when header is available
-(function() {
-    window.__mdWidthIcons = {
-        maximize: '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="-2 -2 28 28" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><g transform="rotate(45 12 12)"><path d="M15 3h6v6"/><path d="m21 3-7 7"/><path d="m3 21 7-7"/><path d="M9 21H3v-6"/></g></svg>',
-        minimize: '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="-2 -2 28 28" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><g transform="rotate(45 12 12)"><path d="m14 10 7-7"/><path d="M20 10h-6V4"/><path d="m3 21 7-7"/><path d="M4 14h6v6"/></g></svg>'
-    };
+    // Inject toggle button immediately when header is available
+    (function () {
+        window.__mdWidthIcons = {
+            maximize: '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="-2 -2 28 28" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><g transform="rotate(45 12 12)"><path d="M15 3h6v6"/><path d="m21 3-7 7"/><path d="m3 21 7-7"/><path d="M9 21H3v-6"/></g></svg>',
+            minimize: '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="-2 -2 28 28" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><g transform="rotate(45 12 12)"><path d="m14 10 7-7"/><path d="M20 10h-6V4"/><path d="m3 21 7-7"/><path d="M4 14h6v6"/></g></svg>'
+        };
 
-    const mode = window.__mdWidthMode || "slim";
-    const btn = document.createElement("button");
-    btn.id = "md-width-toggle";
-    btn.className = "md-header__button md-width-toggle";
-    btn.setAttribute("aria-label", "Toggle page width");
-    btn.innerHTML = mode === "full" ? window.__mdWidthIcons.minimize : window.__mdWidthIcons.maximize;
+        const mode = window.__mdWidthMode || "slim";
+        const btn = document.createElement("button");
+        btn.id = "md-width-toggle";
+        btn.className = "md-header__button md-width-toggle";
+        btn.setAttribute("aria-label", "Toggle page width");
+        btn.innerHTML = mode === "full" ? window.__mdWidthIcons.minimize : window.__mdWidthIcons.maximize;
 
-    const header = document.querySelector(".md-header__inner");
-    if (header) {
-        const searchButton = header.querySelector(".md-header__button.md-icon[for='__search']")
-            || header.querySelector("label.md-header__button");
-        if (searchButton) {
-            searchButton.parentNode.insertBefore(btn, searchButton);
-        } else {
-            header.appendChild(btn);
+        const header = document.querySelector(".md-header__inner");
+        if (header) {
+            const searchButton = header.querySelector(".md-header__button.md-icon[for='__search']")
+                || header.querySelector("label.md-header__button");
+            if (searchButton) {
+                searchButton.parentNode.insertBefore(btn, searchButton);
+            } else {
+                header.appendChild(btn);
+            }
         }
-    }
-})();
+    })();
 </script>
 {{ super() }}
 {% endblock %}
diff --git a/docs/nova/assets/js/width-toggle.js b/docs/nova/assets/js/width-toggle.js
diff --git a/docs/nova/overrides/main.html b/docs/nova/overrides/main.html

Original file line number	Diff line number	Diff line change
`@@ -61,4 +61,3 @@`
`61`	`61`	`display: none;`
`62`	`62`	`}`
`63`	`63`	`}`
`64`		`-`