Open senquan opened 8 years ago
var Dismount = function(node) {
var aNodes = [];
if ( !(node instanceof famous.core.Node) )
throw "node not a Famous#Node";
var f = function(current) {
aNodes.push(current);
var aChildren = current.getChildren();
for ( var i in aChildren )
f(aChildren[i]);
};
f(node);
while ( aNodes.length ) {
var x = aNodes.pop();
if ( x.isMounted())
x.dismount();
}
}
var FamousEngine = require('famous/core/FamousEngine'); var Node = require('famous/core/Node'); var DOMElement = require('famous/dom-renderables/DOMElement');
var rootNode = FamousEngine.createScene().addChild(); FamousEngine.init();
var baseEl = new DOMElement(rootNode, { classes: ['root'], properties: { 'background-color': '#fff' } });
var currentContentId; var currentContent;
//
var btn1Node = rootNode.addChild(); var btn2Node = rootNode.addChild();
var btn1El = new DOMElement(btn1Node, { classes: ['btn'], content: 'First Content', properties: { 'background-color': 'blue' } }); btn1Node.setSizeMode(1,1) .setAbsoluteSize(150, 60) .setAlign(0, 0, 0) .setMountPoint(0, 0, 0);
var btn2El = new DOMElement(btn2Node, { classes: ['btn'], content: 'Second Content', properties: { 'background-color': 'green' } }); btn2Node.setSizeMode(1,1) .setAbsoluteSize(150, 60) .setAlign(0, 0, 0) .setMountPoint(-1.1, 0, 0);
// btn1Node.addUIEvent('click'); btn2Node.addUIEvent('click');
btn1Node.addComponent({ onReceive: function(e, payload) { if(e === 'click') { showContent(1); } }.bind(this) }); btn2Node.addComponent({ onReceive: function(e, payload) { if(e === 'click') { showContent(2); } }.bind(this) });
var contentNode = rootNode.addChild(); var contentEl = new DOMElement(contentNode, { classes: ['content'], properties: { 'background-color': '#000', 'top': '100px' } }); contentNode.setSizeMode(1,1) .setAbsoluteSize(800, 800) .setAlign(0, 0, 0) .setMountPoint(0, 0, 0);
function showContent(id){
}
function createContent(id){ var content = new Node(); new DOMElement(content, { classes: ['content-body'] }); if(id == 1) { var line1Node = content.addChild(); new DOMElement(line1Node, { classes: ['content-line1'], content: 'Content1 line1', properties: { 'color': '#fff', 'background-color': 'blue' } }); line1Node.setSizeMode(1,1) .setAbsoluteSize(300, 50) .setAlign(0, 0, 0) .setMountPoint(0, 0, 0);
}