Ejemplo Manejo de eventos con Javascript & Mootools – Teclado

Vegeta movimiento con el evento del teclado
Vegeta movimiento con el evento del teclado

Hace un par de meses que di mi taller Mootools en la academia de software libre, uno de  los ejemplos que di fue el de manejo de eventos con el teclado, aqui programe un monito que se mueve y que dejo pendiente el código para en un futuro hacer algún game.

Codigo & ejemplo en linea: <http://vivoenhuajuapan.com/eventos-teclado-ejemplo/>

 

Mapa de México con SVG y Javascript empotrado en HTML

ejemplo_mexico_mapa_svg_javascript

ejemplo_mexico_mapa_svg_javascript

Para hacer un mapa dinamico en un sitio web las opciones son las siguientes:

(Descartando flex,  apples y  silverlight ya q no son crossbrowsers ) de estas opciones la que mas me gusta son las canvas, sin embargo en esta ocasión  tras leer un articulo de opera y la comparativa de estas tecnologías decidir  ocupar SVG, sin mas dejo la liga en donde puedes descargar el ejemplo y su respectivo código fuente:

Este post ha sido actualizado y movido a la siguiente dirección:

http://fitorec.github.com/manual_mapas_svg_raphael/

MooRainBow un pickcolor para Mootools

El MooRainBow es un excelente pickColor el cual viene integrado en herramientas como el phpMyAdmin(http://www.phpmyadmin.net), hace poco empecé a desarrollar en mis tiempos libres una plantilla para dicho sistema y fue asi como conocí este complemento de mooTools, hoy que quería agregar este complemento a un sistema que estoy desarrollando me encontre con los siguientes conflictos:

la versión de mootools que estoy ocupando en el proyecto es la 1.3.

La versión 1.2b1 de MooRainBow (la que viene en phpMyAdmin) no es compatible con mooTools 1.3.

Por otra parte la versión 1.2b2, la más reciente de de MooRainBow elimina el campo MooRainbow::options.selectText (ver linea 23 de la versión 1.2b1), imposibilita la capacidad de configurar el mensaje del “botón de seleccionar color” lo cual hace que aparezca siempre como: lo cual puede llegar a ser incomodo para sitios en donde los usuarios no estan tan familiarizados con la lengua inglesa.

Creo que la mejor solución es agarrar la versión mas reciente(1.2b2) y agregarle el campo MooRainbow::options.selectText, esto es:

1- Agregar selectText

Hay que agregar la propiedad selectText en MooRainbow::options

options: {
id: 'mooRainbow',
/* los demas parámetros */
onChange: $empty, //a este ultimo le agregamos una coma
selectText: 'Select' //agregamos selectText con el valor por defecto 'Select'
},

2.- Agregando el texto al boton.

El boton de aceptar internamente en el código es cread por una función “privada” llamada ok la cual devuelve un boton con el texto incrustado como ‘value’: ‘Select’ (linea 508 aprox).

'value': this.options.selectText,

usandolo

Guardo estas modificaciones como mooRainbow.1.2b3.js y teniendo la siguiente estructura de archivos:

.
|-- css
|   |-- mooRainbow.css
|   `-- mooRainbowMini.css
|-- img
|   |-- blank.gif
|   |-- color_swatch.png
|   |-- color_wheel.png
|   |-- moor_arrows.gif
|   |-- moor_boverlay.png
|   |-- moor_cursor.gif
|   |-- moor_slider.png
|   `-- moor_woverlay.png
|-- index.html
|-- mooRainbow.1.2b3.js
`-- mootools-more-1.3.1.1.js

Agregando las librerías y hojas de estilo:

Del more de mootools se agrega el objeto Color y el Drag.

<script src="https://ajax.googleapis.com/ajax/libs/mootools/1.3.1/mootools.js"></script>

<script src="mootools-more-1.3.1.1.js"></script>

<script language="Javascript"  type="text/javascript" src="mooRainbow.1.2b3.js"></script>
<link rel="stylesheet" type="text/css" href="css/mooRainbow.css" />
<link rel="stylesheet" type="text/css" href="css/mooRainbowMini.css" />

Creando los objetos los objetos Rainbow:

En el domready creamos los objetos Rainbow configurando sus parametros como el mensaje selectText y sus funciones a controlar sus eventos.

var r = new MooRainbow('bg_color_rainbow', {
'startColor': [00, 166, 188],
'imgPath': 'img/',
'selectText' : 'Seleccionar color',
'onChange': function(color) {
$('bg_demo').setStyle('background', ( $('mi_input').value = color.hex ));
},
}); 

var m = new MooRainbow('color2', {
//'imgPath': 'js/mooRainbow/img/',
//'imgPath': 'images',
id: 'mooRainBowMini',
'onChange': function(c) {
$('color2').setStyle('background', c.hex);
$('mi_input2').setStyle('background', c.hex);
document.body.getElement('h1').setStyle('color', c.hex);
}
});

Generamos el siguiente código html implicado(para este ejemplo) en los eventos

<h1 style='font-size: 25px;'>Selector de color con MooRainBow</h1>

<form>
<img id="bg_color_rainbow" src="img/color_wheel.png" alt="[r]" width="16" height="16" />
<input id='mi_input' value='#00A6BC'>
<br>
<img id="color2" src="img/color_swatch.png" alt="[r]" width="16" height="16" />

<input id='mi_input2' size='3'>

</form>

Resultado

MooRainBow

MooRainBow 1.2.b3 funcionando con Mootools 1.3.1

Descargar Código: mooRainbow.1.2b3.js.tar.gz