FaceBook slide in views

app.js

// 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();

I tried adding a NavigationGroup to the ViewController using the addSubView method, but it doesn't seem to register events on the navBar, so nothing happens when I drag or touch on the navBar of the navGroup, which is useful. Any thoughts on how to do that?

Also, found a bug, if you drag the view to the left you'll see that it most times shows some pixels of the blue background on the right side.

@pec1985 Any chance to get this fixed?

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.