famo.us: can I animate the header/footer heights of a header footer layout?

Question

I want to have my header and footer almost take up the entire screen (there will just be a thin line left in the middle which will contain a textbox. If the user enters the right password, I want the textbox to disappear and the header and footer to gradually get shorter (making more room for content to appear in the center of the screen).

1. Is it possible to apply a transition to the height of the header and footer on a HeaderFooterLayout?
2. How do I show a typical password box where the characters all show as *'s?

Answer 1

Like many animations that are not supported by default, you can add a transition by using the Transitionable class.. Here is an example that expands the header when you click it..

var Engine             = require("famous/core/Engine");
var Surface            = require("famous/core/Surface");
var HeaderFooterLayout = require("famous/views/HeaderFooterLayout");
var Transitionable     = require("famous/transitions/Transitionable");
var Easing             = require("famous/transitions/Easing");

var mainContext = Engine.createContext();

var layout = new HeaderFooterLayout({
    headerSize: 100,
    footerSize: 50
});

var header = new Surface({
    size: [undefined, undefined],
    content: "Header",
    classes: ["red-bg"],
    properties: {
        lineHeight: "100px",
        textAlign: "center"
    }
})

var open = false;

header.on("click",function(){

  var transition = {duration: 400, curve: Easing.inOutQuad };

  var start =   open ? 200 : 100 ;
  var end   =   open ? 100 : 200 ;

  open = !open;

  var transitionable = new Transitionable(start);

  var prerender = function(){ layout.setOptions({ headerSize: transitionable.get()} ) };

  var complete = function(){ Engine.removeListener('prerender', prerender) };

  Engine.on('prerender', prerender);

  transitionable.set(end, transition, complete);

});

layout.header.add(header);

layout.content.add(new Surface({
    size: [undefined, undefined],
    content: "Content",
    classes: ["grey-bg"],
    properties: {
        lineHeight: window.innerHeight - 150 + 'px',
        textAlign: "center"
    }
}));

layout.footer.add(new Surface({
    size: [undefined, 50],
    content: "Footer",
    classes: ["red-bg"],
    properties: {
        lineHeight: "50px",
        textAlign: "center"
    }
}));

mainContext.add(layout);

As for the password field, you simply create an InputSurface and set it's type to password..

inputSurface = new InputSurface({
  size:[200,60],
  type: 'password'
});

Answer 2

^ Watch out for performance issues when using Transitionable on headerSize. Especially iPhones with iOS 7 seem to be acting glitchy.

You can also animate header / footer size via CSS transitions, although it's a bit of a bubblegum fix and has it's pitfalls:

var headerContainer = new ContainerSurface({
    size: [undefined, 50],
    classes: ['my-header']
  });

layout.header.add(headerContainer);

headerContainer.setSize([undefined,300]);

Then in CSS:

.my-header { transition: 200ms all; }