IceBeat

Por fin han escuchado las palabras de los usuarios y han añadido las funciones para ocultar y mostrar capas como existe en Prototype.

Ayer mismo andaba liado escribiendo y no daba con la tecla para ello, pero claro en parte tienen razón, para que un display soso cuando puedes usar Fx.Slide.

Han llegado a un acuerdo, usan Element.toggle con Fx.Slide.

Ejemplo:

var fx = new Fx.Slide($('element'));
fx.toggle();

//Nueva versión
$('element').toggle();

Esta clase forma parte de un proyecto que tengo entre manos, algo sencillo y personal.

Su función es crear un cronometro, el cual lo podemos parar, resetar o volver a iniciar. Se puede usar con cuenta atrás aunque tendrías que crear una clase para disparar cuando llegues a 0. Quiero decir que la clase es muy básica pero muy útil si la extiendes.

var Timer = new Class({

    initialize: function(el) {
        this.element = $(el);
    },

    start: function() {
        if (this.timer) return this;
        this.time = (!this.now) ? $time() : $time() - (this.toSeconds() * 1000);
        this.timer = this.step.periodical(500,this);
    },

    stop: function() {
        if (!this.timer) return this;
        this.timer = $clear(this.timer);
        return this;
    },

    toggle: function() {
        if(this.timer) this.stop();
        else this.start();
        return this;
    },

    reset: function(now) {
        this.time = $time();
        this.now = now ? this.toArray(now*1000) : [0,0,0];
        this.increase();
        return this;
    },

    toSeconds: function() {
        return ((this.now[0] * 3600) + (this.now[1] * 60) + (this.now[2]));
    },

    toArray: function(step) {
        var deltaH = step % 3600000;
        var deltaM = deltaH % 60000;
        return [(step-deltaH) / 3600000, (deltaH - deltaM) / 60000, Math.floor(deltaM/1000)];
    },

    step: function() {
        var step = $time() - this.time;
        this.now = this.toArray(step);
        this.increase();
    },

    increase: function() {
        var display = this.now.map(function(item) {
            item = Math.abs(item);
            if(item==60) return '00';
            return (item < 10) ? '0'+item : item ;
        });
        this.element.setText(display.join(':'));
    }

});

Ejemplo:

<div id="timer">00:00:00</div>    

//Normal
var time = new Timer('timer');
time.start();

//Cambiar tiempo: 01:00:00
time.reset(3600);

//Cuenta atrás
time.reset(-3600);

He adaptado window.growl a la versión de mootools 1.11, ahora hay dos versiones, una centrada y otra al estilo growl de toda la vida.

Como en el anterior este también tiene un sistema de cola para mandar varios mensajes a la vez.

Window.Growl 2.0.

He subido una versión al svn del proyecto para que le echéis un vistazo al código, ya que carece de documentación y así a bote pronto es difícil meterle el diente.

Por ahora trae lo mínimo, falta meterle los helpers y alguna clase para manejar las sesiones y el cacheo.

No seáis crueles con mi código, como dije en el anterior post, busco algo intermedio y sobre todo una base.

La clave del proyecto consiste en personalizarlo y armarle lo que le falta.

Proyecto en Google Code

Buaj que locura! selectores configurables! madre mía.

Selectors on fire