git.iko.soy/typeable/elm-ui
on 352-pseudo-class-random help sign in
typeable/elm-ui/src/Element/Events.elm
265 lines 5.9 kB history raw
1module Element.Events exposing
2 ( onClick, onDoubleClick, onMouseDown, onMouseUp, onMouseEnter, onMouseLeave, onMouseMove
3 , onFocus, onLoseFocus
4 -- , onClickCoords
5 -- , onClickPageCoords
6 -- , onClickScreenCoords
7 -- , onMouseCoords
8 -- , onMousePageCoords
9 -- , onMouseScreenCoords
10 )
12{-|
15## Mouse Events
17@docs onClick, onDoubleClick, onMouseDown, onMouseUp, onMouseEnter, onMouseLeave, onMouseMove
20## Focus Events
22@docs onFocus, onLoseFocus
24-}
26import Element exposing (Attribute)
27import Html.Events
28import Internal.Model as Internal
29import Json.Decode as Json
30import VirtualDom
34-- MOUSE EVENTS
37{-| -}
38onMouseDown : msg -> Attribute msg
39onMouseDown =
40 Internal.Attr << Html.Events.onMouseDown
43{-| -}
44onMouseUp : msg -> Attribute msg
45onMouseUp =
46 Internal.Attr << Html.Events.onMouseUp
49{-| -}
50onClick : msg -> Attribute msg
51onClick =
52 Internal.Attr << Html.Events.onClick
55{-| -}
56onDoubleClick : msg -> Attribute msg
57onDoubleClick =
58 Internal.Attr << Html.Events.onDoubleClick
61{-| -}
62onMouseEnter : msg -> Attribute msg
63onMouseEnter =
64 Internal.Attr << Html.Events.onMouseEnter
67{-| -}
68onMouseLeave : msg -> Attribute msg
69onMouseLeave =
70 Internal.Attr << Html.Events.onMouseLeave
73{-| -}
74onMouseMove : msg -> Attribute msg
75onMouseMove msg =
76 on "mousemove" (Json.succeed msg)
80-- onClickWith
81-- { button = primary
82-- , send = localCoords Button
83-- }
84-- type alias Click =
85-- { button : Button
86-- , send : Track
87-- }
88-- type Button = Primary | Secondary
89-- type Track
90-- = ElementCoords
91-- | PageCoords
92-- | ScreenCoords
93-- |
96{-| -}
97onClickCoords : (Coords -> msg) -> Attribute msg
98onClickCoords msg =
99 on "click" (Json.map msg localCoords)
102{-| -}
103onClickScreenCoords : (Coords -> msg) -> Attribute msg
104onClickScreenCoords msg =
105 on "click" (Json.map msg screenCoords)
108{-| -}
109onClickPageCoords : (Coords -> msg) -> Attribute msg
110onClickPageCoords msg =
111 on "click" (Json.map msg pageCoords)
114{-| -}
115onMouseCoords : (Coords -> msg) -> Attribute msg
116onMouseCoords msg =
117 on "mousemove" (Json.map msg localCoords)
120{-| -}
121onMouseScreenCoords : (Coords -> msg) -> Attribute msg
122onMouseScreenCoords msg =
123 on "mousemove" (Json.map msg screenCoords)
126{-| -}
127onMousePageCoords : (Coords -> msg) -> Attribute msg
128onMousePageCoords msg =
129 on "mousemove" (Json.map msg pageCoords)
132type alias Coords =
133 { x : Int
134 , y : Int
135 }
138screenCoords : Json.Decoder Coords
139screenCoords =
140 Json.map2 Coords
141 (Json.field "screenX" Json.int)
142 (Json.field "screenY" Json.int)
145{-| -}
146localCoords : Json.Decoder Coords
147localCoords =
148 Json.map2 Coords
149 (Json.field "offsetX" Json.int)
150 (Json.field "offsetY" Json.int)
153pageCoords : Json.Decoder Coords
154pageCoords =
155 Json.map2 Coords
156 (Json.field "pageX" Json.int)
157 (Json.field "pageY" Json.int)
161-- FOCUS EVENTS
164{-| -}
165onLoseFocus : msg -> Attribute msg
166onLoseFocus =
167 Internal.Attr << Html.Events.onBlur
170{-| -}
171onFocus : msg -> Attribute msg
172onFocus =
173 Internal.Attr << Html.Events.onFocus
177-- CUSTOM EVENTS
180{-| Create a custom event listener. Normally this will not be necessary, but
181you have the power! Here is how `onClick` is defined for example:
183 import Json.Decode as Json
185 onClick : msg -> Attribute msg
186 onClick message =
187 on "click" (Json.succeed message)
189The first argument is the event name in the same format as with JavaScript's
190[`addEventListener`][aEL] function.
191The second argument is a JSON decoder. Read more about these [here][decoder].
192When an event occurs, the decoder tries to turn the event object into an Elm
193value. If successful, the value is routed to your `update` function. In the
194case of `onClick` we always just succeed with the given `message`.
195If this is confusing, work through the [Elm Architecture Tutorial][tutorial].
196It really does help!
197[aEL]: <https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener>
198[decoder]: <http://package.elm-lang.org/packages/elm-lang/core/latest/Json-Decode>
199[tutorial]: <https://github.com/evancz/elm-architecture-tutorial/>
201-}
202on : String -> Json.Decoder msg -> Attribute msg
203on event decode =
204 Internal.Attr <| Html.Events.on event decode
208-- {-| Same as `on` but you can set a few options.
209-- -}
210-- onWithOptions : String -> Html.Events.Options -> Json.Decoder msg -> Attribute msg
211-- onWithOptions event options decode =
212-- Internal.Attr <| Html.Events.onWithOptions event options decode
213-- COMMON DECODERS
216{-| A `Json.Decoder` for grabbing `event.target.value`. We use this to define
217`onInput` as follows:
219 import Json.Decode as Json
221 onInput : (String -> msg) -> Attribute msg
222 onInput tagger =
223 on "input" (Json.map tagger targetValue)
225You probably will never need this, but hopefully it gives some insights into
226how to make custom event handlers.
228-}
229targetValue : Json.Decoder String
230targetValue =
231 Json.at [ "target", "value" ] Json.string
234{-| A `Json.Decoder` for grabbing `event.target.checked`. We use this to define
235`onCheck` as follows:
237 import Json.Decode as Json
239 onCheck : (Bool -> msg) -> Attribute msg
240 onCheck tagger =
241 on "input" (Json.map tagger targetChecked)
243-}
244targetChecked : Json.Decoder Bool
245targetChecked =
246 Json.at [ "target", "checked" ] Json.bool
249{-| A `Json.Decoder` for grabbing `event.keyCode`. This helps you define
250keyboard listeners like this:
252 import Json.Decode as Json
254 onKeyUp : (Int -> msg) -> Attribute msg
255 onKeyUp tagger =
256 on "keyup" (Json.map tagger keyCode)
258**Note:** It looks like the spec is moving away from `event.keyCode` and
259towards `event.key`. Once this is supported in more browsers, we may add
260helpers here for `onKeyUp`, `onKeyDown`, `onKeyPress`, etc.
262-}
263keyCode : Json.Decoder Int
264keyCode =
265 Json.field "keyCode" Json.int