Skip to content

Instantly share code, notes, and snippets.

@pec1985
Created December 30, 2011 18:49
Show Gist options
  • Save pec1985/1540988 to your computer and use it in GitHub Desktop.
Save pec1985/1540988 to your computer and use it in GitHub Desktop.
FaceBook slide in views
// 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();
@sindresorhus
Copy link

@pec1985 Any chance to get this fixed?

@pec1985
Copy link
Author

pec1985 commented Mar 6, 2012

Not right now, this is just an example. Let me know when you find a fix and I'll included it here, or fork it it you want to. I don't have time now.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment