PopupPicker

A popup <div> to pick from a list of choices.

See https://developer.mozilla.org/en-US/docs/Web/CSS/position for a description of the relevant CSS.

Class

type alias PopupPicker choice msg =

{ divAttributes : List (Attribute msg)

, positionAttributes : List (Attribute msg)

, choiceAttributes : List (Attribute msg)

, header : Maybe (Html msg)

, renderInputDiv : Maybe (String -> Html msg)

, renderChoice : choice -> Html msg

, footer : Maybe (Html msg)

, wrapper : choice -> msg

}

State passed to view.

divAttributes are added to the popup attributes for the whole div.

positionAttributes are additional attributes for the whole div, usually generated by position, top, left, bottom, orright.

choiceAttributes are applied to the div holding each choice.

header is put before the input div and the choice divs.

renderInputDiv renders your input, if you pass one to view.

renderChoice renders each choice inside its div.

footer is put after the choice divs.

wrapper maps a selected choice to a msg for your update function.

Initialization

makePopupPicker : (choice -> Html msg) -> (choice -> msg) -> PopupPicker choice msg

Make a bare-bones PopupPicker.

Args are renderChoice and wrapper properties.

Rendering

view : Maybe String -> List choice -> PopupPicker choice msg -> Html msg

Render the popup.

If the first arg is not Nothing, will call renderInputDiv to display it. Sometimes you want to do this on mobile, when the type-in area may be covered by the picker.

The generated Html is of the form:

div [ style "position" "absolute"
    , divAttributes
    , positionAttributes
    ]
  [ header
  , renderInputDiv input
  , div [ onClick <| wrapper choice)>
        , choiceAttributes
        ]
      [ renderChoice choice ]
  , ...
  , footer
  ]

Generating `positionAttributes`

position : ( String, String ) -> List (Attribute msg)

position (x, y) is the same as [ left x, top y ].

top : String -> Attribute msg

top x -> style "top" x

left : String -> Attribute msg

left x -> style "left" x

bottom : String -> Attribute msg

bottom x -> style "bottom x

right : String -> Attribute msg

right x -> style "right" x

zIndex : Int -> Attribute msg

Pass a larger integer than any other z-index to make the popup go on top.

This usually goes in the divAttributes property of your PopupPicker.

zIndex index -> style "z-index" <| String.fromInt index.

Modules

PopupPicker

billstclair/elm-popup-picker/1.1.0