diff options
Diffstat (limited to 'site/assets/js')
-rw-r--r-- | site/assets/js/application.js | 8 | ||||
-rw-r--r-- | site/assets/js/code-examples.js | 11 | ||||
-rw-r--r-- | site/assets/js/search.js | 4 | ||||
-rw-r--r-- | site/assets/js/snippets.js | 40 |
4 files changed, 39 insertions, 24 deletions
diff --git a/site/assets/js/application.js b/site/assets/js/application.js index dec2363..712b31a 100644 --- a/site/assets/js/application.js +++ b/site/assets/js/application.js @@ -4,8 +4,7 @@ /*! * JavaScript for Bootstrap's docs (https://getbootstrap.com/) - * Copyright 2011-2022 The Bootstrap Authors - * Copyright 2011-2022 Twitter, Inc. + * Copyright 2011-2023 The Bootstrap Authors * Licensed under the Creative Commons Attribution 3.0 Unported License. * For details, see https://creativecommons.org/licenses/by/3.0/. */ @@ -15,9 +14,10 @@ // Scroll the active sidebar link into view const sidenav = document.querySelector('.bd-sidebar') - if (sidenav) { + const sidenavActiveLink = document.querySelector('.bd-links-nav .active') + + if (sidenav && sidenavActiveLink) { const sidenavHeight = sidenav.clientHeight - const sidenavActiveLink = document.querySelector('.bd-links-nav .active') const sidenavActiveLinkTop = sidenavActiveLink.offsetTop const sidenavActiveLinkHeight = sidenavActiveLink.clientHeight const viewportTop = sidenavActiveLinkTop diff --git a/site/assets/js/code-examples.js b/site/assets/js/code-examples.js index 25486c2..e1f680e 100644 --- a/site/assets/js/code-examples.js +++ b/site/assets/js/code-examples.js @@ -4,8 +4,7 @@ /*! * JavaScript for Bootstrap's docs (https://getbootstrap.com/) - * Copyright 2011-2022 The Bootstrap Authors - * Copyright 2011-2022 Twitter, Inc. + * Copyright 2011-2023 The Bootstrap Authors * Licensed under the Creative Commons Attribution 3.0 Unported License. * For details, see https://creativecommons.org/licenses/by/3.0/. */ @@ -14,6 +13,7 @@ (() => { 'use strict' + // Insert copy to clipboard button before .highlight const btnTitle = 'Copy to clipboard' const btnEdit = 'Edit on StackBlitz' @@ -28,7 +28,7 @@ '</div>' ].join('') - // wrap programmatically code blocks and add copy btn. + // Wrap programmatically code blocks and add copy btn. document.querySelectorAll('.highlight') .forEach(element => { if (!element.closest('.bd-example-snippet')) { // Ignore examples made be shortcode @@ -52,11 +52,12 @@ snippetButtonTooltip('.btn-edit', btnEdit) const clipboard = new ClipboardJS('.btn-clipboard', { - target: trigger => trigger.closest('.bd-code-snippet').querySelector('.highlight') + target: trigger => trigger.closest('.bd-code-snippet').querySelector('.highlight'), + text: trigger => trigger.closest('.bd-code-snippet').querySelector('.highlight').textContent.trimEnd() }) clipboard.on('success', event => { - const iconFirstChild = event.trigger.querySelector('.bi').firstChild + const iconFirstChild = event.trigger.querySelector('.bi').firstElementChild const tooltipBtn = bootstrap.Tooltip.getInstance(event.trigger) const namespace = 'http://www.w3.org/1999/xlink' const originalXhref = iconFirstChild.getAttributeNS(namespace, 'href') diff --git a/site/assets/js/search.js b/site/assets/js/search.js index 9bad274..b095d3b 100644 --- a/site/assets/js/search.js +++ b/site/assets/js/search.js @@ -40,8 +40,6 @@ return item }) - }, - // Set debug to `true` if you want to inspect the dropdown - debug: false + } }) })() diff --git a/site/assets/js/snippets.js b/site/assets/js/snippets.js index 53f8a78..66c7a00 100644 --- a/site/assets/js/snippets.js +++ b/site/assets/js/snippets.js @@ -6,8 +6,7 @@ /*! * JavaScript for Bootstrap's docs (https://getbootstrap.com/) - * Copyright 2011-2022 The Bootstrap Authors - * Copyright 2011-2022 Twitter, Inc. + * Copyright 2011-2023 The Bootstrap Authors * Licensed under the Creative Commons Attribution 3.0 Unported License. * For details, see https://creativecommons.org/licenses/by/3.0/. */ @@ -20,7 +19,7 @@ // -------- // Tooltips // -------- - // Instantiate all tooltips in a docs or StackBlitz page + // Instantiate all tooltips in a docs or StackBlitz document.querySelectorAll('[data-bs-toggle="tooltip"]') .forEach(tooltip => { new bootstrap.Tooltip(tooltip) @@ -29,7 +28,7 @@ // -------- // Popovers // -------- - // Instantiate all popovers in a docs or StackBlitz page + // Instantiate all popovers in docs or StackBlitz document.querySelectorAll('[data-bs-toggle="popover"]') .forEach(popover => { new bootstrap.Popover(popover) @@ -50,7 +49,7 @@ }) } - // Instantiate all toasts in a docs page only + // Instantiate all toasts in docs pages only document.querySelectorAll('.bd-example .toast') .forEach(toastNode => { const toast = new bootstrap.Toast(toastNode, { @@ -60,24 +59,26 @@ toast.show() }) - // Instantiate all toasts in a docs page only + // Instantiate all toasts in docs pages only + // js-docs-start live-toast const toastTrigger = document.getElementById('liveToastBtn') const toastLiveExample = document.getElementById('liveToast') + if (toastTrigger) { + const toastBootstrap = bootstrap.Toast.getOrCreateInstance(toastLiveExample) toastTrigger.addEventListener('click', () => { - const toast = new bootstrap.Toast(toastLiveExample) - - toast.show() + toastBootstrap.show() }) } + // js-docs-end live-toast // ------------------------------- // Alerts // ------------------------------- - // Used in 'Show live toast' example in docs or StackBlitz - const alertPlaceholder = document.getElementById('liveAlertPlaceholder') - const alertTrigger = document.getElementById('liveAlertBtn') + // Used in 'Show live alert' example in docs or StackBlitz + // js-docs-start live-alert + const alertPlaceholder = document.getElementById('liveAlertPlaceholder') const appendAlert = (message, type) => { const wrapper = document.createElement('div') wrapper.innerHTML = [ @@ -90,11 +91,22 @@ alertPlaceholder.append(wrapper) } + const alertTrigger = document.getElementById('liveAlertBtn') if (alertTrigger) { alertTrigger.addEventListener('click', () => { appendAlert('Nice, you triggered this alert message!', 'success') }) } + // js-docs-end live-alert + + // -------- + // Carousels + // -------- + // Instantiate all non-autoplaying carousels in docs or StackBlitz + document.querySelectorAll('.carousel:not([data-bs-ride="carousel"])') + .forEach(carousel => { + bootstrap.Carousel.getOrCreateInstance(carousel) + }) // ------------------------------- // Checks & Radios @@ -122,6 +134,7 @@ // Modal // ------------------------------- // Modal 'Varying modal content' example in docs and StackBlitz + // js-docs-start varying-modal-content const exampleModal = document.getElementById('exampleModal') if (exampleModal) { exampleModal.addEventListener('show.bs.modal', event => { @@ -129,6 +142,8 @@ const button = event.relatedTarget // Extract info from data-bs-* attributes const recipient = button.getAttribute('data-bs-whatever') + // If necessary, you could initiate an Ajax request here + // and then do the updating in a callback. // Update the modal's content. const modalTitle = exampleModal.querySelector('.modal-title') @@ -138,6 +153,7 @@ modalBodyInput.value = recipient }) } + // js-docs-end varying-modal-content // ------------------------------- // Offcanvas |