root
/
bootstrap
mirror of https://github.com/twbs/bootstrap.git
1
0
Fork 0
Code Issues Actions 11 Packages Projects Releases Wiki Activity

docs: add a StackBlitz "Try It" button in code examples (#35644) 

Co-authored-by: GeoSot <geo.sotis@gmail.com>
Co-authored-by: XhmikosR <xhmikosr@gmail.com>
This commit is contained in:
Puru Vijay 2022-03-09 21:02:58 +05:30 committed by GitHub
parent 7e5a8016ba
commit 645f955845
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 73 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

25
site/assets/js/application.js
View File

@ -125,17 +125,24 @@
element.insertAdjacentHTML('beforebegin', btnHtml) element.insertAdjacentHTML('beforebegin', btnHtml)
}) })
document.querySelectorAll('.btn-clipboard') /**
.forEach(function (btn) { *
var tooltipBtn = new bootstrap.Tooltip(btn, { title: btnTitle }) * @param {HTMLButtonElement} btn
* @param {string} title
*/
function snippetButtonTooltip(btn, title) {
var tooltipBtn = new bootstrap.Tooltip(btn, { title: title })
btn.addEventListener('mouseleave', function () { btn.addEventListener('mouseleave', function () {
// Explicitly hide tooltip, since after clicking it remains // Explicitly hide tooltip, since after clicking it remains
// focused (as it's a button), so tooltip would otherwise // focused (as it's a button), so tooltip would otherwise
// remain visible until focus is moved away // remain visible until focus is moved away
tooltipBtn.hide() tooltipBtn.hide()
})
}) })
}
snippetButtonTooltip(document.querySelector('.btn-clipboard'), 'Copy to clipboard')
snippetButtonTooltip(document.querySelector('.btn-edit'), 'Edit on Stackblitz')
var clipboard = new ClipboardJS('.btn-clipboard', { var clipboard = new ClipboardJS('.btn-clipboard', {
target: function (trigger) { target: function (trigger) {

11
site/assets/scss/_clipboard-js.scss
View File

@ -2,7 +2,8 @@
// //
// JS-based `Copy` buttons for code snippets. // JS-based `Copy` buttons for code snippets.
.bd-clipboard { .bd-clipboard,
.bd-edit {
position: relative; position: relative;
display: none; display: none;
float: right; float: right;
@ -16,7 +17,8 @@
} }
} }
.btn-clipboard { .btn-clipboard,
.btn-edit {
position: absolute; position: absolute;
top: .65rem; top: .65rem;
right: .65rem; right: .65rem;
@ -25,6 +27,7 @@
padding: .25rem .5rem; padding: .25rem .5rem;
@include font-size(.65em); @include font-size(.65em);
color: $primary; color: $primary;
white-space: nowrap;
background-color: $white; background-color: $white;
border: 1px solid; border: 1px solid;
@include border-radius(); @include border-radius();
@ -35,3 +38,7 @@
background-color: $primary; background-color: $primary;
} }
} }
.btn-edit {
right: 3.65rem;
}

45
site/layouts/partials/scripts.html
View File

@ -6,6 +6,7 @@
{{ if eq .Page.Layout "docs" -}} {{ if eq .Page.Layout "docs" -}}
<script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@stackblitz/sdk@1/bundles/sdk.umd.js"></script>
{{- end }} {{- end }}
{{- $vendor := resources.Match "js/vendor/*.js" -}} {{- $vendor := resources.Match "js/vendor/*.js" -}}
@ -18,3 +19,47 @@
{{- end }} {{- end }}
<script src="{{ $docsJs.Permalink | relURL }}"></script> <script src="{{ $docsJs.Permalink | relURL }}"></script>
{{ if eq .Page.Layout "docs" -}}
<script>
// Open in StackBlitz logic
document.querySelectorAll('.btn-edit')
.forEach(function (btn) {
btn.addEventListener('click', function (event) {
var htmlSnippet = event.target.closest('.bd-content').querySelector('.bd-example').innerHTML
StackBlitzSDK.openBootstrapSnippet(htmlSnippet)
})
})
StackBlitzSDK.openBootstrapSnippet = function(snippet) {
var project = {
files: {
'index.html': `<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="{{ .Site.Params.cdn.css }}" rel="stylesheet">
<title>Bootstrap Example</title>
</head>
<body>
<!-- Example Code -->
${snippet.replace(/^/gm, ' ')}
<!-- End Example Code -->
<${'script'} src="{{ .Site.Params.cdn.js_bundle }}"></${'script'}>
</body>
</html>`
},
title: 'Bootstrap Example',
description: 'Official example from ' + window.location.href,
template: 'html',
tags: ['bootstrap']
}
StackBlitzSDK.openProject(project, { openFile: 'index.html' })
}
</script>
{{- end }}

3
site/layouts/shortcodes/example.html
View File

@ -22,6 +22,9 @@
{{- end -}} {{- end -}}
{{- if eq $show_markup true -}} {{- if eq $show_markup true -}}
<div class="bd-edit">
<button type="button" class="btn-edit text-nowrap" title="Try it on StackBlitz">Try it</button>
</div>
{{- $content := replaceRE `<svg class="bd-placeholder-img(?:-lg)?(?: *?bd-placeholder-img-lg)? ?(.*?)".*?<\/svg>\n` `<img src="..." class="$1" alt="...">` $input -}} {{- $content := replaceRE `<svg class="bd-placeholder-img(?:-lg)?(?: *?bd-placeholder-img-lg)? ?(.*?)".*?<\/svg>\n` `<img src="..." class="$1" alt="...">` $input -}}
{{- $content = replaceRE ` (class=" *?")` "" $content -}} {{- $content = replaceRE ` (class=" *?")` "" $content -}}
{{- highlight (trim $content "\n") $lang "" -}} {{- highlight (trim $content "\n") $lang "" -}}