Skip to content

Instantly share code, notes, and snippets.

@alexburner
Created December 13, 2011 22:43
Show Gist options
  • Save alexburner/1474292 to your computer and use it in GitHub Desktop.
Save alexburner/1474292 to your computer and use it in GitHub Desktop.
Proof of Concept for Titanium implementation of Facebook/Path sidebar
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();
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment