Refactor Click-to-copy with Bootstrap5

Refactor of google#1245, Bootstrap5-compatible code.
geriom · Feb 27, 2023 · b2d842e · b2d842e
1 parent 36c7405
commit b2d842e
Show file tree

Hide file tree

Showing 3 changed files with 96 additions and 159 deletions.
diff --git a/assets/js/click-to-copy.js b/assets/js/click-to-copy.js
@@ -1,86 +1,39 @@
-let codeListings = document.querySelectorAll('.highlight > pre');
+let codeListings = document.querySelectorAll(".highlight > pre");
 
-for (let index = 0; index < codeListings.length; index++)
-{
-  const codeSample = codeListings[index].querySelector('code');
+for (let index = 0; index < codeListings.length; index++) {
+  const codeSample = codeListings[index].querySelector("code");
   const copyButton = document.createElement("button");
-  copyButton.setAttribute('type', 'button');
-  copyButton.onclick = function() { copyCode(codeSample); };
-  copyButton.classList.add('fas', 'fa-copy'); 
-
-  const buttonTooltip = document.createElement('div');
-  buttonTooltip.classList.add('c2c-tooltip');
-  buttonTooltip.setAttribute('role', 'tooltip');
-  buttonTooltip.innerHTML += 'Copy to clipboard';
-
-  const buttonDiv = document.createElement('div');
-  buttonDiv.classList.add('click-to-copy');
-
-  // Use Popper to create and handle the tooltip behavior.
-
-  const popperInstance = Popper.createPopper(copyButton, buttonTooltip,
-  {
-    modifiers:
-    [
-      {  
-        name: 'offset',
-        options:
-        {
-          offset: [0, -48],
-        },
-      },
-    ],
+  const buttonAttributes = {
+    type: "button",
+    title: "Copy to clipboard",
+    "data-bs-toggle": "tooltip",
+    "data-bs-placement": "top",
+    "data-bs-container": "body",
+  };
+
+  Object.keys(buttonAttributes).forEach((key) => {
+    copyButton.setAttribute(key, buttonAttributes[key]);
   });
 
-  copyButton.addEventListener('click', () =>
-  {
-    buttonTooltip.innerHTML = 'Copied!';
-  });
-
-  copyButton.addEventListener('mouseenter', () =>
-  {
-    buttonTooltip.setAttribute('show-tooltip', '');
-
-    // Enable eventListeners when the code block is on the viewport
-
-    popperInstance.setOptions((options) => ({
-       ...options,
-       modifiers:
-       [
-          ...options.modifiers,
-          { name: 'eventListeners', enabled: true },
-       ],
-    }));
-    popperInstance.update();
-  });
-
-  copyButton.addEventListener('mouseleave', () =>
-  {
-    buttonTooltip.removeAttribute('show-tooltip');
-
-    // Reset the message in case the button was clicked
-    buttonTooltip.innerHTML = 'Copy to clipboard';
-
-    // Disble eventListeners when the code block is NOT on the viewport
-
-    popperInstance.setOptions((options) => ({
-       ...options,
-       modifiers:
-       [
-          ...options.modifiers,
-          { name: 'eventListeners', enabled: false },
-       ],
-    }));
-  });
+  copyButton.classList.add("fas", "fa-copy", "btn", "btn-secondary");
+  const tooltip = new bootstrap.Tooltip(copyButton);
+  copyButton.onclick = () => {
+    copyCode(codeSample);
+    copyButton.setAttribute("data-bs-original-title", "Copied!");
+    tooltip.show();
+  };
+  copyButton.onmouseout = () => {
+    copyButton.setAttribute("data-bs-original-title", "Copy to clipboard");
+    tooltip.hide();
+  };
+
+  const buttonDiv = document.createElement("div");
+  buttonDiv.classList.add("click-to-copy");
 
   buttonDiv.append(copyButton);
-  buttonDiv.append(buttonTooltip);
   codeListings[index].insertBefore(buttonDiv, codeSample);
-
 }
 
-function copyCode(codeSample)
-{
+const copyCode = (codeSample) => {
   navigator.clipboard.writeText(codeSample.textContent.trim());
-}
-
+};
diff --git a/assets/scss/_code.scss b/assets/scss/_code.scss
@@ -1,101 +1,85 @@
 // Code formatting.
 
 .td-content {
-	// Highlighted code.
-    .highlight {
-        @extend .card;
-
-        margin: 2rem 0;
-        padding: 0;
-        position: relative;
+  // Highlighted code.
+  .highlight {
+    @extend .card;
 
-        .click-to-copy {
-            display: block;
-            text-align: right;
-            height: 1ex;
-        }
-
-        pre {
-            margin: 0;
-            padding: 1rem;
+    margin: 2rem 0;
+    padding: 0;
+    position: relative;
 
-            // Default click-to-copy button
+    .click-to-copy {
+      display: block;
+      text-align: right;
+      height: 1ex;
+    }
 
-            button {
-               position: absolute;
-               color: $gray-400;
-               border-radius: 3px;
-               border-width: 0;
-               background-color: inherit;
-               box-shadow: 1px 1px $gray-400;
-               right: 8px;
-               top: 6px;
+    pre {
+      margin: 0;
+      padding: 1rem;
 
-               &:hover {
-                  color: $dark;
-                  background-color: $gray-400;
-               }
-               &:active {
-                  color: $dark;
-                  background-color: $gray-400;
-                  transform: translateY(2px);
-               }
-            }
+      // Default click-to-copy button
 
-            .c2c-tooltip {
-               background: $dark;
-               color: $white;
-               padding: 2px 4px;
-               border-radius: 3px;
-               display: block;
-               visibility: hidden;
-               opacity: 0;
-               transition: visibility 0s, opacity 0.5s linear;
-            }
+      button {
+        position: absolute;
+        color: $gray-400;
+        border-radius: 3px;
+        border-width: 0;
+        background-color: inherit;
+        box-shadow: 1px 1px $gray-400;
+        right: 8px;
+        top: 6px;
 
-            .c2c-tooltip[show-tooltip] {
-               visibility: visible;
-               opacity: 1;
-            }
+        &:hover {
+          color: $dark;
+          background-color: $gray-400;
+        }
+        &:active {
+          color: $dark;
+          background-color: $gray-400;
+          transform: translateY(2px);
         }
+      }
     }
+  }
 
-    // Inline code
-    p code, li > code, table code {
-        color: inherit;
-        padding: 0.2em 0.4em;
-        margin: 0;
-        font-size: 85%;
-        word-break: normal;
-        background-color: rgba($black, 0.05);
-        border-radius: $border-radius;
+  // Inline code
+  p code,
+  li > code,
+  table code {
+    color: inherit;
+    padding: 0.2em 0.4em;
+    margin: 0;
+    font-size: 85%;
+    word-break: normal;
+    background-color: rgba($black, 0.05);
+    border-radius: $border-radius;
 
-        br {
-            display: none;
-        }
+    br {
+      display: none;
     }
+  }
 
+  // Code blocks
+  pre {
+    word-wrap: normal;
+    background-color: $gray-100;
+    padding: $spacer;
 
-    // Code blocks
-    pre {
-        word-wrap: normal;
-        background-color: $gray-100;
-        padding: $spacer;
-
-
-        > code {
-	    background-color: inherit !important;
-            padding: 0;
-            margin: 0;
-            font-size: 100%;
-            word-break: normal;
-            white-space: pre;
-            border: 0;
-        }
+    > code {
+      background-color: inherit !important;
+      padding: 0;
+      margin: 0;
+      font-size: 100%;
+      word-break: normal;
+      white-space: pre;
+      border: 0;
     }
+  }
 
-    pre.mermaid {
-        background-color: inherit;
-        font-size: 0;
-    }
+  pre.mermaid {
+    background-color: inherit;
+    font-size: 0;
+  }
 }
diff --git a/layouts/partials/scripts.html b/layouts/partials/scripts.html
@@ -91,7 +91,7 @@
 
 {{ if .Site.Params.prism_syntax_highlighting -}}
   <script src='{{ "js/prism.js" | relURL }}'></script>
-{{ else if false -}}
+{{ else if ( not .Site.Params.chroma_click_to_copy_disable ) -}}
   {{ $c2cJS := resources.Get "js/click-to-copy.js" -}}
   {{ if hugo.IsProduction -}}
     {{ $c2cJS = $c2cJS | minify | fingerprint -}}