javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-11-07 23:16:52 +08:00
Code Issues Packages Projects Releases Wiki Activity

Horiz scroll working yall!

Browse Source
This commit is contained in:
Max Lynch
2013-10-25 16:19:30 -05:00
parent 48eb83ca62
commit 0f883f088f
2 changed files with 68 additions and 94 deletions
Download Patch File Download Diff File Expand all files Collapse all files

81
dist/js/ionic.js vendored
View File

@ -2484,7 +2484,9 @@ window.ionic = {
(function(ionic) { (function(ionic) {
'use strict'; 'use strict';
var EASING_FUNCTIONS = { var EASING_FUNCTIONS = {
quadratic: 'cubic-bezier(0.25, 0.46, 0.45, 0.94)' quadratic: 'cubic-bezier(0.25, 0.46, 0.45, 0.94)',
circular: 'cubic-bezier(0.1, 0.57, 0.1, 1)',
circular2: 'cubic-bezier(0.075, 0.82, 0.165, 1)'
}; };
ionic.views.ScrollView = function(opts) { ionic.views.ScrollView = function(opts) {
@ -2502,6 +2504,7 @@ window.ionic = {
invertWheel: false, invertWheel: false,
isVerticalEnabled: true, isVerticalEnabled: true,
isHorizontalEnabled: false, isHorizontalEnabled: false,
bounceEasing: EASING_FUNCTIONS.circular,
bounceTime: 600 //how long to take when bouncing back in a rubber band bounceTime: 600 //how long to take when bouncing back in a rubber band
}, opts); }, opts);
@ -2593,38 +2596,40 @@ window.ionic = {
* animate it back. * animate it back.
*/ */
wrapScrollPosition: function(transitionTime) { wrapScrollPosition: function(transitionTime) {
var totalWidth = this.el.scrollWidth; var _this = this;
var totalHeight = this.el.offsetHeight;
var parentWidth = this.el.parentNode.offsetWidth;
var parentHeight = this.el.parentNode.offsetHeight;
var maxX = (-totalWidth + parentWidth); window.requestAnimationFrame(function() {
var maxY = (-totalHeight + parentHeight); var totalWidth = _this.el.scrollWidth;
var totalHeight = _this.el.offsetHeight;
var parentWidth = _this.el.parentNode.offsetWidth;
var parentHeight = _this.el.parentNode.offsetHeight;
//this._execEvent('scrollEnd'); var maxX = (-totalWidth + parentWidth);
var x = this.x, y = this.y; var maxY = (-totalHeight + parentHeight);
var time = time || 0; //this._execEvent('scrollEnd');
var x = _this.x, y = _this.y;
if ( !this.isHorizontalEnabled || this.x > 0 ) { if (!_this.isHorizontalEnabled || _this.x > 0) {
x = 0; x = 0;
} else if ( this.x < maxX) { } else if ( _this.x < maxX) {
x = maxX; x = maxX;
} }
if ( !this.isVerticalEnabled || this.y > 0 ) { if (!_this.isVerticalEnabled || _this.y > 0) {
y = 0; y = 0;
} else if ( this.y < maxY) { } else if (_this.y < maxY) {
y = maxY; y = maxY;
} }
// No change // No change
if (x == this.x || y == this.y) { if (x == _this.x && y == _this.y) {
return false; return false;
} }
this.scrollTo(x, y, time, this.bounceTime); _this.scrollTo(x, y, transitionTime || 0, _this.bounceEasing);
return true; return true;
});
}, },
_wheel: function(e) { _wheel: function(e) {
@ -2723,7 +2728,7 @@ window.ionic = {
this.el.style.webkitTransitionDuration = '0'; this.el.style.webkitTransitionDuration = '0';
if(this.wrapScrollPosition(this.bounceTime)) { if(this.wrapScrollPosition(this.bounceTime)) {
ionic.trigger(_this.scrollEndEventName, { ionic.trigger(this.scrollEndEventName, {
target: this.el, target: this.el,
scrollLeft: this.x, scrollLeft: this.x,
scrollTop: this.y scrollTop: this.y
@ -2949,30 +2954,12 @@ window.ionic = {
time = Math.max(momentumX.duration, momentumY.duration); time = Math.max(momentumX.duration, momentumY.duration);
} }
// Check if we need to rubber band back
if(_this.x > 0) {
_this.scrollTo(0, 0, _this.bounceTime);
return;
} else if((-_this.x + parentWidth) > totalWidth) {
_this.scrollTo(-(totalWidth - parentWidth), 0, _this.bounceTime);
return;
}
if(_this.y > 0) {
_this.scrollTo(0, 0, _this.bounceTime);
return;
} else if ((-_this.y + parentHeight) > totalHeight) {
_this.scrollTo(0, totalHeight - parentHeight, _this.bounceTime);
return;
}
// If we've moved, we will need to scroll // If we've moved, we will need to scroll
if(newX != _this.x || newY != _this.y) { if(newX != _this.x || newY != _this.y) {
// If the end position is out of bounds, change the function we use for easing // If the end position is out of bounds, change the function we use for easing
// to get a different animation for the rubber banding // to get a different animation for the rubber banding
if ( newX > 0 || newX < this.maxScrollX || newY > 0 || newY < this.maxScrollY ) { if ( newX > 0 || newX < (-totalWidth + parentWidth) || newY > 0 || newY < (-totalHeight + parentHeight)) {
easing = EASING_FUNCTIONS.quadratic; easing = EASING_FUNCTIONS.quadratic;
} }

81
js/views/scrollView.js
View File

@ -1,7 +1,9 @@
(function(ionic) { (function(ionic) {
'use strict'; 'use strict';
var EASING_FUNCTIONS = { var EASING_FUNCTIONS = {
quadratic: 'cubic-bezier(0.25, 0.46, 0.45, 0.94)' quadratic: 'cubic-bezier(0.25, 0.46, 0.45, 0.94)',
circular: 'cubic-bezier(0.1, 0.57, 0.1, 1)',
circular2: 'cubic-bezier(0.075, 0.82, 0.165, 1)'
}; };
ionic.views.ScrollView = function(opts) { ionic.views.ScrollView = function(opts) {
@ -19,6 +21,7 @@
invertWheel: false, invertWheel: false,
isVerticalEnabled: true, isVerticalEnabled: true,
isHorizontalEnabled: false, isHorizontalEnabled: false,
bounceEasing: EASING_FUNCTIONS.circular,
bounceTime: 600 //how long to take when bouncing back in a rubber band bounceTime: 600 //how long to take when bouncing back in a rubber band
}, opts); }, opts);
@ -110,38 +113,40 @@
* animate it back. * animate it back.
*/ */
wrapScrollPosition: function(transitionTime) { wrapScrollPosition: function(transitionTime) {
var totalWidth = this.el.scrollWidth; var _this = this;
var totalHeight = this.el.offsetHeight;
var parentWidth = this.el.parentNode.offsetWidth;
var parentHeight = this.el.parentNode.offsetHeight;
var maxX = (-totalWidth + parentWidth); window.requestAnimationFrame(function() {
var maxY = (-totalHeight + parentHeight); var totalWidth = _this.el.scrollWidth;
var totalHeight = _this.el.offsetHeight;
var parentWidth = _this.el.parentNode.offsetWidth;
var parentHeight = _this.el.parentNode.offsetHeight;
//this._execEvent('scrollEnd'); var maxX = (-totalWidth + parentWidth);
var x = this.x, y = this.y; var maxY = (-totalHeight + parentHeight);
var time = time || 0; //this._execEvent('scrollEnd');
var x = _this.x, y = _this.y;
if ( !this.isHorizontalEnabled || this.x > 0 ) { if (!_this.isHorizontalEnabled || _this.x > 0) {
x = 0; x = 0;
} else if ( this.x < maxX) { } else if ( _this.x < maxX) {
x = maxX; x = maxX;
} }
if ( !this.isVerticalEnabled || this.y > 0 ) { if (!_this.isVerticalEnabled || _this.y > 0) {
y = 0; y = 0;
} else if ( this.y < maxY) { } else if (_this.y < maxY) {
y = maxY; y = maxY;
} }
// No change // No change
if (x == this.x || y == this.y) { if (x == _this.x && y == _this.y) {
return false; return false;
} }
this.scrollTo(x, y, time, this.bounceTime); _this.scrollTo(x, y, transitionTime || 0, _this.bounceEasing);
return true; return true;
});
}, },
_wheel: function(e) { _wheel: function(e) {
@ -240,7 +245,7 @@
this.el.style.webkitTransitionDuration = '0'; this.el.style.webkitTransitionDuration = '0';
if(this.wrapScrollPosition(this.bounceTime)) { if(this.wrapScrollPosition(this.bounceTime)) {
ionic.trigger(_this.scrollEndEventName, { ionic.trigger(this.scrollEndEventName, {
target: this.el, target: this.el,
scrollLeft: this.x, scrollLeft: this.x,
scrollTop: this.y scrollTop: this.y
@ -466,30 +471,12 @@
time = Math.max(momentumX.duration, momentumY.duration); time = Math.max(momentumX.duration, momentumY.duration);
} }
// Check if we need to rubber band back
if(_this.x > 0) {
_this.scrollTo(0, 0, _this.bounceTime);
return;
} else if((-_this.x + parentWidth) > totalWidth) {
_this.scrollTo(-(totalWidth - parentWidth), 0, _this.bounceTime);
return;
}
if(_this.y > 0) {
_this.scrollTo(0, 0, _this.bounceTime);
return;
} else if ((-_this.y + parentHeight) > totalHeight) {
_this.scrollTo(0, totalHeight - parentHeight, _this.bounceTime);
return;
}
// If we've moved, we will need to scroll // If we've moved, we will need to scroll
if(newX != _this.x || newY != _this.y) { if(newX != _this.x || newY != _this.y) {
// If the end position is out of bounds, change the function we use for easing // If the end position is out of bounds, change the function we use for easing
// to get a different animation for the rubber banding // to get a different animation for the rubber banding
if ( newX > 0 || newX < this.maxScrollX || newY > 0 || newY < this.maxScrollY ) { if ( newX > 0 || newX < (-totalWidth + parentWidth) || newY > 0 || newY < (-totalHeight + parentHeight)) {
easing = EASING_FUNCTIONS.quadratic; easing = EASING_FUNCTIONS.quadratic;
} }