From 7d52cf793f8d3256589466c176194ae04994ae50 Mon Sep 17 00:00:00 2001 From: "louismaxime.piton" Date: Thu, 5 Oct 2023 15:00:31 +0200 Subject: [PATCH 1/3] Add a contextual color mode switcher in the documentation --- site/assets/scss/_component-examples.scss | 2 ++ site/layouts/shortcodes/example.html | 33 +++++++++++++++++++ site/static/docs/5.3/assets/js/color-modes.js | 24 ++++++++------ 3 files changed, 49 insertions(+), 10 deletions(-) diff --git a/site/assets/scss/_component-examples.scss b/site/assets/scss/_component-examples.scss index fde8b7f4164a..dc20d1fe2f1b 100644 --- a/site/assets/scss/_component-examples.scss +++ b/site/assets/scss/_component-examples.scss @@ -21,6 +21,8 @@ position: relative; padding: var(--bd-example-padding); margin: 0 ($bd-gutter-x * -.5) 1rem; + color: var(--bs-body-color); + background-color: var(--bs-body-bg); border: solid var(--bs-border-color); border-width: 1px 0; @include clearfix(); diff --git a/site/layouts/shortcodes/example.html b/site/layouts/shortcodes/example.html index a162db521d49..96fbcfd117eb 100644 --- a/site/layouts/shortcodes/example.html +++ b/site/layouts/shortcodes/example.html @@ -31,6 +31,39 @@
{{- $lang -}}
+
+ +
    +
  • + +
    • +
  • + +
    • +
  • + +
    • +
+
diff --git a/site/static/docs/5.3/assets/js/color-modes.js b/site/static/docs/5.3/assets/js/color-modes.js index 9f22daa1b286..ec5b8d9c40fa 100644 --- a/site/static/docs/5.3/assets/js/color-modes.js +++ b/site/static/docs/5.3/assets/js/color-modes.js @@ -29,19 +29,17 @@ setTheme(getPreferredTheme()) - const showActiveTheme = (theme, focus = false) => { - const themeSwitcher = document.querySelector('#bd-theme') - + const showActiveTheme = (theme, focus = false, themeSwitcher = document.querySelector('#bd-theme')) => { if (!themeSwitcher) { return } const themeSwitcherText = document.querySelector('#bd-theme-text') - const activeThemeIcon = document.querySelector('.theme-icon-active use') - const btnToActive = document.querySelector(`[data-bs-theme-value="${theme}"]`) + const activeThemeIcon = themeSwitcher.parentElement.querySelector('.theme-icon-active use') + const btnToActive = themeSwitcher.parentElement.querySelector(`[data-bs-theme-value="${theme}"]`) const svgOfActiveBtn = btnToActive.querySelector('svg use').getAttribute('href') - document.querySelectorAll('[data-bs-theme-value]').forEach(element => { + themeSwitcher.parentElement.querySelectorAll('[data-bs-theme-value]').forEach(element => { element.classList.remove('active') element.setAttribute('aria-pressed', 'false') }) @@ -49,7 +47,7 @@ btnToActive.classList.add('active') btnToActive.setAttribute('aria-pressed', 'true') activeThemeIcon.setAttribute('href', svgOfActiveBtn) - const themeSwitcherLabel = `${themeSwitcherText.textContent} (${btnToActive.dataset.bsThemeValue})` + const themeSwitcherLabel = `${themeSwitcherText.textContent} (${btnToActive.dataset.bsThemeValue})${btnToActive.closest('.highlight-toolbar') ? ' (local)' : ''}` themeSwitcher.setAttribute('aria-label', themeSwitcherLabel) if (focus) { @@ -71,9 +69,15 @@ .forEach(toggle => { toggle.addEventListener('click', () => { const theme = toggle.getAttribute('data-bs-theme-value') - setStoredTheme(theme) - setTheme(theme) - showActiveTheme(theme, true) + + if (toggle.closest('.highlight-toolbar')) { + toggle.closest('.highlight-toolbar').previousElementSibling.setAttribute('data-bs-theme', theme) + showActiveTheme(theme, true, toggle.closest('.dropdown-menu').previousElementSibling) + } else { + setStoredTheme(theme) + setTheme(theme) + showActiveTheme(theme, true) + } }) }) }) From 930867b09a75a7164f322f3e9d1d04683f173837 Mon Sep 17 00:00:00 2001 From: "louismaxime.piton" Date: Mon, 23 Oct 2023 17:06:39 +0200 Subject: [PATCH 2/3] Enhance the javascript --- site/assets/js/code-examples.js | 2 ++ site/assets/scss/_clipboard-js.scss | 3 ++- site/layouts/shortcodes/example.html | 9 ++----- site/static/docs/5.3/assets/js/color-modes.js | 24 ++++++++++--------- 4 files changed, 19 insertions(+), 19 deletions(-) diff --git a/site/assets/js/code-examples.js b/site/assets/js/code-examples.js index 3b03b17c49ca..c1261899fda8 100644 --- a/site/assets/js/code-examples.js +++ b/site/assets/js/code-examples.js @@ -17,6 +17,7 @@ // Insert copy to clipboard button before .highlight const btnTitle = 'Copy to clipboard' const btnEdit = 'Edit on StackBlitz' + // const btnTheme = 'Toggle local theme' const btnHtml = [ '
', @@ -51,6 +52,7 @@ snippetButtonTooltip('.btn-clipboard', btnTitle) snippetButtonTooltip('.btn-edit', btnEdit) + // snippetButtonTooltip('.btn-theme', btnTheme) const clipboard = new ClipboardJS('.btn-clipboard', { target: trigger => trigger.closest('.bd-code-snippet').querySelector('.highlight'), diff --git a/site/assets/scss/_clipboard-js.scss b/site/assets/scss/_clipboard-js.scss index de709d09ba7f..f0ab74947100 100644 --- a/site/assets/scss/_clipboard-js.scss +++ b/site/assets/scss/_clipboard-js.scss @@ -18,7 +18,8 @@ } .btn-clipboard, -.btn-edit { +.btn-edit, +.btn-theme > .dropdown-toggle { display: block; padding: .5em; line-height: 1; diff --git a/site/layouts/shortcodes/example.html b/site/layouts/shortcodes/example.html index 96fbcfd117eb..ffb3400b56a8 100644 --- a/site/layouts/shortcodes/example.html +++ b/site/layouts/shortcodes/example.html @@ -31,13 +31,8 @@
{{- $lang -}}
-
-
    diff --git a/site/static/docs/5.3/assets/js/color-modes.js b/site/static/docs/5.3/assets/js/color-modes.js index ec5b8d9c40fa..31ae959e8533 100644 --- a/site/static/docs/5.3/assets/js/color-modes.js +++ b/site/static/docs/5.3/assets/js/color-modes.js @@ -19,27 +19,29 @@ return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light' } - const setTheme = theme => { + const setTheme = (theme, element = document.documentElement) => { if (theme === 'auto' && window.matchMedia('(prefers-color-scheme: dark)').matches) { - document.documentElement.setAttribute('data-bs-theme', 'dark') + element.setAttribute('data-bs-theme', 'dark') } else { - document.documentElement.setAttribute('data-bs-theme', theme) + element.setAttribute('data-bs-theme', theme) } } setTheme(getPreferredTheme()) - const showActiveTheme = (theme, focus = false, themeSwitcher = document.querySelector('#bd-theme')) => { + const showActiveTheme = (theme, focus = false, selectedToggler = document.querySelector('#bd-theme')) => { + const themeSwitcher = selectedToggler.closest('.dropdown') if (!themeSwitcher) { return } + const themeSwitcherButton = themeSwitcher.querySelector('.dropdown-toggle') const themeSwitcherText = document.querySelector('#bd-theme-text') - const activeThemeIcon = themeSwitcher.parentElement.querySelector('.theme-icon-active use') - const btnToActive = themeSwitcher.parentElement.querySelector(`[data-bs-theme-value="${theme}"]`) + const activeThemeIcon = themeSwitcher.querySelector('.theme-icon-active use') + const btnToActive = themeSwitcher.querySelector(`[data-bs-theme-value="${theme}"]`) const svgOfActiveBtn = btnToActive.querySelector('svg use').getAttribute('href') - themeSwitcher.parentElement.querySelectorAll('[data-bs-theme-value]').forEach(element => { + themeSwitcher.querySelectorAll('[data-bs-theme-value]').forEach(element => { element.classList.remove('active') element.setAttribute('aria-pressed', 'false') }) @@ -48,10 +50,10 @@ btnToActive.setAttribute('aria-pressed', 'true') activeThemeIcon.setAttribute('href', svgOfActiveBtn) const themeSwitcherLabel = `${themeSwitcherText.textContent} (${btnToActive.dataset.bsThemeValue})${btnToActive.closest('.highlight-toolbar') ? ' (local)' : ''}` - themeSwitcher.setAttribute('aria-label', themeSwitcherLabel) + themeSwitcherButton.setAttribute('aria-label', themeSwitcherLabel) if (focus) { - themeSwitcher.focus() + themeSwitcherButton.focus() } } @@ -70,8 +72,8 @@ toggle.addEventListener('click', () => { const theme = toggle.getAttribute('data-bs-theme-value') - if (toggle.closest('.highlight-toolbar')) { - toggle.closest('.highlight-toolbar').previousElementSibling.setAttribute('data-bs-theme', theme) + if (toggle.closest('.bd-code-snippet')) { + setTheme(theme, toggle.closest('.bd-code-snippet').firstChild) showActiveTheme(theme, true, toggle.closest('.dropdown-menu').previousElementSibling) } else { setStoredTheme(theme) From 6d19cad5db5b1127330d141ce2f14dfd6406ef7e Mon Sep 17 00:00:00 2001 From: Louis-Maxime Piton Date: Tue, 23 Jul 2024 09:25:22 +0200 Subject: [PATCH 3/3] . --- site/assets/js/partials/code-examples.js | 2 -- site/static/docs/5.3/assets/js/color-modes.js | 2 +- 2 files changed, 1 insertion(+), 3 deletions(-) diff --git a/site/assets/js/partials/code-examples.js b/site/assets/js/partials/code-examples.js index 164a77db4ee3..d81191a96565 100644 --- a/site/assets/js/partials/code-examples.js +++ b/site/assets/js/partials/code-examples.js @@ -17,7 +17,6 @@ export default () => { // Insert copy to clipboard button before .highlight const btnTitle = 'Copy to clipboard' const btnEdit = 'Edit on StackBlitz' - // const btnTheme = 'Toggle local theme' const btnHtml = [ '
    ', @@ -52,7 +51,6 @@ export default () => { snippetButtonTooltip('.btn-clipboard', btnTitle) snippetButtonTooltip('.btn-edit', btnEdit) - // snippetButtonTooltip('.btn-theme', btnTheme) const clipboard = new ClipboardJS('.btn-clipboard', { target: trigger => trigger.closest('.bd-code-snippet').querySelector('.highlight'), diff --git a/site/static/docs/5.3/assets/js/color-modes.js b/site/static/docs/5.3/assets/js/color-modes.js index be4b178ebf15..f0a2c5c4dad0 100644 --- a/site/static/docs/5.3/assets/js/color-modes.js +++ b/site/static/docs/5.3/assets/js/color-modes.js @@ -73,7 +73,7 @@ const theme = toggle.getAttribute('data-bs-theme-value') if (toggle.closest('.bd-code-snippet')) { - setTheme(theme, toggle.closest('.bd-code-snippet').firstChild) + setTheme(theme, toggle.closest('.bd-code-snippet').firstElementChild) showActiveTheme(theme, true, toggle.closest('.dropdown-menu').previousElementSibling) } else { setStoredTheme(theme)