From acef04c51be9429245a36d838776ec7f3610323c Mon Sep 17 00:00:00 2001
From: Joshua Orvis <jorvis@gmail.com>
Date: Sun, 21 Jan 2024 10:28:56 -0600
Subject: [PATCH] Added beginning of drop-down menus on dataset tiles, plus
 modifications to gene selector and dataset selector widgets so their dropdown
 customizations are specific to them

---
 www/css/common.v2.css                         |  1 -
 .../dataset-collection-selector.css           |  8 ++---
 .../dataset-collection-selector.html          |  8 ++---
 .../gene-collection-selector.css              |  8 ++---
 .../gene-collection-selector.html             | 11 ++++---
 www/include/tile-grid/tile.html               | 32 +++++++++++++++++--
 www/js/common.v2.js                           | 10 +++---
 7 files changed, 53 insertions(+), 25 deletions(-)

diff --git a/www/css/common.v2.css b/www/css/common.v2.css
index ad3e6d36..282f47f0 100644
--- a/www/css/common.v2.css
+++ b/www/css/common.v2.css
@@ -33,7 +33,6 @@ html, body {
 /* -= Typography =- */
 
 
-
 /* -------------------- */
 /* -= Header section =- */
 
diff --git a/www/include/dataset-collection-selector/dataset-collection-selector.css b/www/include/dataset-collection-selector/dataset-collection-selector.css
index 82fb5bec..453dd414 100644
--- a/www/include/dataset-collection-selector/dataset-collection-selector.css
+++ b/www/include/dataset-collection-selector/dataset-collection-selector.css
@@ -1,18 +1,18 @@
-div.dropdown-menu {
+#dropdown-dc div.dropdown-menu {
     width: 60vw;
 }
 @media (min-width: 1320px) {
-    div.dropdown-menu {
+    #dropdown-dc div.dropdown-menu {
         width: 55vw;
     }
 }
 @media (min-width: 1440px) {
-    div.dropdown-menu {
+    #dropdown-dc div.dropdown-menu {
         width: 50vw;
     }
 }
 @media (min-width: 1580px) {
-    div.dropdown-menu {
+    #dropdown-dc div.dropdown-menu {
         width: 45vw;
     }
 }
diff --git a/www/include/dataset-collection-selector/dataset-collection-selector.html b/www/include/dataset-collection-selector/dataset-collection-selector.html
index 36424525..b6044f8d 100644
--- a/www/include/dataset-collection-selector/dataset-collection-selector.html
+++ b/www/include/dataset-collection-selector/dataset-collection-selector.html
@@ -26,10 +26,10 @@
 
 <div id="dropdown-dc" class="control dropdown is-right is-loading is-disabled mr-0">
     <div class="dropdown-trigger is-clickable">
-      <button class="button">
-        <span id="dropdown-dc-selector-label">Choose a Dataset Collection</span>
-        <span class="icon is-small">
-          <i class="mdi mdi-chevron-down" aria-hidden="true"></i>
+      <button class="button dropdown-trigger">
+        <span id="dropdown-dc-selector-label" class="dropdown-trigger">Choose a Dataset Collection</span>
+        <span class="icon is-small dropdown-trigger">
+          <i class="mdi mdi-chevron-down dropdown-trigger" aria-hidden="true"></i>
         </span>
       </button>
     </div>
diff --git a/www/include/gene-collection-selector/gene-collection-selector.css b/www/include/gene-collection-selector/gene-collection-selector.css
index cc44d3a2..a2bfa9ce 100644
--- a/www/include/gene-collection-selector/gene-collection-selector.css
+++ b/www/include/gene-collection-selector/gene-collection-selector.css
@@ -1,18 +1,18 @@
-div.dropdown-menu {
+#dropdown-gene-lists div.dropdown-menu {
     width: 60vw;
 }
 @media (min-width: 1320px) {
-    div.dropdown-menu {
+    #dropdown-gene-lists div.dropdown-menu {
         width: 55vw;
     }
 }
 @media (min-width: 1440px) {
-    div.dropdown-menu {
+    #dropdown-gene-lists div.dropdown-menu {
         width: 50vw;
     }
 }
 @media (min-width: 1580px) {
-    div.dropdown-menu {
+    #dropdown-gene-lists div.dropdown-menu {
         width: 45vw;
     }
 }
diff --git a/www/include/gene-collection-selector/gene-collection-selector.html b/www/include/gene-collection-selector/gene-collection-selector.html
index 2f570a45..6ab2b674 100644
--- a/www/include/gene-collection-selector/gene-collection-selector.html
+++ b/www/include/gene-collection-selector/gene-collection-selector.html
@@ -26,11 +26,12 @@
 <script src="include/gene-collection-selector/gene-collection-selector.js"></script>
 
 <div id="dropdown-gene-lists" class="control dropdown is-right is-loading is-disabled mr-0">
-    <div class="dropdown-trigger is-clickable">
-      <button class="button">
-        <span id="dropdown-gene-list-selector-label">Quick search using Gene Lists</span>
-        <span class="icon is-small">
-          <i class="mdi mdi-chevron-down" aria-hidden="true"></i>
+    <div class="is-clickable">
+      <!-- why doesn't have dropdown-trigger on the button alone capture all clicks?? -->
+      <button class="button dropdown-trigger">
+        <span id="dropdown-gene-list-selector-label" class="dropdown-trigger">Quick search using Gene Lists</span>
+        <span class="icon is-small dropdown-trigger">
+          <i class="mdi mdi-chevron-down dropdown-trigger" aria-hidden="true"></i>
         </span>
       </button>
     </div>
diff --git a/www/include/tile-grid/tile.html b/www/include/tile-grid/tile.html
index 99489486..bebb2a9c 100644
--- a/www/include/tile-grid/tile.html
+++ b/www/include/tile-grid/tile.html
@@ -3,9 +3,35 @@
         <div class="card-header has-background-primary">
             <div class="card-header-title py-0"></div>
             <div class="card-header-icon">
-                <span class="icon">
-                    <i class="mdi mdi-18px mdi-dots-vertical"></i>
-                </span>
+                <div class="dropdown is-right dataset-dropdown">
+                    <div>
+                        <button class="button dropdown-trigger" aria-haspopup="true" aria-controls="dropdown-menu">
+                            <span class="icon">
+                                <i class="mdi mdi-18px mdi-dots-vertical dropdown-trigger"></i>
+                            </span>
+                        </button>
+                    </div>
+                    <div class="dropdown-menu" id="dropdown-menu" role="menu">
+                        <div class="dropdown-content">
+                        <a href="#" class="dropdown-item">
+                            Dropdown item
+                        </a>
+                        <a class="dropdown-item">
+                            Other dropdown item
+                        </a>
+                        <a href="#" class="dropdown-item is-active">
+                            Active dropdown item
+                        </a>
+                        <a href="#" class="dropdown-item">
+                            Other dropdown item
+                        </a>
+                        <hr class="dropdown-divider">
+                        <a href="#" class="dropdown-item">
+                            With a divider
+                        </a>
+                        </div>
+                    </div>
+                </div>
             </div>
         </div>
         <div class="card-image"></div>
diff --git a/www/js/common.v2.js b/www/js/common.v2.js
index b30e57ec..f9928a8d 100644
--- a/www/js/common.v2.js
+++ b/www/js/common.v2.js
@@ -15,11 +15,13 @@ document.addEventListener('DOMContentLoaded', () => {
     });
 
     // Bulma dropdowns can't be clicked without a wee bit of Javascript
-    document.querySelectorAll('.dropdown-trigger').forEach(item => {
-        item.addEventListener('click', (event) => {
+    document.addEventListener('click', (event) => {
+        let item = event.target;
+        if (item.classList.contains('dropdown-trigger')) {
+            console.log("dropdown-trigger clicked");
             event.stopPropagation();
-            item.parentNode.classList.toggle('is-active');
-        });
+            item.closest(".dropdown").classList.toggle('is-active');
+        }
     });