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

Trigger didScroll on scroll for inherited list views

Browse Source
This commit is contained in:
Max Lynch
2013-10-28 09:07:30 -05:00
parent 04dcd1050e
commit 6a8750e126
3 changed files with 50 additions and 32 deletions
Download Patch File Download Diff File Expand all files Collapse all files

41
dist/js/ionic.js vendored
View File

@ -2758,6 +2758,10 @@ window.ionic = {
refresher.style.height = '0px';
},
didScroll: function(e) {
console.log('LIST VIEW SCROLLED', e);
},
_initDrag: function() {
ionic.views.ListView.__super__._initDrag.call(this);
@ -3028,7 +3032,11 @@ window.ionic = {
* scroll container in any UI library. You could just use -webkit-overflow-scrolling: touch,
* but you lose control over scroll behavior that native developers have with things
* like UIScrollView, and you don't get events after the finger stops touching the
* device (after a flick, for example)
* device (after a flick, for example).
*
* Some people are afraid of using Javascript powered scrolling, but
* with today's devices, Javascript is probably the best solution for
* scrolling in hybrid apps.
*/
(function(ionic) {
'use strict';
@ -3132,9 +3140,18 @@ window.ionic = {
// This is important because we need to receive scroll events
// even after a "flick" and adjust, etc.
this._momentumStepTimeout = setTimeout(function eventNotify() {
var scrollTop = parseFloat(_this.el.style.webkitTransform.replace('translate3d(', '').split(',')[1]) || 0;
var trans = _this.el.style.webkitTransform.replace('translate3d(', '').split(',');
var scrollLeft = parseFloat(trans[0] || 0);
var scrollTop = parseFloat(trans[1] || 0);
_this.didScroll && _this.didScroll({
target: _this.el,
scrollLeft: -scrollLeft,
scrollTop: -scrollTop
});
ionic.trigger(_this.scrollEventName, {
target: _this.el,
scrollLeft: -scrollLeft,
scrollTop: -scrollTop
});
@ -3142,8 +3159,6 @@ window.ionic = {
_this._momentumStepTimeout = setTimeout(eventNotify, _this.inertialEventInterval);
}
}, this.inertialEventInterval)
console.log('TRANSITION ADDED!');
},
/**
@ -3264,17 +3279,14 @@ window.ionic = {
destination = wrapperSize ? lowerMargin - ( wrapperSize / 2.5 * ( speed / 8 ) ) : lowerMargin;
distance = Math.abs(destination - current);
duration = distance / speed;
console.log("MOMENTUM TOO FAR DOWN", destination);
} else if ( destination > 0 ) {
// We have dragged too far up, snap back to 0
destination = wrapperSize ? wrapperSize / 2.5 * ( speed / 8 ) : 0;
distance = Math.abs(current) + destination;
duration = distance / speed;
console.log("MOMENTUM TOO FAR UP", destination);
}
console.log('Momentum: time:', time, 'speed:',speed, 'dest:',destination, 'dur:',duration);
return {
destination: Math.round(destination),
duration: duration
@ -3312,7 +3324,6 @@ window.ionic = {
this._drag = null;
this.el.classList.remove('scroll-scrolling');
console.log('REMOVING TRANSITION');
this.el.style.webkitTransitionDuration = '0';
clearTimeout(this._momentumStepTimeout)
@ -3398,9 +3409,6 @@ window.ionic = {
var deltaX = px - _this._drag.pointX;
var deltaY = py - _this._drag.pointY;
//console.log("Delta x", deltaX);
//console.log("Delta y", deltaY);
_this._drag.pointX = px;
_this._drag.pointY = py;
@ -3458,17 +3466,20 @@ window.ionic = {
_this.x = newX;
_this.y = newY;
console.log('Moving to', newX, newY);
// Check if we need to reset the drag initial states if we've
// been dragging for a bit
if(timestamp - drag.startTime > 300) {
console.log('Resetting timer');
drag.startTime = timestamp;
drag.startX = _this.x;
drag.startY = _this.y;
}
_this.didScroll && _this.didScroll({
target: _this.el,
scrollLeft: -newX,
scrollTop: -newY
});
// Trigger a scroll event
ionic.trigger(_this.scrollEventName, {
target: _this.el,
@ -3546,8 +3557,6 @@ window.ionic = {
// If we've moved, we will need to scroll
if(newX != _this.x || newY != _this.y) {
console.trace("SCROLL FROM", _this.x, _this.y, "TO", newX, newY);
// If the end position is out of bounds, change the function we use for easing
// to get a different animation for the rubber banding
if ( newX > 0 || newX < (-totalWidth + parentWidth) || newY > 0 || newY < (-totalHeight + parentHeight)) {

4
js/views/listViewScroll.js
View File

@ -396,6 +396,10 @@
refresher.style.height = '0px';
},
didScroll: function(e) {
console.log('LIST VIEW SCROLLED', e);
},
_initDrag: function() {
ionic.views.ListView.__super__._initDrag.call(this);

37
js/views/scrollView.js
View File

@ -7,7 +7,11 @@
* scroll container in any UI library. You could just use -webkit-overflow-scrolling: touch,
* but you lose control over scroll behavior that native developers have with things
* like UIScrollView, and you don't get events after the finger stops touching the
* device (after a flick, for example)
* device (after a flick, for example).
*
* Some people are afraid of using Javascript powered scrolling, but
* with today's devices, Javascript is probably the best solution for
* scrolling in hybrid apps.
*/
(function(ionic) {
'use strict';
@ -111,9 +115,18 @@
// This is important because we need to receive scroll events
// even after a "flick" and adjust, etc.
this._momentumStepTimeout = setTimeout(function eventNotify() {
var scrollTop = parseFloat(_this.el.style.webkitTransform.replace('translate3d(', '').split(',')[1]) || 0;
var trans = _this.el.style.webkitTransform.replace('translate3d(', '').split(',');
var scrollLeft = parseFloat(trans[0] || 0);
var scrollTop = parseFloat(trans[1] || 0);
_this.didScroll && _this.didScroll({
target: _this.el,
scrollLeft: -scrollLeft,
scrollTop: -scrollTop
});
ionic.trigger(_this.scrollEventName, {
target: _this.el,
scrollLeft: -scrollLeft,
scrollTop: -scrollTop
});
@ -121,8 +134,6 @@
_this._momentumStepTimeout = setTimeout(eventNotify, _this.inertialEventInterval);
}
}, this.inertialEventInterval)
console.log('TRANSITION ADDED!');
},
/**
@ -243,17 +254,14 @@
destination = wrapperSize ? lowerMargin - ( wrapperSize / 2.5 * ( speed / 8 ) ) : lowerMargin;
distance = Math.abs(destination - current);
duration = distance / speed;
console.log("MOMENTUM TOO FAR DOWN", destination);
} else if ( destination > 0 ) {
// We have dragged too far up, snap back to 0
destination = wrapperSize ? wrapperSize / 2.5 * ( speed / 8 ) : 0;
distance = Math.abs(current) + destination;
duration = distance / speed;
console.log("MOMENTUM TOO FAR UP", destination);
}
console.log('Momentum: time:', time, 'speed:',speed, 'dest:',destination, 'dur:',duration);
return {
destination: Math.round(destination),
duration: duration
@ -291,7 +299,6 @@
this._drag = null;
this.el.classList.remove('scroll-scrolling');
console.log('REMOVING TRANSITION');
this.el.style.webkitTransitionDuration = '0';
clearTimeout(this._momentumStepTimeout)
@ -377,9 +384,6 @@
var deltaX = px - _this._drag.pointX;
var deltaY = py - _this._drag.pointY;
//console.log("Delta x", deltaX);
//console.log("Delta y", deltaY);
_this._drag.pointX = px;
_this._drag.pointY = py;
@ -437,17 +441,20 @@
_this.x = newX;
_this.y = newY;
console.log('Moving to', newX, newY);
// Check if we need to reset the drag initial states if we've
// been dragging for a bit
if(timestamp - drag.startTime > 300) {
console.log('Resetting timer');
drag.startTime = timestamp;
drag.startX = _this.x;
drag.startY = _this.y;
}
_this.didScroll && _this.didScroll({
target: _this.el,
scrollLeft: -newX,
scrollTop: -newY
});
// Trigger a scroll event
ionic.trigger(_this.scrollEventName, {
target: _this.el,
@ -525,8 +532,6 @@
// If we've moved, we will need to scroll
if(newX != _this.x || newY != _this.y) {
console.trace("SCROLL FROM", _this.x, _this.y, "TO", newX, newY);
// If the end position is out of bounds, change the function we use for easing
// to get a different animation for the rubber banding
if ( newX > 0 || newX < (-totalWidth + parentWidth) || newY > 0 || newY < (-totalHeight + parentHeight)) {