Saturday, January 26, 2008

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