Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Browse files

* Avoid the work of syncing position if touch starts after animation …

…has completed

* Clean up event listener hookups
  • Loading branch information...
commit 5e665a6fd5e8b26c8e73f242cba9f9fad00036d9 1 parent c52c9b8
@joehewitt authored
Showing with 37 additions and 35 deletions.
  1. +30 −32 scrollability.js
  2. +7 −3 static/examples/tableview.html
View
62 scrollability.js
@@ -34,7 +34,7 @@ var kStoppedThreshold = 4;
var kLockThreshold = 10;
// Percentage of the page which content can be overscrolled before it must bounce back
-var kBounceLimit = 0.5;
+var kBounceLimit = 0.75;
// Rate of deceleration when content has overscrolled and is slowing down before bouncing back
var kBounceDecelRate = 0.01;
@@ -89,25 +89,29 @@ function onLoad() {
exports.flashIndicators();
}
-function onTouchStart(event) {
- var touch = isTouch ? event.touches[0] : event;
- // var touched = null;
-
- touchX = startX = touch.clientX;
- touchY = startY = touch.clientY;
- touchMoved = false;
-
- touchAnimators = getTouchAnimators(event.target, touchX, touchY, event.timeStamp);
- if (!touchAnimators.length) {
- return true;
- }
-
+require.ready(function() {
var d = document;
+ d.addEventListener(isTouch ? 'touchstart' : 'mousedown', onTouchStart, false);
d.addEventListener(isTouch ? 'touchmove' : 'mousemove', onTouchMove, false);
d.addEventListener(isTouch ? 'touchend' : 'mouseup', onTouchEnd, false);
+ // window.addEventListener('load', onLoad, false);
- // if (D) event.preventDefault();
-
+ function onTouchStart(event) {
+ var touch = isTouch ? event.touches[0] : event;
+ // var touched = null;
+
+ touchX = startX = touch.clientX;
+ touchY = startY = touch.clientY;
+ touchMoved = false;
+
+ touchAnimators = getTouchAnimators(event.target, touchX, touchY, event.timeStamp);
+ if (!touchAnimators.length) {
+ return true;
+ }
+
+ // if (D) event.preventDefault();
+ }
+
function onTouchMove(event) {
event.preventDefault();
touchMoved = true;
@@ -148,12 +152,9 @@ function onTouchStart(event) {
// releaseTouched(touched);
// }
- d.removeEventListener(isTouch ? 'touchmove' : 'mousemove', onTouchMove, false);
- d.removeEventListener(isTouch ? 'touchend' : 'mouseup', onTouchEnd, false);
-
touchAnimation(event.timeStamp);
}
-}
+});
function wrapAnimator(animator, startX, startY, startTime) {
var node = animator.node;
@@ -188,14 +189,16 @@ function wrapAnimator(animator, startX, startY, startTime) {
}
// XXXjoe This stuff only needs to be done if animation was running when touch began
- play(node);
- if (scrollbar) {
- play(scrollbar);
- }
if (node.dirtyEnding) {
+ play(node);
+ if (scrollbar) {
+ play(scrollbar);
+ }
+
node.dirtyEnding();
+
+ reposition(position);
}
- reposition(position);
if (!animator.mute) {
if (!dispatch("scrollability-start", node)) {
@@ -233,10 +236,10 @@ function wrapAnimator(animator, startX, startY, startTime) {
if (constrained) {
if (position > max && absMax == max) {
var excess = position - max;
- velocity *= (1.0 - excess / bounceLimit);
+ velocity *= (1.0 - excess / bounceLimit)*kBounceLimit;
} else if (position < min && absMin == min) {
var excess = min - position;
- velocity *= (1.0 - excess / bounceLimit);
+ velocity *= (1.0 - excess / bounceLimit)*kBounceLimit;
}
}
@@ -718,8 +721,3 @@ function dispatch(name, target, props) {
return target.dispatchEvent(e);
}
-
-require.ready(function() {
- document.addEventListener(isTouch ? 'touchstart' : 'mousedown', onTouchStart, false);
- // window.addEventListener('load', onLoad, false);
-});
View
10 static/examples/tableview.html
@@ -18,7 +18,7 @@
#container {
position: absolute;
left: 0;
- top: 24px;
+ top: 44px;
bottom: 24px;
width: 100%;
background: #fff;
@@ -51,11 +51,15 @@
font-size: 10px;
font-weight: bold;
text-align: center;
+ -webkit-box-sizing: border-box;
}
.bar.top {
top: 0;
+ height: 44px;
border-bottom: 1px solid #000;
+ padding: 10px;
+ font-size: 22px;
}
.bar.bottom {
@@ -148,7 +152,7 @@
document.addEventListener('touchstart', function(event) {
// Prevent text selection
- event.preventDefault();
+ // event.preventDefault();
}, false);
</script>
@@ -156,7 +160,7 @@
</head>
<body>
<div class="bar top" onclick="location.reload(true)">Scrollability Demo</div>
- <div class="bar bottom" onclick="showLog()">Footer</div>
+ <div class="bar bottom" onclick="if (window.showLog) showLog()">Footer</div>
<div id="container">
<div id="page" class="scrollable vertical"></div>
</div>
Please sign in to comment.
Something went wrong with that request. Please try again.