mirror of
https://github.com/twbs/bootstrap.git
synced 2025-02-20 17:54:23 +01:00
ref(Docs assets): Separate js assets
This commit is contained in:
GeoSot
Mark Otto
parent
bca99232b8
commit
d2497b0384
@ -10,8 +10,6 @@
|
||||
* For details, see https://creativecommons.org/licenses/by/3.0/.
|
||||
*/
|
||||
|
||||
/* global bootstrap: false */
|
||||
|
||||
(() => {
|
||||
'use strict'
|
||||
|
||||
@ -29,114 +27,4 @@
|
||||
sidenav.scrollTop = viewportTop - (sidenavHeight / 2) + (sidenavActiveLinkHeight / 2)
|
||||
}
|
||||
}
|
||||
|
||||
// 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)
|
||||
})
|
||||
|
||||
const toastPlacement = document.getElementById('toastPlacement')
|
||||
if (toastPlacement) {
|
||||
document.getElementById('selectToastPlacement').addEventListener('change', function () {
|
||||
if (!toastPlacement.dataset.originalClass) {
|
||||
toastPlacement.dataset.originalClass = toastPlacement.className
|
||||
}
|
||||
|
||||
toastPlacement.className = `${toastPlacement.dataset.originalClass} ${this.value}`
|
||||
})
|
||||
}
|
||||
|
||||
document.querySelectorAll('.bd-example .toast')
|
||||
.forEach(toastNode => {
|
||||
const toast = new bootstrap.Toast(toastNode, {
|
||||
autohide: false
|
||||
})
|
||||
|
||||
toast.show()
|
||||
})
|
||||
|
||||
const toastTrigger = document.getElementById('liveToastBtn')
|
||||
const toastLiveExample = document.getElementById('liveToast')
|
||||
if (toastTrigger) {
|
||||
toastTrigger.addEventListener('click', () => {
|
||||
const toast = new bootstrap.Toast(toastLiveExample)
|
||||
|
||||
toast.show()
|
||||
})
|
||||
}
|
||||
|
||||
const alertPlaceholder = document.getElementById('liveAlertPlaceholder')
|
||||
const alertTrigger = document.getElementById('liveAlertBtn')
|
||||
|
||||
function alert(message, type) {
|
||||
const wrapper = document.createElement('div')
|
||||
wrapper.innerHTML = `<div class="alert alert-${type} alert-dismissible" role="alert">${message}<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button></div>`
|
||||
|
||||
alertPlaceholder.append(wrapper)
|
||||
}
|
||||
|
||||
if (alertTrigger) {
|
||||
alertTrigger.addEventListener('click', () => {
|
||||
alert('Nice, you triggered this alert message!', 'success')
|
||||
})
|
||||
}
|
||||
|
||||
// Demos within modals
|
||||
document.querySelectorAll('.tooltip-test')
|
||||
.forEach(tooltip => {
|
||||
new bootstrap.Tooltip(tooltip)
|
||||
})
|
||||
|
||||
document.querySelectorAll('.popover-test')
|
||||
.forEach(popover => {
|
||||
new bootstrap.Popover(popover)
|
||||
})
|
||||
|
||||
// Indeterminate checkbox example
|
||||
document.querySelectorAll('.bd-example-indeterminate [type="checkbox"]')
|
||||
.forEach(checkbox => {
|
||||
checkbox.indeterminate = true
|
||||
})
|
||||
|
||||
// Disable empty links in docs examples
|
||||
document.querySelectorAll('.bd-content [href="#"]')
|
||||
.forEach(link => {
|
||||
link.addEventListener('click', event => {
|
||||
event.preventDefault()
|
||||
})
|
||||
})
|
||||
|
||||
// Modal relatedTarget demo
|
||||
const exampleModal = document.getElementById('exampleModal')
|
||||
if (exampleModal) {
|
||||
exampleModal.addEventListener('show.bs.modal', event => {
|
||||
// Button that triggered the modal
|
||||
const button = event.relatedTarget
|
||||
// Extract info from data-bs-* attributes
|
||||
const recipient = button.getAttribute('data-bs-whatever')
|
||||
|
||||
// Update the modal's content.
|
||||
const modalTitle = exampleModal.querySelector('.modal-title')
|
||||
const modalBodyInput = exampleModal.querySelector('.modal-body input')
|
||||
|
||||
modalTitle.textContent = `New message to ${recipient}`
|
||||
modalBodyInput.value = recipient
|
||||
})
|
||||
}
|
||||
|
||||
// Offcanvas demo
|
||||
const myOffcanvas = document.querySelector('.bd-example-offcanvas #offcanvas')
|
||||
if (myOffcanvas) {
|
||||
myOffcanvas.addEventListener('show.bs.offcanvas', event => {
|
||||
event.preventDefault()
|
||||
}, false)
|
||||
}
|
||||
})()
|
||||
|
||||
132
site/assets/js/snippets.js
Normal file
132
site/assets/js/snippets.js
Normal file
@ -0,0 +1,132 @@
|
||||
// NOTICE!! DO NOT USE ANY OF THIS JAVASCRIPT
|
||||
// IT'S ALL JUST JUNK FOR OUR DOCS!
|
||||
// ++++++++++++++++++++++++++++++++++++++++++
|
||||
|
||||
/*!
|
||||
* JavaScript for Bootstrap's docs (https://getbootstrap.com/)
|
||||
* Copyright 2011-2022 The Bootstrap Authors
|
||||
* Copyright 2011-2022 Twitter, Inc.
|
||||
* Licensed under the Creative Commons Attribution 3.0 Unported License.
|
||||
* For details, see https://creativecommons.org/licenses/by/3.0/.
|
||||
*/
|
||||
|
||||
/* global bootstrap: false */
|
||||
|
||||
(() => {
|
||||
'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)
|
||||
})
|
||||
|
||||
const toastPlacement = document.getElementById('toastPlacement')
|
||||
if (toastPlacement) {
|
||||
document.getElementById('selectToastPlacement').addEventListener('change', function () {
|
||||
if (!toastPlacement.dataset.originalClass) {
|
||||
toastPlacement.dataset.originalClass = toastPlacement.className
|
||||
}
|
||||
|
||||
toastPlacement.className = `${toastPlacement.dataset.originalClass} ${this.value}`
|
||||
})
|
||||
}
|
||||
|
||||
document.querySelectorAll('.bd-example .toast')
|
||||
.forEach(toastNode => {
|
||||
const toast = new bootstrap.Toast(toastNode, {
|
||||
autohide: false
|
||||
})
|
||||
|
||||
toast.show()
|
||||
})
|
||||
|
||||
const toastTrigger = document.getElementById('liveToastBtn')
|
||||
const toastLiveExample = document.getElementById('liveToast')
|
||||
if (toastTrigger) {
|
||||
toastTrigger.addEventListener('click', () => {
|
||||
const toast = new bootstrap.Toast(toastLiveExample)
|
||||
|
||||
toast.show()
|
||||
})
|
||||
}
|
||||
|
||||
const alertPlaceholder = document.getElementById('liveAlertPlaceholder')
|
||||
const alertTrigger = document.getElementById('liveAlertBtn')
|
||||
|
||||
const appendAlert = (message, type) => {
|
||||
const wrapper = document.createElement('div')
|
||||
wrapper.innerHTML = [
|
||||
`<div class="alert alert-${type} alert-dismissible" role="alert">`,
|
||||
` <div>${message}</div>`,
|
||||
' <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>',
|
||||
'</div>'
|
||||
].join('')
|
||||
|
||||
alertPlaceholder.append(wrapper)
|
||||
}
|
||||
|
||||
if (alertTrigger) {
|
||||
alertTrigger.addEventListener('click', () => {
|
||||
appendAlert('Nice, you triggered this alert message!', 'success')
|
||||
})
|
||||
}
|
||||
|
||||
// Demos within modals
|
||||
document.querySelectorAll('.tooltip-test')
|
||||
.forEach(tooltip => {
|
||||
new bootstrap.Tooltip(tooltip)
|
||||
})
|
||||
|
||||
document.querySelectorAll('.popover-test')
|
||||
.forEach(popover => {
|
||||
new bootstrap.Popover(popover)
|
||||
})
|
||||
|
||||
// Indeterminate checkbox example
|
||||
document.querySelectorAll('.bd-example-indeterminate [type="checkbox"]')
|
||||
.forEach(checkbox => {
|
||||
checkbox.indeterminate = true
|
||||
})
|
||||
|
||||
// Disable empty links in docs examples
|
||||
document.querySelectorAll('.bd-content [href="#"]')
|
||||
.forEach(link => {
|
||||
link.addEventListener('click', event => {
|
||||
event.preventDefault()
|
||||
})
|
||||
})
|
||||
|
||||
// Modal relatedTarget demo
|
||||
const exampleModal = document.getElementById('exampleModal')
|
||||
if (exampleModal) {
|
||||
exampleModal.addEventListener('show.bs.modal', event => {
|
||||
// Button that triggered the modal
|
||||
const button = event.relatedTarget
|
||||
// Extract info from data-bs-* attributes
|
||||
const recipient = button.getAttribute('data-bs-whatever')
|
||||
|
||||
// Update the modal's content.
|
||||
const modalTitle = exampleModal.querySelector('.modal-title')
|
||||
const modalBodyInput = exampleModal.querySelector('.modal-body input')
|
||||
|
||||
modalTitle.textContent = `New message to ${recipient}`
|
||||
modalBodyInput.value = recipient
|
||||
})
|
||||
}
|
||||
|
||||
// Offcanvas demo
|
||||
const myOffcanvas = document.querySelector('.bd-example-offcanvas #offcanvas')
|
||||
if (myOffcanvas) {
|
||||
myOffcanvas.addEventListener('show.bs.offcanvas', event => {
|
||||
event.preventDefault()
|
||||
}, false)
|
||||
}
|
||||
})()
|
||||
Loading…
x
Reference in New Issue
Block a user