/* This file sets up input tags that have a class of colorPick, adding a button to the right that opens a color picker via MooRainbow */ // setup all color pickers function scColorPickersSetup() { var flds = $$('input.colorPick'); if (!flds) return; flds.each(function(fld) {scColorPickerSetup(fld);}); } // colorPicker objects will be stored in here, so we can get at them var colorPickers = new Array; // setup each color picker function scColorPickerSetup(fld) { // this will update the color picker's start color and the tile inside the button // when the field is manually changed via keyboard fld.addEvent('keyup', function() {scColorPickSetDefault(this,1); return false;}); var pickId = fld.id + '_pck'; // ID of color picker element itself var pickBtnId = fld.id + '_pckBtn'; // ID of color picker button // first, we need to inject a button after each field which will trigger the color picker var btn = new Element('span', {'class': 'colorPickBtn', 'id': pickBtnId}); // this span will be used to add extra stuff inside button via CSS var btn_inner = new Element('span', {'id': pickId + 'span'}); btn_inner.inject(btn); // inject the btn after input tag btn.inject(fld,'after'); // start colors must be RGB, not hex... if (fld.value && validColorHex(fld.value)) { var startColors = new Color(fld.value); } else { var startColors = [0,0,0]; } // make it a moo rainbow colorPickers[pickId] = new MooRainbow(pickBtnId, { 'id': pickId, 'wheel': true, 'startColor': startColors, 'imgPath': 'lib/moorainbow/images/', 'onChange': function(color) { $(fld.id).value = color.hex; $(pickId + 'span').setStyle('backgroundColor', color.hex); $(pickId + 'span').removeClass('noColor'); } }); // default the color of the inner tile to the value of this field scColorPickSetDefault(fld); } // this function updates the tile inside the button, // and the start color for the picker object function scColorPickSetDefault(fld,updateStart) { if (!fld.value) return; var currentColor = fld.value; if (!currentColor) return; $(fld.id + '_pckspan').removeClass('noColor'); var hexColor = colorNameToHex(currentColor); if (hexColor && validColorHex(hexColor)) { $(fld.id + '_pckspan').setStyle('backgroundColor', currentColor); // this updates the start color in the picker, after the field was manually changed via keyboard if (updateStart) colorPickers[fld.id + '_pck'].manualSet(hexColor,'hex'); } else if (currentColor == 'transparent') { $(fld.id + '_pckspan').addClass('noColor'); } }