Proof of Concept for Titanium implementation of Facebook/Path sidebar

app.js

Titanium.UI.setBackgroundColor('red');


// root
var rootWin = Ti.UI.createWindow({
	title: 'Root Win',
	backgroundColor: 'gray',
	tabBarHidden: true,
	navBarHidden: true
});
var rootTab = Ti.UI.createTab({
	title: 'Root Tab',
	window: rootWin
});
var rootTabGroup = Ti.UI.createTabGroup({
	tabs: [ rootTab ],
	zIndex: 0
});
var rootTable = Ti.UI.createTableView({
	data: [ 
		{ title: 'Content 1' }, 
		{ title: 'Content 2' } ,
		{ title: 'Content 3' } 
	]
});
rootWin.add(rootTable);

// slideable
var slideBtn = Ti.UI.createButton({
	title: '|||',
	width: 60,
	height: 40,
	top: 5,
	left: 5
});
var slideWin = Ti.UI.createWindow({
	title: 'Slide Win',
	backgroundColor: 'black',
	tabBarHidden: true,
	navBarHidden: true
});
var slideTitle = Ti.UI.createLabel({
	text: 'Content 1',
	textAlign: 'center',
	font: {
		fontWeight: 'bold',
		fontSize: 18
	},
	color: 'white',
	width: 180,
	height: 50,
	top: 0,
	left: 70
});
var slideTab = Ti.UI.createTab({
	title: 'Slide Tab',
	window: slideWin
});
var slideTabGroup = Ti.UI.createTabGroup({
	tabs: [ slideTab ],
	zIndex: 1
});
var slideOutAn = Ti.UI.createAnimation({
	left: 280,
	duration: 400
});
var slideInAn = Ti.UI.createAnimation({
	left: 0,
	duration: 300
});
slideWin.add(slideTitle);
slideWin.add(slideBtn);

// contents
var content1 = Ti.UI.createView({
	backgroundColor: 'green',
	top: 50,
	left: 0,
	right: 0,
	bottom: 0
});
var content2 = Ti.UI.createView({
	backgroundColor: 'yellow',
	top: 50,
	left: 0,
	right: 0,
	bottom: 0
});
var content3 = Ti.UI.createView({
	backgroundColor: 'blue',
	top: 50,
	left: 0,
	right: 0,
	bottom: 0
});
slideWin.add(content1);
slideWin.add(content2);
slideWin.add(content3);
content2.hide();
content3.hide();

// open things
rootTabGroup.open();
slideTabGroup.open();

// slide things
var slideToggle = false;
var isSwiping = false;
slideBtn.addEventListener('click', function (e) {
	slide();
});
slideWin.addEventListener('swipe', function (e) {
	if (isSwiping) { return; }
	isSwiping = true;

	Ti.API.info(e);

	if (e.direction === 'right' && !slideToggle) {
		slide();
	} else if (e.direction === 'left' && slideToggle) {
		slide();
	}
});
slideWin.addEventListener('touchend', function (e) {
	isSwiping = false;
})
var slide = function () {
	slideToggle = !slideToggle;
	if (slideToggle) {
		slideTabGroup.animate(slideOutAn);
	} else {
		slideTabGroup.animate(slideInAn);
	}
};

// switch content
rootTable.addEventListener('click', function (e) {
	if (!(e && e.row && e.row.title)) { return; }
	slideTitle.text = e.row.title;
	switch (e.index) {
		case 0:
			content1.show();
			content2.hide();
			content3.hide();
			break;
		case 1:
			content1.hide();
			content2.show();
			content3.hide();
			break;
		case 2:
			content1.hide();
			content2.hide();
			content3.show();
			break;
		default: break;
	}
	slide();
});