Skip to content

why DomElement not remove form dom tree when removeChild() #501

@senquan

Description

@senquan

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;

}

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions