IceBeat

Con la llegada de los eventos personalizables nos encontramos con mouseenter y mouseleave, son eventos preparados que solucionan los errores de mouseover y mouseout.

Estos eventos se suelen aplicar para cambiar el color de celdas o hacer rollover de imágenes, pero cuando tienen hijos esos elementos el evento mouseover/mouseout se pierden y hacen unos extraños. Si ves por algún sitio acordeones que no cierran bien, intermitencia de colores o tooltips que aparecen y desaparecen es por este fallo.

Hace poco tiempo han sacado la versión 1.0 y ahora mismo en el track hay increíbles novedades en la librería, se nota que esta creciendo. Lo bueno es que la podemos probar, lo malo que son inestables y cada X tiempo van moviendo el código para optimizarlo.

Interesante sobre todo el nuevo manejo de ´Class´, ahora se pueden pasar objetos y funciones, antes solo se podía pasar funciones donde se creaba ´this.parent´, ahora si pasas un objeto se unen tanto de la clase heredada como de la nueva. Esto lo podemos ver en todo mootools con el objeto ´options´.

También han añadido soporte para xpath y en la clase Ajax se ha cambiado postBody por data para poder enviar un objeto tanto por post como por get (esto hacia falta sin tenernos que complicar la vida).

Y unas de las cosas que más me han gustado es la creación de eventos, esto me hacia falta para el script backbutton, ahora no tengo que complicarme la vida. Añades un objeto con el nombre del evento en Element.Events y puedes pasar el tipo por el que se cambiara, una función initialize y otra llamada map que se ejecuta cada vez que se dispara el evento.

Element.Events.extend({

'mouseenter': {
    type: 'mouseover',
    map: function(event){
        event = new Event(event);
        if (event.relatedTarget == this || this.hasChild(event.relatedTarget)) return;
        this.fireEvent('mouseenter', event);
    }
}

});

Sin duda mootools ayuda al desarrollador a crear con estilo (y sobre todo fácil).

Mi amigo Andrés anda liandola como siempre, se gana a pulso su nombre.

Ha creado HeySilver, una adaptación de Quicksilver a la web. Esta en fase beta pero la idea me resulta fenomenal, me encanta este tipo de experimentos.

HeySilver

Actualizado el script a mootools 1.0, por lo visto con los nuevos cambios window.Growl remplazaba al objeto Growl y desaparecía todas sus funciones.

Window.Growl

Vamos a ver en plan rápido algunas de las maravillas que se han incluido en esta nueva versión, algunas se pedían a gritos y otras han ido surgiendo según la necesidad.

Utility.js

Ahora tenemos soporte para detectar el navegador del cliente.

//devuelve true
window.ie7

Array.js

Por fin tenemos map, filter y compañia, son una gozada, también han incluido la función $each para poder iterar argumentos.

Element.js

El día que se publico en el foro la gente se emociono, es lógico ya que Valerio la había liado, es cierto que en jQuery ya viene implementado, pero bueno, nosotros también podemos soñar.

La joya es $$, con esta función podemos acceder al contenido y aplicar las funciones de Element sin necesidad de iterar.

//Antes haciamos
$$('.class').each(function(el) {
    el.addClass('red');
});

//Ahora
$$('.class').addClass('red');

Event.js

Esto se pedía a gritos y por fin tenemos una clase para manejar los eventos, incluso con soporte para la rueda del ratón.

function myFunction(event){
    alert(event.clientx) //returns the coordinates of the mouse..
};
myElement.onclick = myFunction.bindWithEvent(myElement);

or

//si lo queremos usar de otra forma.
myElement.onclick = function(event){
    var event = new Event(event);
};

Funtcion.js

Han añadido la función create para poder crear funciones a medida, de paso han metido attempt que es como el Try.These de prototype.

Color.js

Clase para poder crear y manipular los colores, añadir saturación , mezclar, etc.

var black = new Color('#000');
var purple = new Color([255,0,255]);
// mix black with white and purple, each time at 10% of the new color
var darkpurple = black.mix('#fff', purple, 10);
$('myDiv').setStyle('background-color', darkpurple);

Common.js

Aquí también hay un par de maravillas, por un lado tenemos la clase Events, que es para añadir eventos y poderlos dispararlos en las clases, no son eventos como click y tal, sino eventos para las clases, como onStart, onComplete.

var myFx = new Fx.Style('element', 'opacity').addEvent('onComplete', function(){
    alert('the effect is completed');
}).addEvent('onComplete', function(){
    alert('I told you the effect is completed');
});

myFx.start(0,1);

Luego para acompañar a esta clase han creado Options, que convierte todos las opciones en evento si comienzan por "on". Todo esto se ve muy bien echando un vistazo a Fx.base o XHR.

Dom.js

Ojalá tuviéramos el mismo poder que jQuery. Aunque si no hacemos cosas muy complicadas accederemos al DOM de forma sencilla.

Hash.js

Esto no lo echaba de menos, pero siempre viene bien un manejador para los objetos (poder seleccionar los keys, values y esas cosas)

var hash = new Hash({a: 'hi', b: 'world', c: 'howdy'});
hash.remove('b'); // b is removed.
hash.set('c', 'hello');
hash.get('c'); // returns 'hello'
hash.length // returns 2 (a and b)

Cosa rápida para ir entrando en calor no?. Aun nos queda la otra mitad del código.