Only use lightswitch js if lightswitch is present (#2594)

Fixes #2585
r-lib · May 28, 2024 · 2417d58 · 2417d58
1 parent fc405b8
commit 2417d58
Show file tree

Hide file tree

Showing 6 changed files with 92 additions and 85 deletions.
diff --git a/R/render.R b/R/render.R
@@ -128,6 +128,7 @@ data_template <- function(pkg = ".", depth = 0L) {
 
   out$navbar <- data_navbar(pkg, depth = depth)
   out$footer <- data_footer(pkg)
+  out$lightswitch <- uses_lightswitch(pkg)
 
   print_yaml(out)
 }

diff --git a/inst/BS5/assets/lightswitch.js b/inst/BS5/assets/lightswitch.js
@@ -0,0 +1,85 @@
+
+/*!
+ * Color mode toggler for Bootstrap's docs (https://getbootstrap.com/)
+ * Copyright 2011-2023 The Bootstrap Authors
+ * Licensed under the Creative Commons Attribution 3.0 Unported License.
+ * Updates for {pkgdown} by the {bslib} authors, also licensed under CC-BY-3.0.
+ */
+
+const getStoredTheme = () => localStorage.getItem('theme')
+const setStoredTheme = theme => localStorage.setItem('theme', theme)
+
+const getPreferredTheme = () => {
+  const storedTheme = getStoredTheme()
+  if (storedTheme) {
+    return storedTheme
+  }
+
+  return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light'
+}
+
+const setTheme = theme => {
+  if (theme === 'auto') {
+    document.documentElement.setAttribute('data-bs-theme', (window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light'))
+  } else {
+    document.documentElement.setAttribute('data-bs-theme', theme)
+  }
+}
+
+function bsSetupThemeToggle () {
+  'use strict'
+
+  const showActiveTheme = (theme, focus = false) => {
+    var activeLabel, activeIcon;
+
+    document.querySelectorAll('[data-bs-theme-value]').forEach(element => {
+      const buttonTheme = element.getAttribute('data-bs-theme-value')
+      const isActive = buttonTheme == theme
+
+      element.classList.toggle('active', isActive)
+      element.setAttribute('aria-pressed', isActive)
+
+      if (isActive) {
+        activeLabel = element.textContent;
+        activeIcon = element.querySelector('span').classList.value;
+      }
+    })
+
+    const themeSwitcher = document.querySelector('#dropdown-lightswitch')
+    if (!themeSwitcher) {
+      return
+    }
+
+    themeSwitcher.setAttribute('aria-label', activeLabel)
+    themeSwitcher.querySelector('span').classList.value = activeIcon;
+
+    if (focus) {
+      themeSwitcher.focus()
+    }
+  }
+
+  window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', () => {
+    const storedTheme = getStoredTheme()
+    if (storedTheme !== 'light' && storedTheme !== 'dark') {
+      setTheme(getPreferredTheme())
+    }
+  })
+
+  window.addEventListener('DOMContentLoaded', () => {
+    showActiveTheme(getPreferredTheme())
+
+    document
+      .querySelectorAll('[data-bs-theme-value]')
+      .forEach(toggle => {
+        toggle.addEventListener('click', () => {
+          const theme = toggle.getAttribute('data-bs-theme-value')
+          setTheme(theme)
+          setStoredTheme(theme)
+          showActiveTheme(theme, true)
+        })
+      })
+  })
+}
+
+setTheme(getPreferredTheme());
+bsSetupThemeToggle();
diff --git a/inst/BS5/assets/pkgdown.js b/inst/BS5/assets/pkgdown.js
@@ -152,88 +152,3 @@ async function searchFuse(query, callback) {
   });
   });
 })(window.jQuery || window.$)
-
-/*!
- * Color mode toggler for Bootstrap's docs (https://getbootstrap.com/)
- * Copyright 2011-2023 The Bootstrap Authors
- * Licensed under the Creative Commons Attribution 3.0 Unported License.
- * Updates for {pkgdown} by the {bslib} authors, also licensed under CC-BY-3.0.
- */
-
-const getStoredTheme = () => localStorage.getItem('theme')
-const setStoredTheme = theme => localStorage.setItem('theme', theme)
-
-const getPreferredTheme = () => {
-  const storedTheme = getStoredTheme()
-  if (storedTheme) {
-    return storedTheme
-  }
-
-  return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light'
-}
-
-const setTheme = theme => {
-  if (theme === 'auto') {
-    document.documentElement.setAttribute('data-bs-theme', (window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light'))
-  } else {
-    document.documentElement.setAttribute('data-bs-theme', theme)
-  }
-}
-
-function bsSetupThemeToggle () {
-  'use strict'
-
-  const showActiveTheme = (theme, focus = false) => {
-    var activeLabel, activeIcon;
-
-    document.querySelectorAll('[data-bs-theme-value]').forEach(element => {
-      const buttonTheme = element.getAttribute('data-bs-theme-value')
-      const isActive = buttonTheme == theme
-
-      element.classList.toggle('active', isActive)
-      element.setAttribute('aria-pressed', isActive)
-
-      if (isActive) {
-        activeLabel = element.textContent;
-        activeIcon = element.querySelector('span').classList.value;
-      }
-    })
-
-    const themeSwitcher = document.querySelector('#dropdown-lightswitch')
-    if (!themeSwitcher) {
-      return
-    }
-
-    themeSwitcher.setAttribute('aria-label', activeLabel)
-    themeSwitcher.querySelector('span').classList.value = activeIcon;
-
-    if (focus) {
-      themeSwitcher.focus()
-    }
-  }
-
-  window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', () => {
-    const storedTheme = getStoredTheme()
-    if (storedTheme !== 'light' && storedTheme !== 'dark') {
-      setTheme(getPreferredTheme())
-    }
-  })
-
-  window.addEventListener('DOMContentLoaded', () => {
-    showActiveTheme(getPreferredTheme())
-
-    document
-      .querySelectorAll('[data-bs-theme-value]')
-      .forEach(toggle => {
-        toggle.addEventListener('click', () => {
-          const theme = toggle.getAttribute('data-bs-theme-value')
-          setTheme(theme)
-          setStoredTheme(theme)
-          showActiveTheme(theme, true)
-        })
-      })
-  })
-}
-
-setTheme(getPreferredTheme());
-bsSetupThemeToggle();
diff --git a/inst/BS5/templates/head.html b/inst/BS5/templates/head.html
@@ -18,6 +18,10 @@
 <link rel="apple-touch-icon" type="image/png" sizes="60x60" href="{{#site}}{{root}}{{/site}}apple-touch-icon-60x60.png" />
 {{/has_favicons}}
 
+{{#lightswitch}}
+<script src="{{#site}}{{root}}{{/site}}lightswitch.js"></script>
+{{/lightswitch}}
+
 {{{headdeps}}}
 
 <!-- pkgdown -->

diff --git a/tests/testthat/_snaps/init.md b/tests/testthat/_snaps/init.md
@@ -19,6 +19,7 @@
       init_site(pkg)
     Message
       -- Initialising site -----------------------------------------------------------
+      Copying <pkgdown>/BS5/assets/lightswitch.js to lightswitch.js
       Copying <pkgdown>/BS5/assets/link.svg to link.svg
       Copying <pkgdown>/BS5/assets/pkgdown.js to pkgdown.js
       Copying pkgdown/extra.css to extra.css

diff --git a/tests/testthat/_snaps/render.md b/tests/testthat/_snaps/render.md
@@ -61,6 +61,7 @@
     footer:
       left: <p>Developed by Hadley Wickham, RStudio.</p>
       right: <p>Site built with <a href="https://pkgdown.r-lib.org/">pkgdown</a> {version}.</p>
+    lightswitch: no
 
 
 # check_opengraph validates inputs