Create Portals using secure, sandboxed iFrames. Similar to how Disney used a Multiplane camera for Snow White, multiplane portals use stacked iFrames.
Sketch of a computer-controlled, 4-plane Multiplane camera sparetimelabs 
> The most famous multiplane camera was developed by William Garity for the Walt Disney Studios to be used in the production of Snow White and the Seven Dwarfs. The camera was completed in early 1937 and tested in a Silly Symphony called The Old Mill, which won the 1937 Academy Award for Animated Short Film. wikipedia
Portals are transparent “holes” in the top iFrames. The viewer can see through to the iFrames beneath. medium
~
iframe preventing z-index from working? stackoverflow
Implementing stacked iFrames in an Elm application would involve creating multiple iFrame elements and stacking them on top of each other to simulate a multiplane effect. Here's an example of how you could achieve this in Elm:
1. Define a custom type to represent the stacked iFrames:
type alias StackedIframes = { iframes : List String , zIndexes : List Int }
The iframes field represents the list of URLs or sources for each iFrame, and the zIndexes field represents the corresponding z-index values for each iFrame.
2. Create a view function to render the stacked iFrames:
view : StackedIframes -> Html msg view stackedIframes = div [] (List.indexedMap (createIframe stackedIframes) stackedIframes.iframes)
The List.indexedMap function is used to associate each iFrame URL with its corresponding z-index value.
3. Define a helper function to create individual iFrames:
createIframe : StackedIframes -> Int -> String -> Html msg createIframe stackedIframes index src = let zIndex = List.getAt index stackedIframes.zIndexes |> Maybe.withDefault 0 in iframe [ style [ ( "position", "absolute" ) , ( "z-index", toString zIndex ) ] , src src ] []
This function creates each iFrame element with its specified URL and applies the corresponding z-index value and absolute positioning to achieve the stacking effect.
4. Update your model to include the StackedIframes type:
type alias Model = { stackedIframes : StackedIframes -- Other model fields }
5. Finally, update your view function to include the stacked iFrames:
view : Model -> Html msg view model = div [] [ -- Other elements in your view view model.stackedIframes ]
With these changes, you can now use the Model type and the view function to create and display the stacked iFrames in your Elm application. You would need to populate the StackedIframes record with the appropriate iFrame URLs and z-index values based on your requirements.
Note: This example assumes you have a basic understanding of Elm and have set up an Elm application with an appropriate architecture. You may need to adapt this example to fit your specific Elm project structure.
Portals
To implement transparent portals in Elm, you can leverage the concept of overlaying elements on top of each other. Here's an example of how you can create transparent portals in an Elm application:
1. Define a custom type to represent the portals:
type alias Portal = { url : String , width : Int , height : Int , top : Int , left : Int }
The Portal type represents an individual portal and contains fields such as the URL, dimensions (width and height), and position (top and left) of the portal.
2. Create a view function to render the portals:
viewPortals : List Portal -> Html msg viewPortals portals = div [] (List.map createPortal portals)
The viewPortals function takes a list of portals and maps over them to create individual portal elements using the createPortal function.
3. Define a helper function to create individual portal elements:
createPortal : Portal -> Html msg createPortal portal = let portalStyle = [ ( "position", "absolute" ) , ( "top", toString portal.top ++ "px" ) , ( "left", toString portal.left ++ "px" ) , ( "width", toString portal.width ++ "px" ) , ( "height", toString portal.height ++ "px" ) , ( "background-color", "transparent" ) , ( "pointer-events", "none" ) , ( "border", "1px dashed #ccc" ) -- Optional: Add a dashed border for visualization ] in iframe [ src portal.url , style portalStyle ] []
The createPortal function takes a portal and creates an iframe element with the specified URL and applies the required styling to achieve the transparent portal effect. The background-color is set to "transparent," and the pointer-events property is set to "none" to allow the viewer to interact with the iFrames beneath the portals. Optionally, you can add a dashed border to the portal for visualization purposes.
4. Update your model to include the list of portals:
type alias Model = { portals : List Portal -- Other model fields }
5. Finally, update your view function to include the portals:
view : Model -> Html msg view model = div [] [ -- Other elements in your view viewPortals model.portals ]
With these changes, you can now use the Model type and the view function to create and display the transparent portals in your Elm application. You would need to populate the portals list with the appropriate portal configurations based on your requirements.