docs: update theme

Author: mrholek

docs/assets/js/application.js

@@ -4,8 +4,7 @@
 
 /*!
  * JavaScript for Bootstrap's docs (https://getcoreui.com/)
- * Copyright 2011-2022 The Bootstrap Authors
- * Copyright 2011-2022 Twitter, Inc.
+ * Copyright 2011-2023 The Bootstrap Authors
  * Licensed under the Creative Commons Attribution 3.0 Unported License.
  * For details, see https://creativecommons.org/licenses/by/3.0/.
  */
@@ -14,51 +13,80 @@
 
 (() => {
   'use strict'
+
   // Insert copy to clipboard button before .highlight
-  const btnHtml =
-    '<div class="docs-clipboard"><button type="button" class="btn-clipboard btn btn-ghost-primary" title="Copy to clipboard"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><polygon fill="var(--ci-primary-color, currentColor)" points="408 432 376 432 376 464 112 464 112 136 144 136 144 104 80 104 80 496 408 496 408 432" class="ci-primary"/><path fill="var(--ci-primary-color, currentColor)" d="M176,16V400H496V153.373L358.627,16ZM464,368H208V48H312V200H464Zm0-200H344V48h1.372L464,166.627Z" class="ci-primary"/></svg></button></div>'
-  document.querySelectorAll('div.highlight').forEach(element => {
-    element.insertAdjacentHTML('beforebegin', btnHtml)
-  })
+  const btnTitle = 'Copy to clipboard'
+  const btnEdit = 'Edit on StackBlitz'
 
-  document.querySelectorAll('.btn-clipboard').forEach(btn => {
-    const tooltipBtn = new coreui.Tooltip(btn)
+  const btnHtml = [
+    '<div class="docs-code-snippet">',
+    '   <div class="docs-clipboard">',
+    '      <button type="button" class="btn-clipboard">',
+    '        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" width="16" height="16">',
+    '          <polygon fill="var(--ci-primary-color, currentColor)" points="408 432 376 432 376 464 112 464 112 136 144 136 144 104 80 104 80 496 408 496 408 432" class="ci-primary"/>',
+    '          <path fill="var(--ci-primary-color, currentColor)" d="M176,16V400H496V153.373L358.627,16ZM464,368H208V48H312V200H464Zm0-200H344V48h1.372L464,166.627Z" class="ci-primary"/>',
+    '        </svg>',
+    '      </button>',
+    '   </div>',
+    '</div>'
+  ].join('')
 
-    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()
+  // Wrap programmatically code blocks and add copy btn.
+  document.querySelectorAll('.highlight')
+    .forEach(element => {
+      if (!element.closest('.docs-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 => {
+      coreui.Tooltip.getOrCreateInstance(btn, { title })
+    })
+  }
+
+  snippetButtonTooltip('.btn-clipboard', btnTitle)
+  snippetButtonTooltip('.btn-edit', btnEdit)
 
   const clipboard = new ClipboardJS('.btn-clipboard', {
-    target(trigger) {
-      return trigger.parentNode.nextElementSibling
-    }
+    target: trigger => trigger.closest('.docs-code-snippet').querySelector('.highlight'),
+    text: trigger => trigger.closest('.docs-code-snippet').querySelector('.highlight').textContent.trimEnd()
   })
 
-  clipboard.on('success', e => {
-    const tooltipBtn = coreui.Tooltip.getInstance(e.trigger)
+  clipboard.on('success', event => {
+    // const iconFirstChild = event.trigger.querySelector('.bi').firstElementChild
+    const tooltipBtn = coreui.Tooltip.getInstance(event.trigger)
+    // const namespace = 'http://www.w3.org/1999/xlink'
+    // const originalXhref = iconFirstChild.getAttributeNS(namespace, 'href')
+    // const originalTitle = event.trigger.title
 
-    e.trigger.setAttribute('data-coreui-original-title', 'Copied!')
-    tooltipBtn.show()
+    tooltipBtn.setContent({ '.tooltip-inner': 'Copied!' })
+    event.trigger.addEventListener('hidden.coreui.tooltip', () => {
+      tooltipBtn.setContent({ '.tooltip-inner': btnTitle })
+    }, { once: true })
+    event.clearSelection()
+    // iconFirstChild.setAttributeNS(namespace, 'href', originalXhref.replace('clipboard', 'check2'))
 
-    e.trigger.setAttribute('data-coreui-original-title', 'Copy to clipboard')
-    e.clearSelection()
+    // 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 = coreui.Tooltip.getInstance(event.trigger)
 
-    event.trigger.setAttribute('data-coreui-original-title', fallbackMsg)
-    tooltipBtn.show()
-
-    event.trigger.setAttribute(
-      'data-coreui-original-title',
-      'Copy to clipboard'
-    )
+    tooltipBtn.setContent({ '.tooltip-inner': fallbackMsg })
+    event.trigger.addEventListener('hidden.coreui.tooltip', () => {
+      tooltipBtn.setContent({ '.tooltip-inner': btnTitle })
+    }, { once: true })
   })
 })()

docs/assets/js/code-examples.js

@@ -5,9 +5,8 @@
 // ++++++++++++++++++++++++++++++++++++++++++
 
 /*!
- * JavaScript for Bootstrap's docs (https://getbootstrap.com/)
- * Copyright 2011-2022 The Bootstrap Authors
- * Copyright 2011-2022 Twitter, Inc.
+ * JavaScript for CoreUI's docs (https://coreui.io/)
+ * Copyright 2023 creativeLabs Lukasz Holeczek
  * Licensed under the Creative Commons Attribution 3.0 Unported License.
  * For details, see https://creativecommons.org/licenses/by/3.0/.
  */
@@ -20,7 +19,7 @@
   // --------
   // Tooltips
   // --------
-  // Instanciate all tooltips in a docs or StackBlitz page
+  // Instantiate all tooltips in a docs or StackBlitz
   document.querySelectorAll('[data-coreui-toggle="tooltip"]')
     .forEach(tooltip => {
       new coreui.Tooltip(tooltip)
@@ -29,7 +28,7 @@
   // --------
   // Popovers
   // --------
-  // Instanciate all popovers in a docs or StackBlitz page
+  // Instantiate all popovers in docs or StackBlitz
   document.querySelectorAll('[data-coreui-toggle="popover"]')
     .forEach(popover => {
       new coreui.Popover(popover)
@@ -50,7 +49,7 @@
     })
   }
 
-  // Instanciate all toasts in a docs page only
+  // Instantiate all toasts in docs pages only
   document.querySelectorAll('.docs-example .toast')
     .forEach(toastNode => {
       const toast = new coreui.Toast(toastNode, {
@@ -60,24 +59,26 @@
       toast.show()
     })
 
-  // Instanciate all toasts in a docs page only
+  // Instantiate all toasts in docs pages only
+  // js-docs-start live-toast
   const toastTrigger = document.getElementById('liveToastBtn')
   const toastLiveExample = document.getElementById('liveToast')
+
   if (toastTrigger) {
+    const toastCoreUI = coreui.Toast.getOrCreateInstance(toastLiveExample)
     toastTrigger.addEventListener('click', () => {
-      const toast = new coreui.Toast(toastLiveExample)
-
-      toast.show()
+      toastCoreUI.show()
     })
   }
+  // js-docs-end live-toast
 
   // -------------------------------
   // Alerts
   // -------------------------------
-  // Used in 'Show live toast' example in docs or StackBlitz
-  const alertPlaceholder = document.getElementById('liveAlertPlaceholder')
-  const alertTrigger = document.getElementById('liveAlertBtn')
+  // Used in 'Show live alert' example in docs or StackBlitz
 
+  // js-docs-start live-alert
+  const alertPlaceholder = document.getElementById('liveAlertPlaceholder')
   const appendAlert = (message, type) => {
     const wrapper = document.createElement('div')
     wrapper.innerHTML = [
@@ -90,19 +91,32 @@
     alertPlaceholder.append(wrapper)
   }
 
+  const alertTrigger = document.getElementById('liveAlertBtn')
   if (alertTrigger) {
     alertTrigger.addEventListener('click', () => {
       appendAlert('Nice, you triggered this alert message!', 'success')
     })
   }
+  // js-docs-end live-alert
+
+  // --------
+  // Carousels
+  // --------
+  // Instantiate all non-autoplaying carousels in docs or StackBlitz
+  document.querySelectorAll('.carousel:not([data-coreui-ride="carousel"])')
+    .forEach(carousel => {
+      coreui.Carousel.getOrCreateInstance(carousel)
+    })
 
   // -------------------------------
   // Checks & Radios
   // -------------------------------
   // Indeterminate checkbox example in docs and StackBlitz
   document.querySelectorAll('.docs-example-indeterminate [type="checkbox"]')
     .forEach(checkbox => {
-      checkbox.indeterminate = true
+      if (checkbox.id.includes('Indeterminate')) {
+        checkbox.indeterminate = true
+      }
     })
 
   // -------------------------------
@@ -120,13 +134,16 @@
   // Modal
   // -------------------------------
   // Modal 'Varying modal content' example in docs and StackBlitz
+  // js-docs-start varying-modal-content
   const exampleModal = document.getElementById('exampleModal')
   if (exampleModal) {
     exampleModal.addEventListener('show.coreui.modal', event => {
       // Button that triggered the modal
       const button = event.relatedTarget
       // Extract info from data-coreui-* attributes
       const recipient = button.getAttribute('data-coreui-whatever')
+      // If necessary, you could initiate an Ajax request here
+      // and then do the updating in a callback.
 
       // Update the modal's content.
       const modalTitle = exampleModal.querySelector('.modal-title')
@@ -136,6 +153,7 @@
       modalBodyInput.value = recipient
     })
   }
+  // js-docs-end varying-modal-content
 
   // -------------------------------
   // Offcanvas

docs/assets/js/snippets.js

@@ -14,10 +14,10 @@
   @include font-size(.8125rem);
   line-height: 1.4;
   text-align: left;
-  background-color: $gray-100;
+  background-color: var(--cui-tertiary-bg);
 
   a {
-    color: $gray-800;
+    color: var(--cui-body-color);
     text-decoration: none;
   }
 
@@ -34,5 +34,5 @@
 .carbon-poweredby {
   display: block;
   margin-top: .75rem;
-  color: $gray-700 !important;
+  color: var(--cui-body-color) !important;
 }

docs/assets/scss/_ads.scss

@@ -0,0 +1,19 @@
+// Buttons
+//
+// Custom buttons for the docs.
+
+// scss-docs-start btn-css-vars-example
+.btn-cd-primary {
+  --cui-btn-font-weight: 600;
+  --cui-btn-color: var(--cui-white);
+  --cui-btn-bg: var(--cd-violet-bg);
+  --cui-btn-border-color: var(--cd-violet-bg);
+  --cui-btn-hover-color: var(--cui-white);
+  --cui-btn-hover-bg: #{shade-color($cd-violet, 10%)};
+  --cui-btn-hover-border-color: #{shade-color($cd-violet, 10%)};
+  --cui-btn-focus-shadow-rgb: var(--cd-violet-rgb);
+  --cui-btn-active-color: var(--cui-btn-hover-color);
+  --cui-btn-active-bg: #{shade-color($cd-violet, 20%)};
+  --cui-btn-active-border-color: #{shade-color($cd-violet, 20%)};
+}
+// scss-docs-end btn-css-vars-example

docs/assets/scss/_buttons.scss

@@ -3,11 +3,14 @@
 //
 
 .docs-callout {
+  --#{$prefix}link-color-rgb: var(--cd-callout-link);
+  --#{$prefix}code-color: var(--cd-callout-code-color);
+
   padding: 1.25rem;
   margin-top: 1.25rem;
   margin-bottom: 1.25rem;
-  background-color: var(--bd-callout-bg, var(--cui-gray-100));
-  border-left: .25rem solid var(--bd-callout-border, var(--cui-gray-300));
+  background-color: var(--cd-callout-bg, var(--cui-gray-100));
+  border-left: .25rem solid var(--cd-callout-border, var(--cui-gray-300));
 
   h4 {
     margin-bottom: .25rem;
@@ -27,9 +30,10 @@
 }
 
 // Variations
-@each $variant in $bd-callout-variants {
+@each $variant in $cd-callout-variants {
   .docs-callout-#{$variant} {
-    --bd-callout-bg: rgba(var(--cui-#{$variant}-rgb), .075);
-    --bd-callout-border: rgba(var(--cui-#{$variant}-rgb), .5);
+    --cd-callout-color: var(--cui-#{$variant}-text-emphasis);
+    --cd-callout-bg: rgba(var(--cui-#{$variant}-rgb), .1);
+    --cd-callout-border: var(--cui-#{$variant});
   }
 }