Curtissimo.SplitPane

Curtissimo.SplitPane provides a nestable split pane for Elm.

import Curtissimo.SplitPane as SplitPane exposing (SplitPane)
import Html exposing (Html, text)


type alias Model =
    { splitPane : SplitPane Msg }


type Msg
    = SplitPaneMsg SplitPane.Msg
    | SplitPaneReady


init : () -> ( Model, Cmd Msg )
init _ =
    let
        ( splitPane, splitPaneCmd ) =
            SplitPane.init
                SplitPane.VerticalOrientation
                (SplitPane.Px 200)
                SplitPane.After
                "split-pane"
                SplitPaneMsg
                SplitPaneReady
    in
    ( { splitPane = splitPane }
    , splitPaneCmd
    )


subscriptions : Model -> Sub Msg
subscriptions model =
    SplitPane.subscriptions model.splitPane


update : Msg -> Model -> ( Model, Cmd Msg )
update msg model =
    case msg of
        SplitPaneMsg splitPaneMsg ->
            let
                ( updated, updatedMsg ) =
                    model.splitPane
                        |> SplitPane.update splitPaneMsg
            in
            ( { splitPane = updated }
            , updatedMsg
            )


        SplitPaneReady ->
            ( model, Cmd.none )


view : Model -> Browser.Document Msg
view model =
    { title = "My Split Pane Page"
    , body =
        model.splitPane
            |> SplitPane.assignPanes
            |> SplitPane.setPrimaryPane
                (text "Primary pane")
            |> SplitPane.setSecondaryPane
                (text "Secondary pane")
            |> SplitPane.view
    }

NOTE: Don't forget to include the subscriptions!

Inititalization

init :

Orientation

-> Unit

-> Position

-> String

-> (Msg -> msg)

-> msg

-> ( SplitPane msg, Cmd msg )

Initialize a new split pane.

type Orientation

= Horizontal

| Vertical

Orientations the split pane can have.

type Position

= Before

| After

Indicator if the secondary pane is before or after the primary pane.

type Unit

= Pct Float

| Px Int

The way to specify the measure of the secondary pane.

Rendering

assignPanes : SplitPane msg -> SplitPaneRenderable msg

Change SplitPane into SplitPaneRenderable to prepare it to render.

setPrimaryPane : Html msg -> SplitPaneRenderable msg -> SplitPaneRenderable msg

Set the content of the primary pane of the split pane.

setSecondaryPane : Html msg -> SplitPaneRenderable msg -> SplitPaneRenderable msg

Set the content of the secondary pane of the split pane.

view : SplitPaneRenderable msg -> Html msg

Render the split pane.

Updates

subscriptions : SplitPane msg -> Sub msg

The subscriptions used to monitor mouse movements when a split pane resize is active, as well as window resizing.

update : Msg -> SplitPane msg -> ( SplitPane msg, Cmd msg )

Update the state of the split pane.

Modifications

setSecondaryPaneMeasure : Int -> SplitPane msg -> SplitPane msg

Set the secondary pane to a specific measure based on how the split pane was initialized. If the split pane was initialized as a percentage, then the integer value is clamped to 0 and 100 inclusive.

setSecondaryPaneVisible : Bool -> SplitPane msg -> SplitPane msg

Set the visibility of the secondary pane.

When set to False, the secondary pane and the resize gutter are not visible.

useThickGutters : Bool -> SplitPane msg -> SplitPane msg

Changes the layout of the resize gutter to be thin or thick based on the flag provided.