diff --git a/site/assets/js/application.js b/site/assets/js/application.js index 20d917990e..dec23635d3 100644 --- a/site/assets/js/application.js +++ b/site/assets/js/application.js @@ -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 = `` - - 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) - } })() diff --git a/site/assets/js/snippets.js b/site/assets/js/snippets.js new file mode 100644 index 0000000000..61aec7d085 --- /dev/null +++ b/site/assets/js/snippets.js @@ -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 = [ + `' + ].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) + } +})()