├── .gitignore
├── .gitattributes
├── examples
    ├── elm-package.json
    ├── Slider.elm
    ├── ComboBox.elm
    ├── Embedding.elm
    ├── RadioButton.elm
    ├── README.md
    ├── ReadmeExample.elm
    ├── Validation.elm
    ├── Custom.elm
    └── Recursive.elm
├── elm-package.json
├── README.md
└── src
    └── Kintail
        └── InputWidget.elm


/.gitignore:
--------------------------------------------------------------------------------
1 | elm-stuff
2 | docs.json
3 | 


--------------------------------------------------------------------------------
/.gitattributes:
--------------------------------------------------------------------------------
1 | # Auto detect text files and perform LF normalization
2 | * text=auto
3 | 


--------------------------------------------------------------------------------
/examples/elm-package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |     "version": "1.0.0",
 3 |     "summary": "Examples",
 4 |     "repository": "https://github.com/kintail/ui.git",
 5 |     "license": "MPL-2.0",
 6 |     "source-directories": [
 7 |         ".",
 8 |         "../src"
 9 |     ],
10 |     "exposed-modules": [],
11 |     "dependencies": {
12 |         "elm-lang/core": "5.0.0 <= v < 6.0.0",
13 |         "elm-lang/html": "2.0.0 <= v < 3.0.0"
14 |     },
15 |     "elm-version": "0.18.0 <= v < 0.19.0"
16 | }
17 | 


--------------------------------------------------------------------------------
/examples/Slider.elm:
--------------------------------------------------------------------------------
 1 | module Slider exposing (..)
 2 | 
 3 | import Kintail.InputWidget as InputWidget
 4 | import Html exposing (Html)
 5 | 
 6 | 
 7 | view : Float -> Html Float
 8 | view value =
 9 |     Html.div []
10 |         [ InputWidget.slider [] { min = 0, max = 5, step = 0.1 } value
11 |         , Html.text (toString value)
12 |         ]
13 | 
14 | 
15 | main : Program Never Float Float
16 | main =
17 |     Html.beginnerProgram
18 |         { model = 1.5
19 |         , update = always
20 |         , view = view
21 |         }
22 | 


--------------------------------------------------------------------------------
/elm-package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |     "version": "1.0.6",
 3 |     "summary": "Unified shorthand for <input>, <select> and <range> elements",
 4 |     "repository": "https://github.com/kintail/input-widget.git",
 5 |     "license": "MPL-2.0",
 6 |     "source-directories": [
 7 |         "src"
 8 |     ],
 9 |     "exposed-modules": [
10 |         "Kintail.InputWidget"
11 |     ],
12 |     "dependencies": {
13 |         "elm-lang/core": "5.0.0 <= v < 6.0.0",
14 |         "elm-lang/html": "2.0.0 <= v < 3.0.0"
15 |     },
16 |     "elm-version": "0.18.0 <= v < 0.19.0"
17 | }
18 | 


--------------------------------------------------------------------------------
/examples/ComboBox.elm:
--------------------------------------------------------------------------------
 1 | module ComboBox exposing (..)
 2 | 
 3 | import Kintail.InputWidget as InputWidget
 4 | import Html exposing (Html)
 5 | 
 6 | 
 7 | type Color
 8 |     = Red
 9 |     | Green
10 |     | Blue
11 | 
12 | 
13 | view : Color -> Html Color
14 | view currentColor =
15 |     let
16 |         comboBox =
17 |             InputWidget.comboBox [] toString [ Red, Green, Blue ] currentColor
18 |     in
19 |         Html.div [] [ comboBox, Html.text (toString currentColor) ]
20 | 
21 | 
22 | main : Program Never Color Color
23 | main =
24 |     Html.beginnerProgram
25 |         { model = Green
26 |         , update = always
27 |         , view = view
28 |         }
29 | 


--------------------------------------------------------------------------------
/examples/Embedding.elm:
--------------------------------------------------------------------------------
 1 | module Embedding exposing (..)
 2 | 
 3 | import Html exposing (Html)
 4 | import Kintail.InputWidget as InputWidget
 5 | 
 6 | 
 7 | type Msg
 8 |     = NewValue Bool
 9 | 
10 | 
11 | type alias Model =
12 |     { value : Bool
13 |     , timesChanged : Int
14 |     }
15 | 
16 | 
17 | update : Msg -> Model -> Model
18 | update (NewValue newValue) currentModel =
19 |     { value = newValue
20 |     , timesChanged = currentModel.timesChanged + 1
21 |     }
22 | 
23 | 
24 | view : Model -> Html Msg
25 | view model =
26 |     let
27 |         checkbox =
28 |             InputWidget.checkbox [] model.value |> Html.map NewValue
29 | 
30 |         label =
31 |             Html.text
32 |                 (toString model.value
33 |                     ++ ", changed "
34 |                     ++ toString model.timesChanged
35 |                     ++ " times"
36 |                 )
37 |     in
38 |         Html.div [] [ checkbox, label ]
39 | 
40 | 
41 | main : Program Never Model Msg
42 | main =
43 |     Html.beginnerProgram
44 |         { model = { value = False, timesChanged = 0 }
45 |         , update = update
46 |         , view = view
47 |         }
48 | 


--------------------------------------------------------------------------------
/examples/RadioButton.elm:
--------------------------------------------------------------------------------
 1 | module RadioButton exposing (..)
 2 | 
 3 | import Html exposing (Html)
 4 | import Html.Attributes as Attributes
 5 | import Kintail.InputWidget as InputWidget
 6 | 
 7 | 
 8 | type Size
 9 |     = Small
10 |     | Medium
11 |     | Large
12 | 
13 | 
14 | {-| Convert a `Size` value to a string that can be used as the CSS `font-size`.
15 | -}
16 | fontSize : Size -> String
17 | fontSize size =
18 |     case size of
19 |         Small ->
20 |             "1em"
21 | 
22 |         Medium ->
23 |             "2em"
24 | 
25 |         Large ->
26 |             "3em"
27 | 
28 | 
29 | {-| Helper function to construct a radio button with its associated label.
30 | -}
31 | radioButton : Size -> Size -> Html Size
32 | radioButton size currentSize =
33 |     Html.div []
34 |         [ InputWidget.radioButton [] size currentSize
35 |         , Html.text (toString size)
36 |         ]
37 | 
38 | 
39 | view : Size -> Html Size
40 | view currentSize =
41 |     Html.div []
42 |         [ radioButton Small currentSize
43 |         , radioButton Medium currentSize
44 |         , radioButton Large currentSize
45 |         , Html.div [ Attributes.style [ ( "font-size", fontSize currentSize ) ] ]
46 |             [ Html.text "The quick brown fox..." ]
47 |         ]
48 | 
49 | 
50 | main : Program Never Size Size
51 | main =
52 |     Html.beginnerProgram
53 |         { model = Small
54 |         , view = view
55 |         , update = always
56 |         }
57 | 


--------------------------------------------------------------------------------
/examples/README.md:
--------------------------------------------------------------------------------
 1 | These examples demonstrate the use of the various input widgets. Many examples
 2 | are based on a simple version of the Elm Architecture where the model is simply
 3 | the current value displayed by an input widget, the message type is the same as
 4 | the value type (the only possible message is 'new value'), and the `update`
 5 | function is the built-in `always` function (which can be interpreted as
 6 | literally 'always update the model to be the new value'!). The code therefore
 7 | looks something like
 8 | 
 9 | ```elm
10 | 
11 | view : Value -> Html Value
12 | view currentValue =
13 |     Html.div ...
14 | 
15 | main =
16 |     Html.App.beginnerProgram
17 |         { model = initialValue
18 |         , view = view
19 |         , update = always
20 |         }
21 | ```
22 | 
23 | The `ComboBox`, `RadioButton` and `Slider` examples show relatively simple
24 | examples of using those input widgets using the format above.
25 | 
26 | The `Embedding` example shows how to use input widgets within a more standard
27 | Elm app that has a more complex model, a tagged union message type, and an
28 | explicit `update` function.
29 | 
30 | The `Custom` example shows how to define your own input widgets by using a
31 | restricted form of the Elm Architecture and the `InputWidget.custom` function.
32 | The `Validation` example shows an alternate way of creating functions of type
33 | `a -> Html a` by making clever use of `Html.map`.
34 | 
35 | Finally, the `Recursive` example shows how you might build input widgets for
36 | recursive data types (in this case, arbitrarily-nested boolean expressions).
37 | This is by far the most complex example but uses the same `Html.map` technique
38 | as the `Validation` example.
39 | 


--------------------------------------------------------------------------------
/examples/ReadmeExample.elm:
--------------------------------------------------------------------------------
 1 | module Readme exposing (..)
 2 | 
 3 | import Html exposing (Html)
 4 | import Kintail.InputWidget as InputWidget
 5 | 
 6 | 
 7 | type Title
 8 |     = Dr
 9 |     | Mrs
10 |     | Ms
11 |     | Mr
12 | 
13 | 
14 | type alias Model =
15 |     { title : Title
16 |     , firstName : String
17 |     , lastName : String
18 |     }
19 | 
20 | 
21 | type Msg
22 |     = NewTitle Title
23 |     | NewFirstName String
24 |     | NewLastName String
25 | 
26 | 
27 | update : Msg -> Model -> Model
28 | update message model =
29 |     case message of
30 |         NewTitle newTitle ->
31 |             { model | title = newTitle }
32 | 
33 |         NewFirstName newFirstName ->
34 |             { model | firstName = newFirstName }
35 | 
36 |         NewLastName newLastName ->
37 |             { model | lastName = newLastName }
38 | 
39 | 
40 | view : Model -> Html Msg
41 | view model =
42 |     Html.div []
43 |         [ InputWidget.comboBox [] toString [ Dr, Mrs, Ms, Mr ] model.title
44 |             |> Html.map NewTitle
45 |         , InputWidget.lineEdit [] model.firstName
46 |             |> Html.map NewFirstName
47 |         , InputWidget.lineEdit [] model.lastName
48 |             |> Html.map NewLastName
49 |         , Html.br [] []
50 |         , Html.text
51 |             ("Hello "
52 |                 ++ toString model.title
53 |                 ++ ". "
54 |                 ++ model.firstName
55 |                 ++ " "
56 |                 ++ model.lastName
57 |                 ++ "!"
58 |             )
59 |         ]
60 | 
61 | 
62 | main : Program Never Model Msg
63 | main =
64 |     Html.beginnerProgram
65 |         { model = Model Dr "Albert" "Einstein"
66 |         , update = update
67 |         , view = view
68 |         }
69 | 


--------------------------------------------------------------------------------
/examples/Validation.elm:
--------------------------------------------------------------------------------
 1 | module Validation exposing (..)
 2 | 
 3 | import Html exposing (Html)
 4 | import Html.Attributes as Attributes
 5 | import Kintail.InputWidget as InputWidget
 6 | 
 7 | 
 8 | type alias Person =
 9 |     { firstName : String
10 |     , lastName : String
11 |     }
12 | 
13 | 
14 | {-| Generate a simple validation message for given first and last names.
15 | -}
16 | message : Person -> String
17 | message { firstName, lastName } =
18 |     case ( firstName, lastName ) of
19 |         ( "", "" ) ->
20 |             "First and last names are empty"
21 | 
22 |         ( "", _ ) ->
23 |             "First name is empty"
24 | 
25 |         ( _, "" ) ->
26 |             "Last name is empty"
27 | 
28 |         _ ->
29 |             "Hello " ++ firstName ++ " " ++ lastName ++ "!"
30 | 
31 | 
32 | {-| Create a high-level input widget that displays values of type `Person` and
33 | produces messages with updated (edited) `Person` values.
34 | -}
35 | widget : Person -> Html Person
36 | widget person =
37 |     let
38 |         { firstName, lastName } =
39 |             person
40 | 
41 |         -- Note how `Html.map` is used: when a new first name is entered, it is
42 |         -- combined with the existing last name to form a new `Person` value
43 |         -- that can then be produced as a message (and vice versa in
44 |         -- `lastNameWidget` below)
45 |         firstNameWidget =
46 |             InputWidget.lineEdit [ Attributes.placeholder "First name" ]
47 |                 firstName
48 |                 |> Html.map (\newFirstName -> Person newFirstName lastName)
49 | 
50 |         lastNameWidget =
51 |             InputWidget.lineEdit [ Attributes.placeholder "Last name" ]
52 |                 lastName
53 |                 |> Html.map (\newLastName -> Person firstName newLastName)
54 |     in
55 |         Html.div []
56 |             [ Html.div [] [ firstNameWidget ]
57 |             , Html.div [] [ lastNameWidget ]
58 |             , Html.text (message person)
59 |             ]
60 | 
61 | 
62 | main : Program Never Person Person
63 | main =
64 |     Html.beginnerProgram
65 |         { model = Person "" ""
66 |         , view = widget
67 |         , update = always
68 |         }
69 | 


--------------------------------------------------------------------------------
/examples/Custom.elm:
--------------------------------------------------------------------------------
 1 | module Custom exposing (..)
 2 | 
 3 | import Html exposing (Html)
 4 | import Html.Events as Events
 5 | import Kintail.InputWidget as InputWidget
 6 | 
 7 | 
 8 | -- Counter widget
 9 | 
10 | 
11 | type CounterMsg
12 |     = Increment
13 |     | Decrement
14 | 
15 | 
16 | {-| Create a custom counter widget that displays a count along with buttons to
17 | increment or decrement it. Note that although `Increment` and `Decrement`
18 | messages are used internally by `update` and `view`, from the outside the only
19 | message produced by the widget is simply 'new value' of type `Int`.
20 | -}
21 | counter : Int -> Html Int
22 | counter =
23 |     let
24 |         -- Standard Elm Architecture view function
25 |         view : Int -> Html CounterMsg
26 |         view count =
27 |             Html.span []
28 |                 [ Html.button [ Events.onClick Decrement ] [ Html.text "-" ]
29 |                 , Html.text (toString count)
30 |                 , Html.button [ Events.onClick Increment ] [ Html.text "+" ]
31 |                 ]
32 | 
33 |         -- Standard Elm Architecture update function
34 |         update : CounterMsg -> Int -> Int
35 |         update msg count =
36 |             case msg of
37 |                 Decrement ->
38 |                     count - 1
39 | 
40 |                 Increment ->
41 |                     count + 1
42 |     in
43 |         InputWidget.custom { view = view, update = update }
44 | 
45 | 
46 | 
47 | -- Sample application: two independent counters
48 | 
49 | 
50 | type alias Model =
51 |     { firstValue : Int
52 |     , secondValue : Int
53 |     }
54 | 
55 | 
56 | type Msg
57 |     = NewFirstValue Int
58 |     | NewSecondValue Int
59 | 
60 | 
61 | {-| Render the two counters, tagging the updated values produced by each one
62 | with a different message type, and display the sum of the two values
63 | -}
64 | view : Model -> Html Msg
65 | view { firstValue, secondValue } =
66 |     Html.div []
67 |         [ Html.div [] [ counter firstValue |> Html.map NewFirstValue ]
68 |         , Html.div [] [ counter secondValue |> Html.map NewSecondValue ]
69 |         , Html.text (toString (firstValue + secondValue))
70 |         ]
71 | 
72 | 
73 | {-| Respond to new values produced by each counter by storing them in the model
74 | -}
75 | update : Msg -> Model -> Model
76 | update msg model =
77 |     case msg of
78 |         NewFirstValue value ->
79 |             { model | firstValue = value }
80 | 
81 |         NewSecondValue value ->
82 |             { model | secondValue = value }
83 | 
84 | 
85 | main : Program Never Model Msg
86 | main =
87 |     Html.beginnerProgram
88 |         { model = { firstValue = 10, secondValue = 0 }
89 |         , view = view
90 |         , update = update
91 |         }
92 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
  1 | # What is it?
  2 | 
  3 | This package is primarily two things:
  4 | 
  5 |   - A more convenient way to use `<input>`, `<select>` and `<range>` elements in
  6 |     your `view` functions without having to remember the exact combinations of
  7 |     attributes and event handlers to use. I personally often forget whether it's
  8 |     `value` or `checked` I should set on a checkbox, or whether it's the
  9 |     `onInput` or `onCheck` event I should be handling. For more complex elements
 10 |     like `<select>`, custom event handlers are required. This package handles
 11 |     those annoying details for you.
 12 |   - An experiment in developing a common pattern for working with input widgets.
 13 |     All functions in this library follow the general pattern `a -> Html a`; for
 14 |     example, the `checkbox` function has the signature
 15 |     `List (Html.Attribute Bool) -> Bool -> Html Bool`, meaning that in addition
 16 |     to a list of extra HTML attributes to apply to the resulting element, it
 17 |     accepts the current `Bool` value to display (`True` for checked, `False` for
 18 |     unchecked) and produces a message with the new `Bool` value whenever the
 19 |     checkbox is clicked. Similarly, a `lineEdit` takes a `String` to display and
 20 |     produces a new `String` as a message whenever that text is edited. This
 21 |     generally enforces good practice (since you always have to explicitly
 22 |     supply the current value to display in an input widget, it's much harder to
 23 |     get a mismatch between your model and your view) but it turns out that
 24 |     following this pattern also makes it easy to create cool things like
 25 |     [input widgets for recursive data types](https://github.com/kintail/input-widget/blob/1.0.6/examples/Recursive.elm).
 26 | 
 27 | # How do I use it?
 28 | 
 29 | To install, run
 30 | 
 31 | ```
 32 | elm package install kintail/input-widget
 33 | ```
 34 | 
 35 | or add
 36 | 
 37 | ```json
 38 | "kintail/input-widget": "1.0.0 <= v < 2.0.0"
 39 | ```
 40 | 
 41 | to your `elm-package.json`.
 42 | 
 43 | Check out the [module documentation](http://package.elm-lang.org/packages/kintail/input-widget/1.0.6/Kintail-InputWidget)
 44 | for usage details.
 45 | 
 46 | # Examples
 47 | 
 48 | Let's walk through a complete example app to prompt someone for their title,
 49 | first and last names using functions from this package, and then display a
 50 | customized greeting. Start with some module imports:
 51 | 
 52 | ```elm
 53 | module ReadmeExample exposing (..)
 54 | 
 55 | import Html exposing (Html)
 56 | import Html.App as Html
 57 | import Kintail.InputWidget as InputWidget
 58 | ```
 59 | 
 60 | Next, we'll define a simple model to represent a person (with a union type used
 61 | for possible titles), along with some associated messages:
 62 | 
 63 | ```elm
 64 | type Title
 65 |     = Dr
 66 |     | Mrs
 67 |     | Ms
 68 |     | Mr
 69 | 
 70 | 
 71 | type alias Model =
 72 |     { title : Title
 73 |     , firstName : String
 74 |     , lastName : String
 75 |     }
 76 | 
 77 | 
 78 | type Msg
 79 |     = NewTitle Title
 80 |     | NewFirstName String
 81 |     | NewLastName String
 82 | ```
 83 | 
 84 | The `update` function is pretty boring:
 85 | 
 86 | ```elm
 87 | update : Msg -> Model -> Model
 88 | update message model =
 89 |     case message of
 90 |         NewTitle newTitle ->
 91 |             { model | title = newTitle }
 92 | 
 93 |         NewFirstName newFirstName ->
 94 |             { model | firstName = newFirstName }
 95 | 
 96 |         NewLastName newLastName ->
 97 |             { model | lastName = newLastName }
 98 | ```
 99 | 
100 | The interesting code is all in `view`:
101 | 
102 | ```elm
103 | view : Model -> Html Msg
104 | view model =
105 |     Html.div []
106 |         [ InputWidget.comboBox [] toString [ Dr, Mrs, Ms, Mr ] model.title
107 |             |> Html.map NewTitle
108 |         , InputWidget.lineEdit [] model.firstName
109 |             |> Html.map NewFirstName
110 |         , InputWidget.lineEdit [] model.lastName
111 |             |> Html.map NewLastName
112 |         , Html.br [] []
113 |         , Html.text
114 |             ("Hello "
115 |                 ++ toString model.title
116 |                 ++ ". "
117 |                 ++ model.firstName
118 |                 ++ " "
119 |                 ++ model.lastName
120 |                 ++ "!"
121 |             )
122 |         ]
123 | ```
124 | 
125 | As mentioned above, `InputWidget.lineEdit` takes a `String` value to display and
126 | produces a new `String` message whenever the text is edited.
127 | `InputWidget.comboBox` takes a list of values to populate a combo box with, as
128 | well as the value to display as currently selected, and produces a message with
129 | the newly-selected value whenever the selection changes. (You also have to pass
130 | a function to turn those values into strings to display; in many cases, such as
131 | here, you can simply use Elm's built-in `toString` function.) Note how
132 | `Html.map` is used to convert (tag) the 'new value' messages produced by each
133 | widget into proper `Msg` union type values.
134 | 
135 | Finally, wrap everything up with `beginnerProgram`:
136 | 
137 | ```elm
138 | main : Program Never
139 | main =
140 |     Html.beginnerProgram
141 |         { model = Model Dr "Albert" "Einstein"
142 |         , update = update
143 |         , view = view
144 |         }
145 | ```
146 | 
147 | Check out the [examples](https://github.com/kintail/input-widget/tree/1.0.6/examples)
148 | directory to see the above example in full as well as more examples of how to
149 | use each input widget, how to define your own, and how to use them within a
150 | standard Elm app. If you clone this repository, you should be able to run all of
151 | the examples by running [elm-reactor](https://github.com/elm-lang/elm-reactor)
152 | inside the `examples` directory.
153 | 


--------------------------------------------------------------------------------
/examples/Recursive.elm:
--------------------------------------------------------------------------------
  1 | module Recursive exposing (..)
  2 | 
  3 | import String
  4 | import Html exposing (Html)
  5 | import Kintail.InputWidget as InputWidget
  6 | 
  7 | 
  8 | -- Expression type ('business logic', not tied to the UI)
  9 | 
 10 | 
 11 | type Expression
 12 |     = Constant Bool
 13 |     | And Expression Expression
 14 |     | Or Expression Expression
 15 |     | Not Expression
 16 | 
 17 | 
 18 | evaluate : Expression -> Bool
 19 | evaluate expression =
 20 |     case expression of
 21 |         Constant value ->
 22 |             value
 23 | 
 24 |         And firstExpression secondExpression ->
 25 |             evaluate firstExpression && evaluate secondExpression
 26 | 
 27 |         Or firstExpression secondExpression ->
 28 |             evaluate firstExpression || evaluate secondExpression
 29 | 
 30 |         Not subExpression ->
 31 |             not (evaluate subExpression)
 32 | 
 33 | 
 34 | 
 35 | -- Expression widget
 36 | 
 37 | 
 38 | type ExpressionType
 39 |     = TFalse
 40 |     | TTrue
 41 |     | TAnd
 42 |     | TOr
 43 |     | TNot
 44 | 
 45 | 
 46 | {-| Create a 'default'/'dummy' expression of the given type. For example, if
 47 | 'Or' is selected in a combo box, this is used to generate a new dummy expression
 48 | 'False Or False' that can then be edited further.
 49 | -}
 50 | defaultExpressionForType : ExpressionType -> Expression
 51 | defaultExpressionForType expressionType =
 52 |     case expressionType of
 53 |         TFalse ->
 54 |             Constant False
 55 | 
 56 |         TTrue ->
 57 |             Constant True
 58 | 
 59 |         TAnd ->
 60 |             And (Constant False) (Constant False)
 61 | 
 62 |         TOr ->
 63 |             Or (Constant False) (Constant False)
 64 | 
 65 |         TNot ->
 66 |             Not (Constant False)
 67 | 
 68 | 
 69 | {-| Convert an `ExpressionType` to a string by using the default `toString` and
 70 | then dropping the leading 'T'.
 71 | -}
 72 | typeString : ExpressionType -> String
 73 | typeString =
 74 |     toString >> String.dropLeft 1
 75 | 
 76 | 
 77 | {-| Recursively create HTML for editing a given Boolean expression.
 78 | -}
 79 | expressionWidget : Expression -> Html Expression
 80 | expressionWidget expression =
 81 |     let
 82 |         -- List of expression types to display in combo boxes.
 83 |         expressionTypes =
 84 |             [ TFalse, TTrue, TAnd, TOr, TNot ]
 85 | 
 86 |         -- Helper function for creating an expression type combo box: whenever
 87 |         -- a new expression type is selected, a new dummy expression is created
 88 |         -- that can then be further edited.
 89 |         comboBox : ExpressionType -> Html Expression
 90 |         comboBox expressionType =
 91 |             InputWidget.comboBox [] typeString expressionTypes expressionType
 92 |                 |> Html.map defaultExpressionForType
 93 |     in
 94 |         case expression of
 95 |             -- The input widget for the constant false value is simply a combo
 96 |             -- box set to 'False'.
 97 |             Constant False ->
 98 |                 comboBox TFalse
 99 | 
100 |             -- The input widget for the constant true value is simply a combo
101 |             -- box set to 'True'.
102 |             Constant True ->
103 |                 comboBox TTrue
104 | 
105 |             -- For a negated expression, the input widget is a combo box set to
106 |             -- 'Not' and then another expression widget for the negated
107 |             -- subexpression. If the subexpression widget is edited, it will
108 |             -- emit a message with the new subexpression; `Html.map Not` is used
109 |             -- to negate that subexpression to form the updated top-level `Not`
110 |             -- expression. (If the combo box is edited instead, the entire
111 |             -- top-level expression will be wiped out and replaced by a 'dummy'
112 |             -- expression of the newly selected type.)
113 |             Not subExpression ->
114 |                 Html.span []
115 |                     [ Html.text "("
116 |                     , comboBox TNot
117 |                     , expressionWidget subExpression |> Html.map Not
118 |                     , Html.text ")"
119 |                     ]
120 | 
121 |             -- Editing an 'And' expression is similar to 'Not' but a bit more
122 |             -- complex. Note how `Html.map` is used to combine a new value for
123 |             -- one operand with the existing value of the other operand to
124 |             -- create a new top-level `And` expression.
125 |             And firstExpression secondExpression ->
126 |                 Html.span []
127 |                     [ Html.text "("
128 |                     , expressionWidget firstExpression
129 |                         |> Html.map
130 |                             (\newFirstExpression ->
131 |                                 And newFirstExpression secondExpression
132 |                             )
133 |                     , comboBox TAnd
134 |                     , expressionWidget secondExpression
135 |                         |> Html.map
136 |                             (\newSecondExpression ->
137 |                                 And firstExpression newSecondExpression
138 |                             )
139 |                     , Html.text ")"
140 |                     ]
141 | 
142 |             -- 'Or' is pretty much the same as 'And'. Note that since there is
143 |             -- no mapping used on the combo box, editing the expression type
144 |             -- completely blows away the current expression and replaces it with
145 |             -- a new dummy one of the selected type; a more sophisticated
146 |             -- implementation might do something like retain the same left and
147 |             -- right hand operands if an 'Or' is switched to an 'And'.
148 |             Or firstExpression secondExpression ->
149 |                 Html.span []
150 |                     [ Html.text "("
151 |                     , expressionWidget firstExpression
152 |                         |> Html.map
153 |                             (\newFirstExpression ->
154 |                                 Or newFirstExpression secondExpression
155 |                             )
156 |                     , comboBox TOr
157 |                     , expressionWidget secondExpression
158 |                         |> Html.map
159 |                             (\newSecondExpression ->
160 |                                 Or firstExpression newSecondExpression
161 |                             )
162 |                     , Html.text ")"
163 |                     ]
164 | 
165 | 
166 | 
167 | -- Program
168 | 
169 | 
170 | {-| Show the current expression as well as that expression evaluated to a
171 | Boolean value.
172 | -}
173 | view : Expression -> Html Expression
174 | view expression =
175 |     Html.div []
176 |         [ Html.div [] [ expressionWidget expression ]
177 |         , Html.div [] [ Html.text (toString (evaluate expression)) ]
178 |         ]
179 | 
180 | 
181 | main : Program Never Expression Expression
182 | main =
183 |     Html.beginnerProgram
184 |         { model = Or (Constant False) (Constant True)
185 |         , view = view
186 |         , update = always
187 |         }
188 | 


--------------------------------------------------------------------------------
/src/Kintail/InputWidget.elm:
--------------------------------------------------------------------------------
  1 | module Kintail.InputWidget
  2 |     exposing
  3 |         ( checkbox
  4 |         , radioButton
  5 |         , lineEdit
  6 |         , comboBox
  7 |         , slider
  8 |         , custom
  9 |         )
 10 | 
 11 | {-| Functions for creating input widgets of the general form `a -> Html a`. You
 12 | should use `Html.map` to convert the produced messages to the message type used
 13 | by your app, and the new value should generally be stored in your model and fed
 14 | back in to the `view` function. This means that the value emitted from a given
 15 | fragment of HTML will generally become the input value used to create that same
 16 | fragment of HTML the next time your `view` function is called.
 17 | 
 18 | @docs checkbox, radioButton, lineEdit, comboBox, slider
 19 | 
 20 | ## Advanced
 21 | 
 22 | @docs custom
 23 | -}
 24 | 
 25 | import String
 26 | import Array exposing (Array)
 27 | import Json.Encode as Encode exposing (Value)
 28 | import Json.Decode as Decode exposing (Decoder)
 29 | import Html exposing (Html)
 30 | import Html.Attributes as Attributes
 31 | import Html.Events as Events
 32 | 
 33 | 
 34 | {-| Create a `<input type="checkbox">` element with the given attributes and
 35 | current value, and which produces `Bool` messages with the new value whenever
 36 | the checkbox is clicked.
 37 | 
 38 | See the [Embedding.elm](https://github.com/kintail/input-widget/blob/1.0.6/examples/Embedding.elm)
 39 | example for sample usage.
 40 | -}
 41 | checkbox : List (Html.Attribute Bool) -> Bool -> Html Bool
 42 | checkbox attributes value =
 43 |     Html.input
 44 |         (Attributes.type_ "checkbox"
 45 |             :: Attributes.checked value
 46 |             :: Events.onCheck identity
 47 |             :: attributes
 48 |         )
 49 |         []
 50 | 
 51 | 
 52 | {-| Create a `<input type="radio">` element with the given attributes. When the
 53 | radio button is checked, it will send a message equal to the first given value;
 54 | it will be displayed as currently checked if the two given values are equal to
 55 | each other.
 56 | 
 57 | To create a set of mutually-exclusive radio buttons (the usual case), call this
 58 | function multiple times, passing a different first value each time (the value to
 59 | be selected if that radio button is clicked) but the same second value (the
 60 | currently selected value). This way, only the radio button whose value matches
 61 | the currently selected value will be displayed as checked. When any other radio
 62 | button is clicked, it will emit a message equal to its specific value, so that
 63 | you can update the currently selected value to that value.
 64 | 
 65 | See the [RadioButton.elm](https://github.com/kintail/input-widget/blob/1.0.6/examples/RadioButton.elm)
 66 | example for sample usage.
 67 | -}
 68 | radioButton : List (Html.Attribute a) -> a -> a -> Html a
 69 | radioButton attributes value currentValue =
 70 |     Html.input
 71 |         (Attributes.type_ "radio"
 72 |             :: Attributes.checked (value == currentValue)
 73 |             :: Events.onCheck (always value)
 74 |             :: attributes
 75 |         )
 76 |         []
 77 | 
 78 | 
 79 | {-| Create a simple `<input>` element with the given attributes and text to
 80 | display. A message will be sent with the updated text whenever the text is
 81 | edited.
 82 | 
 83 | See the [Validation.elm](https://github.com/kintail/input-widget/blob/1.0.6/examples/Validation.elm)
 84 | example for sample usage.
 85 | -}
 86 | lineEdit : List (Html.Attribute String) -> String -> Html String
 87 | lineEdit attributes value =
 88 |     Html.input
 89 |         (Attributes.value value
 90 |             :: Events.onInput identity
 91 |             :: attributes
 92 |         )
 93 |         []
 94 | 
 95 | 
 96 | {-| Create a `<select>` element with the given attributes. The `<select>`
 97 | element will be populated by `<option>` elements defined by the given list of
 98 | values, converted to text using the given function. The final given value is the
 99 | one that should be displayed as selected. A message will be sent with the newly
100 | selected value whenever the selection is changed, either via keyboard or click.
101 | 
102 | Note that the currently selected value should be one of the values in the list,
103 | and the list should not contain any duplicates. Otherwise it is possible that
104 | either no values or more than one value will be marked as `selected` in the
105 | resulting HTML.
106 | 
107 | See the [ComboBox.elm](https://github.com/kintail/input-widget/blob/1.0.6/examples/ComboBox.elm)
108 | example for sample usage.
109 | -}
110 | comboBox : List (Html.Attribute a) -> (a -> String) -> List a -> a -> Html a
111 | comboBox attributes toStr allItems =
112 |     let
113 |         itemsArray =
114 |             Array.fromList allItems
115 | 
116 |         selectedIndexDecoder =
117 |             Decode.at [ "target", "selectedIndex" ] Decode.int
118 | 
119 |         newSelectionDecoder currentItem =
120 |             selectedIndexDecoder
121 |                 |> Decode.andThen
122 |                     (\selectedIndex ->
123 |                         case Array.get selectedIndex itemsArray of
124 |                             Just newItem ->
125 |                                 if newItem /= currentItem then
126 |                                     Decode.succeed newItem
127 |                                 else
128 |                                     Decode.fail "selected item did not change"
129 | 
130 |                             Nothing ->
131 |                                 Decode.fail "selected index out of range"
132 |                     )
133 |     in
134 |         (\currentItem ->
135 |             let
136 |                 decoder =
137 |                     newSelectionDecoder currentItem
138 | 
139 |                 onChange =
140 |                     Events.on "change" decoder
141 | 
142 |                 onKeyUp =
143 |                     Events.on "keyup" decoder
144 | 
145 |                 toOption item =
146 |                     Html.option [ Attributes.selected (item == currentItem) ]
147 |                         [ Html.text (toStr item) ]
148 |             in
149 |                 Html.select (onChange :: onKeyUp :: attributes)
150 |                     (List.map toOption allItems)
151 |         )
152 | 
153 | 
154 | {-| Create a `<range>` element with the given attributes, bounds, step size and
155 | current value. A message will be sent with the updated value whenever the slider
156 | is dragged.
157 | 
158 | See the [Slider.elm](https://github.com/kintail/input-widget/blob/1.0.6/examples/Slider.elm)
159 | example for sample usage.
160 | -}
161 | slider :
162 |     List (Html.Attribute Float)
163 |     -> { min : Float, max : Float, step : Float }
164 |     -> Float
165 |     -> Html Float
166 | slider attributes { min, max, step } =
167 |     let
168 |         targetValueDecoder currentValue =
169 |             Decode.map (String.toFloat >> Result.withDefault currentValue)
170 |                 Events.targetValue
171 | 
172 |         newValueDecoder currentValue =
173 |             targetValueDecoder currentValue
174 |                 |> Decode.andThen
175 |                     (\newValue ->
176 |                         if newValue /= currentValue then
177 |                             Decode.succeed newValue
178 |                         else
179 |                             Decode.fail "value did not change"
180 |                     )
181 | 
182 |         commonAttributes =
183 |             Attributes.property "min" (Encode.float min)
184 |                 :: Attributes.property "max" (Encode.float max)
185 |                 :: Attributes.property "step" (Encode.float step)
186 |                 :: attributes
187 |     in
188 |         (\currentValue ->
189 |             Html.input
190 |                 (Attributes.type_ "range"
191 |                     :: Attributes.property "value" (Encode.float currentValue)
192 |                     :: Events.on "input" (newValueDecoder currentValue)
193 |                     :: Events.on "change" (newValueDecoder currentValue)
194 |                     :: commonAttributes
195 |                 )
196 |                 []
197 |         )
198 | 
199 | 
200 | {-| Create a custom input widget from `view` and `update` functions of the same
201 | form as used in standard Elm Architecture programs.
202 | 
203 | The `view` function should accept as input the current value to display, and
204 | produce a fragment of HTML displaying that value that produces messages of some
205 | arbitrary type of your choice. The `update` function should accept a message of
206 | that type and the current value, and return an updated value. When called as
207 | 
208 |     InputWidget.custom { view = view, update = update }
209 | 
210 | this function will then return a function in the standard form `a -> Html a`.
211 | Note that regardless of the message type used internally by `view` and `update`,
212 | the only messages produced by the returned view function will be 'new value'
213 | messages of type `a`.
214 | 
215 | See the [Custom.elm](https://github.com/kintail/input-widget/blob/1.0.6/examples/Custom.elm)
216 | example for sample usage.
217 | -}
218 | custom : { view : a -> Html msg, update : msg -> a -> a } -> a -> Html a
219 | custom { view, update } =
220 |     \value -> view value |> Html.map (\message -> update message value)
221 | 


--------------------------------------------------------------------------------