Created
April 18, 2012 21:11
-
-
Save srahim/2416592 to your computer and use it in GitHub Desktop.
PULL TO REFRESH
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
var win = Ti.UI.createWindow(); | |
function formatDate() | |
{ | |
var date = new Date(); | |
var datestr = date.getMonth()+'/'+date.getDate()+'/'+date.getFullYear(); | |
if (date.getHours()>=12) | |
{ | |
datestr+=' '+(date.getHours()==12 ? date.getHours() : date.getHours()-12)+':'+date.getMinutes()+' PM'; | |
} | |
else | |
{ | |
datestr+=' '+date.getHours()+':'+date.getMinutes()+' AM'; | |
} | |
return datestr; | |
} | |
var data = [ | |
{title:"Row 1"}, | |
{title:"Row 2"}, | |
{title:"Row 3"} | |
]; | |
var lastRow = 4; | |
var tableView = Ti.UI.createTableView({ | |
data: data | |
}); | |
win.add(tableView); | |
var border = Ti.UI.createView({ | |
backgroundColor:"#576c89", | |
height:2, | |
bottom:0 | |
}); | |
var tableHeader = Ti.UI.createView({ | |
backgroundColor:"#e2e7ed", | |
width:320, | |
height:60 | |
}); | |
// fake it til ya make it.. create a 2 pixel | |
// bottom border | |
tableHeader.add(border); | |
var arrow = Ti.UI.createView({ | |
backgroundImage:"../images/whiteArrow.png", | |
width:23, | |
height:60, | |
bottom:10, | |
left:20 | |
}); | |
var statusLabel = Ti.UI.createLabel({ | |
text:"Pull to reload", | |
left:55, | |
width:200, | |
bottom:30, | |
height:"auto", | |
color:"#576c89", | |
textAlign:"center", | |
font:{fontSize:13,fontWeight:"bold"}, | |
shadowColor:"#999", | |
shadowOffset:{x:0,y:1} | |
}); | |
var lastUpdatedLabel = Ti.UI.createLabel({ | |
text:"Last Updated: "+formatDate(), | |
left:55, | |
width:200, | |
bottom:15, | |
height:"auto", | |
color:"#576c89", | |
textAlign:"center", | |
font:{fontSize:12}, | |
shadowColor:"#999", | |
shadowOffset:{x:0,y:1} | |
}); | |
var actInd = Titanium.UI.createActivityIndicator({ | |
left:20, | |
bottom:13, | |
width:30, | |
height:30 | |
}); | |
tableHeader.add(arrow); | |
tableHeader.add(statusLabel); | |
tableHeader.add(lastUpdatedLabel); | |
tableHeader.add(actInd); | |
tableView.headerPullView = tableHeader; | |
var pulling = false; | |
var reloading = false; | |
function beginReloading() | |
{ | |
// just mock out the reload | |
setTimeout(endReloading,2000); | |
} | |
function endReloading() | |
{ | |
// simulate loading | |
for (var c=lastRow;c<lastRow+10;c++) | |
{ | |
tableView.appendRow({title:"Row "+c}); | |
} | |
lastRow += 10; | |
// when you're done, just reset | |
tableView.setContentInsets({top:0},{animated:true}); | |
reloading = false; | |
lastUpdatedLabel.text = "Last Updated: "+formatDate(); | |
statusLabel.text = "Pull down to refresh..."; | |
actInd.hide(); | |
arrow.show(); | |
} | |
tableView.addEventListener('scroll',function(e) | |
{ | |
var offset = e.contentOffset.y; | |
if (offset < -65.0 && !pulling && !reloading) | |
{ | |
var t = Ti.UI.create2DMatrix(); | |
t = t.rotate(-180); | |
pulling = true; | |
arrow.animate({transform:t,duration:180}); | |
statusLabel.text = "Release to refresh..."; | |
} | |
else if((offset > -65.0 && offset < 0 ) && pulling && !reloading) | |
{ | |
pulling = false; | |
var t = Ti.UI.create2DMatrix(); | |
arrow.animate({transform:t,duration:180}); | |
statusLabel.text = "Pull down to refresh..."; | |
} | |
}); | |
tableView.addEventListener('dragEnd', function() | |
{ | |
if(pulling && !reloading) | |
{ | |
reloading = true; | |
pulling = false; | |
arrow.hide(); | |
actInd.show(); | |
statusLabel.text = "Reloading..."; | |
tableView.setContentInsets({top:60},{animated:true}); | |
tableView.scrollToTop(-60,true); | |
arrow.transform=Ti.UI.create2DMatrix(); | |
beginReloading(); | |
} | |
}); | |
win.open(); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment