From e1315d11f2fb9a43b96dd48bf8f9aaf5305372b2 Mon Sep 17 00:00:00 2001 From: XhmikosR Date: Sun, 18 Dec 2022 23:32:17 +0200 Subject: docs: move color-mode script (#37658) * docs: move color-mode script * Move color-modes.js in static folder * Async load color-modes.js * Switch to DOMContentLoaded * Revert async loading --- site/assets/js/color-modes/index.js | 62 -------------------------- site/content/docs/5.2/customize/color-modes.md | 2 +- site/layouts/partials/header.html | 6 +-- site/static/docs/5.2/assets/js/color-modes.js | 62 ++++++++++++++++++++++++++ 4 files changed, 66 insertions(+), 66 deletions(-) delete mode 100644 site/assets/js/color-modes/index.js create mode 100644 site/static/docs/5.2/assets/js/color-modes.js diff --git a/site/assets/js/color-modes/index.js b/site/assets/js/color-modes/index.js deleted file mode 100644 index 51bfd40a7..000000000 --- a/site/assets/js/color-modes/index.js +++ /dev/null @@ -1,62 +0,0 @@ -/*! - * Color mode toggler for Bootstrap's docs (https://getbootstrap.com/) - * Copyright 2011-2022 The Bootstrap Authors - * Licensed under the Creative Commons Attribution 3.0 Unported License. - */ - -(() => { - 'use strict' - - const storedTheme = localStorage.getItem('theme') - - const getPreferredTheme = () => { - if (storedTheme) { - return storedTheme - } - - return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light' - } - - const setTheme = function (theme) { - if (theme === 'auto' && window.matchMedia('(prefers-color-scheme: dark)').matches) { - document.documentElement.setAttribute('data-bs-theme', 'dark') - } else { - document.documentElement.setAttribute('data-bs-theme', theme) - } - } - - setTheme(getPreferredTheme()) - - const showActiveTheme = theme => { - const activeThemeIcon = document.querySelector('.theme-icon-active use') - const btnToActive = document.querySelector(`[data-bs-theme-value="${theme}"]`) - const svgOfActiveBtn = btnToActive.querySelector('svg use').getAttribute('href') - - document.querySelectorAll('[data-bs-theme-value]').forEach(element => { - element.classList.remove('active') - }) - - btnToActive.classList.add('active') - activeThemeIcon.setAttribute('href', svgOfActiveBtn) - } - - window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', () => { - if (storedTheme !== 'light' || storedTheme !== 'dark') { - setTheme(getPreferredTheme()) - } - }) - - window.addEventListener('load', () => { - showActiveTheme(getPreferredTheme()) - - document.querySelectorAll('[data-bs-theme-value]') - .forEach(toggle => { - toggle.addEventListener('click', () => { - const theme = toggle.getAttribute('data-bs-theme-value') - localStorage.setItem('theme', theme) - setTheme(theme) - showActiveTheme(theme) - }) - }) - }) -})() diff --git a/site/content/docs/5.2/customize/color-modes.md b/site/content/docs/5.2/customize/color-modes.md index 929075cbb..bf1692ae1 100644 --- a/site/content/docs/5.2/customize/color-modes.md +++ b/site/content/docs/5.2/customize/color-modes.md @@ -248,7 +248,7 @@ Here's a look at the JavaScript that powers it. Feel free to inspect our own doc {{< example lang="js" show_preview="false" >}} {{< js.inline >}} -{{- readFile (path.Join "site/assets/js/color-modes/index.js") -}} +{{- readFile (path.Join "site/static/docs" .Site.Params.docs_version "assets/js/color-modes.js") -}} {{< /js.inline >}} {{< /example >}} diff --git a/site/layouts/partials/header.html b/site/layouts/partials/header.html index 327ed1488..22528ae47 100644 --- a/site/layouts/partials/header.html +++ b/site/layouts/partials/header.html @@ -1,6 +1,3 @@ -{{- $colorModeJS := resources.Get "js/color-modes/index.js" }} - - @@ -22,6 +19,9 @@ {{- end }} +{{- $colorModeJS := printf "/docs/%s/assets/js/color-modes.js" $.Site.Params.docs_version -}} + + {{ partial "stylesheet" . }} {{ partial "favicons" . }} {{ partial "social" . }} diff --git a/site/static/docs/5.2/assets/js/color-modes.js b/site/static/docs/5.2/assets/js/color-modes.js new file mode 100644 index 000000000..41b6b893e --- /dev/null +++ b/site/static/docs/5.2/assets/js/color-modes.js @@ -0,0 +1,62 @@ +/*! + * Color mode toggler for Bootstrap's docs (https://getbootstrap.com/) + * Copyright 2011-2022 The Bootstrap Authors + * Licensed under the Creative Commons Attribution 3.0 Unported License. + */ + +(() => { + 'use strict' + + const storedTheme = localStorage.getItem('theme') + + const getPreferredTheme = () => { + if (storedTheme) { + return storedTheme + } + + return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light' + } + + const setTheme = function (theme) { + if (theme === 'auto' && window.matchMedia('(prefers-color-scheme: dark)').matches) { + document.documentElement.setAttribute('data-bs-theme', 'dark') + } else { + document.documentElement.setAttribute('data-bs-theme', theme) + } + } + + setTheme(getPreferredTheme()) + + const showActiveTheme = theme => { + const activeThemeIcon = document.querySelector('.theme-icon-active use') + const btnToActive = document.querySelector(`[data-bs-theme-value="${theme}"]`) + const svgOfActiveBtn = btnToActive.querySelector('svg use').getAttribute('href') + + document.querySelectorAll('[data-bs-theme-value]').forEach(element => { + element.classList.remove('active') + }) + + btnToActive.classList.add('active') + activeThemeIcon.setAttribute('href', svgOfActiveBtn) + } + + window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', () => { + 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') + localStorage.setItem('theme', theme) + setTheme(theme) + showActiveTheme(theme) + }) + }) + }) +})() -- cgit v1.2.3