Refactor the JS related to displaying tooltip on disabled buttons

Signed-off-by: tdruez <tdruez@nexb.com>
nexB · May 14, 2024 · 7834b81 · 7834b81
1 parent e72dd7b
commit 7834b81
Show file tree

Hide file tree

Showing 4 changed files with 18 additions and 20 deletions.
diff --git a/component_catalog/templates/component_catalog/base_component_package_list.html b/component_catalog/templates/component_catalog/base_component_package_list.html
@@ -2,9 +2,11 @@
 {% load i18n %}
 
 {% block top-right-buttons %}
-  <button class="btn btn-outline-dark disabled" id="download-aboutcode-files" href="{% if opts.model_name == 'package' %}{% url 'component_catalog:package_multi_about_files' %}{% elif opts.model_name == 'component' %}{% url 'component_catalog:component_multi_about_files' %}{% endif %}" data-bs-toggle="tooltip">
-    <i class="fas fa-download"></i> AboutCode
-  </button>
+  <span class="d-inline-block" tabindex="0" data-bs-toggle="tooltip">
+    <button class="btn btn-outline-dark disabled" id="download-aboutcode-files" href="{% if opts.model_name == 'package' %}{% url 'component_catalog:package_multi_about_files' %}{% elif opts.model_name == 'component' %}{% url 'component_catalog:component_multi_about_files' %}{% endif %}">
+      <i class="fas fa-download"></i> AboutCode
+    </button>
+  </span>
   {% if form or add_to_component_form %}
     <div class="btn-group">
       <div class="dropdown" data-bs-toggle="tooltip" title="{% trans 'Select objects first' %}">
@@ -47,16 +49,17 @@
   <script>
     $(document).ready(function () {
       let download_aboutcode_btn = $('#download-aboutcode-files');
+      let download_aboutcode_wrapper = download_aboutcode_btn.parent();
 
       let handle_button_display = function() {
-        let count = $('main input[type="checkbox"]:checked').length;
+        let count = $('table input[type="checkbox"]:checked').length;
         if (count >= 1) {
           download_aboutcode_btn.removeClass('disabled');
-          download_aboutcode_btn.attr('data-bs-title', 'Download AboutCode files');
+          download_aboutcode_wrapper.attr('data-bs-original-title', 'Download AboutCode files');
         }
         else {
           download_aboutcode_btn.addClass('disabled');
-          download_aboutcode_btn.attr('data-bs-title', 'Select objects first');
+          download_aboutcode_wrapper.attr('data-bs-original-title', 'Select objects first');
         }
       };
 

diff --git a/component_catalog/templates/component_catalog/includes/add_to.js.html b/component_catalog/templates/component_catalog/includes/add_to.js.html
@@ -1,16 +1,17 @@
 <script>
   $(document).ready(function () {
     let add_to_btn = $('#add-to-btn');
+    let add_to_btn_wrapper = add_to_btn.parent();
 
     let handle_button_display = function () {
       let count = $('main input[type="checkbox"]:checked').length;
       if (count >= 1) {
         add_to_btn.removeClass('disabled');
-        add_to_btn.parent().attr('data-bs-title', '');
+        add_to_btn_wrapper.attr('data-bs-original-title', '');
     }
       else {
         add_to_btn.addClass('disabled');
-        add_to_btn.parent().attr('data-bs-title', 'Select objects first');
+        add_to_btn_wrapper.attr('data-bs-original-title', 'Select objects first');
       }
     };
 

diff --git a/dje/templates/object_list_base.html b/dje/templates/object_list_base.html
@@ -96,15 +96,6 @@
             $('.h-link').tooltip({placement: 'bottom', title: 'Hierarchy view', container: 'body'});
             $('.r-link').tooltip({placement: 'bottom', title: 'Request view', container: 'body'});
 
-            /* Select-all checkboxes */
-            let checkboxSelectAll = document.querySelector("thead th #checkbox-select-all");
-            checkboxSelectAll.addEventListener("click", function() {
-              let checkboxes = document.querySelectorAll("table#object-list-table tbody td input[type='checkbox']");
-              checkboxes.forEach(function(checkbox) {
-                checkbox.checked = checkboxSelectAll.checked;
-              });
-            });
-
             /* Left and Right keys navigation */
             {% if is_paginated %}
               document.addEventListener("keydown", function(e) {

diff --git a/product_portfolio/templates/product_portfolio/product_list.html b/product_portfolio/templates/product_portfolio/product_list.html
@@ -3,7 +3,9 @@
 
 {% block top-right-buttons %}
   <div class="btn-group">
-    <button id="compare_button" href="/products/compare/" class="btn btn-outline-dark disabled" data-bs-toggle="tooltip"><i class="far fa-clone"></i> {% trans "Compare" %}</button>
+    <span class="d-inline-block" tabindex="0" data-bs-toggle="tooltip">
+      <button id="compare_button" href="/products/compare/" class="btn btn-outline-dark disabled"><i class="far fa-clone"></i> {% trans "Compare" %}</button>
+    </span>
   </div>
   {{ block.super }}
 {% endblock %}
@@ -13,16 +15,17 @@
     <script>
     $(document).ready(function () {
         let compare_button = $('#compare_button');
+        let compare_button_wrapper = compare_button.parent();
 
         let handle_compare_button_display = function () {
             let count = $('tbody input[type="checkbox"]:checked').length;
             if (count === 2) {
                 compare_button.removeClass('disabled');
-                compare_button.attr('data-bs-title', '');
+                compare_button_wrapper.attr('data-bs-original-title', '');
             }
             else {
                 compare_button.addClass('disabled');
-                compare_button.attr('data-bs-title', 'Select first two products to compare, then click this button');
+                compare_button_wrapper.attr('data-bs-original-title', 'Select first two products to compare, then click this button');
             }
         };