Skip to content

Commit eb7c18e

Browse files
berenddeboerberenddeboer
authored
Make slider selection reflective of mouse position under all circumstances
See #292.
2 parents 8934c85 + afdf70e commit eb7c18e

File tree

6 files changed

+68
-38
lines changed

6 files changed

+68
-38
lines changed

‎CHANGELOG.md

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,12 +3,16 @@
33
* TabBar: keyboard interaction now works.
44
* TabBar: scrolling animation now works.
55

6+
Fixes:
7+
* Slider mouse position could be incorrect (this fix was not mentioned
8+
in any of the docs, so not picked up in the 5.0.0 release).
9+
610
Breaking changes:
711
* Switched from ummaintained "debois/elm-dom" to "K-Adam/elm-dom"
812
In your elm.json replace "debois/elm-dom": "1.3.0" with "K-Adam/elm-dom": "1.0.0"
913

1014

11-
## Upgrade to 5.0.0
15+
## Upgrade to 5.1.0
1216

1317
* Upgrade to MDC 5.1.0. DOM changes, but all internal. No user visible changes.
1418

‎demo/Demo/Slider.elm

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ import Html exposing (Html, text)
88
import Html.Attributes as Html
99
import Html.Events as Html
1010
import Material
11-
import Material.Options exposing (styled)
11+
import Material.Options exposing (css, styled)
1212
import Material.Slider as Slider
1313
import Material.Typography as Typography
1414
import Platform.Cmd exposing (Cmd, none)
@@ -149,7 +149,7 @@ view lift page model =
149149
[ Hero.view
150150
[ Hero.header "Slider"
151151
, Hero.intro "Sliders let users select from a range of values by moving the slider thumb."
152-
, Hero.component [] [ heroSlider lift model ]
152+
, Hero.component [ css "width" "100%" ] [ heroSlider lift model ]
153153
]
154154
, ResourceLink.links (lift << Mdc) model.mdc "sliders" "input-controls/sliders" "mdc-slider"
155155
, Page.demos

‎src/Internal/GlobalEvents.elm

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,17 @@ module Internal.GlobalEvents exposing
1212
, onTouchMove
1313
)
1414

15+
16+
{-| This module allows you to listen to events bound to the document
17+
node. It has a complex interaction with elm-mdc.js.
18+
19+
In particular if certain event fields do not show up in your Elm code,
20+
look in elm-mdc.js, and add them there. Basically you receive a "new"
21+
event, not the originally fired event. Only fields explicitly passes
22+
by elm-mdc.js will be seen in the Elm code.
23+
-}
24+
25+
1526
import Json.Decode exposing (Decoder, Value)
1627
import Json.Encode as Encode
1728
import Material.Options as Options exposing (Property)

‎src/Internal/Slider/Implementation.elm

Lines changed: 39 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -52,13 +52,13 @@ update lift msg model =
5252
TransitionEnd ->
5353
( Just { model | inTransit = False }, Cmd.none )
5454

55-
InteractionStart _ { pageX } ->
55+
InteractionStart _ { clientX } ->
5656
let
5757
geometry =
5858
Maybe.withDefault defaultGeometry model.geometry
5959

6060
activeValue =
61-
valueFromPageX geometry pageX
61+
valueFromClientX geometry clientX
6262
in
6363
( Just
6464
{ model
@@ -70,13 +70,13 @@ update lift msg model =
7070
, Cmd.none
7171
)
7272

73-
ThumbContainerPointer _ { pageX } ->
73+
ThumbContainerPointer _ { clientX } ->
7474
let
7575
geometry =
7676
Maybe.withDefault defaultGeometry model.geometry
7777

7878
activeValue =
79-
valueFromPageX geometry pageX
79+
valueFromClientX geometry clientX
8080
in
8181
( Just
8282
{ model
@@ -88,14 +88,14 @@ update lift msg model =
8888
, Cmd.none
8989
)
9090

91-
Drag { pageX } ->
91+
Drag { clientX } ->
9292
if model.active then
9393
let
9494
geometry =
9595
Maybe.withDefault defaultGeometry model.geometry
9696

9797
activeValue =
98-
valueFromPageX geometry pageX
98+
valueFromClientX geometry clientX
9999
in
100100
( Just
101101
{ model
@@ -131,14 +131,16 @@ update lift msg model =
131131
( Just { model | active = False, activeValue = Nothing }, Cmd.none )
132132

133133

134-
valueFromPageX : Geometry -> Float -> Float
135-
valueFromPageX geometry pageX =
134+
{- Computes the new value from the clientX position -}
135+
136+
valueFromClientX : Geometry -> Float -> Float
137+
valueFromClientX geometry clientX =
136138
let
137139
isRtl =
138140
False
139141

140142
xPos =
141-
pageX - geometry.rect.left
143+
clientX - geometry.rect.left
142144

143145
pctComplete =
144146
if isRtl then
@@ -456,7 +458,7 @@ slider lift model options _ =
456458
Options.many <|
457459
List.map
458460
(\event ->
459-
Options.on event (Decode.map (lift << InteractionStart event) decodePageX)
461+
Options.on event (Decode.map (lift << InteractionStart event) decodeClientX)
460462
)
461463
downs
462464
, when (config.onChange /= Nothing) <|
@@ -465,18 +467,18 @@ slider lift model options _ =
465467
(\event ->
466468
Options.on event <|
467469
Decode.map
468-
(\{ pageX } ->
470+
(\{ clientX } ->
469471
let
470472
activeValue =
471-
valueFromPageX geometry pageX
473+
valueFromClientX geometry clientX
472474
|> discretize geometry
473475
in
474476
Maybe.map
475477
(\changeHandler -> changeHandler activeValue)
476478
config.onChange
477479
|> Maybe.withDefault (lift NoOp)
478480
)
479-
decodePageX
481+
decodeClientX
480482
)
481483
downs
482484
, when (config.onInput /= Nothing) <|
@@ -485,18 +487,18 @@ slider lift model options _ =
485487
(\event ->
486488
Options.on event <|
487489
Decode.map
488-
(\{ pageX } ->
490+
(\{ clientX } ->
489491
let
490492
activeValue =
491-
valueFromPageX geometry pageX
493+
valueFromClientX geometry clientX
492494
|> discretize geometry
493495
in
494496
Maybe.map
495497
(\inputHandler -> inputHandler activeValue)
496498
config.onInput
497499
|> Maybe.withDefault (lift NoOp)
498500
)
499-
decodePageX
501+
decodeClientX
500502
)
501503
downs
502504
, -- Note: In some instances `Up` fires before `InteractionStart`.
@@ -513,16 +515,16 @@ slider lift model options _ =
513515
(\handler ->
514516
handler <|
515517
Decode.map
516-
(\{ pageX } ->
518+
(\{ clientX } ->
517519
let
518520
activeValue =
519-
valueFromPageX geometry pageX
521+
valueFromClientX geometry clientX
520522
|> discretize geometry
521523
in
522524
Maybe.map (\changeHandler -> changeHandler activeValue) config.onChange
523525
|> Maybe.withDefault (lift NoOp)
524526
)
525-
decodePageX
527+
decodeClientX
526528
)
527529
ups
528530
, when ((config.onInput /= Nothing) && model.active) <|
@@ -531,25 +533,25 @@ slider lift model options _ =
531533
(\handler ->
532534
handler <|
533535
Decode.map
534-
(\{ pageX } ->
536+
(\{ clientX } ->
535537
let
536538
activeValue =
537-
valueFromPageX geometry pageX
539+
valueFromClientX geometry clientX
538540
|> discretize geometry
539541
in
540542
Maybe.map
541543
(\inputHandler -> inputHandler activeValue)
542544
config.onInput
543545
|> Maybe.withDefault (lift NoOp)
544546
)
545-
decodePageX
547+
decodeClientX
546548
)
547549
ups
548550
, when model.active <|
549551
Options.many <|
550552
List.map
551553
(\handler ->
552-
handler (Decode.map (lift << Drag) decodePageX)
554+
handler (Decode.map (lift << Drag) decodeClientX)
553555
)
554556
moves
555557
, when ((config.onInput /= Nothing) && model.active) <|
@@ -558,18 +560,18 @@ slider lift model options _ =
558560
(\handler ->
559561
handler <|
560562
Decode.map
561-
(\{ pageX } ->
563+
(\{ clientX } ->
562564
let
563565
activeValue =
564-
valueFromPageX geometry pageX
566+
valueFromClientX geometry clientX
565567
|> discretize geometry
566568
in
567569
Maybe.map
568570
(\inputHandler -> inputHandler activeValue)
569571
config.onInput
570572
|> Maybe.withDefault (lift NoOp)
571573
)
572-
decodePageX
574+
decodeClientX
573575
)
574576
moves
575577
]
@@ -615,7 +617,7 @@ slider lift model options _ =
615617
, preventDefault = False
616618
}
617619
)
618-
(Decode.map (ThumbContainerPointer event) decodePageX)
620+
(Decode.map (ThumbContainerPointer event) decodeClientX)
619621
)
620622
)
621623
)
@@ -731,13 +733,18 @@ discretize geometry continuousValue =
731733
quantizedVal
732734

733735

734-
decodePageX : Decoder { pageX : Float }
735-
decodePageX =
736-
Decode.map (\pageX -> { pageX = pageX }) <|
736+
{- Get the appropriate clientX value.
737+
738+
NOTE: changedTouches is a property introduced by elm-mdc.js and only
739+
valid for the globaltouchend event.
740+
-}
741+
decodeClientX : Decoder { clientX : Float }
742+
decodeClientX =
743+
Decode.map (\clientX -> { clientX = clientX }) <|
737744
Decode.oneOf
738-
[ Decode.at [ "targetTouches", "0", "pageX" ] Decode.float
745+
[ Decode.at [ "targetTouches", "0", "clientX" ] Decode.float
739746
, Decode.at [ "changedTouches", "0", "pageX" ] Decode.float
740-
, Decode.at [ "pageX" ] Decode.float
747+
, Decode.at [ "clientX" ] Decode.float
741748
]
742749

743750

‎src/Internal/Slider/Model.elm

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -32,13 +32,13 @@ type Msg m
3232
= NoOp
3333
| Init Geometry
3434
| Resize Geometry
35-
| InteractionStart String { pageX : Float }
35+
| InteractionStart String { clientX : Float }
3636
| KeyDown
3737
| Focus
3838
| Blur
39-
| ThumbContainerPointer String { pageX : Float }
39+
| ThumbContainerPointer String { clientX : Float }
4040
| TransitionEnd
41-
| Drag { pageX : Float }
41+
| Drag { clientX : Float }
4242
| Up
4343
| ActualUp
4444

‎src/elm-mdc.js

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -188,6 +188,8 @@ import CustomEvent from 'custom-event';
188188
dispatch(document, "globalmouseup", (target, event) => {
189189
event.pageX = originalEvent.pageX
190190
event.pageY = originalEvent.pageY
191+
event.clientX = originalEvent.clientX
192+
event.clientY = originalEvent.clientY
191193
return event
192194
})
193195
})
@@ -198,6 +200,8 @@ import CustomEvent from 'custom-event';
198200
dispatch(document, "globalpointerup", (target, event) => {
199201
event.pageX = originalEvent.pageX
200202
event.pageY = originalEvent.pageY
203+
event.clientX = originalEvent.clientX
204+
event.clientY = originalEvent.clientY
201205
return event
202206
})
203207
})
@@ -217,6 +221,8 @@ import CustomEvent from 'custom-event';
217221
dispatch(document, "globalmousemove", (target, event) => {
218222
event.pageX = originalEvent.pageX
219223
event.pageY = originalEvent.pageY
224+
event.clientX = originalEvent.clientX
225+
event.clientY = originalEvent.clientY
220226
return event
221227
})
222228
})
@@ -227,6 +233,8 @@ import CustomEvent from 'custom-event';
227233
dispatch(document, "globalpointermove", (target, event) => {
228234
event.pageX = originalEvent.pageX
229235
event.pageY = originalEvent.pageY
236+
event.clientX = originalEvent.clientX
237+
event.clientY = originalEvent.clientY
230238
return event
231239
})
232240
})

0 commit comments

Comments
 (0)