Skip to content

Instantly share code, notes, and snippets.

@manumaticx
Created February 15, 2013 15:42
Show Gist options
  • Star 1 You must be signed in to star a gist
  • Fork 2 You must be signed in to fork a gist
  • Save manumaticx/4961175 to your computer and use it in GitHub Desktop.
Save manumaticx/4961175 to your computer and use it in GitHub Desktop.
// ALPHABYTES
// Facebook like menu window
var leftMenu = Ti.UI.createWindow({
backgroundColor: 'red',
top: 0,
left: 0,
width: 150,
zIndex: 1
});
// define views for the menu
var row1view = Ti.UI.createView({
backgroundColor: 'green'
});
row1view.add(Ti.UI.createLabel({
text: 'Row 1'
}));
var row2view = Ti.UI.createView({
backgroundColor: 'red'
});
row2view.add(Ti.UI.createLabel({
text: 'Row 2'
}));
// etc...
// assign each view to a row
var data = [{title:"Row 1", _view: row1view},{title:"Row 2", _view: row2view},{title:"Row 3"},{title:"Row 4"}];
var tableView = Ti.UI.createTableView({ data: data });
tableView.addEventListener('click', function(e){
if (e.rowData._view != undefined){
// remove old view
win1.remove(win1._view);
// tell the win the new one
win1._view = e.rowData._view;
// add the new win
win1.add(win1._view);
}
// close the menu
win.animate(animateRight);
isToggled = false;
});
leftMenu.add(tableView);
leftMenu.open();
// Facebook like menu window
var rightMenu = Ti.UI.createWindow({
backgroundColor: 'red',
top: 0,
right: 0,
width: 150,
zIndex: 1
});
var data = [{title:"Row 1"},{title:"Row 2"},{title:"Row 3"},{title:"Row 4"}];
var tableView = Ti.UI.createTableView({ data: data });
rightMenu.add(tableView);
rightMenu.open();
// animations
var animateLeft = Ti.UI.createAnimation({
left: 150,
curve: Ti.UI.iOS.ANIMATION_CURVE_EASE_OUT,
duration: 500
});
var animateRight = Ti.UI.createAnimation({
left: 0,
curve: Ti.UI.iOS.ANIMATION_CURVE_EASE_OUT,
duration: 500
});
var animateNegativeLeft = Ti.UI.createAnimation({
left: -150,
curve: Ti.UI.iOS.ANIMATION_CURVE_EASE_OUT,
duration: 500
});
var win = Titanium.UI.createWindow({
left: 0,
zIndex: 10
});
var win1 = Titanium.UI.createWindow({
backgroundColor: 'white',
title: 'Facebook menu',
left: 0,
zIndex: 10
});
// optional welcome view
var view1 = Ti.UI.createView({
backgroundColor: 'blue'
});
view1.add(Ti.UI.createLabel({
text: 'hello'
}));
win1.add(view1);
win1._view = view1;
var nav = Titanium.UI.iPhone.createNavigationGroup({
window: win1,
left: 0,
width: Ti.Platform.displayCaps.platformWidth
});
var button = Ti.UI.createButton({
title: 'm',
left: 10,
width: 30,
height: 30,
top: 10
});
var button2 = Ti.UI.createButton({
title: 'm',
right: 10,
width: 30,
height: 30,
top: 10
});
var touchStartX = 0;
var touchStarted = false;
win1.addEventListener('touchstart',function(e){
touchStartX = parseInt(e.x,10);
});
win1.addEventListener('touchend',function(e){
touchStarted = false;
if( win.left < 0 ){
if( win.left <= -140 ){
win.animate(animateNegativeLeft);
isToggled = true;
} else {
win.animate(animateRight);
isToggled = false;
}
} else {
if( win.left >= 140 ){
win.animate(animateLeft);
isToggled = true;
} else {
win.animate(animateRight);
isToggled = false;
}
}
});
win1.addEventListener('touchmove',function(e){
var x = parseInt(e.globalPoint.x, 10);
var newLeft = x - touchStartX;
if( touchStarted ){
if( newLeft <= 150 && newLeft >= -150)
win.left = newLeft;
}
// Minimum movement is 30
if( newLeft > 30 || newLeft < -30 ){
touchStarted = true;
}
});
nav.add(button);
nav.add(button2);
win.add(nav);
win.open();
var isToggled = false;
button.addEventListener('click',function(e){
if( !isToggled ){
win.animate(animateLeft);
isToggled = true;
} else {
win.animate(animateRight);
isToggled = false;
}
});
button2.addEventListener('click',function(e){
if( !isToggled ){
win.animate(animateNegativeLeft);
isToggled = true;
} else {
win.animate(animateRight);
isToggled = false;
}
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment