Skip to content

Instantly share code, notes, and snippets.

@lenards
Created May 14, 2019 20:28
Show Gist options
  • Save lenards/e0f70960ecdd4bc52bb505767a26fd61 to your computer and use it in GitHub Desktop.
Save lenards/e0f70960ecdd4bc52bb505767a26fd61 to your computer and use it in GitHub Desktop.
module Main exposing (main)
import Browser
import Html exposing (Html, button, div, option, select, text)
import Html.Attributes exposing (selected, value)
import Html.Events exposing (onClick, onInput)
type alias Model =
{ selected : Maybe OptionX }
initialModel : Model
initialModel =
{ selected = Nothing }
type OptionX
= A
| B
| C
fromOptionX : OptionX -> String
fromOptionX op =
case op of
A ->
"Option A"
B ->
"Option B"
C ->
"Option C"
fromString : String -> Maybe OptionX
fromString label =
case label of
"Option A" ->
Just A
"Option B" ->
Just B
"Option C" ->
Just C
_ ->
Nothing
toMsg : String -> Msg
toMsg label =
case label of
"Option A" ->
ShowOptionA
"Option B" ->
ShowOptionB
"Option C" ->
ShowOptionC
_ ->
NoOption
type alias DropDown a =
{ getId : a -> String
, getDisplayText : a -> String
, items : List a
, selectedItemId : String
, onSelectionChanged : String -> Msg
}
type Msg
= NoOption
| ShowOptionA
| ShowOptionB
| ShowOptionC
dropDown : String -> List (Html Msg) -> (String -> Msg) -> Html Msg
dropDown label options onInputMsg =
div []
[ div []
[ text label ]
, div []
[ select
[ onInput onInputMsg ]
options
]
]
option_ : DropDown a -> a -> Html Msg
option_ dropdown_ item =
let
id =
dropdown_.getId item
in
option
[ value id
, selected (id == dropdown_.selectedItemId)
]
[ text (dropdown_.getDisplayText item) ]
emptyOption : String -> Html Msg
emptyOption selectedItemId =
option [ value "", selected ("" == selectedItemId) ] [ text "" ]
renderSelectedOptionX : Maybe OptionX -> Html Msg
renderSelectedOptionX selectedOp =
case selectedOp of
Just A ->
div []
[ text "A (named /ˈeɪ/, plural As, A's, as, a's or aes[nb 1]) is the first letter and the first vowel of the modern English alphabet and the ISO basic Latin alphabet.[1] It is similar to the Ancient Greek letter alpha, from which it derives.[2] The uppercase version consists of the two slanting sides of a triangle, crossed in the middle by a horizontal bar. The lowercase version can be written in two forms: the double-storey a and single-storey ɑ. The latter is commonly used in handwriting and fonts based on it, especially fonts intended to be read by children, and is also found in italic type. In English grammar, 'a', and its variant 'an', is an indefinite article."
]
Just B ->
div []
[ text "B or b (pronounced /biː/ BEE)[1][2] is the second letter of the Latin-script alphabet. It represents the voiced bilabial stop in many languages, including English. In some other languages, it is used to represent other bilabial consonants."
]
Just C ->
div []
[ text "C is the third letter in the English alphabet and a letter of the alphabets of many other writing systems which inherited it from the Latin alphabet. It is also the third letter of the ISO basic Latin alphabet. It is named cee (pronounced /siː/) in English.[1]"
]
Nothing ->
div [] [ text "Nope" ]
update : Msg -> Model -> Model
update msg model =
case msg of
NoOption ->
model
ShowOptionA ->
{ model | selected = Just A }
ShowOptionB ->
{ model | selected = Just B }
ShowOptionC ->
{ model | selected = Just C }
exampleDropDown : DropDown OptionX
exampleDropDown =
{ getId = fromOptionX
, getDisplayText = fromOptionX
, items = [ A, B, C ]
, selectedItemId = ""
, onSelectionChanged = toMsg
}
view : Model -> Html Msg
view model =
div []
[ dropDown
"Select an option:"
(emptyOption exampleDropDown.selectedItemId :: (exampleDropDown.items |> List.map (option_ exampleDropDown)))
exampleDropDown.onSelectionChanged
, div []
[ renderSelectedOptionX model.selected ]
]
main : Program () Model Msg
main =
Browser.sandbox
{ init = initialModel
, view = view
, update = update
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment