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/layouts | |
| 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/layouts')
| -rw-r--r-- | site/layouts/partials/scripts.html | 22 | ||||
| -rw-r--r-- | site/layouts/shortcodes/example.html | 4 |
2 files changed, 17 insertions, 9 deletions
diff --git a/site/layouts/partials/scripts.html b/site/layouts/partials/scripts.html index 56513c7ff8..5535d64391 100644 --- a/site/layouts/partials/scripts.html +++ b/site/layouts/partials/scripts.html @@ -26,11 +26,16 @@ document.querySelectorAll('.btn-edit').forEach(btn => { btn.addEventListener('click', event => { const htmlSnippet = event.target.closest('.bd-code-snippet').querySelector('.bd-example').innerHTML - StackBlitzSDK.openBootstrapSnippet(htmlSnippet) + + // Get extra classes for this example except '.bd-example' + const classes = Array.from(event.target.closest('.bd-code-snippet').querySelector('.bd-example').classList).filter(x => x !== 'bd-example').join(' ') + + const jsSnippet = event.target.closest('.bd-code-snippet').querySelector('.btn-edit').getAttribute('data-js-snippet') + StackBlitzSDK.openBootstrapSnippet(htmlSnippet, jsSnippet, classes) }) }) - StackBlitzSDK.openBootstrapSnippet = snippet => { + StackBlitzSDK.openBootstrapSnippet = (htmlSnippet, jsSnippet, classes) => { const markup = `<!doctype html> <html lang="en"> <head> @@ -38,24 +43,25 @@ <meta name="viewport" content="width=device-width, initial-scale=1"> <link href="{{ .Site.Params.cdn.css }}" rel="stylesheet"> <title>Bootstrap Example</title> + <${'script'} src="{{ .Site.Params.cdn.js_bundle }}"></${'script'}> </head> - <body> + <body class="p-3 ${classes}"> <!-- Example Code --> -${snippet.replace(/^/gm, ' ')} +${htmlSnippet.replace(/^/gm, ' ')} <!-- End Example Code --> - - <${'script'} src="{{ .Site.Params.cdn.js_bundle }}"></${'script'}> </body> </html>` + const jsSnippetContent = jsSnippet ? '{{ os.ReadFile "site/assets/js/snippets.js" }}' : null const project = { files: { - 'index.html': markup + 'index.html': markup, + 'index.js': jsSnippetContent }, title: 'Bootstrap Example', description: `Official example from ${window.location.href}`, - template: 'html', + template: jsSnippet ? 'javascript' : 'html', tags: ['bootstrap'] } diff --git a/site/layouts/shortcodes/example.html b/site/layouts/shortcodes/example.html index 9bfa2c906c..a1685a0a6b 100644 --- a/site/layouts/shortcodes/example.html +++ b/site/layouts/shortcodes/example.html @@ -4,6 +4,7 @@ `args` are all optional and can be one of the following: * id: the `div`'s id - default: "" * class: any extra class(es) to be added to the `div` - default: "" + * js_snippet: add extra JS snippet to StackBlitz - default: `false` * show_preview: if the preview should be output in the HTML - default: `true` * show_markup: if the markup should be output in the HTML - default: `true` */ -}} @@ -13,6 +14,7 @@ {{- $lang := .Get "lang" | default "html" -}} {{- $show_preview := .Get "show_preview" | default true -}} {{- $show_markup := .Get "show_markup" | default true -}} +{{- $js_snippet := .Get "js_snippet" | default false -}} {{- $input := .Inner -}} <div class="bd-example-snippet bd-code-snippet"> @@ -27,7 +29,7 @@ <div class="d-flex align-items-center highlight-toolbar bg-light ps-3 pe-2 py-1"> <small class="font-monospace text-muted text-uppercase">{{- $lang -}}</small> <div class="d-flex ms-auto"> - <button type="button" class="btn-edit text-nowrap" title="Try it on StackBlitz"> + <button type="button" class="btn-edit text-nowrap"{{ with $js_snippet }} data-js-snippet="{{ $js_snippet }}"{{ end }} title="Try it on StackBlitz"> <svg class="bi" role="img" aria-label="Try it"><use xlink:href="#lightning-charge-fill"/></svg> </button> <button type="button" class="btn-clipboard mt-0 me-0" title="Copy to clipboard"> |