]> git.ipfire.org Git - thirdparty/bootstrap.git/commitdiff
projects / thirdparty / bootstrap.git / commitdiff
? search:
summary | shortlog | log | commit | commitdiff | tree
raw | patch | inline | side by side (parent: 7e5a801)
docs: add a StackBlitz "Try It" button in code examples (#35644)
authorPuru Vijay <47742487+PuruVJ@users.noreply.github.com>
Wed, 9 Mar 2022 15:32:58 +0000 (21:02 +0530)
committerGitHub <noreply@github.com>
Wed, 9 Mar 2022 15:32:58 +0000 (17:32 +0200)
Co-authored-by: GeoSot <geo.sotis@gmail.com>
Co-authored-by: XhmikosR <xhmikosr@gmail.com>
site/assets/js/application.js patch | blob | blame | history
site/assets/scss/_clipboard-js.scss patch | blob | blame | history
site/layouts/partials/scripts.html patch | blob | blame | history
site/layouts/shortcodes/example.html patch | blob | blame | history

diff --git a/site/assets/js/application.js b/site/assets/js/application.js
index b267bfb6f2a4f081efc8d77a2ce9404eb753fcfc..1719ed9f2a7179db453ef42b01589803f5ba9938 100644 (file)
--- a/site/assets/js/application.js
+++ b/site/assets/js/application.js
@@ -125,17 +125,24 @@
       element.insertAdjacentHTML('beforebegin', btnHtml)
     })
 
-  document.querySelectorAll('.btn-clipboard')
-    .forEach(function (btn) {
-      var tooltipBtn = new bootstrap.Tooltip(btn, { title: btnTitle })
-
-      btn.addEventListener('mouseleave', function () {
-        // Explicitly hide tooltip, since after clicking it remains
-        // focused (as it's a button), so tooltip would otherwise
-        // remain visible until focus is moved away
-        tooltipBtn.hide()
-      })
+  /**
+   *
+   * @param {HTMLButtonElement} btn
+   * @param {string} title
+   */
+  function snippetButtonTooltip(btn, title) {
+    var tooltipBtn = new bootstrap.Tooltip(btn, { title: title })
+
+    btn.addEventListener('mouseleave', function () {
+      // Explicitly hide tooltip, since after clicking it remains
+      // focused (as it's a button), so tooltip would otherwise
+      // remain visible until focus is moved away
+      tooltipBtn.hide()
     })
+  }
+
+  snippetButtonTooltip(document.querySelector('.btn-clipboard'), 'Copy to clipboard')
+  snippetButtonTooltip(document.querySelector('.btn-edit'), 'Edit on Stackblitz')
 
   var clipboard = new ClipboardJS('.btn-clipboard', {
     target: function (trigger) {
diff --git a/site/assets/scss/_clipboard-js.scss b/site/assets/scss/_clipboard-js.scss
index 83b9a8b9e5042fc46f25a18da0cc508ff75219b0..b2b0854dc4155ce233898f2d2e2d0a0d512fb621 100644 (file)
--- a/site/assets/scss/_clipboard-js.scss
+++ b/site/assets/scss/_clipboard-js.scss
@@ -2,7 +2,8 @@
 //
 // JS-based `Copy` buttons for code snippets.
 
-.bd-clipboard {
+.bd-clipboard,
+.bd-edit {
   position: relative;
   display: none;
   float: right;
@@ -16,7 +17,8 @@
   }
 }
 
-.btn-clipboard {
+.btn-clipboard,
+.btn-edit {
   position: absolute;
   top: .65rem;
   right: .65rem;
@@ -25,6 +27,7 @@
   padding: .25rem .5rem;
   @include font-size(.65em);
   color: $primary;
+  white-space: nowrap;
   background-color: $white;
   border: 1px solid;
   @include border-radius();
@@ -35,3 +38,7 @@
     background-color: $primary;
   }
 }
+
+.btn-edit {
+  right: 3.65rem;
+}
diff --git a/site/layouts/partials/scripts.html b/site/layouts/partials/scripts.html
index d25add3ff44e1c9f9d2ab42e63bfed04ddab3818..0724a39ee10845303df3420c94c83600735e4d0e 100644 (file)
--- a/site/layouts/partials/scripts.html
+++ b/site/layouts/partials/scripts.html
@@ -6,6 +6,7 @@
 
 {{ 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/@stackblitz/sdk@1/bundles/sdk.umd.js"></script>
 {{- end }}
 
 {{- $vendor := resources.Match "js/vendor/*.js" -}}
@@ -18,3 +19,47 @@
 {{- end }}
 
 <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 }}
diff --git a/site/layouts/shortcodes/example.html b/site/layouts/shortcodes/example.html
index 0592adc6b5f75e9230612056ab6f6592f0ee16f1..a808c2589afd45b7fbf31c2120ff4088a5cc6669 100644 (file)
--- a/site/layouts/shortcodes/example.html
+++ b/site/layouts/shortcodes/example.html
@@ -22,6 +22,9 @@
 {{- end -}}
 
 {{- 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 ` (class=" *?")` "" $content -}}
   {{- highlight (trim $content "\n") $lang "" -}}
Mirror of https://github.com/twbs/bootstrap.git