Giters

Famous / engine

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

why DomElement not remove form dom tree when removeChild()

senquan opened this issue · comments

commented

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){

if(currentContent != id) {
    if(currentContent) contentNode.removeChild(currentContent);
    currentContent = createContent(id);
    contentNode.addChild(currentContent);
}
currentContentId = 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);

    var line1SubNode = line1Node.addChild();
    new DOMElement(line1SubNode, {
        classes: ['content1-line1-sub1'],
        properties: {
            'background-color': '#fff'
        }
    });
    line1SubNode.setSizeMode(1,1)
        .setAbsoluteSize(150, 20)
        .setAlign(1, 1, 0)
        .setMountPoint(1, 1, 0);    

    var line2Node = content.addChild();
    new DOMElement(line2Node, {
        classes: ['content-line2'],
        content: 'Content1 line2',
        properties: {
            'color': '#fff',
            'background-color': 'blue'
        }
    });
    line2Node.setSizeMode(1,1)
        .setAbsoluteSize(300, 50)
        .setAlign(0, 0, 0)
        .setMountPoint(0, -1.1, 0);
}else if( id == 2) {
    var line1Node = content.addChild();
    new DOMElement(line1Node, {
        classes: ['content-line1'],
        content: 'Content2 line1',
        properties: {
            'color': '#fff',
            'background-color': 'green'
        }
    });
    line1Node.setSizeMode(1,1)
        .setAbsoluteSize(300, 50)
        .setAlign(0, 0, 0)
        .setMountPoint(0, 0, 0);

    var line2SubNode = line1Node.addChild();
    new DOMElement(line2SubNode, {
        classes: ['content2-line1-sub1'],
        content: 'Content2 line1 sub',
        properties: {
            'color': '#000',
            'font-size': '12px',
            'background-color': 'yellow'
        }
    });
    line2SubNode.setSizeMode(1,1)
        .setAbsoluteSize(150, 20)
        .setAlign(1, 1, 0)
        .setMountPoint(1, 1, 0);
}
return content;

}

commented 
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();
    }
}