Window Growl con Mootools 1.2 Beta 2

Gracias a Paul Streise, alguien que no tiene web, ha dedicado parte de su tiempo a portar el código de Window.Growl a Mootools 1.2 Beta 2.

Sin duda Window.Growl y Packito son las dos joyas de esta casa y ambas las tengo un poco descuidadas, aun así tengo planes para actualizarlas pero gracias a Paul ya me he ahorrado el 50%.

Por mis refers he encontrado una versión en Prototype, esto quiere decir que hay versiones adaptadas para Mootools, jQuery y Prototype, nada mal.

Tengo que decir que tambien un usuario ha añadido mejoras a class.image y que pronto intentare postearlo.


Packito 1.2

Poco a poco estoy preparando la nueva versión de packito, esperemos que pronto deje de ser beta la 1.2 y pueda liberarlo.

Entre las novedades que estoy programando es la capacidad de utilizar json para definir las palabras claves, así pasa a ser más flexible.

También estoy preparando la posibilidad de comprobar varios archivos js, algo muy demandado por mi amigo luisma.

Y bueno la ultima característica es poder bajarte el código mootools con el combo que necesites.


Toggle en MooTools

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();

Timer.js

Agregar a favoritos

7 Comentarios

Posteado hace 460 días en:

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

Window.Growl 2.0

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.

logo

Window.Growl 2.0.