},
"rules": {
"no-console": "off",
- "no-new": "off",
- "unicorn/no-array-for-each": "off"
+ "no-new": "off"
}
},
{
"ecmaVersion": 2019
},
"rules": {
- "no-new": "off",
- "unicorn/no-array-for-each": "off"
+ "no-new": "off"
}
},
{
}
}
- document.querySelectorAll('[data-bs-toggle="popover"]').forEach(popoverEl => new bootstrap.Popover(popoverEl))
+ for (const popoverEl of document.querySelectorAll('[data-bs-toggle="popover"]')) {
+ new bootstrap.Popover(popoverEl)
+ }
- document.querySelectorAll('[data-bs-toggle="tooltip"]').forEach(tooltipEl => new bootstrap.Tooltip(tooltipEl))
+ for (const tooltipEl of document.querySelectorAll('[data-bs-toggle="tooltip"]')) {
+ new bootstrap.Tooltip(tooltipEl)
+ }
const tall = document.getElementById('tall')
document.getElementById('tall-toggle').addEventListener('click', () => {
<script>
/* global bootstrap: false */
- document.querySelectorAll('[data-bs-toggle="popover"]').forEach(popoverEl => new bootstrap.Popover(popoverEl))
+ for (const popoverEl of document.querySelectorAll('[data-bs-toggle="popover"]')) {
+ new bootstrap.Popover(popoverEl)
+ }
</script>
</body>
</html>
/* global bootstrap: false */
window.addEventListener('load', () => {
- document.querySelectorAll('.toast').forEach(toastEl => new bootstrap.Toast(toastEl))
+ for (const toastEl of document.querySelectorAll('.toast')) {
+ new bootstrap.Toast(toastEl)
+ }
document.getElementById('btnShowToast').addEventListener('click', () => {
- document.querySelectorAll('.toast').forEach(toastEl => bootstrap.Toast.getInstance(toastEl).show())
+ for (const toastEl of document.querySelectorAll('.toast')) {
+ bootstrap.Toast.getInstance(toastEl).show()
+ }
})
document.getElementById('btnHideToast').addEventListener('click', () => {
- document.querySelectorAll('.toast').forEach(toastEl => bootstrap.Toast.getInstance(toastEl).hide())
+ for (const toastEl of document.querySelectorAll('.toast')) {
+ bootstrap.Toast.getInstance(toastEl).hide()
+ }
})
})
</script>
})
targetTooltip.show()
- document.querySelectorAll('[data-bs-toggle="tooltip"]').forEach(tooltipEl => new bootstrap.Tooltip(tooltipEl))
+ for (const tooltipEl of document.querySelectorAll('[data-bs-toggle="tooltip"]')) {
+ new bootstrap.Tooltip(tooltipEl)
+ }
</script>
<script>
].join('')
// Wrap programmatically code blocks and add copy btn.
- document.querySelectorAll('.highlight')
- .forEach(element => {
- // Ignore examples made by shortcode
- if (!element.closest('.bd-example-snippet')) {
- element.insertAdjacentHTML('beforebegin', btnHtml)
- element.previousElementSibling.append(element)
- }
- })
+ for (const element of document.querySelectorAll('.highlight')) {
+ // Ignore examples made by shortcode
+ if (!element.closest('.bd-example-snippet')) {
+ element.insertAdjacentHTML('beforebegin', btnHtml)
+ element.previousElementSibling.append(element)
+ }
+ }
/**
*
* @param {string} title
*/
function snippetButtonTooltip(selector, title) {
- document.querySelectorAll(selector).forEach(btn => {
+ for (const btn of document.querySelectorAll(selector)) {
bootstrap.Tooltip.getOrCreateInstance(btn, { title })
- })
+ }
}
snippetButtonTooltip('.btn-clipboard', btnTitle)
// Tooltips
// --------
// Instantiate all tooltips in a docs or StackBlitz
- document.querySelectorAll('[data-bs-toggle="tooltip"]')
- .forEach(tooltip => {
- new bootstrap.Tooltip(tooltip)
- })
+ for (const tooltip of document.querySelectorAll('[data-bs-toggle="tooltip"]')) {
+ new bootstrap.Tooltip(tooltip)
+ }
// --------
// Popovers
// --------
// Instantiate all popovers in docs or StackBlitz
- document.querySelectorAll('[data-bs-toggle="popover"]')
- .forEach(popover => {
- new bootstrap.Popover(popover)
- })
+ for (const popover of document.querySelectorAll('[data-bs-toggle="popover"]')) {
+ new bootstrap.Popover(popover)
+ }
// -------------------------------
// Toasts
}
// Instantiate all toasts in docs pages only
- document.querySelectorAll('.bd-example .toast')
- .forEach(toastNode => {
- const toast = new bootstrap.Toast(toastNode, {
- autohide: false
- })
-
- toast.show()
+ for (const toastNode of document.querySelectorAll('.bd-example .toast')) {
+ const toast = new bootstrap.Toast(toastNode, {
+ autohide: false
})
+ toast.show()
+ }
+
// Instantiate all toasts in docs pages only
// js-docs-start live-toast
const toastTrigger = document.getElementById('liveToastBtn')
// Carousels
// --------
// Instantiate all non-autoplaying carousels in docs or StackBlitz
- document.querySelectorAll('.carousel:not([data-bs-ride="carousel"])')
- .forEach(carousel => {
- bootstrap.Carousel.getOrCreateInstance(carousel)
- })
+ for (const carousel of document.querySelectorAll('.carousel:not([data-bs-ride="carousel"])')) {
+ bootstrap.Carousel.getOrCreateInstance(carousel)
+ }
// -------------------------------
// Checks & Radios
// -------------------------------
// Indeterminate checkbox example in docs and StackBlitz
- document.querySelectorAll('.bd-example-indeterminate [type="checkbox"]')
- .forEach(checkbox => {
- if (checkbox.id.includes('Indeterminate')) {
- checkbox.indeterminate = true
- }
- })
+ for (const checkbox of document.querySelectorAll('.bd-example-indeterminate [type="checkbox"]')) {
+ if (checkbox.id.includes('Indeterminate')) {
+ checkbox.indeterminate = true
+ }
+ }
// -------------------------------
// Links
// -------------------------------
// Disable empty links in docs examples only
- document.querySelectorAll('.bd-content [href="#"]')
- .forEach(link => {
- link.addEventListener('click', event => {
- event.preventDefault()
- })
+ for (const link of document.querySelectorAll('.bd-content [href="#"]')) {
+ link.addEventListener('click', event => {
+ event.preventDefault()
})
+ }
// -------------------------------
// Modal
// 'Offcanvas components' example in docs only
const myOffcanvas = document.querySelectorAll('.bd-example-offcanvas .offcanvas')
if (myOffcanvas) {
- myOffcanvas.forEach(offcanvas => {
+ for (const offcanvas of myOffcanvas) {
offcanvas.addEventListener('show.bs.offcanvas', event => {
event.preventDefault()
}, false)
- })
+ }
}
})()
For example, to toggle all buttons
```js
-document.querySelectorAll('.btn').forEach(buttonElement => {
+for (const buttonElement of document.querySelectorAll('.btn')) {
const button = bootstrap.Button.getOrCreateInstance(buttonElement)
button.toggle()
-})
+}
```
## CSS
```js
const triggerTabList = document.querySelectorAll('#myTab a')
-triggerTabList.forEach(triggerEl => {
+for (const triggerEl of triggerTabList) {
const tabTrigger = new bootstrap.Tab(triggerEl)
triggerEl.addEventListener('click', event => {
event.preventDefault()
tabTrigger.show()
})
-})
+}
```
You can activate individual list item in several ways:
```js
const tabElms = document.querySelectorAll('a[data-bs-toggle="list"]')
-tabElms.forEach(tabElm => {
+for (const tabElm of tabElms) {
tabElm.addEventListener('shown.bs.tab', event => {
event.target // newly activated tab
event.relatedTarget // previous active tab
})
-})
+}
```
```js
const triggerTabList = document.querySelectorAll('#myTab button')
-triggerTabList.forEach(triggerEl => {
+for (const triggerEl of triggerTabList) {
const tabTrigger = new bootstrap.Tab(triggerEl)
triggerEl.addEventListener('click', event => {
event.preventDefault()
tabTrigger.show()
})
-})
+}
```
You can activate individual tabs in several ways:
Target elements that aren’t visible will be ignored and their corresponding nav items won't receive an `.active` class. Scrollspy instances initialized in a non-visible wrapper will ignore all target elements. Use the `refresh` method to check for observable elements once the wrapper becomes visible.
```js
-document.querySelectorAll('#nav-tab>[data-bs-toggle="tab"]').forEach(el => {
+for (const el of document.querySelectorAll('#nav-tab > [data-bs-toggle="tab"]')) {
el.addEventListener('shown.bs.tab', () => {
const target = el.getAttribute('data-bs-target')
const scrollElem = document.querySelector(`${target} [data-bs-spy="scroll"]`)
bootstrap.ScrollSpy.getOrCreateInstance(scrollElem).refresh()
})
-})
+}
```
## Usage
```js
const dataSpyList = document.querySelectorAll('[data-bs-spy="scroll"]')
-dataSpyList.forEach(dataSpyEl => {
+for (const dataSpyEl of dataSpyList) {
bootstrap.ScrollSpy.getInstance(dataSpyEl).refresh()
-})
+}
```
### Events
'use strict'
// Tooltip and popover demos
- document.querySelectorAll('.tooltip-demo')
- .forEach(tooltip => {
- new bootstrap.Tooltip(tooltip, {
- selector: '[data-bs-toggle="tooltip"]'
- })
- })
-
- document.querySelectorAll('[data-bs-toggle="popover"]')
- .forEach(popover => {
- new bootstrap.Popover(popover)
+ for (const tooltip of document.querySelectorAll('.tooltip-demo')) {
+ new bootstrap.Tooltip(tooltip, {
+ selector: '[data-bs-toggle="tooltip"]'
})
+ }
- document.querySelectorAll('.toast')
- .forEach(toastNode => {
- const toast = new bootstrap.Toast(toastNode, {
- autohide: false
- })
+ for (const popover of document.querySelectorAll('[data-bs-toggle="popover"]')) {
+ new bootstrap.Popover(popover)
+ }
- toast.show()
+ for (const toastNode of document.querySelectorAll('.toast')) {
+ const toast = new bootstrap.Toast(toastNode, {
+ autohide: false
})
+ toast.show()
+ }
+
// Disable empty links and submit buttons
- document.querySelectorAll('[href="#"], [type="submit"]')
- .forEach(link => {
- link.addEventListener('click', event => {
- event.preventDefault()
- })
+ for (const link of document.querySelectorAll('[href="#"], [type="submit"]')) {
+ link.addEventListener('click', event => {
+ event.preventDefault()
})
+ }
function setActiveItem() {
const { hash } = window.location
'use strict'
// Fetch all the forms we want to apply custom Bootstrap validation styles to
- const forms = document.querySelectorAll('.needs-validation');
+ const forms = document.querySelectorAll('.needs-validation')
// Loop over them and prevent submission
- [...forms].forEach(form => {
+ for (const form of forms) {
form.addEventListener('submit', event => {
if (!form.checkValidity()) {
event.preventDefault()
form.classList.add('was-validated')
}, false)
- })
+ }
})()
(() => {
'use strict'
const tooltipTriggerList = [...document.querySelectorAll('[data-bs-toggle="tooltip"]')]
- tooltipTriggerList.forEach(tooltipTriggerEl => {
+ for (const tooltipTriggerEl of tooltipTriggerList) {
new bootstrap.Tooltip(tooltipTriggerEl)
- })
+ }
})()
<script type="module">
import { Toast } from 'bootstrap.esm.min.js'
- Array.from(document.querySelectorAll('.toast'))
- .forEach(toastNode => new Toast(toastNode))
+ for (const toastNode of document.querySelectorAll('.toast')) {
+ new Toast(toastNode))
+ }
</script>
```
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 => {
+ for (const element of document.querySelectorAll('[data-bs-theme-value]')) {
element.classList.remove('active')
element.setAttribute('aria-pressed', 'false')
- })
+ }
btnToActive.classList.add('active')
btnToActive.setAttribute('aria-pressed', 'true')
window.addEventListener('DOMContentLoaded', () => {
showActiveTheme(getPreferredTheme())
- document.querySelectorAll('[data-bs-theme-value]')
- .forEach(toggle => {
- toggle.addEventListener('click', () => {
- const theme = toggle.getAttribute('data-bs-theme-value')
- setStoredTheme(theme)
- setTheme(theme)
- showActiveTheme(theme, true)
- })
+ for (const toggle of document.querySelectorAll('[data-bs-theme-value]')) {
+ toggle.addEventListener('click', () => {
+ const theme = toggle.getAttribute('data-bs-theme-value')
+ setStoredTheme(theme)
+ setTheme(theme)
+ showActiveTheme(theme, true)
})
+ }
})
})()
'use strict'
// Fetch all the forms we want to apply custom Bootstrap validation styles to
- const forms = document.querySelectorAll('.needs-validation');
+ const forms = document.querySelectorAll('.needs-validation')
// Loop over them and prevent submission
- [...forms].forEach(form => {
+ for (const form of forms) {
form.addEventListener('submit', event => {
if (!form.checkValidity()) {
event.preventDefault()
form.classList.add('was-validated')
}, false)
- })
+ }
})()
projects / thirdparty / bootstrap.git / commitdiff
