GenieFramework / Stipple.jl

The reactive UI library for interactive data applications with pure Julia.
MIT License
324 stars 27 forks source link

more options for head_content #253

Closed hhaensel closed 10 months ago

hhaensel commented 10 months ago

This PR has two parts:

route("/") do page(@init, ui, head_content = cesium_head) end

or alternatively

@page("/", ui, Stipple.ReactiveTools.DEFAULT_LAYOUT(head_content = cesium_head))


Note: for the latter version to work, you have to delay a potential init script if it refers to DOM elements until they are visible, typically, when the app is ready. `js_initscript` is a wrapper, that executes code after the webtransport is subscribed.
```julia
cesium_module_text = """
    Cesium.Ion.defaultAccessToken = '$cesium_token';
    const viewer = new Cesium.Viewer('cesiumContainer', {
      terrain: Cesium.Terrain.fromWorldTerrain(),
    });    

    // Fly the camera to San Francisco at the given longitude, latitude, and height.
    viewer.camera.flyTo({
      destination: Cesium.Cartesian3.fromDegrees(-122.4175, 37.655, 400),
      orientation: {
        heading: Cesium.Math.toRadians(0.0),
        pitch: Cesium.Math.toRadians(-15.0),
      }
    });

    // Add Cesium OSM Buildings, a global 3D buildings layer.
    const buildingTileset = await Cesium.createOsmBuildingsAsync();
    viewer.scene.primitives.add(buildingTileset);
"""

cesium_module() = [script(Stipple.js_initscript("""
  newscript = document.createElement('script')
  newscript.text = $(json(cesium_module_text))
  newscript.type = 'module'
  document.head.appendChild(newscript)
"""))]

@deps cesium_module