Skip to content

Commit 8962a1c

Browse files
mdomdo
committed
Cleanup JS
1 parent b85169e commit 8962a1c

File tree

4 files changed

+46
-52
lines changed

4 files changed

+46
-52
lines changed

‎site/assets/js/application.js

Lines changed: 29 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -134,55 +134,58 @@
134134

135135
// Toggle color modes
136136

137-
var currentTheme = localStorage.getItem('theme')
138-
var currentThemeIcon = document.querySelector('#bd-theme > .bi use')
137+
var root = document.documentElement
138+
var activeTheme = localStorage.getItem('theme')
139+
var activeThemeIcon = document.querySelector('.theme-icon-active use')
139140

140-
function checkMatchMedia() {
141-
if (window.matchMedia('(prefers-color-scheme: dark)').matches && !currentTheme) {
141+
var checkSystemTheme = function () {
142+
// if OS dark mode is set, and there's no stored theme, set the theme to dark (but don't store it)
143+
if (window.matchMedia('(prefers-color-scheme: dark)').matches && !activeTheme) {
142144
document.documentElement.setAttribute('data-theme', 'dark')
143145
} else {
146+
// otherwise, set the theme to the default (light)
144147
document.documentElement.removeAttribute('data-theme')
145148
}
146149
}
147150

148-
document.querySelectorAll('.bd-theme-toggles .dropdown-item')
149-
.forEach(function (toggle) {
150-
toggle.addEventListener('click', function () {
151-
var theme = this.getAttribute('data-theme-value')
151+
var setTheme = function (theme) {
152+
document.querySelectorAll('[data-theme-value]').forEach(function (el) {
153+
el.classList.remove('active')
154+
})
152155

153-
document.querySelector('.bd-theme-toggles .current').removeAttribute('class')
154-
toggle.parentElement.setAttribute('class', 'current')
156+
var btnToActive = document.querySelector('[data-theme-value="' + theme + '"]')
157+
var svgOfActiveBtn = btnToActive.querySelector('svg use').getAttribute('href')
155158

156-
var svg = toggle.querySelector('.theme-icon use').getAttribute('href')
157-
currentThemeIcon.setAttribute('href', svg)
159+
btnToActive.classList.add('active')
160+
activeThemeIcon.setAttribute('href', svgOfActiveBtn)
161+
}
158162

159-
console.log(theme)
163+
document.querySelectorAll('[data-theme-value]')
164+
.forEach(function (toggle) {
165+
toggle.addEventListener('click', function () {
166+
var theme = this.getAttribute('data-theme-value')
160167

161-
// in OS darkmode, going from light to auto doesn't make it dark
168+
setTheme(theme)
162169

163170
if (theme === 'auto') {
164-
document.documentElement.removeAttribute('data-theme')
171+
root.removeAttribute('data-theme')
165172
localStorage.removeItem('theme')
166-
checkMatchMedia()
173+
checkSystemTheme()
167174
} else {
168-
document.documentElement.setAttribute('data-theme', theme)
175+
root.setAttribute('data-theme', theme)
169176
localStorage.setItem('theme', theme)
170177
}
171178
})
172179
})
173180

174-
if (currentTheme) {
175-
var currentThemeButton = document.querySelector('.dropdown-item[data-theme-value="' + currentTheme + '"]')
176-
document.documentElement.setAttribute('data-theme', currentTheme)
177-
document.querySelector('.bd-theme-toggles .current').removeAttribute('class')
178-
currentThemeButton.parentElement.setAttribute('class', 'current')
179-
var svg = currentThemeButton.querySelector('.theme-icon use').getAttribute('href')
180-
currentThemeIcon.setAttribute('href', svg)
181+
if (activeTheme) {
182+
root.setAttribute('data-theme', activeTheme)
183+
setTheme(activeTheme)
181184
} else {
182185
window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', function () {
183-
checkMatchMedia()
186+
checkSystemTheme()
184187
})
185-
checkMatchMedia()
188+
checkSystemTheme()
186189
}
187190

188191
// Insert copy to clipboard button before .highlight

‎site/assets/scss/_navbar.scss

Lines changed: 13 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -74,27 +74,31 @@
7474
--bs-dropdown-padding: .25rem;
7575
--bs-dropdown-link-hover-bg: rgba(var(--bd-violet-rgb), .1);
7676
--bs-dropdown-link-active-bg: rgba(var(--bd-violet-rgb), 1);
77-
@include rfs(.875rem, --bs-dropdown-font-size);
77+
@include font-size(.875rem);
7878
@include border-radius(.5rem);
7979
box-shadow: $dropdown-box-shadow;
8080

81-
.current {
82-
font-weight: 600;
83-
84-
.bi {
85-
display: block !important; // stylelint-disable-line declaration-no-important
86-
}
87-
}
88-
8981
.dropdown-item {
9082
@include border-radius(.25rem);
9183

84+
+ .dropdown-item {
85+
margin-top: .125rem;
86+
}
87+
9288
&:active {
9389
.bi {
9490
color: inherit !important; // stylelint-disable-line declaration-no-important
9591
}
9692
}
9793
}
94+
95+
.active {
96+
font-weight: 600;
97+
98+
.bi {
99+
display: block !important; // stylelint-disable-line declaration-no-important
100+
}
101+
}
98102
}
99103
}
100104

‎site/layouts/partials/docs-navbar.html

Lines changed: 3 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -94,7 +94,7 @@ <h5 class="offcanvas-title text-white" id="bdNavbarOffcanvasLabel">Bootstrap</h5
9494

9595
<li class="nav-item dropdown">
9696
<a href="#" class="nav-link py-2 px-0 px-lg-2 dropdown-toggle d-flex align-items-center" id="bd-theme" data-bs-toggle="dropdown" aria-expanded="false" data-bs-display="static">
97-
<svg class="bi my-1"><use href="#circle-half"></use></svg>
97+
<svg class="bi my-1 theme-icon-active"><use href="#circle-half"></use></svg>
9898
<span class="d-lg-none ms-2">Toggle theme</span>
9999
</a>
100100
<ul class="dropdown-menu dropdown-menu-end bd-theme-toggles" aria-labelledby="bd-theme" style="--bs-dropdown-min-width: 8rem;">
@@ -112,8 +112,8 @@ <h5 class="offcanvas-title text-white" id="bdNavbarOffcanvasLabel">Bootstrap</h5
112112
<svg class="bi ms-auto d-none"><use href="#check2"></use></svg>
113113
</button>
114114
</li>
115-
<li class="current">
116-
<button type="button" class="dropdown-item d-flex align-items-center" data-theme-value="auto">
115+
<li>
116+
<button type="button" class="dropdown-item d-flex align-items-center active" data-theme-value="auto">
117117
<svg class="bi me-2 opacity-50 theme-icon"><use href="#circle-half"></use></svg>
118118
Auto
119119
<svg class="bi ms-auto d-none"><use href="#check2"></use></svg>
@@ -122,19 +122,6 @@ <h5 class="offcanvas-title text-white" id="bdNavbarOffcanvasLabel">Bootstrap</h5
122122
</ul>
123123
</li>
124124
</ul>
125-
126-
<!-- <hr class="d-md-none text-white-50"> -->
127-
128-
<!-- <div class="vr d-none d-lg-flex mx-lg-2 my-lg-1 text-white"></div>
129-
130-
<div class="d-flex flex-row-reverse flex-lg-row">
131-
<label class="bd-theme-toggle align-self-center ms-auto p-2" data-bs-toggle="tooltip" data-bs-placement="bottom" title="Toggle mode">
132-
<input type="checkbox" class="bd-theme-toggle-checkbox" id="checkbox">
133-
<div class="visually-hidden">Toggle mode</div>
134-
<svg class="bd-theme-toggle-dark bi"><use xlink:href="#moon-stars-fill"></use></svg>
135-
<svg class="bd-theme-toggle-light bi"><use xlink:href="#sun-fill"></use></svg>
136-
</label>
137-
</div> -->
138125
</div>
139126
</div>
140127
</nav>

‎site/layouts/partials/docs-versions.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@
99
<ul class="dropdown-menu dropdown-menu-end" aria-labelledby="bd-versions">
1010
<li><h6 class="dropdown-header">v5 releases</h6></li>
1111
<li>
12-
<a class="dropdown-item d-flex align-items-center justify-content-between current" aria-current="true" href="/docs/{{ .Site.Params.docs_version }}/">
12+
<a class="dropdown-item d-flex align-items-center justify-content-between active" aria-current="true" href="/docs/{{ .Site.Params.docs_version }}/">
1313
Latest ({{ .Site.Params.docs_version }}.x)
1414
<svg class="bi"><use xlink:href="#check2"></use></svg>
1515
</a>

0 commit comments

Comments
 (0)