Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Browse files

* TouchScrollStrategy: accelerate scroller if possible; show thumbs w…

…henever dom scroll position changes; slight refactoring of transform code.

* TranslateScrollStrategy: replace scroll position with translation completely when scrolling rather than augmenting it.
  • Loading branch information...
commit 65c999a6e431c21009531717a5821953dc6770dd 1 parent fee7321
Steve Orvell authored
View
32 source/touch/TouchScrollStrategy.js
@@ -64,7 +64,11 @@ enyo.kind({
create: function() {
this.inherited(arguments);
this.$.client.addClass(this.clientClasses);
- this.container.addClass("enyo-touch-strategy-container");
+ //
+ this.accel = enyo.dom.canAccelerate();
+ var containerClasses = "enyo-touch-strategy-container" + (this.accel ? " enyo-composite" : "");
+ this.container.addClass(containerClasses);
+ this.translation = this.accel ? "translate3d" : "translate";
},
initComponents: function() {
this.createChrome(this.tools);
@@ -92,6 +96,9 @@ enyo.kind({
if (!this.isScrolling()) {
this.calcBoundaries();
this.syncScrollMath();
+ if (this.thumb) {
+ this.alertThumbs();
+ }
}
return true;
},
@@ -123,16 +130,10 @@ enyo.kind({
},
setScrollLeft: function() {
this.stop();
- if (this.thumb) {
- this.alertThumbs();
- }
this.inherited(arguments);
},
setScrollTop: function() {
this.stop();
- if (this.thumb) {
- this.alertThumbs();
- }
this.inherited(arguments);
},
getScrollLeft: function() {
@@ -236,14 +237,16 @@ enyo.kind({
scrollMathScroll: function(inSender) {
this.effectScroll(-inSender.x, -inSender.y);
if (this.thumb) {
- this.alertThumbs();
+ this.updateThumbs();
}
this.doScroll(inSender);
},
scrollMathStop: function(inSender) {
this.effectScrollStop();
if (this.thumb) {
- this.hideThumbs(500);
+ // hide thumb on a short delay... it can disappear rather quickly
+ // since it's come to rest slowly via friction
+ this.hideThumbs(100);
}
this.doScrollStop(inSender);
},
@@ -269,17 +272,14 @@ enyo.kind({
},
effectOverscroll: function(inX, inY) {
var n = this.scrollNode;
- var o = {translateX: null, translateY: null};
+ var x = "0,", y = "0", z = this.accel ? ",0" : "";
if (inY !== null && Math.abs(inY - n.scrollTop) > 1) {
- o.translateY = (n.scrollTop - inY) + "px";
+ y = (n.scrollTop - inY) + "px";
}
if (inX !== null && Math.abs(inX - n.scrollLeft) > 1) {
- o.translateX = (n.scrollLeft - inX) + "px";
+ x = (n.scrollLeft - inX) + "px,";
}
- this.effectTransform(o);
- },
- effectTransform: function(inTransforms) {
- enyo.dom.transform(this.$.client, inTransforms);
+ enyo.dom.transformValue(this.$.client, this.translation, x + y + z);
},
getOverScrollBounds: function() {
var m = this.$.scrollMath;
View
32 source/touch/TranslateScrollStrategy.js
@@ -13,13 +13,8 @@ enyo.kind({
{name: "client"}
]}
],
- create: function() {
- this.inherited(arguments);
- this.accel = enyo.dom.canAccelerate();
- },
calcScrollNode: function() {
return this.$.clientContainer.hasNode();
- //return this.container.hasNode();
},
maxHeightChanged: function() {
this.inherited(arguments);
@@ -33,36 +28,35 @@ enyo.kind({
},
scrollMathStart: function(inSender) {
this.inherited(arguments);
- if (this.scrollNode) {
- this.startX = this.getScrollLeft();
- this.startY = this.getScrollTop();
- }
+ this.scrollStarting = true;
},
scrollMathScroll: function(inSender) {
this.scrollLeft = -inSender.x;
this.scrollTop = -inSender.y;
- // hmph, scroll called after stop
if (this.isScrolling()) {
- this.effectScroll(this.startX - this.scrollLeft, this.startY - this.scrollTop);
+ // reset dom scroll position when starting to scroll and use transforms
+ if (this.scrollStarting && this.scrollNode) {
+ this.scrollStarting = false;
+ this.scrollNode.scrollTop = this.scrollNode.scrollLeft = 0;
+ }
+ this.effectScroll(-this.scrollLeft, -this.scrollTop);
if (this.thumb) {
- this.alertThumbs();
+ this.updateThumbs();
}
}
this.doScroll(inSender);
},
// while moving, scroller uses translate
effectScroll: function(inX, inY) {
- var o = inX + "px, " + inY + "px";
- this.effectTransform(this.makeTransform(o));
+ var o = inX + "px, " + inY + "px" + (this.accel ? ",0" : "");
+ enyo.dom.transformValue(this.$.client, this.translation, o);
},
// when stopped, we use scrollLeft/Top (makes cursor positioning automagic)
effectScrollStop: function() {
- this.effectTransform(this.makeTransform("0, 0"));
+ var t = "0,0" + (this.accel ? ",0" : "");
+ enyo.dom.transformValue(this.$.client, this.translation, t);
this.setScrollLeft(this.scrollLeft);
this.setScrollTop(this.scrollTop);
},
- down: enyo.nop,
- makeTransform: function(inProps) {
- return this.accel ? {translate3d: inProps + ", 0"} : {translate: inProps};
- }
+ down: enyo.nop
});
Please sign in to comment.
Something went wrong with that request. Please try again.