-
-
Save yomybaby/1549192 to your computer and use it in GitHub Desktop.
FaceBook slide in views
This file contains 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
// Create a new project and copy this code into app.js | |
// if you use this code, please give me credit :) | |
function JustAView(text){ | |
var view = Ti.UI.createView({ | |
backgroundColor:"#"+((1<<24)*Math.random()|0).toString(16), | |
width:200, | |
height:100 | |
}); | |
var label = Ti.UI.createLabel({ | |
text:text | |
}); | |
view.add(label); | |
this.view = view; | |
} | |
function SecondaryView(win){ | |
var WIDTH = win.size.width; | |
var HEIGHT = win.size.height; | |
var view = Ti.UI.createView({ | |
height:HEIGHT, | |
width:WIDTH, | |
backgroundColor:'green', | |
left: WIDTH - 40 | |
}); | |
var navBar = Ti.UI.createView({ | |
left:0,right:0,top:0,height:44, | |
backgroundColor:'blue' | |
}); | |
var slideButton = Ti.UI.createView({ | |
top:0,bottom:0,left:0,width:44, | |
backgroundColor:'red' | |
}); | |
navBar.add(slideButton); | |
view.add(navBar); | |
var viewIsIn = false; | |
function moveOut(){ | |
view.animate({left:WIDTH - 40}, function(){ | |
view.left = WIDTH - 40; | |
viewIsIn = false; | |
}); | |
} | |
function moveIn(){ | |
view.animate({left: 0}, function(){ | |
view.left = 0; | |
viewIsIn = true; | |
}); | |
} | |
var fingerPoint = null; | |
var oldLeft = 0; | |
function touchStart(e){ | |
var halfHeight = 0; | |
var halfWidth = 0; | |
var source = e.source; | |
if((source == view || source == slideButton) && view.left >= 0){ | |
oldLeft = view.left; | |
if(fingerPoint == null){ | |
fingerPoint = view.left - e.globalPoint.x; | |
} | |
var cords = source.convertPointToView({x:e.x,y:e.y},win); | |
view.left = cords.x+fingerPoint; | |
view.top = 0; | |
} | |
} | |
win.addEventListener("touchmove", touchStart); | |
win.addEventListener("touchstart", touchStart); | |
win.addEventListener('touchend', function(e){ | |
var source = e.source; | |
if(source == view || source == slideButton){ | |
if(view.left > oldLeft){ | |
moveOut(); | |
} else | |
if(view.left < oldLeft){ | |
moveIn(); | |
} else { | |
if(viewIsIn == true){ | |
moveOut(); | |
} | |
if(viewIsIn == false){ | |
moveIn(); | |
} | |
} | |
fingerPoint = null; | |
} | |
}); | |
var mainView = null; | |
function addSubView(a){ | |
if(mainView != null){ | |
view.remove(mainView); | |
mainView = null; | |
}; | |
mainView = a; | |
view.add(mainView); | |
a = null; | |
} | |
this.addSubView = addSubView; | |
this.view = view; | |
this.moveOut = moveOut; | |
this.moveIn = moveIn; | |
} | |
function FirstView(){ | |
var win = Ti.UI.createWindow({ | |
backgroundColor:'blue' | |
}); | |
var ViewController = new SecondaryView(win); | |
var tableData = []; | |
for(var i = 0; i < 10; i++){ | |
tableData.push({ | |
title:'Row #'+(i+1) | |
}); | |
} | |
var table = Ti.UI.createTableView({ | |
top:0,left:0, | |
bottom:0,right:40, | |
search:Ti.UI.createSearchBar(), | |
data: tableData | |
}); | |
tableData = null; | |
table.addEventListener('click', function(e){ | |
var v = new JustAView(e.row.title); | |
ViewController.addSubView(v.view); | |
ViewController.moveIn(); | |
v = null; | |
}); | |
win.add(table); | |
win.add(ViewController.view); | |
this.open = win.open; | |
} | |
var win = new FirstView(); | |
win.open(); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment