how to implement mobile design hamburger side menu with famous? - famo.us

Question

What's the best way with Famous to implement these well known mobile app design patterns?
!) "hamburger" and side-menu like this jasny example ?
2 )Table-View, transitioning to full-screen details page, a little like:
http://goratchet.com/examples/app-movies/
Thanks!

Answer 1

You should be aware that the famo.us university timbre menu lesson is now available. Here is a version I did long before that came out. It is more of the one file here are the critical issues implementations than the 27 class version. Following this I did eventually produce an abstraction of the menu into a generalized tool. There is actually very little difference between the menu below and a standard (one level deep) menu with the exception of what transitions you use. Here is a drag-to-uncover menu. You could of course trigger the open and/or close with a click as well... you can also see the code and play it live at codefamo.us.
/*globals define*/
define(function(require, exports, module) {
'use strict';
// import dependencies
var Engine = require('famous/core/Engine');
var Surface = require('famous/core/Surface');
var Transform = require('famous/core/Transform');
var StateModifier = require('famous/modifiers/StateModifier');
var Easing = require('famous/transitions/Easing');
var ContainerSurface = require('famous/surfaces/ContainerSurface');
var EventHandler = require('famous/core/EventHandler');
var MouseSync = require('famous/inputs/MouseSync');
var TouchSync = require('famous/inputs/TouchSync');
var Draggable = require('famous/modifiers/Draggable');
var mainContext = Engine.createContext();
// Content Page...
var coverState = true;
var coverPos = 0;
//var coverMod = new StateModifier();
var coverDrag = new Draggable({
projection: 'x'
});
var coverSurface = new Surface({
size:[undefined,undefined],
content:'click to open',
properties:{
color:'white',
backgroundColor:'#44f',
zIndex:'3'
}
});
//mainContext.add(coverMod).add(coverDrag).add(coverSurface);
mainContext.add(coverDrag).add(coverSurface);
coverDrag.activate();
function coverReset() {
coverDrag.setPosition([0,0],
{ duration : 100, curve: 'easeInOut' },
function() {
coverSurface.setContent('drag to open');
coverPos = 0;
}
);
coverState = true;
}
function coverDrawOut() {
coverDrag.setPosition([200,0],
{ duration : 600, curve: 'easeInOut' },
function() {
coverSurface.setContent('drag to close');
coverPos = 200;
}
);
coverState=false;
}
coverDrag.on('update',function(data) {
//console.log(data);
if(data.position[0]>60) {
menuFadeIn();
}
});
coverDrag.on('end',function(data) {
if(data.position[0]<100) {
coverReset();
menuFadeOut();
}else {
coverDrawOut();
menuFadeIn();
}
});
coverSurface.pipe(coverDrag);
// Menu Items...
var todaysSpecials = ['pizza','hamburger','french fries','ice cream'];
var itemSurfs = [];
var itemMod1 = [];
var itemMod2 = [];
// Create menu item surfaces, modifiers, etc.
for (var i=0;i<todaysSpecials.length;i++) {
itemSurfs[i] = new Surface({
size: [150, 30],
content: '<span class="entypo">☰</span>'+todaysSpecials[i],
properties: {
color: 'white',
textAlign: 'center',
backgroundColor: '#FA5C4F',
zIndex:'1'
}
});
itemSurfs[i].menuData = {
id:i,
text: todaysSpecials[i]
};
//console.log(itemSurfs[i]);
itemMod1[i] = new StateModifier();
itemMod2[i] = new StateModifier();
mainContext.add(itemMod1[i]).add(itemMod2[i]).add(itemSurfs[i]);
itemSurfs[i].on('click',function(mouseEventArgs){
alert('Buy some really good '+mouseEventArgs.origin.menuData.text);
});
};
var menuState=true;
// make menu go away
function menuFadeOut() {
if(menuState) {
for (var i=0;i<todaysSpecials.length;i++) {
itemMod1[i].setTransform(Transform.translate(-150, 200+i*40, 0));
itemMod2[i].setTransform(Transform.rotateZ(-Math.PI/5.5));
}
menuState=false;
}
}
// bring menu in
function menuFadeIn() {
if(!menuState) {
for (var i=0;i<todaysSpecials.length;i++) {
itemMod1[i].setTransform(Transform.translate(0,100+i*40, -1),{ duration : 300+i*200, curve: 'easeInOut' });
itemMod2[i].setTransform(Transform.rotateZ(-Math.PI/5.5));
}
menuState=true;
}
}
// app initial conditions...
coverReset();
menuFadeOut();
});