Sunday, January 9, 2011

RightJS 2.2 RC Public Test

My dear fellas rightjslings (or whatever the hell we are) I've got some good news for our species! I took a bit of a break from RRTE those holidays and packed ourselves the next major update in the RightJS core, which will go by the number 2.2.0. And I would really like you to play with the thing. Bring some joy and magic in the routine, and start the year with the new shiny toys!

Awrighty, now to the business. You can download the thing from over here (NOTE: there are updates for all the plugins as well).

And as for the changes, there are quite a few of them actually, so let's get through them one by one

Native Fx Support

The first thing that RightJS 2.2 brings is the support of native css-transitions in the visual effects engine. There is not much of changes in the actual API, RightJS will automatically figure everything out and use native features when available.

Currently it runs on Safari, Chrome and FF4. Opera also supports them but I have disabled it for Opera by default, because first of all their thing is buggy (doesn't support say font-size and background-position) and secondly our own, javascript based engine works faster than their native feature :)

Anyhow, if you insist to switch it on in Opera or disable in Webkit/FF4, use the new engine option with your effects, it can be either 'javascript' or 'native'

Class and Wrapper merge

The second biggest change is that the Class and Wrapper units were merged to make an uniformed classes structure where the Class unit is the top parent of everything.

The new Wrapper construction won't work anymore, use the standard new Class calls as you do when you define any other class.

Supercalls On Modules

The other outcome of the Class unit update is that now you can call the $super method not only on inherited classes but with injected modules as well. It kinda looks like that

var Klass = new Class({
method: function() {
return "original";

method: function() {
return this.$super() + "+module1";

method: function() {
return this.$super() + "+module2";

new Klass().method(); // -> "original+module1+module2"

This comes very handy when you need to overload some certain methods without using the actual inheritance. Before, we used to use all sorts of old_method hacks, now it's all nice and civilized.

Builtin Mouseenter/Mouseleave Handling

RightJS 2.2 will come with built in mouseenter/mouseleave events handler. As usual it all handled automagically, just use the 'mouseenter' and 'mouseleave' event names and be happy. Works both ways, directly with elements and via UJS.

$('element').onMouseenter('addClass', 'hovered');
$('element').on('mouseleave', 'removeClass', 'hovered');

"div.something".onMouseenter('addClass', 'hovered');

Better UJS

Another major update is that now UJS handlers got triggered by nested elements as well, just like with the normal dom-events. Basically it means that if you say have a structure like that

<div class="something">
Some text in here
<div>some inner element</div>

If you attach your UJS listener like that

"div.something".onClick('toggleClass', 'clicked');

Then it will get triggered no matter if the user has clicked the div.something element itself or any of its internal elements. No more hacking this stuff around.

Pretty Collections Handling

And one more sweet thing the RightJS 2.2 release will bring. I know you all love the String#on method to handle the UJS features, so I had extended it a bit further. Now you can run basically any Element methods from strings, just like that.


Those basically shortcuts for $$(css_rule).each('method', args); it finds all the elements matching the rule and calls the method on them.


There are more fancy things in there, like various performance optimizations, IE8 was kicked out in the olds module, all CSS3 selectors now work everywhere, and so one and so one. I'll describe everything with the actual release.

For now you just have fun with the new sweet features and come back if you have any troubles.