Separate examples code, Add some selectors, fix stackblitz btn

twbs · Apr 18, 2022 · f09135b · f09135b
1 parent 63d4046
commit f09135b
Show file tree

Hide file tree

Showing 4 changed files with 91 additions and 73 deletions.
diff --git a/site/assets/js/application.js b/site/assets/js/application.js
@@ -10,7 +10,7 @@
  * For details, see https://creativecommons.org/licenses/by/3.0/.
  */
 
-/* global ClipboardJS: false, bootstrap: false */
+/* global bootstrap: false */
 
 (() => {
   'use strict'
@@ -131,73 +131,4 @@
       modalBodyInput.value = recipient
     })
   }
-
-  // Insert copy to clipboard button before .highlight
-  const btnTitle = 'Copy to clipboard'
-  const btnEdit = 'Edit on StackBlitz'
-  const btnHtml = '<div class="bd-clipboard"><button type="button" class="btn-clipboard"><svg class="bi" width="1em" height="1em" fill="currentColor" role="img" aria-label="Copy"><use xlink:href="#clipboard"/></svg></button></div>'
-
-  document.querySelectorAll('.bd-masthead .highlight, .bd-content > .highlight')
-    .forEach(element => {
-      element.insertAdjacentHTML('beforebegin', btnHtml)
-    })
-
-  /**
-   *
-   * @param {string} selector
-   * @param {string} title
-   */
-  function snippetButtonTooltip(selector, title) {
-    document.querySelectorAll(selector).forEach(btn => {
-      const tooltipBtn = new bootstrap.Tooltip(btn, { title })
-
-      btn.addEventListener('mouseleave', () => {
-        // 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('.btn-clipboard', btnTitle)
-  snippetButtonTooltip('.btn-edit', btnEdit)
-
-  const clipboard = new ClipboardJS('.btn-clipboard', {
-    target(trigger) {
-      const snippet = trigger.parentNode.classList.contains('bd-clipboard') ? trigger.parentNode.nextElementSibling : trigger.closest('.bd-example-snippet').querySelector('.highlight')
-      return snippet
-    }
-  })
-
-  clipboard.on('success', event => {
-    const iconFirstChild = event.trigger.querySelector('.bi').firstChild
-    const tooltipBtn = bootstrap.Tooltip.getInstance(event.trigger)
-    const namespace = 'http://www.w3.org/1999/xlink'
-    const originalXhref = iconFirstChild.getAttributeNS(namespace, 'href')
-    const originalTitle = event.trigger.title
-
-    tooltipBtn.setContent({ '.tooltip-inner': 'Copied!' })
-    event.trigger.addEventListener('hidden.bs.tooltip', () => {
-      tooltipBtn.setContent({ '.tooltip-inner': btnTitle })
-    }, { once: true })
-    event.clearSelection()
-    iconFirstChild.setAttributeNS(namespace, 'href', originalXhref.replace('clipboard', 'check2'))
-
-    setTimeout(() => {
-      iconFirstChild.setAttributeNS(namespace, 'href', originalXhref)
-      event.trigger.title = originalTitle
-    }, 2000)
-  })
-
-  clipboard.on('error', event => {
-    const modifierKey = /mac/i.test(navigator.userAgent) ? '\u2318' : 'Ctrl-'
-    const fallbackMsg = `Press ${modifierKey}C to copy`
-    const tooltipBtn = bootstrap.Tooltip.getInstance(event.trigger)
-
-    tooltipBtn.setContent({ '.tooltip-inner': fallbackMsg })
-    event.trigger.addEventListener('hidden.bs.tooltip', () => {
-      tooltipBtn.setContent({ '.tooltip-inner': btnTitle })
-    }, { once: true })
-  })
 })()
diff --git a/site/assets/js/code-examples.js b/site/assets/js/code-examples.js
@@ -0,0 +1,88 @@
+// NOTICE!! DO NOT USE ANY OF THIS JAVASCRIPT
+// IT'S ALL JUST JUNK FOR OUR DOCS!
+// ++++++++++++++++++++++++++++++++++++++++++
+
+/*!
+ * JavaScript for Bootstrap's docs (https://getbootstrap.com/)
+ * Copyright 2011-2022 The Bootstrap Authors
+ * Copyright 2011-2022 Twitter, Inc.
+ * Licensed under the Creative Commons Attribution 3.0 Unported License.
+ * For details, see https://creativecommons.org/licenses/by/3.0/.
+ */
+
+/* global ClipboardJS: false, bootstrap: false */
+
+(() => {
+  'use strict'
+  // Insert copy to clipboard button before .highlight
+  const btnTitle = 'Copy to clipboard'
+  const btnEdit = 'Edit on StackBlitz'
+
+  const btnHtml = [
+    '<div class="bd-code-snippet">',
+    '   <div class="bd-clipboard">',
+    '      <button type="button" class="btn-clipboard">',
+    '        <svg class="bi" width="1em" height="1em" fill="currentColor" role="img" aria-label="Copy"><use xlink:href="#clipboard"/></svg>',
+    '      </button>',
+    '   </div>',
+    '</div>'
+  ].join('')
+
+  // wrap programmatically code blocks and add copy btn.
+  document.querySelectorAll('.highlight')
+    .forEach(element => {
+      if (!element.closest('.bd-example-snippet')) { // Ignore examples made be shortcode
+        element.insertAdjacentHTML('beforebegin', btnHtml)
+        element.previousElementSibling.append(element)
+      }
+    })
+
+  /**
+   *
+   * @param {string} selector
+   * @param {string} title
+   */
+  function snippetButtonTooltip(selector, title) {
+    document.querySelectorAll(selector).forEach(btn => {
+      bootstrap.Tooltip.getOrCreateInstance(btn, { title })
+    })
+  }
+
+  snippetButtonTooltip('.btn-clipboard', btnTitle)
+  snippetButtonTooltip('.btn-edit', btnEdit)
+
+  const clipboard = new ClipboardJS('.btn-clipboard', {
+    target: trigger => trigger.closest('.bd-code-snippet').querySelector('.highlight')
+  })
+
+  clipboard.on('success', event => {
+    const iconFirstChild = event.trigger.querySelector('.bi').firstChild
+    const tooltipBtn = bootstrap.Tooltip.getInstance(event.trigger)
+    const namespace = 'http://www.w3.org/1999/xlink'
+    const originalXhref = iconFirstChild.getAttributeNS(namespace, 'href')
+    const originalTitle = event.trigger.title
+
+    tooltipBtn.setContent({ '.tooltip-inner': 'Copied!' })
+    event.trigger.addEventListener('hidden.bs.tooltip', () => {
+      tooltipBtn.setContent({ '.tooltip-inner': btnTitle })
+    }, { once: true })
+    event.clearSelection()
+    iconFirstChild.setAttributeNS(namespace, 'href', originalXhref.replace('clipboard', 'check2'))
+
+    setTimeout(() => {
+      iconFirstChild.setAttributeNS(namespace, 'href', originalXhref)
+      event.trigger.title = originalTitle
+    }, 2000)
+  })
+
+  clipboard.on('error', event => {
+    const modifierKey = /mac/i.test(navigator.userAgent) ? '\u2318' : 'Ctrl-'
+    const fallbackMsg = `Press ${modifierKey}C to copy`
+    const tooltipBtn = bootstrap.Tooltip.getInstance(event.trigger)
+
+    tooltipBtn.setContent({ '.tooltip-inner': fallbackMsg })
+    event.trigger.addEventListener('hidden.bs.tooltip', () => {
+      tooltipBtn.setContent({ '.tooltip-inner': btnTitle })
+    }, { once: true })
+  })
+})()
diff --git a/site/layouts/partials/scripts.html b/site/layouts/partials/scripts.html
@@ -25,8 +25,7 @@
   // Open in StackBlitz logic
   document.querySelectorAll('.btn-edit').forEach(btn => {
     btn.addEventListener('click', event => {
-      const htmlSnippet = event.target.closest('.bd-edit').previousSibling.innerHTML
-
+      const htmlSnippet = event.target.closest('.bd-code-snippet').querySelector('.bd-example').innerHTML
       StackBlitzSDK.openBootstrapSnippet(htmlSnippet)
     })
   })

diff --git a/site/layouts/shortcodes/example.html b/site/layouts/shortcodes/example.html
@@ -15,7 +15,7 @@
 {{- $show_markup := .Get "show_markup" | default true -}}
 {{- $input := .Inner -}}
 
-<div class="bd-example-snippet">
+<div class="bd-example-snippet bd-code-snippet">
   {{- if eq $show_preview true -}}
   <div{{ with $id }} id="{{ . }}"{{ end }} class="bd-example{{ with $class }} {{ . }}{{ end }}">
     {{- $input -}}