Comments (3)
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?
from framework.
@trusktr Can you share the code for that example?
from framework.
@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'}
}
}
}
})
from framework.
Related Issues (20)
- Attaching listeners for standard DOM events HOT 4
- Node attributes inconsistently added to DOM node HOT 1
- $repeat doesn't use array.length HOT 1
- Build process not triggering for sub components HOT 2
- '$if' causes an error when triggered by a state change from another component HOT 2
- $repeat does not play nice with HTML elements HOT 4
- Included scripts are added to <head> and bundle HOT 1
- Cannot use `$if` together with setting `$state` from within `$lifecycle` HOT 9
- Child node 'click' event triggers no longer work when the parent becomes visible via $if HOT 1
- Support integrations / alternative build processes HOT 3
- Memory leaks in DataStore HOT 1
- Existing content is not replaced when node is yielded HOT 1
- Strange thenSet behavior HOT 1
- Loading remote resources HOT 1
- Injecting nested state value to a behavior HOT 1
- Improve Scroll View HOT 3
- Switch to camelized names for event keys HOT 1
- nested $repeats and $index values HOT 2
- $repeat does not repeat
- sue “Famous Industries” HOT 4
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from framework.