make slight improvements to initControls tooltips and clipboard butto…

…ns to load faster
ethpandaops · Oct 15, 2024 · 040020f · 040020f
1 parent 527c012
commit 040020f
Show file tree

Hide file tree

Showing 2 changed files with 49 additions and 54 deletions.
diff --git a/static/js/explorer.js b/static/js/explorer.js
@@ -14,13 +14,17 @@
   };
 
   function initControls() {
-    // init tooltips
+    // init tooltips:
+    // NOTE: `data-bs-toogle="tooltip"`` tooltips will also get cleaned up if their relevant element is removed from the DOM
     document.querySelectorAll('[data-bs-toggle="tooltip"]').forEach(initTooltip);
     cleanupTooltips();
+    // NOTE: `data-toogle="tooltip"` tooltips will not get cleaned up if they are removed from the DOM
+    $('[data-toggle="tooltip"]').tooltip()
 
     // init clipboard buttons
-    document.querySelectorAll("[data-clipboard-text]").forEach(initCopyBtn);
-    document.querySelectorAll("[data-clipboard-target]").forEach(initCopyBtn);
+    var clipboard = new ClipboardJS('[data-clipboard-text], [data-clipboard-target]');
+    clipboard.on("success", onClipboardSuccess);
+    clipboard.on("error", onClipboardError);
   }
 
   function initTooltip(el) {
@@ -46,15 +50,6 @@
     });
   }
 
-  function initCopyBtn(el) {
-    if($(el).data("clipboard-init"))
-      return;
-    $(el).data("clipboard-init", true);
-    var clipboard = new ClipboardJS(el);
-    clipboard.on("success", onClipboardSuccess);
-    clipboard.on("error", onClipboardError);
-  }
-
   function onClipboardSuccess(e) {
     var title = e.trigger.getAttribute("data-bs-original-title");
     var tooltip = bootstrap.Tooltip.getInstance(e.trigger);
@@ -81,7 +76,7 @@
       var time = timerEl.getAttribute("data-timer");
       var textEls = Array.prototype.filter.call(timerEl.querySelectorAll("*"), function(el) { return el.firstChild && el.firstChild.nodeType === 3 });
       var textEl = textEls.length ? textEls[0] : timerEl;
-      
+
       textEl.innerText = renderRecentTime(time);
     });
   }
@@ -256,19 +251,19 @@
         },
       }
     )
-  
+
     searchEl.on("input", function (input) {
       $(".tt-suggestion").first().addClass("tt-cursor")
     })
-  
+
     jQuery(".tt-menu").on("mouseenter", function () {
       $(".tt-suggestion").first().removeClass("tt-cursor")
     })
-  
+
     jQuery(".tt-menu").on("mouseleave", function () {
       $(".tt-suggestion").first().addClass("tt-cursor")
     })
-  
+
     searchEl.on("typeahead:select", function (ev, sug) {
       if (sug.root !== undefined) {
         if (sug.orphaned) {
@@ -294,5 +289,5 @@
     })
   }
 
-  
+
 })()