rooty/Bootstrap
0
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2025-02-19 16:54:24 +01:00
Code Issues Actions Packages Releases Activity

Enhance the javascript

Browse Source
This commit is contained in:
louismaxime.piton 2023-10-23 17:06:39 +02:00
parent aad8c9e353
commit 930867b09a
4 changed files with 19 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
site/assets/js/code-examples.js
View File

@ -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 = [
'<div class="bd-code-snippet">',
@ -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'),

3
site/assets/scss/_clipboard-js.scss
View File

@ -18,7 +18,8 @@
}
.btn-clipboard,
.btn-edit {
.btn-edit,
.btn-theme > .dropdown-toggle {
display: block;
padding: .5em;
line-height: 1;

9
site/layouts/shortcodes/example.html
View File

@ -31,13 +31,8 @@
<div class="d-flex align-items-center highlight-toolbar ps-3 pe-2 py-1 border-0 border-top border-bottom">
<small class="font-monospace text-body-secondary text-uppercase">{{- $lang -}}</small>
<div class="d-flex ms-auto">
<div class="position-relative">
<button class="btn btn-link nav-link py-2 px-0 px-lg-2 dropdown-toggle d-flex align-items-center"
type="button"
aria-expanded="false"
data-bs-toggle="dropdown"
data-bs-display="static"
aria-label="Toggle theme (auto)">
<div class="btn-theme dropdown" title="Toggle local theme">
<button class="dropdown-toggle d-flex align-items-center" type="button" aria-expanded="false" data-bs-toggle="dropdown" data-bs-display="static" aria-label="Toggle theme (auto)">
<svg class="bi my-1 theme-icon-active"><use href="#circle-half"></use></svg>
</button>
<ul class="dropdown-menu dropdown-menu-end" aria-labelledby="bd-theme-text">

24
site/static/docs/5.3/assets/js/color-modes.js
View File

@ -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)