ELM Perimeter

Creates an invisible perimeter around a target element and monitors mouse breaches.

Demo can be found here.

Code sample:

module Main exposing (view, update, subscriptions)

import Html exposing (..)
import Perimeter exposing (Perimeter)


type alias Model =
    { perimeter : Perimeter }


init : ( Model, Cmd Msg )
init =
    ( initialModel, Cmd.none )


initialModel : Model
initialModel =
    { perimeter = Perimeter.init }


perimeterConfig =
    { padding = 12
    , onBreach = Breached
    , onLeave = Left
    , debug = True
    }


type Msg
    = Breached
    | Left
    | PerimeterMsg Perimeter.Msg


update : Msg -> Model -> ( Model, Cmd Msg )
update msg model =
    case msg of
        Breached ->
            model ! []

        Left ->
            model  ! []

        PerimeterMsg subMsg ->
            let
                ( newPerimeterModel, maybeMsg ) =
                    Perimeter.update subMsg model.perimeter perimeterConfig
            in
                case maybeMsg of
                    Nothing ->
                        ( { model | perimeter = newPerimeterModel }, Cmd.none )

                    Just msg ->
                        update msg { model | perimeter = newPerimeterModel }


view : Model -> Html Msg
view model =
    Html.map PerimeterMsg (Perimeter.view perimeterConfig model.perimeter [ button [] [ text model.buttonText ] ])


subscriptions : Model -> Sub Msg
subscriptions model =
    Sub.map PerimeterMsg (Perimeter.subscriptions model.perimeter)


main =
    program
        { init = init
        , update = update
        , subscriptions = subscriptions
        , view = view
        }