Skip to content
This repository has been archived by the owner on Apr 10, 2021. It is now read-only.

Bounce At Boundaries on Swipe #14

Merged
merged 2 commits into from Feb 7, 2014
Merged

Conversation

timmccall-wf
Copy link
Contributor

When swiping near an AwesomeMap's boundaries, allow the content to
bounce into place to visually convey the boundary condition to the
user. Make this effect available via the BoundaryInterceptor's
'slow' mode.

Update PeekInterceptor to independently manage drags into
boundaries so that the BoundaryInterceptor can use 'slow' mode. This
has the beneficial side-effect of allowing users to drag the first and
last items in the list away from list boundaries and have the content
snap back upon release, thus visually conveying the boundary condition
in that case as well.

Unit Tests

  • Add tests for new bounce effect on swipes in BoundaryInterceptor
  • Modify tests for PeekInterceptor to assert that it will impose boundaries independently

How To +10/QA

# skip the following steps if you've already initialized the project
$ git clone git@github.com:WebFilings/wf-js-uicomponents.git
$ cd wf-js-uicomponents

# do not skip these!
$ git fetch && git checkout bounce_back_on_swipes
$ ./init.sh
$ grunt qa
  • Should see no console errors.
  • Open http://localhost:9000 on mobile device and view the ScrollList example app.
  • Switch to mode:Peek and fit:Width
  • Drag first page down and let go, should see page snap back to top boundary.
  • Swipe very quickly over short distance, should see page bounce back to bottom boundary.
  • Swipe over long distance, should see page transition to next.
  • Swipe horizontally, should see no horizontal bounce effect.
  • Drag page in range (1...N-1) up and down rapidly without letting go, should peek at next/previous page and not witness a growing gap between pages.

@lancefisher-wf
@patkujawa-wf
@shanesizer-wf

When swiping near an AwesomeMap's boundaries, allow the content to
bounce into place to visually convey the boundary condition to the
user. Make this effect available via the BoundaryInterceptor's
'slow' mode.

Update PeekInterceptor to independently manage drags into
boundaries so that the BoundaryInterceptor can use 'slow' mode. This
has the beneficial side-effect of allowing users to drag the first and
last items in the list away from list boundaries and have the content
snap back upon release, thus visually conveying the boundary condition
in that case as well.
@@ -267,7 +285,44 @@ define(function(require) {

// Apply acceleration up to the default animation duration.
acceleratedDuration = targetState.duration * Math.min(durationFactorX, durationFactorY);
targetState.duration = Math.max(this._animationDuration, acceleratedDuration);
targetState.duration = Math.max(this._animationDuration / 2, acceleratedDuration);
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Why divided by 2?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

To keep things relative to configured animationDuration, but to speed it up. This effect should be faster than other snap backs.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Good place for inline comment. We shall never remember after you move on to Netflix

@shanesizer-wf
Copy link
Contributor

Get 'er in!!!! Yes!

@@ -68,7 +68,7 @@ define(function(require) {
}
map.addInterceptor(new BoundaryInterceptor({
centerContent: true,
mode: 'stop'
mode: { x: 'stop', y: 'slow' }
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

A numerical value might be cooler than 'slow' - very minor thing.

@shanesizer-wf
Copy link
Contributor

+1 after 1 inline comment added.

@patkujawa-wf
Copy link
Contributor

(waiting on mobile) +10 looked good swiping and CR, all tests pass, etc

@patkujawa-wf
Copy link
Contributor

+10 looked good swiping on mobile, CR, all tests pass

@charliekump-wf
Copy link
Contributor

QA Resource Approval: +1

  • Testing instruction
  • Dev +1's
  • Dev +10 with detail of what was tested
  • Unit test created  
  • All unit tests pass 

Merging into master

charliekump-wf added a commit that referenced this pull request Feb 7, 2014
@charliekump-wf charliekump-wf merged commit 5c8a35a into master Feb 7, 2014
@charliekump-wf charliekump-wf deleted the bounce_back_on_swipes branch February 7, 2014 22:12
@teresarevious-wf teresarevious-wf mentioned this pull request Feb 10, 2014
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

4 participants