[bug?] Both setting the content behavior and content in the tree causes what seems like two DOMElement contents on a single node.
Opened this issue · 3 comments
trusktr commented
Example: https://api-beta.famo.us/codemanager/v1/containers/c3283546-9d8b-4c6d-a3c0-dd8c68fae9b4/share
Inspect element on one of those "spinners" and you'll see they contain more than one famous-dom-element-content
DIV elements.
trusktr commented
I chatted with @Morgantheplant and we thought perhaps a nice result would be that the content
behavior of the node overrides whatever is in the tree?
trusktr commented
@arkadyp Sure. (:
FamousFramework.component('joejoe:experiments', {
behaviors: {
'#root': {
content: `<h1>Hello render glitches!</h1>`,
size: [undefined, undefined],
style: {
'background-color': 'rgba(217, 154, 167, 0.5)',
perspective: '1000px'
}
},
'.hello': {
'inner-html': function(options) {
var content = ''
for (let i = 0, len=options.length; i<len; i+=1) {
content += (`
<option value="${options[i].toLowerCase()}">
Option ${options[i]}!
</option>
`)
}
return content
}
},
'.spinner': {
$repeat: function(spinners) {
return spinners
//return 3 // this would be nice.
},
//$repeat: 3, // or this, when we don't have an array.
content: (` <h2>spinner</h2> `),
size: [100, 100],
origin: [0.5,0.5,0.5],
style: {
'background-color': '#9AD9CC',
'backface-visibility': 'visible'
},
'position-x': function(spinners, $index) {
var i = $index
return 100+(i*100)
},
'position-y': function(spinners, $index) {
var i = spinners[$index] / 12000
return 200+(100*Math.sin(i))
},
'position-z': function(spinners, $index) {
var i = spinners[$index] / 12000
return (200*Math.sin(i))
}
//'rotation-y': function(rotation, $index) {
//return rotation*($index+1);
//}
}
},
states: {
options: [ 'one', 'two', 'three' ],
spinners: [1000,4000,7000,10000,13000,16000,19000,22000,25000,28000,31000,34000]
},
events: {
// life cycle events for child nodes would be great!! Any implications?
//'.spinner': {
//'post-load': function($index, $famousNode) {
//}
//},
$lifecycle: {
'post-load': function($state, $timelines, $famousNode /*, $clock*/) {
//$clock.setInterval(function() {
//$state.set('rotation', $state.get('rotation') + Math.PI, {duration: 5000})
//}, 16)
setTimeout(function() {
$timelines.get('startRotation').start({duration: 8000}, function rotate() {
$timelines.get('rotation').start({duration: 4000}, rotate)
})
}, 1000)
var id = $famousNode.addComponent({
onUpdate: function(time) {
var spinners = $state.get('spinners')
for (let i=0, len=spinners.length; i<len; i+=1) {
spinners[i] = (spinners[i]+500)
}
$state.set('spinners', spinners)
$famousNode.requestUpdateOnNextTick(id)
}
})
$famousNode.requestUpdateOnNextTick(id)
}
}
},
tree: (`
<node id="root">
<node class="spinner">
<div>
<select class="hello"> </select>
</div>
</node>
</node>
`)
})
.timelines({
rotation: {
'.spinner': {
'rotation-y': {
'0%': { value: 0, curve: 'linear' },
'100%': { value: Math.PI * 2, curve: 'linear'}
}
}
},
startRotation: {
'.spinner': {
'rotation-y': {
'0%': { value: 0, curve: 'easeIn' },
'100%': { value: Math.PI * 2, curve: 'linear'}
}
}
}
})