whale9490 / elm-split-pane / SplitPane

This is a split pane view library. Can be used to split views into multiple parts with a splitter between them.

Check out the examples to see how it works.

View

view : ViewConfig msg -> Html msg -> Html msg -> State -> Html msg

Creates a view.

    view : Model -> Html Msg
    view =
        SplitPane.view viewConfig firstView secondView


    viewConfig : ViewConfig Msg
    viewConfig =
        createViewConfig
            { toMsg = PaneMsg
            , customSplitter = Nothing
            }

    firstView : Html a
    firstView =
        img [ src "http://4.bp.blogspot.com/-s3sIvuCfg4o/VP-82RkCOGI/AAAAAAAALSY/509obByLvNw/s1600/baby-cat-wallpaper.jpg" ] []


    secondView : Html a
    secondView =
        img [ src "http://2.bp.blogspot.com/-pATX0YgNSFs/VP-82AQKcuI/AAAAAAAALSU/Vet9e7Qsjjw/s1600/Cat-hd-wallpapers.jpg" ] []

createViewConfig : { toMsg : Msg -> msg, customSplitter : Maybe (CustomSplitter msg) } -> ViewConfig msg

Creates a configuration for the view.

Update

update : Msg -> State -> State

Updates internal model.

subscriptions : State -> Platform.Sub.Sub Msg

Subscribes to relevant events for resizing

State


type State

Tracks state of pane.

init : Orientation -> State

Initialize a new model.

    init Horizontal

configureSplitter : SizeUnit -> State -> State

Change the splitter position and limit

orientation : Orientation -> State -> State

Changes orientation of the pane.

draggable : Basics.Bool -> State -> State

Sets whether the pane is draggable or not

Helpers

percentage : Basics.Float -> Maybe ( Basics.Float, Basics.Float ) -> SizeUnit

Creates a percentage size unit from a float

px : Basics.Int -> Maybe ( Basics.Int, Basics.Int ) -> SizeUnit

Creates a pixel size unit from an int

Definitions


type Msg

Internal messages.


type Orientation
    = Horizontal
    | Vertical

Orientation of pane.


type SizeUnit
    = Percentage (Bounded Basics.Float)
    | Px (Bounded Basics.Int)

Size unit for setting slider - either percentage value between 0.0 and 1.0 or pixel value (> 0)


type ViewConfig msg

Configuration for the view.


type UpdateConfig msg

Configuration for updates.


type CustomSplitter msg

Describes a custom splitter


type alias HtmlDetails msg =
{ attributes : List (Html.Attribute msg)
, children : List (Html msg) 
}

Lets you specify attributes such as style and children for the splitter element

Customization

customUpdate : UpdateConfig msg -> Msg -> State -> ( State, Maybe msg )

Updates internal model using custom configuration.

createUpdateConfig : { onResize : SizeUnit -> Maybe msg, onResizeStarted : Maybe msg, onResizeEnded : Maybe msg } -> UpdateConfig msg

Creates the update configuration. Gives you the option to respond to various things that happen.

For example:
- Draw a different view when the pane is resized:

    updateConfig
        { onResize (\p -> Just (SwitchViews p))
        , onResizeStarted Nothing
        , onResizeEnded Nothing
        }

createCustomSplitter : (Msg -> msg) -> HtmlDetails msg -> CustomSplitter msg

Creates a custom splitter.

    myCustomSplitter : CustomSplitter Msg
    myCustomSplitter =
        createCustomSplitter PaneMsg
            { attributes =
                [ style
                    [ ( "width", "20px" )
                    , ( "height", "20px" )
                    ]
                ]
            , children =
                []
            }