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

Working on virtual list viewport stuff

Browse Source
This commit is contained in:
Max Lynch
2013-10-28 15:47:59 -05:00
parent 789136219d
commit c85426e068
5 changed files with 174 additions and 61 deletions
Download Patch File Download Diff File Expand all files Collapse all files

90
dist/js/ionic.js vendored
View File

@ -2726,6 +2726,17 @@ window.ionic = {
initialize: function(opts) {
var _this = this;
opts = ionic.extend({
virtualRemoveThreshold: -200,
virtualAddThreshold: 200
}, opts);
ionic.extend(this, opts);
if(!this.itemHeight && this.listEl) {
this.itemHeight = this.listEl.children[0] && parseInt(this.listEl.children[0].style.height);
}
ionic.views.ListView.__super__.initialize.call(this, opts);
this.onRefresh = opts.onRefresh || function() {};
@ -2755,21 +2766,43 @@ window.ionic = {
},
didScroll: function(e) {
console.log('Scrolling', Date.now());
if(this.isVirtual) {
var itemHeight = this.itemHeight;
var totalItems = this.listEl.children.length;
var scrollHeight = e.target.scrollHeight
var scrollHeight = e.target.scrollHeight;
var viewportHeight = this.el.parentNode.offsetHeight;
var scrollTop = e.scrollTop;
var height = this.el.parentNode.offsetHeight;
console.log('LIST VIEW SCROLLED', e, itemHeight, scrollHeight, height);
var itemsPerPage = Math.floor(height / itemHeight);
var first = parseInt(scrollTop / itemHeight);
console.log('FITS', itemsPerPage, 'per page, starting at', first);
var highWater = e.scrollTop + this.virtualRemoveThreshold;
var lowWater = Math.min(scrollHeight + viewportHeight, e.scrollTop + viewportHeight + this.virtualAddThreshold);
//console.log('LIST VIEW SCROLLED', e, itemHeight, scrollHeight, viewportHeight);
var itemsPerViewport = Math.floor((lowWater - highWater) / itemHeight);
var first = parseInt(highWater / itemHeight);
var last = parseInt(lowWater / itemHeight);
//console.log('FITS', itemsPerViewport, 'per page, starting at', first);
this._virtualItemsToRemove = Array.prototype.slice.call(this.listEl.children, 0, first);
var nodes = Array.prototype.slice.call(this.listEl.children, first, first + itemsPerViewport);
this.renderViewport && this.renderViewport(highWater, lowWater, first, last);
}
},
didStopScrolling: function(e) {
if(this.isVirtual) {
//console.log('DONE SCROLLING, Need to remove', this._virtualItemsToRemove);
for(var i = 0; i < this._virtualItemsToRemove.length; i++) {
var el = this._virtualItemsToRemove[i];
//el.parentNode.removeChild(el);
this.didHideItem && this.didHideItem(i);
}
// Once scrolling stops, check if we need to remove old items
var nodes = Array.prototype.slice.call(this.listEl.children, first, first + itemsPerPage);
console.log('Showing these', nodes.length, 'nodes:', nodes);
}
},
@ -3244,11 +3277,7 @@ window.ionic = {
// Execute the scrollEnd event after 400ms the wheel stopped scrolling
clearTimeout(this.wheelTimeout);
this.wheelTimeout = setTimeout(function () {
ionic.trigger(this.scrollEndEventName, {
target: this.el,
scrollLeft: this.x,
scrollTop: this.y
});
that._doneScrolling();
}, 400);
e.preventDefault();
@ -3333,18 +3362,10 @@ window.ionic = {
// Triggered to end scroll, once the final animation has ended
if(needsWrapping && this._didEndScroll) {
this._didEndScroll = false;
ionic.trigger(this.scrollEndEventName, {
target: this.el,
scrollLeft: this.x,
scrollTop: this.y
});
this._doneScrolling();
} else if(!needsWrapping) {
this._didEndScroll = false;
ionic.trigger(this.scrollEndEventName, {
target: this.el,
scrollLeft: this.x,
scrollTop: this.y
});
this._doneScrolling();
}
this.el.style.webkitTransitionDuration = '0';
@ -3587,7 +3608,7 @@ window.ionic = {
newX = momentumX.destination;
newY = momentumY.destination;
// Calcualte the longest required time for the momentum animation and
// Calculate the longest required time for the momentum animation and
// use that.
time = Math.max(momentumX.duration, momentumY.duration);
}
@ -3603,13 +3624,22 @@ window.ionic = {
_this.scrollTo(newX, newY, time, easing);
} else {
// We are done
ionic.trigger(_this.scrollEndEventName, {
target: _this.el,
scrollLeft: _this.x,
scrollTop: _this.y
});
_this._doneScrolling();
}
});
},
_doneScrolling: function() {
this.didStopScrolling && this.didStopScrolling({
target: this.el,
scrollLeft: this.x,
scrollTop: this.y
});
ionic.trigger(this.scrollEndEventName, {
target: this.el,
scrollLeft: this.x,
scrollTop: this.y
});
}
}, {
DECEL_RATE_NORMAL: 0.998,