// =================================================================== // Original author: Matt Kruse // WWW: http://www.mattkruse.com/ // // Adapted to Rico by Matt Brown // =================================================================== Rico.ColorPicker = Class.create( /** @lends Rico.ColorPicker# */ { /** * @class Implements a pop-up color picker control. * @extends Rico.Popup * @constructs * @param id unique identifier * @param options object may contain any of the following:
*
showColorCode
show hex color code as user hovers over color grid? default=false
*
cellsPerRow
number of colors per row in the grid? default=18
*
palette
array of 6 digit hex values, default=216 "web safe" colors
*
*/ initialize: function(id,options) { this.id=id; this.currentValue = "#FFFFFF"; Object.extend(this, new Rico.Popup()); Object.extend(this.options, { showColorCode : false, cellsPerRow : 18, palette : [] }); var hexvals=['00','33','66','99','CC','FF']; for (var g=0; g '; if ( ((i+1)>=this.options.palette.length) || (((i+1) % width) == 0)) { cp_contents += ""; } } var halfwidth = Math.floor(width/2); if (this.options.showColorCode) { cp_contents += " #FFFFFF"; } else { cp_contents += " "; } cp_contents += ""; this.container.innerHTML=cp_contents; document.body.appendChild(this.container); this.setDiv(this.container); /** * alias for openPopup * @function */ this.open=this.openPopup; /** * alias for closePopup * @function */ this.close=this.closePopup; Event.observe(this.container,"mouseover", this.highlightColor.bindAsEventListener(this), false); Event.observe(this.container,"click", this.selectColor.bindAsEventListener(this), false); this.close(); }, /** @private */ selectColor: function(e) { Event.stop(e); if (this.returnValue) this.returnValue(this.currentValue); this.close(); }, /* This function runs when you move your mouse over a color block */ /** @private */ highlightColor: function(e) { var elem = Event.element(e); if (!elem.tagName || elem.tagName.toLowerCase() != 'td') return; var c=Rico.Color.createColorFromBackground(elem).toString(); this.currentValue = c; Element.setStyle('colorPickerSelectedColor', {backgroundColor:c}, true); var d = $("colorPickerSelectedColorValue"); if (d) d.innerHTML = c; } }); Rico.includeLoaded('ricoColorPicker.js');