feat(slide-toggle): add drag functionality to thumb #750

devversion · 2016-06-23T18:50:12Z

This adds the dragging functionality to the slide-toggle.

It works pretty neat. Also tested on older touch devices. Seems like HammerJS is doing a pretty good job.

FYI: I intentionally didn't use the class / style bindings, because we don't want to trigger a change detection for each Drag Event.

devversion · 2016-06-23T20:45:12Z

@jelbourn Not sure how HammerJS will run on the users Environment later. What were your thoughts?

jelbourn · 2016-07-06T23:59:35Z

src/components/slide-toggle/slide-toggle.ts

+
+    hammerManager.on('panstart', this._onDragStart.bind(this));
+    hammerManager.on('panmove', this._onDrag.bind(this));
+    hammerManager.on('panend', this._onDragEnd.bind(this));


Why are you adding the events directly instead of using handlers defined via the template, e.g.,

<div class="md-slidetoggle-thumb" (dragstart)="..." ...>

?

Check out @iveysaur's PR #779 for the slider; she's using the baked-in gesture stuff

Also, I tried this on my phone (Galaxy S6) and it was a bit sluggish. I wonder if we should throttle these drag events (would we need a throttle function in the library, though...)

Actually, it's fine for now- can you just add a TODO to throttle the events later?

Why are you adding the events directly instead of using handlers defined via the template, e.g.,

Yeah great idea - as we discussed on Slack

Also, I tried this on my phone (Galaxy S6) and it was a bit sluggish. I wonder if we should throttle these drag events (would we need a throttle function in the library, though...)

Yeah I fixed that by calculating the absolute difference (as done in the slider)

Actually, it's fine for now- can you just add a TODO to throttle the events later?

Not sure, why throttling is necessary here? It seems like throttling would probably make it less smooth.

devversion · 2016-07-08T22:26:23Z

@jelbourn Addressed your comments
@kara I've implemented the slide event as discussed (also the cleanup)

One thing I've noticed:

When calculating the percentage for the drag absolutely, there will be a gap, when starting to drag
It will look like the drag starts in a higher x position.
Dragging / Sliding should be calculated relatively, by using the distance of the Hammer event.
The difference is, that the distance will take care of the cursor position (whether you click at the start / end of the thumb)

This means, that we miss those "pixels" for the calculation and the drag would not feel smooth / perfectly.
After some investigation I finally found the perfect way for the thumb drag functionality and it seems like works like a charm.

cc. @iveysaur (Also noticed this in the Slider component)

jelbourn · 2016-07-08T23:44:34Z

src/components/slide-toggle/slide-toggle.scss

+  // Once the thumb container is being dragged around, we remove the transition duration to
+  // make the drag feeling fast and not delayed.
+  &.md-dragging {
+    transition-duration: 0ms;


Could just be 0 without the ms (hopefully the stylelint doesn't want this?)

Seems like it's not allowed to have just zero here, because it needs a time unit.

jelbourn · 2016-07-14T00:12:29Z

src/components/slide-toggle/slide-toggle.ts

@@ -58,6 +59,13 @@ export class MdSlideToggle implements AfterContentInit, ControlValueAccessor {
  private _hasFocus: boolean = false;
  private _isMousedown: boolean = false;
  private _isInitialized: boolean = false;
+  private _slideRenderer: MdSlideToggleRenderer = null;
+
+  // State of the current drag, which holds required variables for the drag.


Nit: use /** */ style comments for member / method descriptions

jelbourn · 2016-07-14T18:43:20Z

LGTM!

angular-automatic-lock-bot · 2019-09-06T01:02:35Z

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}

googlebot added the cla: yes PR author has agreed to Google's Contributor License Agreement label Jun 23, 2016

devversion force-pushed the feat/drag-functionality branch from d550d5a to 0aa322a Compare June 23, 2016 20:21

devversion force-pushed the feat/drag-functionality branch from 0aa322a to fc9f815 Compare June 25, 2016 06:40

jelbourn reviewed Jul 6, 2016
View reviewed changes

devversion force-pushed the feat/drag-functionality branch from fc9f815 to 975495a Compare July 8, 2016 22:21

jelbourn reviewed Jul 8, 2016
View reviewed changes

devversion force-pushed the feat/drag-functionality branch from c173a43 to f68d38f Compare July 13, 2016 11:54

feat(slide-toggle): add drag functionality to thumb

226dc3e

devversion force-pushed the feat/drag-functionality branch from f68d38f to 226dc3e Compare July 13, 2016 12:00

jelbourn reviewed Jul 14, 2016
View reviewed changes

devversion added 2 commits July 14, 2016 20:32

Move drag handlers to custom slide-toggle renderer.

ab9fa61

Remove stale drag state variable

cc6bcfc

devversion force-pushed the feat/drag-functionality branch from 7f62032 to cc6bcfc Compare July 14, 2016 18:34

jelbourn added pr: lgtm action: merge The PR is ready for merge by the caretaker labels Jul 14, 2016

kara merged commit 25b4f21 into angular:master Jul 14, 2016

devversion deleted the feat/drag-functionality branch July 14, 2016 22:12

devversion mentioned this pull request Jul 14, 2016

slide-toggle: add dragging functionality #600

Closed

angular-automatic-lock-bot bot locked and limited conversation to collaborators Sep 6, 2019

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat(slide-toggle): add drag functionality to thumb #750

feat(slide-toggle): add drag functionality to thumb #750

devversion commented Jun 23, 2016

devversion commented Jun 23, 2016

jelbourn Jul 6, 2016

jelbourn Jul 7, 2016

jelbourn Jul 7, 2016

devversion Jul 8, 2016 •

edited

Loading

devversion commented Jul 8, 2016

jelbourn Jul 8, 2016

devversion Jul 9, 2016 •

edited

Loading

jelbourn Jul 14, 2016

jelbourn commented Jul 14, 2016

angular-automatic-lock-bot bot commented Sep 6, 2019

feat(slide-toggle): add drag functionality to thumb #750

feat(slide-toggle): add drag functionality to thumb #750

Conversation

devversion commented Jun 23, 2016

devversion commented Jun 23, 2016

jelbourn Jul 6, 2016

Choose a reason for hiding this comment

jelbourn Jul 7, 2016

Choose a reason for hiding this comment

jelbourn Jul 7, 2016

Choose a reason for hiding this comment

devversion Jul 8, 2016 • edited Loading

Choose a reason for hiding this comment

devversion commented Jul 8, 2016

jelbourn Jul 8, 2016

Choose a reason for hiding this comment

devversion Jul 9, 2016 • edited Loading

Choose a reason for hiding this comment

jelbourn Jul 14, 2016

Choose a reason for hiding this comment

jelbourn commented Jul 14, 2016

angular-automatic-lock-bot bot commented Sep 6, 2019

devversion Jul 8, 2016 •

edited

Loading

devversion Jul 9, 2016 •

edited

Loading