Modified tooltips behaviour on button click

Signed-off-by: Vipul Gupta (@vipulgupta2048) <[email protected]>
balena-io · Aug 18, 2021 · 5501695 · 5501695
1 parent a283c7e
commit 5501695
Show file tree

Hide file tree

Showing 3 changed files with 221 additions and 23 deletions.
diff --git a/static/css/main.css b/static/css/main.css
@@ -508,6 +508,7 @@ pre:hover .btnClipboard {
   background-position: center center;
   border-radius: 8px;
   padding-left: 8px;
+  padding-top: 3px;
 }
 
 .btnIcon__body {

diff --git a/static/css/tooltips.css b/static/css/tooltips.css
diff --git a/templates/_copy_code_block.html b/templates/_copy_code_block.html
@@ -1,49 +1,46 @@
 <script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/2.0.8/clipboard.min.js"></script>
+<link rel="stylesheet" href="../static/css/tooltips.css">
 <script type="text/javascript">
   window.addEventListener('load', function () {
     // Creating the clipboard button 
     function button(label, ariaLabel, icon, className) {
-      const btn = document.createElement('button');
-      btn.classList.add('btnIcon', className, "tooltipped", "tooltipped-w", "tooltipped-no-delay", "m-2", "p-2", "border");
-      btn.setAttribute('aria-label', 'Copied!');
-      btn.setAttribute('type', 'button');
-      btn.innerHTML =
-        '<div class="btnIcon__body">' +
+      const div = document.createElement('div');
+      div.classList.add("btnIcon__body");
+      div.innerHTML =
+        `<button class="btnIcon ${className}" type=button alt="Copy to Clipboard">` +
         icon +
-        '</div>';
-      return btn;
+        `</button>`
+      return div;
     }
 
-    // Append the copy buttons to each code snippet on the page 
     function addButtons(codeBlockClass, btn) {
       document.querySelectorAll(codeBlockClass).forEach(function (code) {
         code.parentNode.appendChild(btn.cloneNode(true));
       });
     }
 
     const copyIcon =
-      '<svg width="18" height="18" viewBox="340 364 14 15" xmlns="http://www.w3.org/2000/svg"><path fill="currentColor" d="M342 375.974h4v.998h-4v-.998zm5-5.987h-5v.998h5v-.998zm2 2.994v-1.995l-3 2.993 3 2.994v-1.996h5v-1.995h-5zm-4.5-.997H342v.998h2.5v-.997zm-2.5 2.993h2.5v-.998H342v.998zm9 .998h1v1.996c-.016.28-.11.514-.297.702-.187.187-.422.28-.703.296h-10c-.547 0-1-.452-1-.998v-10.976c0-.546.453-.998 1-.998h3c0-1.107.89-1.996 2-1.996 1.11 0 2 .89 2 1.996h3c.547 0 1 .452 1 .998v4.99h-1v-2.995h-10v8.98h10v-1.996zm-9-7.983h8c0-.544-.453-.996-1-.996h-1c-.547 0-1-.453-1-.998 0-.546-.453-.998-1-.998-.547 0-1 .452-1 .998 0 .545-.453.998-1 .998h-1c-.547 0-1 .452-1 .997z" fill-rule="evenodd"/></svg>';
+      '<svg width="16" height="16" viewBox="340 364 14 15" xmlns="http://www.w3.org/2000/svg"><path fill="currentColor" d="M342 375.974h4v.998h-4v-.998zm5-5.987h-5v.998h5v-.998zm2 2.994v-1.995l-3 2.993 3 2.994v-1.996h5v-1.995h-5zm-4.5-.997H342v.998h2.5v-.997zm-2.5 2.993h2.5v-.998H342v.998zm9 .998h1v1.996c-.016.28-.11.514-.297.702-.187.187-.422.28-.703.296h-10c-.547 0-1-.452-1-.998v-10.976c0-.546.453-.998 1-.998h3c0-1.107.89-1.996 2-1.996 1.11 0 2 .89 2 1.996h3c.547 0 1 .452 1 .998v4.99h-1v-2.995h-10v8.98h10v-1.996zm-9-7.983h8c0-.544-.453-.996-1-.996h-1c-.547 0-1-.453-1-.998 0-.546-.453-.998-1-.998-.547 0-1 .452-1 .998 0 .545-.453.998-1 .998h-1c-.547 0-1 .452-1 .997z" fill-rule="evenodd"/></svg>';
 
-    addButtons(
-      '.hljs',
-      button('Copy', 'Copied!', copyIcon, 'btnClipboard'),
-    );
+    addButtons('.hljs', button('Copy', 'Copied!', copyIcon, 'btnClipboard'));
 
-    const clipboard = new ClipboardJS('.btnClipboard', {
+    // Instantiating ClipboardJS object and specifying the retrun value that gets saved to clipboard 
+    const clipboard = new ClipboardJS('.btnIcon__body', {
       target: function (trigger) {
         return trigger.parentNode.querySelector('code');
       },
     });
 
     clipboard.on('success', function (event) {
       event.clearSelection();
-      // copyButton.classList.add("tooltipped", "tooltipped-w", "tooltipped-no-delay", "m-2", "p-2", "border");
-      // copyButton.setAttribute('aria-label', 'Copied!');
-      // textEl.textContent = 'Copied';
-      // setTimeout(function () {
-        // copyButton.classList.remove("tooltipped", "tooltipped-w", "tooltipped-no-delay", "m-2", "p-2", "border");
-        // copyButton.removeAttribute('aria-label', 'Copied!');
-      // }, 2000);
+      const copyButton = event.trigger.querySelector('.btnIcon')
+      console.log(copyButton)
+      copyButton.classList.add("tooltipped", "tooltipped-w", "tooltipped-no-delay", "m-2", "p-2", "border");
+      copyButton.setAttribute('aria-label', 'Copied!');
+      setTimeout(function () {
+        copyButton.classList.remove("tooltipped", "tooltipped-w", "tooltipped-no-delay", "m-2", "p-2", "border");
+        copyButton.removeAttribute('aria-label', 'Copied!');
+      }, 2000);
     });
   });