hide footer on all docs; made theme switching class functionality wor…

…k for asciidoc based docs (#1547)
boostorg · Dec 19, 2024 · 7a0e08a · 7a0e08a
1 parent 3093a38
commit 7a0e08a
Show file tree

Hide file tree

Showing 3 changed files with 55 additions and 46 deletions.
diff --git a/core/views.py b/core/views.py
@@ -2,6 +2,7 @@
 import re
 
 import structlog
+from bs4 import BeautifulSoup
 from dateutil.parser import parse
 from django.conf import settings
 from django.contrib.auth.mixins import UserPassesTestMixin
@@ -19,6 +20,7 @@
 from django.views.generic import TemplateView
 from requests.compat import chardet
 
+from config.settings import STATIC_URL
 from libraries.constants import LATEST_RELEASE_URL_PATH_STR
 from libraries.utils import legacy_path_transform
 from versions.models import Version
@@ -461,15 +463,20 @@ def process_content(self, content):
             else {"data-modernizer": "boost-legacy-docs-extra-head"}
         )
 
+        context["hide_footer"] = True
         context["skip_use_boostbook_v2"] = "/antora/" in self.kwargs.get("content_path")
         if source_content_type == SourceDocType.ASCIIDOC:
-            context["content"] = content.decode(chardet.detect(content)["encoding"])
+            extracted_content = content.decode(chardet.detect(content)["encoding"])
+            soup = BeautifulSoup(extracted_content, "html.parser")
+            soup.find("head").append(
+                soup.new_tag("script", src=f"{STATIC_URL}js/theme_handling.js")
+            )
+            context["content"] = soup.prettify()
         else:
             # potentially pass version if needed for HTML modification
             base_html = render_to_string(
                 "docs_libs_placeholder.html", context, request=self.request
             )
-            context["hide_footer"] = True
             context["content"] = modernize_legacy_page(
                 content,
                 base_html,

diff --git a/static/js/theme_handling.js b/static/js/theme_handling.js
@@ -49,13 +49,55 @@ window.addEventListener('storage', function (e) {
     else {
       setTimeout(() => setColorElements(e.newValue), 1);
     }
-    document.getElementById("gecko-search-button").setAttribute(
-      'data-theme-mode',
-      e.newValue
-    );
+    const geckoSearchButton = document.getElementById("gecko-search-button");
+    if (geckoSearchButton) {
+      geckoSearchButton.setAttribute('data-theme-mode', e.newValue);
+    }
   }
 });
 
+function setColorElements(colorMode) {
+  const iconchange = document.getElementById("light-dark")
+  const docElement = document.documentElement;
+  if (colorMode === "dark") {
+    if (iconchange) {
+      iconchange.classList.remove('fa-moon');
+      iconchange.classList.add('fa-sun');
+    }
+    docElement.classList.remove("light");
+  } else {
+    if (iconchange) {
+      iconchange.classList.remove('fa-sun');
+      iconchange.classList.add('fa-moon');
+    }
+    docElement.classList.remove("dark");
+  }
+  docElement.classList.add(colorMode);
+}
+
+
+function getBrowserColorMode(win) {
+  // win is the appropriate window object
+  const prefersDark = win.matchMedia('(prefers-color-scheme: dark)').matches;
+  return prefersDark ? "dark" : "light";
+}
+
+function checkmedia() {
+  const relevantWindow = window.parent || window;
+  let browserColorMode = null;
+  const userColorMode = localStorage.getItem("colorMode");
+  if (!relevantWindow.matchMedia) {
+    browserColorMode = getBrowserColorMode(relevantWindow);
+    //  transparently removed on next load if matches browser setting
+    if (userColorMode === browserColorMode) {
+      localStorage.removeItem("colorMode");
+    }
+  }
+  setColorElements(userColorMode || browserColorMode || "light");
+}
+
+checkmedia();
+
 document.addEventListener("alpine:init", function() {
   document.getElementById("gecko-search-button").setAttribute(
     'data-theme-mode',

diff --git a/templates/includes/_header.html b/templates/includes/_header.html
@@ -384,46 +384,6 @@
       nav[0].classList.add('hidenav');
     }
 
-    // *********** manage theming *************
-    function setColorElements(colorMode) {
-      let iconchange = document.getElementById("light-dark")
-      if (!iconchange) {
-        return;
-      }
-      if (colorMode == "dark") {
-        iconchange.classList.remove('fa-moon');
-        iconchange.classList.add('fa-sun');
-        document.documentElement.classList.remove("light");
-      } else {
-        iconchange.classList.remove('fa-sun');
-        iconchange.classList.add('fa-moon');
-        document.documentElement.classList.remove("dark");
-      }
-      document.documentElement.classList.add(colorMode);
-    }
-
-    function getBrowserColorMode(win) {
-      // win is the appropriate window object
-      const prefersDark = win.matchMedia('(prefers-color-scheme: dark)').matches;
-      return prefersDark ? "dark" : "light";
-    }
-
-    function checkmedia() {
-      const relevantWindow = window.parent || window;
-      let browserColorMode = null;
-      const userColorMode = localStorage.getItem("colorMode");
-      if (!relevantWindow.matchMedia) {
-        browserColorMode = getBrowserColorMode(relevantWindow);
-        //  transparently removed on next load if matches browser setting
-        if (userColorMode === browserColorMode) {
-          localStorage.removeItem("colorMode");
-        }
-      }
-      setColorElements(userColorMode || browserColorMode || "light");
-    }
-
-    checkmedia();
-
       // ************ Mobile Navigation **************
       let containingElement = document.getElementById("pageselector");
       document.body.addEventListener('click', function( event ){