Timer.js

Agregar a favoritos

7 Comentarios

Posteado hace 308 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.


Cambios en MooTools

Hace poco salió una actualización para mootool, la 1.11. Corrige algunos bugs encontrados y sobre todo problemas de memoria que daban en algunas versiones de navegador.

El problema no es este sino los continuos cambios de nomenclatura en métodos y en clases. Ahora mismo en la versión de desarrollo se esta cociendo una buena, por una parte le están dando caña a los selectores, se puede probar un [test]http://mootools.net/slickspeed/) y mirar los resultados en diferentes librerías. También han movido las variables para detectar el navegador, ahora es un objeto donde conseguimos mucha información.

El problema es que cada versión hacen cambios muy drásticos que te obligan actualizar tus plugins, como no sigas la versión de desarrollo puedes llevarte grandes sorpresas cuando actualices.

El equipo de MooTools se mueve, quiere buscar una librería rápida, muy rápida aunque conlleve cambios drásticos, pero uno que se lee el log del trac ve unas cosas que te quedas a cuadros :S, cosas que vuelven y se van por arte de magia.

Creo que esta es mi primera critica a mootools, pero os aseguro que no tengo mas :).


Packito MooTools 1.1

Agregar a favoritos

10 Comentarios

Posteado hace 365 días en:

Una ventaja/desventaja de MooTools es el poder elegir los archivos que vamos a utilizar, es una forma perfecta de optimizar el código, sin embargo cuando quieres usar un plugin no sabes que componentes necesita y claro cuando lo pruebas en tu distribución es posible que falle sin saber que falta.

Para eso nace Packito, un script que muestra los componentes que utiliza un archivo js.

Ojo, esta preparado para MooTools 1.1, es posible que también funcione con 1.0 ya que parte del código es el mismo, pero hay que tener cuidado.

Ejemplo: base.js


Cruiser

Leo en ajaxian que ha nacido una librería llamada Cruiser. Utiliza el mismo concepto que cssing, usar la sintaxis CSS para escribir javascript.

Yo ando terminando mi script, el cual tiene algunas similitudes (lógico) y otras un poco más potentes.

Me alegra saber que hay personas que piensan en que es necesario implementar estas características.

Me gusta la idea de utilizar un tag link para referenciar al archivo, pero no me convence tener que cargarlo y parsearlo cada vez que se refresque la página.