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 1.2.b3 funcionando con Mootools 1.3.1
Descargar Código: mooRainbow.1.2b3.js.tar.gz
