diff options
author | Julien Déramond <julien.deramond@orange.com> | 2022-05-27 00:29:08 +0300 |
---|---|---|
committer | GitHub <noreply@github.com> | 2022-05-27 00:29:08 +0300 |
commit | 8b85267739e4bee63f13dfa14a94f94926b4fd7a (patch) | |
tree | 4f8d807c01f9d90741887263e21348c016419fed /site/assets | |
parent | 4a3c004c349ec9b20990c8aa760d12c50c450bbd (diff) |
Fix StackBlitz examples by embedding snippets.js when needed (#36352)
* Fix StackBlitz examples by embedding snippets.js when needed
* Fix Popovers
* Fix tooltips
* Fix Toasts
* Add comment sections
* Fix Alerts
* Indeterminate heckboxes + classes handling
* Nothing to do for links
* Fix modals
* Nothing to do for Offcanvas
* Remove correctly .bd-example
* Add body .p-3 for all StackBlitz examples
Diffstat (limited to 'site/assets')
-rw-r--r-- | site/assets/js/snippets.js | 46 |
1 files changed, 38 insertions, 8 deletions
diff --git a/site/assets/js/snippets.js b/site/assets/js/snippets.js index 4a9a9dc8f6..5e58493de5 100644 --- a/site/assets/js/snippets.js +++ b/site/assets/js/snippets.js @@ -1,5 +1,7 @@ -// NOTICE!! DO NOT USE ANY OF THIS JAVASCRIPT -// IT'S ALL JUST JUNK FOR OUR DOCS! +// NOTICE!!! Initially embedded in our docs this JavaScript +// file contains elements that can help you create reproducible +// use cases in StackBlitz for instance. +// In a real project please adapt this content to your needs. // ++++++++++++++++++++++++++++++++++++++++++ /*! @@ -15,18 +17,28 @@ (() => { 'use strict' - // Tooltip and popover demos - // Tooltip and popover demos + // -------- + // Tooltips + // -------- + // Instanciate all tooltips in a docs or StackBlitz page document.querySelectorAll('[data-bs-toggle="tooltip"]') .forEach(tooltip => { new bootstrap.Tooltip(tooltip) }) + // -------- + // Popovers + // -------- + // Instanciate all popovers in a docs or StackBlitz page document.querySelectorAll('[data-bs-toggle="popover"]') .forEach(popover => { new bootstrap.Popover(popover) }) + // ------------------------------- + // Toasts + // ------------------------------- + // Used by 'Placement' example in docs or StackBlitz const toastPlacement = document.getElementById('toastPlacement') if (toastPlacement) { document.getElementById('selectToastPlacement').addEventListener('change', function () { @@ -38,6 +50,7 @@ }) } + // Instanciate all toasts in a docs page only document.querySelectorAll('.bd-example .toast') .forEach(toastNode => { const toast = new bootstrap.Toast(toastNode, { @@ -47,6 +60,7 @@ toast.show() }) + // Instanciate all toasts in a docs page only const toastTrigger = document.getElementById('liveToastBtn') const toastLiveExample = document.getElementById('liveToast') if (toastTrigger) { @@ -57,6 +71,10 @@ }) } + // ------------------------------- + // Alerts + // ------------------------------- + // Used in 'Show live toast' example in docs or StackBlitz const alertPlaceholder = document.getElementById('liveAlertPlaceholder') const alertTrigger = document.getElementById('liveAlertBtn') @@ -78,13 +96,19 @@ }) } - // Indeterminate checkbox example + // ------------------------------- + // Checks & Radios + // ------------------------------- + // Indeterminate checkbox example in docs and StackBlitz document.querySelectorAll('.bd-example-indeterminate [type="checkbox"]') .forEach(checkbox => { checkbox.indeterminate = true }) - // Disable empty links in docs examples + // ------------------------------- + // Links + // ------------------------------- + // Disable empty links in docs examples only document.querySelectorAll('.bd-content [href="#"]') .forEach(link => { link.addEventListener('click', event => { @@ -92,7 +116,10 @@ }) }) - // Modal relatedTarget demo + // ------------------------------- + // Modal + // ------------------------------- + // Modal 'Varying modal content' example in docs and StackBlitz const exampleModal = document.getElementById('exampleModal') if (exampleModal) { exampleModal.addEventListener('show.bs.modal', event => { @@ -110,7 +137,10 @@ }) } - // Offcanvas demo + // ------------------------------- + // Offcanvas + // ------------------------------- + // 'Offcanvas components' example in docs only const myOffcanvas = document.querySelector('.bd-example-offcanvas #offcanvas') if (myOffcanvas) { myOffcanvas.addEventListener('show.bs.offcanvas', event => { |