JS updates for new themes

dbrianwalton · Dec 23, 2024 · 8093b6f · 8093b6f
1 parent e452fb1
commit 8093b6f
Show file tree

Hide file tree

Showing 2 changed files with 81 additions and 15 deletions.
diff --git a/js/pretext_add_on.js b/js/pretext_add_on.js
@@ -351,7 +351,9 @@ console.log("this is e", e);
                 this_permalink_container.setAttribute('data-description', this_permalink_description);
     //         this_permalink_container.innerHTML = '<span href="' + this_permalink_url + '">' + permalink_word + '</span>';
                 this_permalink_container.innerHTML = '<a href="' + this_permalink_url + '" title="Copy permalink for ' + this_permalink_description + '">' + permalink_word + '</a>';
-                this_item.insertAdjacentElement("afterbegin", this_permalink_container)
+                // if permalinks are inserted as first element, they break lots of CSS that uses
+                // first-child or first-of-type selectors (in both old and new styling)
+                this_item.insertAdjacentElement("beforeend", this_permalink_container);
             } else {
 /*
                 console.log("      no permalink, because no id", this_item)
@@ -950,3 +952,59 @@ window.setInterval(function(){
 }, 5000);
 */
 
+
+//-----------------------------------------------------------------
+// Dark/Light mode swiching
+
+function isDarkMode() {
+    if (document.documentElement.dataset.darkmode === 'disabled')
+        return false;
+
+    const currentTheme = localStorage.getItem("theme");
+    if (currentTheme === "dark")
+        return true;
+    else if (currentTheme === "light")
+        return false;
+
+    return window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches;
+}
+
+function setDarkMode(isDark) {
+    if(document.documentElement.dataset.darkmode === 'disabled')
+        return;
+
+    if (isDark) {
+      document.documentElement.classList.add("dark-mode");
+
+      // Apply to local iframes that want dark mode
+      const iframes = document.querySelectorAll("iframe[data-dark-mode-enabled]");
+      for (const iframe of iframes) {
+          iframe.contentWindow.document.documentElement.classList.add("dark-mode");
+      }
+  } else {
+      document.documentElement.classList.remove("dark-mode");
+  }
+
+    const modeButton = document.getElementById("light-dark-button");
+    if (modeButton) {
+        modeButton.querySelector('.icon').innerText = isDark ? "light_mode" : "dark_mode";
+        modeButton.querySelector('.name').innerText = isDark ? "Light Mode" : "Dark Mode";
+    }
+}
+
+// Run this as soon as possible to avoid flicker
+setDarkMode(isDarkMode());
+
+// Rest of dark mode setup logic waits until after load
+window.addEventListener("DOMContentLoaded", function(event) {
+    // Rerun setDarkMode now that it can update buttons
+    const isDark = isDarkMode();
+    setDarkMode(isDark);
+
+    const modeButton = document.getElementById("light-dark-button");
+    modeButton.addEventListener("click", function() {
+        const wasDark = isDarkMode();
+        setDarkMode(!wasDark);
+        localStorage.setItem("theme", wasDark ? "light" : "dark");
+    });
+});
diff --git a/js/pretext_search.js b/js/pretext_search.js
@@ -260,6 +260,17 @@ function addResultToPage(searchterms, result, docs, numUnshown, resultArea) {
         bullet.appendChild(p);
         resultArea.appendChild(bullet);
     }
+
+    // Auto-close search results when a result is clicked in case result is on
+    // the same page search started from
+    const resultsDiv = document.getElementById('searchresultsplaceholder');
+    const backDiv = document.querySelector('.searchresultsbackground');
+    resultArea.querySelectorAll("a").forEach((link) => {
+        link.addEventListener('click', (e) => {
+            backDiv.style.display = 'none';
+            resultsDiv.style.display = 'none';
+        });
+    });
     //Could print message about how many results are not shown. No way to localize it though...
     // if(numUnshown > 0) {
     //     let bullet = document.createElement("li");
@@ -274,22 +285,18 @@ function addResultToPage(searchterms, result, docs, numUnshown, resultArea) {
     MathJax.typesetPromise();
 }
 
+window.addEventListener("load", function (event) {
+    const resultsDiv = document.getElementById('searchresultsplaceholder');
 
-function showHelp() {
-    let state = document.getElementById("helpme").style.display;
-    if (state == "none") {
-        document.getElementById("helpme").style.display = "block";
-        document.getElementById("helpbutt").innerHTML = "Hide Help"
-    } else {
-        document.getElementById("helpme").style.display = "none";
-        document.getElementById("helpbutt").innerHTML = "Show Help"
-    }
-}
-
+    //insert a div to be backgroud behind searchresultsplaceholder
+    const backDiv = document.createElement("div");
+    backDiv.classList.add("searchresultsbackground");
+    backDiv.style.display = 'none';
+    resultsDiv.parentNode.appendChild(backDiv);
 
-window.addEventListener("load",function(event) {
     document.getElementById("searchbutton").addEventListener('click', (e) => {
-        document.getElementById('searchresultsplaceholder').style.display = null;
+        resultsDiv.style.display = null;
+        backDiv.style.display = null;
         let searchInput = document.getElementById("ptxsearch");
         searchInput.value = JSON.parse(localStorage.getItem("last-search-terms")).terms;
         searchInput.select();
@@ -301,7 +308,8 @@ window.addEventListener("load",function(event) {
     });
 
     document.getElementById("closesearchresults").addEventListener('click', (e) => {
-        document.getElementById('searchresultsplaceholder').style.display = 'none';
+        resultsDiv.style.display = 'none';
+        backDiv.style.display = 'none';
         document.getElementById('searchbutton').focus();
     });
 });