initialize pop info hover in lookup table

BioDT · May 10, 2024 · d07a3ee · d07a3ee
1 parent 164a10e
commit d07a3ee
Show file tree

Hide file tree

Showing 4 changed files with 71 additions and 2 deletions.
diff --git a/app/js/popover.js b/app/js/popover.js
@@ -0,0 +1,9 @@
+// popovers.js
+$( document ).ready(function() {
+
+  var popoverTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="popover"]'))
+  var popoverList = popoverTriggerList.map(function (popoverTriggerEl) {
+  return new bootstrap.Popover(popoverTriggerEl)
+  })
+
+});
diff --git a/app/main.R b/app/main.R
@@ -5,6 +5,7 @@ box::use(
   waiter[useWaiter, useHostess, waiterShowOnLoad, waiter_hide, spin_loaders],
   cicerone[use_cicerone],
   stringi[stri_rand_strings],
+  htmltools[includeScript],
 )
 
 box::use(
@@ -47,6 +48,7 @@ ui <- function(id) {
       ),
       color = "rgba(256,256,256,0.9)"
     ),
+    includeScript("app/js/popover.js"),
     # Body ----
     # Main navbar----
     page_navbar(

diff --git a/app/static/css/app.min.css b/app/static/css/app.min.css
diff --git a/app/view/honeybee/beekeeper_lookup.R b/app/view/honeybee/beekeeper_lookup.R
@@ -2,6 +2,8 @@ box::use(
   shiny[moduleServer, NS, tagList, tags, reactive, reactiveVal, observeEvent],
   bslib[card, card_header, card_body],
   DT[DTOutput, renderDT],
+  htmlwidgets[JS],
+
 )
 
 #' @export
@@ -18,6 +20,7 @@ honeybee_lookup_ui <- function(id) {
       ),
       card_body(
         tags$div(
+          id = "bee-lookup-table",
           DTOutput(
             ns("lookup_table")
           )
@@ -48,7 +51,62 @@ honeybee_lookup_server <- function(id,
         searching = FALSE,
         info = FALSE
       ),
-      class = c("hover", "compact")
+      class = c("hover", "compact"),
+      callback = JS(paste0('
+        let th_cells = document.querySelectorAll("#bee-lookup-table table thead tr th")
+
+        const tooltipInfo = [
+          "Amount of pollen g/m^2 per day",
+          "Conversion factor (mol/l) from nectar (l) into sugar (mol)",
+          "Amount of nectar l/m^2 per day",
+          "Minimum time in seconds a bee needs to harvest nectar resources during one flight",
+          "Minimum time in seconds a bee needs to harvest pollen resources during one flight",
+          "Calendar day when resources become available",
+          "Calendar day until resources are available"
+        ]
+
+        th_cells.forEach((el, idx) => {
+          if (idx == 0 || idx == 1) {
+            return;
+          } else {
+            /*
+            let divWrap = document.createElement("div");
+            divWrap.setAttribute("data-bs-title", "default link...");
+            divWrap.setAttribute("data-bs-toggle", "tooltip");
+            divWrap.setAttribute("class", "tooltip");
+
+            let spanText = document.createElement("span");
+            spanText.setAttribute("class", "tooltiptext");
+            spanText.innerHTML = tooltipInfo[idx - 2];
+
+            let spanIco = document.createElement("span");
+            spanIco.setAttribute("class","fa fa-circle-info");          
+
+            divWrap.appendChild(spanText)
+            
+            th_cells[idx].appendChild(spanIco)
+            th_cells[idx].appendChild(divWrap)
+            */
+
+            // th_cells[idx].setAttribute("type", "button");
+            // th_cells[idx].setAttribute("class", "btn btn-secondary");
+            // th_cells[idx].setAttribute("data-bs-title", "default link...");
+            // th_cells[idx].setAttribute("data-bs-content", "OBSAH...");
+            // th_cells[idx].setAttribute("data-bs-toggle", "tooltip");
+            
+            
+            let btnTip = document.createElement("button");
+            btnTip.setAttribute("type", "button");
+            btnTip.setAttribute("data-bs-toggle", "popover");
+            btnTip.setAttribute("data-bs-content", "body content here");
+            btnTip.setAttribute("title", tooltipInfo[idx - 2]);
+
+            th_cells[idx].appendChild(btnTip)
+
+            console.log("th_cells[idx]:::", th_cells[idx])
+          }
+        })
+      '))
     )
 
     # Lookup table edit logic ----