-
Notifications
You must be signed in to change notification settings - Fork 3.4k
Material-switch needs refactoring #321
Comments
You can also observe issue #548 at the slider/switch demo page if you scroll (at least in firefox 33) |
Fixed via 8bc9461 |
Impressive work @ajoslin! Thanks! |
I've noticed some problems related with dragging on mobile. You can test this using Chrome touch emulation. We should probably use Hammer for these drag events? |
I didn't test heavily enough on touch devices. Pushed a fix. |
Also, to answer your question .. we are in the process of moving away from HammerJS because it has old android bugs, and we only use its drag & swipe functionality. |
It's working! I'm not trying to be picky here, but ideally we should look at the position of the final drag and decide which is closer: on or off. This is what Polymer does, I think. But I don't know how the spec handles this detail. |
We do do this! If you move the switch less than 5px, we count it as a click/tap and toggle. if you move the switch over 5px but less than 50% of the way to the next state, we do nothing. If you move the switch over 50% of the way to the other state, it toggles. |
And please be picky! Picky people make progress. |
Definitely agree. :) Does the demo page reflect this fix? Chrome 39 on Linux. Edit: forget it. I wasn't actually moving 5px. I really like this, but maybe a little less threshold would be better. This is an edge case, anyway. Great job. |
This is good feedback.
I think I'll just make it so "only count it as a click if a move event didn't happen." This will fix all the problems. |
I ended up allowing the user to move 1px and still count as a click. |
Perfect! |
I still have a couple of issues with the switch: If moved more than 50%, but not 100%, it does not toggle |
material-switch
currently extendsmaterial-checkbox
andmaterial-radio
, automatically injecting markup and attributes that are unpredictable and hard to test. It is also incompatible withngAria
. See this screenshot of the rendered markup:Unlike checkbox and radio, attributes are added to an interior element. There are actually duplicate attributes for
tabIndex
andaria-label
, and ngModel attributes like'yup'
don't trigger an update toaria-checked
whenngAria
is in use. Making this component more consistent with the others would make our lives much easier.The text was updated successfully, but these errors were encountered: