Skip to content

Commit

Permalink
updated to our current version without the pull to refresh module
Browse files Browse the repository at this point in the history
  • Loading branch information
@jrf0110
jrf0110 committed Jan 28, 2013
1 parent 4e91891 commit 7d17bcc
Showing 1 changed file with 80 additions and 63 deletions.
143 changes: 80 additions & 63 deletions infini-scroll.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,8 @@
*/
this.viewOptions = {
layout: "vertical"
, width: $ui.FILL
, height: $ui.FILL
};

/**
Expand All @@ -22,68 +24,65 @@
onNewHeight: function(height, myInfiniScroll){}
, onBottom: function(myInfiniScroll){}
, triggerAt: '90%'
, checkTimeout: 6000
};

for (var key in viewOptions) this.viewOptions[key] = viewOptions[key];
for (var key in options) this.options[key] = options[key];
this.view = $ui.createScrollView(this.viewOptions);
this.wrapper = this.getNewWrapper();
this.view.add(this.wrapper);
this.scrollEndTriggered = false;

// Cache whether or not this a percentage we're dealing with and the trigger ratio
if (this.triggerIsPercentage = this.options.triggerAt.indexOf('%')) {
this.triggerRatio = parseFloat(this.options.triggerAt) / 100;
} else {
this.triggerAt = parseInt(this.options.triggerAt);
}

// Apparently fn.bind isn't working so we'll curry it
this.onPostLayoutCurry = function (e) { $this._onPostLayout(e); };
this.onScrollCurry = function (e) { $this._onScroll(e); };
this.view.addEventListener('postlayout', this.onPostLayoutCurry);
this.view.addEventListener('scroll', this.onScrollCurry);
};

constructor.prototype = {
this.postLayoutAdded = false;

/**
* Current Height of the ScrollView
*/
height: 0,

this.height = 0;
/**
* Current dp value for trigger at - differs from the one in options because
* Someone can pass in a percentage to trigger at and this value represents the dp
* value of that percentage
*/
triggerAt: 0,

this.triggerAt = 0;
/**
* Keeps state for current rounds trigger status
*/
triggered: false,

/**
* The next child to start adding height from when we trigger the postLayout event
* We keep track of this so we don't iterate through all of the old children that got added previously
* And we only add in the new height
*/
nextChild: 0,

this.triggered = false;
/**
* Maintains state for whether or no we're calculating a new height
*/
calculatingHeight: false,
this.calculatingHeight = false;

/**
* Base ScrollView for InfiniScroll
*/
view: null,
// Cache whether or not this a percentage we're dealing with and the trigger ratio
if (this.triggerIsPercentage = this.options.triggerAt.indexOf('%')) {
this.triggerRatio = parseFloat(this.options.triggerAt) / 100;
} else {
this.triggerAt = parseInt(this.options.triggerAt);
}

// Apparently fn.bind isn't working so we'll curry it
this.onScrollCurry = function (e) { $this._onScroll(e); };
this.view.addEventListener('scroll', this.onScrollCurry);
};

constructor.prototype = {
/**
* Proxy Methods
*/
add: function (view) {
return this.view.add(view);
if (!this.checkingHeight){
this.startHeightCheck();
}
if (Object.prototype.toString.call(view)[8] === "A"){
var intermediate = $ui.createView({ width: $ui.FILL, height: $ui.SIZE, layout: 'vertical' });
for (var i = 0; i < view.length; i++){
intermediate.add(view[i]);
}
this.wrapper.add(intermediate);
}else{
this.wrapper.add(view);
}
},

hide: function () {
Expand All @@ -98,18 +97,26 @@
return this.view.scrollTo(x, y);
},

addEvents: function(){
this.view.addEventListener('scroll', this.onScrollCurry);
},

removeEvents: function(){
this.view.removeEventListener('scroll', this.onScrollCurry);
},

/**
* Re-calculates the new triggerAt property if needed and calls user onNewHeight function
* Also re-attaches the onscroll event
*/
triggerNewHeight: function () {
this.triggerAt = (this.triggerIsPercentage) ?
this.height * this.triggerRatio :
this.height - this.options.triggerAt;
triggerNewHeight: function (silent) {
this.triggerAt = (this.triggerIsPercentage)
? parseInt(this.height * this.triggerRatio)
: this.height - this.options.triggerAt;
this.calculatingHeight = false;
this.scrollEndTriggered = false;
this.view.addEventListener('scroll', this.onScrollCurry);
this.options.onNewHeight(this.height, this);
this.addEvents();
if (!silent) this.options.onNewHeight(this.height, this);
},

triggerScrollEnd: function (scrollY) {
Expand All @@ -125,26 +132,33 @@
return this.calculatingHeight;
},

/**
* Bound to the postlayout even on the Base View
* Updates the height and nextChild property when a layout change occurs
* @private
*/
_onPostLayout: function (e) {
if (e.source === this.view && this.view.children.length > 0) {
this.calculatingHeight = true;
var children = this.view.children;

for (var i = this.nextChild || 0, child; i < children.length; i++) {
child = children[i];
this.height += parseInt(child.getSize().height) || 0;
this.height += parseInt(child.getTop()) || 0;
this.height += parseInt(child.getBottom()) || 0;
startHeightCheck: function(){
this.checkingHeight = true;
var $this = this, currentTime = 0, checkInterval = setInterval(function(){
if ((currentTime += 100) > $this.options.timeout) clearInterval(checkInterval);
var newHeight = $this.wrapper.getSize().height;
if (newHeight !== $this.height){
$this.height = newHeight;
clearInterval(checkInterval);
$this.checkingHeight = false;
$this.triggerNewHeight();
}
}, 100);
},

this.nextChild = children.length;
this.triggerNewHeight();
}
clearChildren: function(){
this.view.remove(this.wrapper);
this.wrapper = this.getNewWrapper();
this.view.add(this.wrapper);
this.height = 0;
},

getNewWrapper: function(){
return $ui.createView({
width: $ui.FILL
, height: $ui.SIZE
, layout: 'vertical'
});
},

/**
Expand All @@ -153,16 +167,19 @@
* @private
*/
_onScroll: function (e) {
if (this.clearingChildren) return;
if (this.scrollEndTriggered) return;
// In case there was some scrolling while the handler was being removed
if (this.isCalculatingHeight()) return;
if (e.y >= this.triggerAt - this.view.size.height) {
this.scorllEndTriggered = true;
this.view.removeEventListener('scroll', this.onScrollCurry);
var trigger = this.triggerAt - this.view.size.height;
if (trigger <= 0) return;
if (e.y >= trigger) {
this.scrollEndTriggered = true;
this.removeEvents()
this.triggerScrollEnd(e.y);
}
}
};

GB.Views.InfiniScroll = constructor;
exports = constructor;
})();

0 comments on commit 7d17bcc

Please sign in to comment.