create homebutton css on the fly for each layer :-) fixes #92

r-spatial · Nov 25, 2024 · 2b2f58c · 2b2f58c
1 parent 988c9cb
commit 2b2f58c
Show file tree

Hide file tree

Showing 3 changed files with 53 additions and 109 deletions.
diff --git a/R/homebutton.R b/R/homebutton.R
@@ -76,23 +76,23 @@ addHomeButton <- function(map, ext, group = "layer",
     txt <- paste('<strong>', group, '</strong>')
 
     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
diff --git 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;