diff --git a/app/js/popover.js b/app/js/popover.js new file mode 100644 index 0000000..9124c4e --- /dev/null +++ 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 index 2a26f03..0f3b7e9 100644 --- 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 index 10ad6a4..063c7ca 100644 --- a/app/static/css/app.min.css +++ b/app/static/css/app.min.css @@ -1 +1 @@ -.bslib-page-fill{overflow:auto}.btn-navbar{color:#414f2f;background-color:#fff;border-color:#fff}.bslib-sidebar-layout>.sidebar{background-color:#fff}.index-info{background-image:url("../img/forest2.png");background-repeat:no-repeat;background-size:100%;background-position:bottom;display:flex}.info-text{color:#bc6c25;background-color:#fff;background-color:rgba(255,255,255,.8);border-radius:25px;padding-left:10px;padding-right:10px}.marker-cluster-red{background-color:#a03255;background-color:rgba(253,60,115,.5)}.marker-cluster-red div{background-color:#aa143c;background-color:rgba(241,40,70,.6);color:#ebebeb}.waiter-fullscreen{background-image:url("../img/forest2.png");background-repeat:no-repeat;background-size:100%;background-position:bottom;display:flex}.help-button{width:70px;height:70px;text-align:center;padding:10px 0;font-size:12px;line-height:1.428571429;border-radius:26.25px;box-shadow:0 2px 2px #888;display:flex;align-items:center;justify-content:center}.help-button span{margin:-1rem -1rem}.navbar .navbar-nav .nav-link{color:#414f2f;font-size:1.1em}.navbar .navbar-nav .nav-link:hover{color:#414f2f}.navbar .navbar-nav .nav-item{position:relative}.navbar .navbar-nav .nav-item::after{position:absolute;bottom:0;left:0;right:0;margin:auto;background-color:#414f2f;width:0%;content:"";height:2px}.navbar .navbar-nav .nav-item:hover::after{width:100%}#beehave-output_bees_plot .shiny-input-container{width:100%;display:flex;flex-wrap:wrap;flex-direction:row;align-content:center}#beehave-output_bees_plot .shiny-input-container>label{display:flex;flex-wrap:wrap;align-content:center}#beehave-output_bees_plot .shiny-input-container>div{min-width:250px;display:flex;flex-wrap:wrap;align-content:center}#beehave-output_bees_plot .shiny-input-container>div>.selectize-control{padding:0;width:250px;margin-left:1rem}#beehave-update_output{margin-left:3rem;margin-right:3rem;max-width:18rem}.form-group.shiny-input-container{margin-bottom:0rem}.shiny-input-container:not(.shiny-input-container-inline){width:100%;max-width:100%}.card-shadow{box-shadow:0 2px 2px #888}.irs .irs-bar,.irs-shadow{background:#dda15e;border-color:#dda15e;color:#dda15e}.irs .irs-handle{background:#dda15e;border-color:#dda15e;color:#dda15e}.irs .irs-single{background:#dda15e;border-color:#dda15e}.irs--shiny .irs-handle.state_hover,.irs--shiny .irs-handle:hover{background:#dda15e} +.bslib-page-fill{overflow:auto}.btn-navbar{color:#414f2f;background-color:#fff;border-color:#fff}.bslib-sidebar-layout>.sidebar{background-color:#fff}.index-info{background-image:url("../img/forest2.png");background-repeat:no-repeat;background-size:100%;background-position:bottom;display:flex}.info-text{color:#bc6c25;background-color:#fff;background-color:rgba(255,255,255,.8);border-radius:25px;padding-left:10px;padding-right:10px}.marker-cluster-red{background-color:#a03255;background-color:rgba(253,60,115,.5)}.marker-cluster-red div{background-color:#aa143c;background-color:rgba(241,40,70,.6);color:#ebebeb}.waiter-fullscreen{background-image:url("../img/forest2.png");background-repeat:no-repeat;background-size:100%;background-position:bottom;display:flex}.help-button{width:70px;height:70px;text-align:center;padding:10px 0;font-size:12px;line-height:1.428571429;border-radius:26.25px;box-shadow:0 2px 2px #888;display:flex;align-items:center;justify-content:center}.help-button span{margin:-1rem -1rem}.navbar-nav .nav-link{color:#414f2f;font-size:1.1em}.navbar-nav .nav-link:hover{color:#414f2f}.navbar-nav .nav-item{position:relative}.navbar-nav .nav-item:after{position:absolute;bottom:0;left:0;right:0;margin:auto;background-color:#414f2f;width:0%;content:"";height:2px;transition:all .5s}.navbar-nav .nav-item:hover::after{width:100%}.card-shadow{box-shadow:0 2px 2px #888}.irs .irs-bar,.irs .irs-shadow{background:#dda15e;border-color:#dda15e;color:#dda15e}.irs .irs-handle{background:#dda15e;border-color:#dda15e;color:#dda15e}.irs .irs-single{background:#dda15e;border-color:#dda15e}.irs--shiny .irs-handle.state_hover,.irs--shiny .irs-handle:hover{background:#dda15e}.shiny-input-checkbox{background-color:#dda15e !important;border-color:#dda15e !important} diff --git a/app/view/honeybee/beekeeper_lookup.R b/app/view/honeybee/beekeeper_lookup.R index d271b2c..1b530db 100644 --- 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 ----