feat: adapt to voila-sepal-ui template. #909 (#910)

sepal_ui/frontend/css/custom.css

@@ -116,3 +116,12 @@ nav.v-navigation-drawer {
   contain: revert !important;
   background-color: revert !important;
 }
+
+.full-screen-map > .leaflet-container {
+  position: fixed !important;
+  width: 100vw;
+  height: calc(100vh - 48px);
+  z-index: 800;
+  bottom: 0;
+  left: 0;
+}

sepal_ui/frontend/resize_trigger.py

@@ -18,9 +18,10 @@ class ResizeTrigger(v.VuetifyTemplate):
 
     # load the js file
     js = (Path(__file__).parent / "js/jupyter_resize.js").read_text()
-    template = Unicode("<script>{methods: {jupyter_resize(){%s}}}</script>" % js).tag(
-        sync=True
-    )
+    template = Unicode(
+        "<script class='sepal-ui-script'>{methods: {jupyter_resize(){%s}}}</script>"
+        % js
+    ).tag(sync=True)
     "Unicode: the javascript script to manually trigger the resize event"
 
     def resize(self):

sepal_ui/mapping/fullscreen_control.py

@@ -1,12 +1,11 @@
 """Customized control to toggle the fullscreen state of the map."""
 
-from pathlib import Path
 from typing import List, Optional
 
 import ipyvuetify as v
 from ipyleaflet import Map, WidgetControl
-from IPython.display import Javascript, display
 
+from sepal_ui.frontend.resize_trigger import rt
 from sepal_ui.mapping.map_btn import MapBtn
 
 
@@ -43,11 +42,9 @@ def __init__(
             fullapp: either or not the map will be used as the sole widget/tile of an application
             kwargs: any available arguments from a ipyleaflet WidgetControl
         """
-        # set the offset
-        offset = "48px" if fullapp else "0px"
-
         # register the required zoom value
         self.zoomed = fullscreen
+        self.m = m
 
         # create a btn
         self.w_btn = MapBtn(self.ICONS[self.zoomed])
@@ -63,27 +60,10 @@ def __init__(
         # add javascrip behaviour
         self.w_btn.on_event("click", self.toggle_fullscreen)
 
-        # save the 2 fullscrenn js code in a table 0 for embedded and 1 for fullscreen
-        js_dir = Path(__file__).parents[1] / "frontend/js"
-        embed = (js_dir / "jupyter_embed.js").read_text() % m._id
-        full = (js_dir / "jupyter_fullscreen.js").read_text() % (m._id, offset)
-
-        # template with js behaviour
-        # "jupyter_fullscreen" place the "leaflet-container element on the front screen
-        # and expand it's display to the full screen
-        # "jupyter_embed" reset all the changed parameter
-        # both trigger the resize event to force the reload of the Tilelayers
-        self.template = v.VuetifyTemplate(
-            template=(
-                "<script>{methods: {jupyter_embed(){%s}, jupyter_fullscreen(){%s}}}</script>"
-                % (embed, full)
-            )
-        )
-        display(self.template)
-
-        # display the map in the requested default state
-        js = full if self.zoomed else embed
-        display(Javascript(js))
+        if fullapp:
+            self.m.add_class("full-screen-map")
+        else:
+            self.m.remove_class("full-screen-map")
 
     def toggle_fullscreen(self, *args) -> None:
         """Toggle fullscreen state.
@@ -97,7 +77,11 @@ def toggle_fullscreen(self, *args) -> None:
         # change button icon
         self.w_btn.children[0].children = [self.ICONS[self.zoomed]]
 
-        # zoom
-        self.template.send({"method": self.METHODS[self.zoomed], "args": []})
+        if self.zoomed:
+            self.m.add_class("full-screen-map")
+        else:
+            self.m.remove_class("full-screen-map")
+
+        rt.resize()
 
         return

sepal_ui/mapping/sepal_map.py

@@ -3,6 +3,8 @@
 # known bug of rasterio
 import os
 
+from sepal_ui.mapping.fullscreen_control import FullScreenControl
+
 if "GDAL_DATA" in list(os.environ.keys()):
     del os.environ["GDAL_DATA"]
 if "PROJ_LIB" in list(os.environ.keys()):
@@ -130,6 +132,9 @@ def __init__(
         self.add(ipl.AttributionControl(position="bottomleft", prefix="SEPAL"))
         self.add(ipl.ScaleControl(position="bottomleft", imperial=False))
 
+        if kwargs.get("fullscreen_control", False):
+            self.add(FullScreenControl(self))
+
         # specific drawing control
         self.dc = DrawControl(self)
         not dc or self.add(self.dc)

sepal_ui/sepalwidgets/app.py

@@ -626,6 +626,7 @@ def __init__(
         bg = v.Overlay(color=color.bg, opacity=1, style_="transition:unset", z_index=-1)
 
         # set default parameters
+        kwargs.setdefault("_metadata", {"mount_id": "content"})
         kwargs.setdefault("v_model", None)
         kwargs["children"] = [bg, *app_children]