Skip to content

Instantly share code, notes, and snippets.

@ppcano
Forked from jakobdamjensen/gist:1433795
Created December 5, 2011 16:18
Show Gist options
  • Save ppcano/1434142 to your computer and use it in GitHub Desktop.
Save ppcano/1434142 to your computer and use it in GitHub Desktop.
First attempt to do awesome collectionview
Mango.IssuesCollectionView = SC.View.extend({
reuseQueue: [],
backView: null,
content: null,
itemViewClass: SC.View,
topRowIndex: null,
bottomRowIndex: null,
refresh: function(){
var content = this.get("content"),
rowHeight = 55,
addedViews = [],
len, rowView;
len = content ? content.get("length") : 0;
this.get("backView").css("height", rowHeight*len);
if(len){
var top = this.get("element").scrollTop;
var height = this.get("element").offsetHeight;
var idx = Math.floor(top/rowHeight);
var diff = Math.ceil((top+height)/rowHeight);
for (idx; idx < diff; idx++) {
if(idx < content.get("length") && idx >= this.get("bottomRowIndex") || idx <= this.get("topRowIndex")){
item = content.objectAt(idx);
var element;
if(this.get("reuseQueue").length){
element = this.get("reuseQueue").popObject();
} else {
view = this.createChildView(this.get("itemViewClass"), {
content: item,
contentIndex: idx
});
view.createElement();
addedViews.push(view);
SC.$(view.get("element")).addClass("issues-collection-row-reuseable");
SC.$(view.get("element")).css("z-index", "8");
SC.$(view.get("element")).css("position", "absolute");
element = view.get("element");
}
SC.$(element).appendTo(SC.$(this.get("element")));
SC.$(element).css("top", rowHeight*idx);
SC.View.views[SC.$(element).attr("id")].set("content", item);
}
}
this.set("topRowIndex", Math.floor(top/rowHeight) ? Math.floor(top/rowHeight)-1 : 0);
this.set("bottomRowIndex", diff);
}
this.get("childViews").replace(0, this.get("childViews").get("length"), addedViews);
},
pushReuseableRowsToQueue: function(){
var rows = SC.$(this.get("element")).find(".issues-collection-row-reuseable");
var top = this.get("element").scrollTop;
var height = this.get("element").offsetHeight;
var idx;
for(idx = 0; idx<rows.length; idx++){
if(!this.isRowInsideViewableArea(rows[idx])){
this.get("reuseQueue").pushObject(rows[idx]);
SC.$(rows[idx]).detach();
}
}
},
isRowInsideViewableArea: function(rowElement){
var elementTop = rowElement.offsetTop;
var elementHeight = rowElement.offsetHeight;
var areaTop = this.get("element").scrollTop;
var areaHeight = this.get("element").offsetHeight;
var aboveViewableArea = elementTop+elementHeight < areaTop;
var belowViewableArea = elementTop > areaTop+areaHeight;
return !aboveViewableArea && !belowViewableArea;
},
didInsertElement: function(){
var that = this;
this.get("element").onscroll = function(){
that.pushReuseableRowsToQueue();
that.refresh();
};
this.set("backView",SC.$("<div id=\""+SC.$(this.get("element")).attr("id")+"-back\" style=\"position: absolute; z-index: 4; width: 100%;\"/>"));
SC.$(this.get("backView")).appendTo(this.get("element"));
this.refresh();
}
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment