From 8b85267739e4bee63f13dfa14a94f94926b4fd7a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Julien=20D=C3=A9ramond?= Date: Thu, 26 May 2022 23:29:08 +0200 Subject: [PATCH] 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 --- site/assets/js/snippets.js | 46 ++++++++++++++++---- site/content/docs/5.2/components/alerts.md | 2 +- site/content/docs/5.2/components/modal.md | 2 +- site/content/docs/5.2/components/popovers.md | 10 ++--- site/content/docs/5.2/components/toasts.md | 2 +- site/content/docs/5.2/components/tooltips.md | 4 +- site/content/docs/5.2/forms/checks-radios.md | 2 +- site/layouts/partials/scripts.html | 22 ++++++---- site/layouts/shortcodes/example.html | 4 +- 9 files changed, 66 insertions(+), 28 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 => { diff --git a/site/content/docs/5.2/components/alerts.md b/site/content/docs/5.2/components/alerts.md index 12cad35881..6962b7155f 100644 --- a/site/content/docs/5.2/components/alerts.md +++ b/site/content/docs/5.2/components/alerts.md @@ -27,7 +27,7 @@ Alerts are available for any length of text, as well as an optional close button Click the button below to show an alert (hidden with inline styles to start), then dismiss (and destroy) it with the built-in close button. -{{< example >}} +{{< example js_snippet="true" >}}
{{< /example >}} diff --git a/site/content/docs/5.2/components/modal.md b/site/content/docs/5.2/components/modal.md index a2354eb855..4acfe4a751 100644 --- a/site/content/docs/5.2/components/modal.md +++ b/site/content/docs/5.2/components/modal.md @@ -444,7 +444,7 @@ Have a bunch of buttons that all trigger the same modal with slightly different Below is a live demo followed by example HTML and JavaScript. For more information, [read the modal events docs](#events) for details on `relatedTarget`. -{{< example >}} +{{< example js_snippet="true" >}} diff --git a/site/content/docs/5.2/components/popovers.md b/site/content/docs/5.2/components/popovers.md index b6d3b304df..a08850f94c 100644 --- a/site/content/docs/5.2/components/popovers.md +++ b/site/content/docs/5.2/components/popovers.md @@ -46,7 +46,7 @@ const popoverList = [...popoverTriggerList].map(popoverTriggerEl => new bootstra We use JavaScript similar to the snippet above to render the following live popover. Titles are set via `title` attribute and body content is set via `data-bs-content`. -{{< example >}} +{{< example js_snippet="true" >}} {{< /example >}} @@ -54,7 +54,7 @@ We use JavaScript similar to the snippet above to render the following live popo Four options are available: top, right, bottom, and left. Directions are mirrored when using Bootstrap in RTL. Set `data-bs-placement` to change the direction. -{{< example >}} +{{< example js_snippet="true" >}} @@ -87,7 +87,7 @@ You can customize the appearance of popovers using [CSS variables](#variables). {{< scss-docs name="custom-popovers" file="site/assets/scss/_component-examples.scss" >}} -{{< example class="custom-popover-demo" >}} +{{< example class="custom-popover-demo" js_snippet="true" >}} diff --git a/site/content/docs/5.2/components/toasts.md b/site/content/docs/5.2/components/toasts.md index 8c46d9a825..3cae1998b0 100644 --- a/site/content/docs/5.2/components/toasts.md +++ b/site/content/docs/5.2/components/toasts.md @@ -197,7 +197,7 @@ Building on the above example, you can create different toast color schemes with Place toasts with custom CSS as you need them. The top right is often used for notifications, as is the top middle. If you're only ever going to show one toast at a time, put the positioning styles right on the `.toast`. -{{< example >}} +{{< example js_snippet="true" >}}
diff --git a/site/content/docs/5.2/components/tooltips.md b/site/content/docs/5.2/components/tooltips.md index 458301620a..ef5944b489 100644 --- a/site/content/docs/5.2/components/tooltips.md +++ b/site/content/docs/5.2/components/tooltips.md @@ -45,7 +45,7 @@ const tooltipList = [...tooltipTriggerList].map(tooltipTriggerEl => new bootstra Hover over the links below to see tooltips: -{{< example class="tooltip-demo" >}} +{{< example class="tooltip-demo" js_snippet="true" >}}

Placeholder text to demonstrate some inline links with tooltips. This is now just filler, no killer. Content placed here just to mimic the presence of real text. And all that just to give you an idea of how tooltips would look when used in real-world situations. So hopefully you've now seen how these tooltips on links can work in practice, once you use them on your own site or project.

{{< /example >}} @@ -59,7 +59,7 @@ You can customize the appearance of tooltips using [CSS variables](#variables). {{< scss-docs name="custom-tooltip" file="site/assets/scss/_component-examples.scss" >}} -{{< example class="tooltip-demo" >}} +{{< example class="tooltip-demo" js_snippet="true" >}}