Created
February 15, 2013 15:42
-
-
Save manumaticx/4961175 to your computer and use it in GitHub Desktop.
http://stackoverflow.com/questions/10882487/appcelerator-titanium-facebook-like-menu
original code: https://github.com/mpociot/titanium-facebook-slide-menu
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// 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