Next! - Property again

I talked before about Next.Property, today i am going to talk about it again

I have changed allot Property lets make a diagram of it:

Property
#get(); //get the value
#set(v, [delay] ); //set the value, optionally it can wait some time before do it

+Bool
#set( true|false|1|0|-1);//set the value , -1 toggles
#is(); //check the property
#toggle(); //inverts the value

+String
#concat(str );//concats the string

+AnimatedProperty
#getAnimation(options ); //
#animate(options );//
#animateTo(to, [options] );//
#animateBy(by, [options] );//
#isAnimating

+Number

The Properies itself may look something stupid, but the main idea of them is to register on objects

So for example to deal with the visibility of an element we could have:

As in Java:

• isVisible();//true|false
• setVisible(true|false);

As in PrototypeJS

• visible();//true|false
• show();//make visible
• hide();//hide it
• toggle();// toggles visibility

With Next.bool we do:

• visible.is();//true|false
• visible.set(true|false|1|0|-1);// 0 sets to false, 1 to true and -1 toggle
• visible.toggle();//toggle visibility, same as visible.set(-1)

Now with Next.Number we can have some other funny things

• width.get();//returns the with of an element
  
• width.set(width);//set the width
• animate... all animation stuff can be used to animate this property, making very neat effects

$(this).opacity.animateTo(0,{oncomplete:function(){
this.visible.set(false);
}});
It will fade out and then hide the element

So i might add a function like

HTMLElement.prototype.hide=function(effect){
if (effect=="fade"){
this.opacity.animateTo(0,{oncomplete:function(){
this.visible.set(false);
}});
}else{
this.visible.set(false);
}
};
HTMLElement.prototype.show=function(effect){
this.visible.set(true);
if (effect=="fade"){
this.opacity.animateTo(1);
}
};

So we can do $(this).hide("fade"); and it does the same as the code before, fade the element to 0 and then hide it, $(this).show("fade"); would make the element visible and fade to 1
$(this).hide("blind"); or $(this).hide("slide"); are some other things that culd be implemented

Theres allot of good implementations for Properties, and on Elements they are very usefull

The implementation is on progress!!

Blogged with Flock

Next! - Property

Hi, now i am going to present you Next.Property!

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

Next! - Animation

Hi again!

Theres other thing on air...

Animation!!

So i decided to implement a basic Animation system, it might look stupid and uneusefull, but when i post other thing that will be based on this you will understand.

The animator class is simple to use

var anim = new Next.Animation({onStep:function(v){
//v will be between 0-1
}});

You can specify other options like:
duration - the time the animation will take - defaut=1000
interval - the interval between animation - default=20
onStep - the callback function called each step of animation
onComplete - the callback function called when animation ends

Now what you can do with "anim" object?

seekFromTo(from,to)//seek from one position to other
seekTo(to)//seek to the position
jumpTo(to)//jump to position without animate
toggle()//toggle direction
play()//play from 0 to 1
reverse()//play from 1 to 0
stop()//stop animation

And for now its all i have on animation, it might need some fine tune to fix some stuff

You can see the code, just checkout the code on svn!