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

openforis · Mar 29, 2024 · 68bfd2b · 68bfd2b
1 parent aabc6bf
commit 68bfd2b
Show file tree

Hide file tree

Showing 3 changed files with 27 additions and 11 deletions.
diff --git a/sepal_ui/frontend/resize_trigger.py b/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):

diff --git a/sepal_ui/mapping/fullscreen_control.py b/sepal_ui/mapping/fullscreen_control.py
@@ -73,18 +73,32 @@ def __init__(
         # 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
+
+        default = "fullscreen" if self.zoomed else "embed"
+
         self.template = v.VuetifyTemplate(
-            template=(
-                "<script>{methods: {jupyter_embed(){%s}, jupyter_fullscreen(){%s}}}</script>"
-                % (embed, full)
-            )
+            template=f"""
+                <script class='sepal-ui-script'>
+                    // register methods on the window object
+                    window.methods = {{
+                        embed : function embed(){{{embed}}}, 
+                        fullscreen: function fullscreen(){{{full}}}
+                    }}
+                    // Execute the requested method
+                    window.methods['{default}']();
+                </script>
+                <script class='sepal-ui-script'>
+                    {{
+                        methods: {{
+                            jupyter_embed(){{window.methods['embed']()}},
+                            jupyter_fullscreen(){{window.methods['fullscreen']()}}
+                        }}
+                    }}
+                </script>
+            """
         )
         display(self.template)
 
-        # display the map in the requested default state
-        js = full if self.zoomed else embed
-        display(Javascript(js))
-
     def toggle_fullscreen(self, *args) -> None:
         """Toggle fullscreen state.
 

diff --git a/sepal_ui/sepalwidgets/app.py b/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]