In Java a property is for example "int getX()" "setX(int i)" this property is called "x"
In JavaScript 1.6 we have support for getters and setters, so we are able to make x a property that calls a different callback when is accessed, so instead of do "var a=this.getX()" we can do "var a=this.x" and it will internal call a getter funtion tomcalculate and return the value
Its all nice and good but.... Internet Explorer dot support Javascript 1.6, in fact they only support 1.2...
Unfortunately there is no way for a JavaScript library to fix that, well some guy did it but using some dirty VBScript methods, thats not good....
So my idea was to provide some kind of Properties support but since we don't have a way to do it as it should lets extend it a little bit.
So with my code we can't make "var a=this.x;" but we can do:
var this.x.get();
this.x.set(v);
//And the neater one
var anim=this.x.getAnimation(options)
this.x.animate(options)//same as before but automatic starts animating
On "options" we specify "from"( optional: if not specified it uses current value), "to" ("where to animate"), duration (the time it takes), interval ( for make animation smother or less smother )
So its the same options as we pass to a Next.Animation, it actually uses it, so you can do with the returned animation: play, reverse etc...
Now.... How to implement a property? Well, i am posting a simple( and a bit stupid example )
<div id="test" style="border: 1px solid black; background-color: red; width: 100px;">0</div>
<button onclick="anim.play();">play</button>
<button onclick="anim.reverse();">reverse</button>
<button onclick="anim.toggle();">toggle</button>
<button onclick="aprop.animate({from:10,to:150});">use animate directly</button>
<script type="text/javascript">
var a=10;
function get(){
return a;
};
function set(value){
var t=document.getElementById("test");
a=value;
t.innerHTML=a;
t.style.width=a+"px";
}
aprop=Next.Number(null,get,set);
anim=aprop.getAnimation({from:10,to:150});
</script>
At the moment only Next.Number is done.
The first parameter is the object were the functions will be applied, this case is null because we the functions are on global scope, the other 2 parameters is the getter and the setter function.
Ok this may look hard to implement and don't look so nice, you are right!
But this property system can be applied on HTMLElement, since the property need to be registed on the thisObject i decided to extend the HTMLElement.extend so it also create the properties
So we have HTMLElement.props that is an array, you can add objects with property options and they will be automatic applied to HTMLElement whan you use Next.byId, $ or other element functions
So we can do:
HTMLElement.props.push({
name:"marginLeft",
getter:function(){
return this.getStyle("margin-left").toFloat();
},
setter:function(v){
this.setStyle("margin-left:"+v+"px");
}
});
Then you can have:
<div style="background-color: blue;" onclick="$(this).marginLeft.animate({to:200});">click</div>
When you click it will increase the margin-left until 100px;
Of course you can also do $(this).marginLeft.get(); to get the value or $(this).marginLeft.set(v); to set the value of it
I think its a great feature, ease to use, much more things can be added like opacity, width left.....
Next thing i want to add to the animator stuff is "by" so we can do $(this).marginLeft.animate({by:100}); and each onclick it would increase more 100 px to margin-left
I hope everyone enjoyed :)
Posts
