Categoría: mootools

MenuMatic en capa fija (position:fixed)

2009-11-30 / tatai / 1 comentario

Es posible que conozcas MenuMatic, un menú multinivel tanto horizontal como vertical realizado con Mootools 1.2. La verdad es que yo personalmente lo he usado ya varias veces y me gusta bastante la facilidad de uso y el acabado, con lo que es una de mis opciones cuando tengo que recomendar un menú.

Hace poco tuve un problema y es que coloqué este menú en una capa posicionada fija (position:fixed) de modo que estuviese constantemente visible aunque se realizase scroll. Claro, esto funciona en prácticamente todos los navegadores menos IE (para variar). Al hacer esto, cuando pasamos por encima del menú para realizar el desplegado, como la capa fija «evita» el scroll, el menú aparece siempre en la parte superior, de modo que si se baja por la página, el menú desaparece.

He hecho un par de cambios en la clase a partir de la última versión disponible, la 0.68.3. Se lo he comunicado al autor para ver si le ayuda en su próxima versión, pero de momento no he obtenido respuesta.

Por esta razón, dejo mi aportación aquí en el blog por si le puede servir a alguien. Las modificaciones que he realizado están bajo las líneas // Mod: Fran Naranjo. El cambio es básicamente detectar si está sobre una capa con position:fixed y si lo está, añadir el scroll a la posición en la que se muestra el menú.

Roller

2009-11-28 / tatai / Sin comentarios

Esta semana Mario y yo, continuado con el desarrollo y evolución de OpenNUS hemos implementado un sistema de avisos en el Page Builder que llegue directamente desde los gadgets. Al final adoptamos la solución de ir mostrandolos al estilo tagline.

En base a esta idea, se me ocurrió desarrollar esta pequeña y sencilla clase en Mootools que realice este comportamiento pero realizando el efecto de un banner rotativo o roller. De esta forma podremos mostrar por ejemplo una serie de mensajes que se irán turnando de forma constante de modo que podamos ver un cierto número a la vez.

Su uso es bastante sencillo. Tan sólo necesitamos un elemento padre que contenga una serie de hijos que son los que mostraremos. El caso más sencillo es tener un

como hijos.
```
 Mensaje 1
 Mensaje 2
 Mensaje 3
```
Con esta llamada, conseguiremos que se genere el Roller y comience a funcionar.
```
new Roller($('roller')).startRoll();
```
Hay más ejemplos en la demo.
- Descargar Roller
- Demo Roller

SelectorGadget

2009-10-22 / tatai / Sin comentarios

SelectorGadget es lo que se denomina un bookmarklet, es decir, una aplicación javascript que se llama directamente desde nuestra barra de marcadores (bookmarks). Este tipo de aplicaciones nos las encontramos en forma de enlace. Para poder usarla únicamente tenemos que arrastrar ese enlace a nuestra barra de marcadores y una vez allí, estando en la web en la que nos interese llamar a esta aplicación, hacemos click sobre él.

Ahora, tras enrollarme con la explicación de bookmarklet (que os servirá para tener esta aplicación), os cuenta que con SelectorGadget podremos encontrar fácilmente los selectores CSS para los elementos de la web que nos interesen. Este selector se muestra en formato para jQuery, pero leerlo es muy fácil y puede ayudar para los selectores de otros frameworks.

Podrás pinchar en distintos elementos para seleccionarlos y deseleccionarlos y así intentar obtener el selector que abarca a todos los que elijas. El vídeo de la web es bastante esclarecedor y no hay nada como probarlo.

No hay nada que no se pueda sacar con Firebug, pero hay que decir que SelectorGadget es capaz de ahorrarnos bastante tiempo según el caso.

La última versión estable disponible en la web es del día 10 de Marzo de 2009. Funciona en Firefox y Safari. En IE7 no funciona del todo bien todavía.

Cuenta atrás/Countdown para mootools

2009-10-05 / tatai / 2 comentarios

Es posible que en la pasada Navarparty 7 participases en el concurso Date El Bit y te encontraras con que este año la primera fase de las preguntas se realizaba pregunta por pregunta y había una cuenta atrás para cada una de ellas.

Pantalla de ejemplo de Date El Bit de la Navarparty 7

Pantalla de ejemplo para Date El Bit de la Navarparty 7

Pues bien, para poder hacerla realicé una pequeña clase en javascript para Mootools que me permitiera poder visualizar la cuenta atrás que se puede ver en la imagen. Como estuve buscando por internet y no encontré nada que me gustase, me lancé a hacerlo, no podían ser muchas líneas.

Y así ha sido. Con tan sólo 98 líneas (incluídos comentarios en inglés), tengo el gusto de presentar la clase Countdown.

Esta clase tiene como objetivo realizar la cuenta atrás visualmente actualizando un elemento DOM que se le indique.

El ejemplo de utilización más sencillo es este, que nos crea una cuenta atrás de 10 a 0 en pasos de hasta 100 milisegundos que actualiza en el elemento con id=»counter»:

new Countdown($('counter')).start();

Podemos completarlo un poco más con el siguiente ejemplo:

new Countdown($('counter'), {
 'decimals' : '3', // para hacer que parezca un tiempo de la fórmula 1 :p
 'onComplete' : function() {alert('finalizado!');}, // muestra un alert cuando acaba la cuenta atrás
 'onStep' : function(target, show) {
 // Si el contador está por debajo de 5, poner en rojo, si no, en negro
 if(show < 5) {
 target.setStyle('color', '#f00');
 }
 else {
 target.setStyle('color', '#000');
 }
 }
});

Migrar fácilmente el selector dolar a document.id (mootools 1.2.3)

2009-06-21 / tatai / Sin comentarios

Voy a contar un par de sencillos comandos que os ayudarán si queréis migrar todos vuestros selectores dolar ($) a la nueva forma definida en mootools 1.2.3: document.id.

La primera forma es ejecutar un comando desde la línea de comandos. Todo lo que necesitas es tener instalado perl en tu sistema. Este es el comando (cambia fichero.js por el nombre de tu fichero javascript):

perl -i -pe 's/([^\$])\$\(/$1document.id(/g;' fichero.js

Quizás prefieras usar -i.old en vez de -i que hará una copia de tu fichero original fichero.js a fichero.js.old. De esta forma, mantienes una copia de tu fichero original.

Por supuesto este comando se puede usar con otros como find de modo que puedas migrar más de un fichero a la vez:

for i in $( find /path/a/tu/directorio/js -iname '*.js' ); do perl -i -pe 's/([^\$])\$\(/$1document.id(/g;' $i; done

Finalmente, para todos aquellos que como yo usen y prefieran vim, voy a mostrar como se hace el cambio con vim. Asegúrate que estas en el modo-comando (presiona varias veces la tecla ) y escribe:

:%s/\([^\$]\)\$(/\=submatch(1) . "document.id("/g

Y eso es todo! Disfruta de tu nuevo código que cumple con la especificación de compatibilidad entre frameworks javascript.

Easy migrating dolar selector to document.id (mootools 1.2.3)

2009-06-21 / tatai / Sin comentarios

I would like to show you a pair of easy command that will help you if you want to change all your dolar selectors ($) to the new defined document.id in mootools 1.2.3.

The first way can be executed from command line. All you need is having perl on your system. This is the command (change your_file.js to the filename that fits your needs):

perl -i -pe 's/([^\$])\$\(/$1document.id(/g;' your_file.js

Perhaps you will prefer to use -i.old instead -i that will copy your original file your_file.js to your_file.js.old. In this way, you get a backup of your original file.

Of course, this command can be used with others like find so you can migrate more files at once:

for i in $( find /path/to/your/js/files -iname '*.js' ); do perl -i -pe 's/([^\$])\$\(/$1document.id(/g;' $i; done

Finally, for those vim lovers like me, I would like to show you how to make this change inside vim. In command-mode (press a pair of times) write:

:%s/\([^\$]\)\$(/\=submatch(1) . "document.id("/g

And that’s all! Enjoy your new brand cross-framework compliant code.

Teclas rápidas usando mootools

2009-06-20 / tatai / Sin comentarios

Hace unos días me plantee la posibilidad de añadir teclas rápidas al funcionamiento de la aplicación. Las teclas rápidas o también llamadas atajos de teclado (o «keyboard shortcuts» en inglés) nos permite realizar acciones pulsando una tecla o una combinación de teclas. Por ejemplo, habremos usado muchas veces Ctrl + g (o la variante inglés Ctrl + s) para grabar un documento, Ctrl + r para recargar la pantalla de nuestro navegador o, por ejemplo, todas las teclas rápidas de GMail. Lo que voy a explicar brevemente en este post es como conseguir algo parecido a lo que usa GMail.

El funcionamiento es realmente sencillo, este sería el código:

document.addEvent('keyup', function(e) {
 var bg = e.target.get('tag');
 if(bg == 'html' || bg == 'body') {
 if(e.key == 'a') {
 accion1();
 }
 else if(e.key == 's') {
 accion2();
 }
 }
});

Lo único que le falta a este código son las funciones accion1() y accion2() que son las que se ejecutarán cuando pulsemos las teclas a y s respectivamente.

Este código añade un evento ‘keyup’, es decir, cuando se detecta que se ha pulsado una tecla y estamos levantando el dedo de la tecla. Este evento indaga a ver qué tecla se ha pulsado y en caso de ser una de las de la lista, ejecutará la función correspondiente.

La comprobación de que el objetivo de nuestra pulsación (e.target) sea ‘html’ o ‘body’ sirve para que no se haga esta comprobación cuando estamos en un elemento como un input, un textarea, etc. Es decir, tenemos que tener el foco en el documento. En la mayoría de los navegadores funcionaría simplemente con indicar ‘html’, pero, como siempre, Internet Explorer tiene que dar la nota y necesita que comprobemos sobre ‘body’.

Por último añadir que podemos obtener más información del evento:

e.code: el código de la tecla pulsada
e.control: true si la tecla Ctrl está pulsada
e.shift: true si la tecla Shift está pulsada
e.alt: true si la tecla Alt está pulsada

Y no sólo esto, también podemos trabajar con la rueda del ratón o el botón derecho del ratón

El resultado es realmente espectacular si tienes que trabajar con una aplicación en la que las teclas rápidas te hacen la vida más sencilla 🙂

Good feelings with Lasso.Crop

2009-03-08 / tatai / 2 comentarios

Although Lasso.Crop is still a preview, I have decided to try it. I have been looking for a mootools script for croppìng images and I have to say I think I am going to use Lasso.Crop (ok, stable version, when available).

Using it is quite easy and the result is clean, fast and smooth. One of the most valuable characteristic that has Lasso.Crop is the possibility of decide an aspect ratio (16:9, 1:1, etc) and a max and min size for the cropping area. This is what I just need in my crop process.

I would like to hear about a stable release as soon as possible. Good work @_nw_, we are waiting for news.

Demo de Lasso.Crop

Aptana ya soporta mootools

2009-01-13 / tatai / Sin comentarios

Según leo en clientcide, que por cierto, ya puede seguirse en twitter @mootools, Aptana Studio ya ofrece soporte para Mootools. Ha sido probado con Aptana 1.2 y 1.2.1 sin problemas. Es necesario instalar un plugin y a correr!

Muy buena noticia para todos aquellos que usan Aptana Studio en el desarrollo y que se venía echando en falta.