Smarter Regions!

[upsiflu]

Example:

Given my model of

type alias Paragraph =
    { name : String, body : Markdown, shape : Shape }

type Shape
    = OneColumn
    | TwoColumns 

I want to offer editing controls.

• When a paragraph is selected, the user can edit the name, the body markdown and the shape.
• Since we use Markdown and Shape for other items, we want to define the editing controls within the modules Markdown resp. Shape.

module Shape

view : Shape -> Ui
view shape =
  inRegion Control
    (case shape of
       OneColumn -> button [onClick (makeTwoColumns shape)] ["One Column (switch)"]
       TwoColumns -> button [onClick (makeOneColumn shape)] ["Two Columns (switch)"]
    )
    ++ inRegion Scene (css shape)

module Parapgraph

view paragraph =
    Shape.view paragraph.shape
    ++ Ui.node "p" [ id paragraph.name ] [ Markdown.render paragraph.body ]
    ++ Markdown.editor paragraph.body

As of v1.0, toggle indiscriminately toggles its descendants. In an earlier draft, toggle would only affect Control, which makes it more suitable for such nested Uis.