From 2b2f58c5d7c21daa63142bbbf1a83dc6837978d4 Mon Sep 17 00:00:00 2001 From: Tim Appelhans Date: Mon, 25 Nov 2024 16:03:20 +0100 Subject: [PATCH] create homebutton css on the fly for each layer :-) fixes #92 --- R/homebutton.R | 74 +++++++++++++------ .../lib/HomeButton/home-button.css | 71 ------------------ .../htmlwidgets/lib/HomeButton/home-button.js | 17 +---- 3 files changed, 53 insertions(+), 109 deletions(-) delete mode 100644 inst/htmlwidgets/lib/HomeButton/home-button.css diff --git a/R/homebutton.R b/R/homebutton.R index 6c3ac32..a4953b3 100644 --- a/R/homebutton.R +++ b/R/homebutton.R @@ -76,23 +76,23 @@ addHomeButton <- function(map, ext, group = "layer", txt <- paste('', group, '') css_dflt = list( - # "background-color" = "#ffffff95", - # "border" = "none", - # "width" = "100%", - # "height" = "20px", - # "line-height" = "15px", - # "font-size" = "85%", - # "text-align" = "center", - # "text-decoration" = "none", - # "color" = "black", - # "cursor" = "pointer", - # "overflow-x" = "visible", - # "overflow-y" = "hidden", - # "opacity" = "0.25", + "background-color" = "#ffffff95", + "border" = "none", + "width" = "100%", + "height" = "20px", + "line-height" = "15px", + "font-size" = "85%", + "text-align" = "center", + "text-decoration" = "none", + "color" = "black", + "cursor" = "pointer", + "overflow-x" = "visible", + "overflow-y" = "hidden", + "opacity" = "0.25", # "filter" = "alpha(opacity = 25)", - # "background-position" = "50% 50%", - # "background-repeat" = "no-repeat", - # "display" = "inline-block" + "background-position" = "50% 50%", + "background-repeat" = "no-repeat", + "display" = "inline-block" ) hover_css_dflt = list( @@ -101,17 +101,36 @@ addHomeButton <- function(map, ext, group = "layer", , 'opacity' = '0.9' ) - css = utils::modifyList(css_dflt, css) + css = jsonlite::toJSON(utils::modifyList(css_dflt, css), auto_unbox = TRUE) hover_css = jsonlite::toJSON( utils::modifyList(hover_css_dflt, hover_css) , auto_unbox = TRUE ) - map$dependencies <- c(map$dependencies, leafletHomeButtonDependencies()) + css_txt = sprintf( + ".leaflet-bar button %s \n\n .leaflet-bar button:hover %s" + , css + , hover_css + ) + + css_txt = gsub('\"', '', css_txt) + css_txt = gsub(",", ";", css_txt) + + path_layer = tempfile() + dir.create(path_layer) + path_layer = paste0(path_layer, "/", group, "_home-button.css") + writeLines(css_txt, path_layer) + + + map$dependencies <- c( + map$dependencies + , leafletHomeButtonDependencies() + , cssFileAttachment(path_layer, group) + ) + leaflet::invokeMethod(map, leaflet::getMapData(map), 'addHomeButton', ext[1], ext[2], ext[3], ext[4], - useext, group, label, txt, position, - css, hover_css) + useext, group, label, txt, position) } else map @@ -157,9 +176,20 @@ leafletHomeButtonDependencies <- function() { "HomeButton", '0.0.1', system.file("htmlwidgets/lib/HomeButton", package = "leafem"), - script = c("home-button.js", 'easy-button-src.min.js'), - stylesheet = 'home-button.css' + script = c("home-button.js", 'easy-button-src.min.js') + # stylesheet = 'home-button.css' )) } +cssFileAttachment = function(fn, layerId) { + data_dir <- dirname(fn) + data_file <- basename(fn) + list( + htmltools::htmlDependency( + name = paste0(layerId, "-CSS"), + version = '0.0.1', + src = c(file = data_dir), + stylesheet = data_file)) +} + ############################################################################## diff --git a/inst/htmlwidgets/lib/HomeButton/home-button.css b/inst/htmlwidgets/lib/HomeButton/home-button.css deleted file mode 100644 index ac6ad16..0000000 --- a/inst/htmlwidgets/lib/HomeButton/home-button.css +++ /dev/null @@ -1,71 +0,0 @@ -.leaflet-bar button/*, -.leaflet-bar button:hover*/ { - background-color: rgba(255,255,255, 0.95) /*#fff*/; - border: none; - width: 100%; - height: 20px; - line-height: 15px; - font-size: 85%; - /*display: block;*/ - text-align: center; - text-decoration: none; - color: black; - cursor: pointer; - overflow-x: visible; - overflow-y: hidden; - opacity: 0.25; - filter: alpha(opacity = 25); - background-position: 50% 50%; - background-repeat: no-repeat; - display: inline-block; -} - - -.leaflet-bar button:hover { - background-color: #00ffff;; - text-decoration: underline; - opacity: 0.9; - filter: alpha(opacity=90); -} - - -/* uncomment this to get rid of button borders, this also removes border from zoom buttons -.leaflet-touch .leaflet-bar { - border: none; -} - -/*.leaflet-bar button:first-of-type { - border-top-left-radius: 3px; - border-top-right-radius: 3px; -} - -.leaflet-bar button:last-of-type { - border-bottom-left-radius: 3px; - border-bottom-right-radius: 3px; - border-bottom: none; -} - -.leaflet-bar.disabled, -.leaflet-bar button.disabled { - cursor: default; - pointer-events: none; - opacity: .4; -} - -.easy-button-button .button-state{ - display: block; - width: 100%; - height: 100%; - position: relative; -} - - -/*.leaflet-touch .leaflet-bar button { - width: 100%; - height: 20px; - line-height: 18px; - overflow-y: hidden; - opacity: .5; - filter: alpha(opacity=50); - white-space: nowrap; -}*/ diff --git a/inst/htmlwidgets/lib/HomeButton/home-button.js b/inst/htmlwidgets/lib/HomeButton/home-button.js index 53145f6..a7a8e7f 100644 --- a/inst/htmlwidgets/lib/HomeButton/home-button.js +++ b/inst/htmlwidgets/lib/HomeButton/home-button.js @@ -1,6 +1,5 @@ LeafletWidget.methods.addHomeButton = function (xmin, ymin, xmax, ymax, useext, - group, label, icon, position, - css, hover_css) { + group, label, icon, position) { if (this.easyButton) { this.easyButton.removeFrom(this); @@ -26,20 +25,6 @@ LeafletWidget.methods.addHomeButton = function (xmin, ymin, xmax, ymax, useext, }] }); - let keys = Object.keys(css); - let vals = Object.values(css); - - for (let i = 0; i < keys.length; i++) { - easyButton.button.style.setProperty(keys[i].toString(), vals[i].toString()); - } - - // FIXME: need to figure out how to insert hover_css here!!! - let hvr_css = '.leaflet-bar button:hover{ background-color: #00ff00 }'; - // let hvr_css = '.leaflet-bar button:hover' + JSON.stringify(hover_css); - let style = document.createElement('style'); - style.appendChild(document.createTextNode(hvr_css)); - document.getElementsByTagName('head')[0].appendChild(style); - easyButton.addTo(this); this.currentEasyButton = easyButton;