/* * ***** BEGIN LICENSE BLOCK ***** * Version: ZAPL 1.1 * * The contents of this file are subject to the Zimbra AJAX Public * License Version 1.1 ("License"); you may not use this file except in * compliance with the License. You may obtain a copy of the License at * http://www.zimbra.com/license * * Software distributed under the License is distributed on an "AS IS" * basis, WITHOUT WARRANTY OF ANY KIND, either express or implied. See * the License for the specific language governing rights and limitations * under the License. * * The Original Code is: Zimbra AJAX Toolkit. * * The Initial Developer of the Original Code is Zimbra, Inc. * Portions created by Zimbra are Copyright (C) 2005 Zimbra, Inc. * All Rights Reserved. * * Contributor(s): * * ***** END LICENSE BLOCK ***** */ /** * Creates a color picker displaying "Web safe" colours. Instances of this class may be * used with DwtMenu to create a ColorPicker menu. Clicking on a color cell generates a * DwtSelectionEvent the detail attribute of which contains the color string associated * the cell on which the user clicked * * @constructor * @class * * @author Ross Dargahi * @param parent the parent widget * @param className a CSS class * @param posStyle positioning style */ function DwtColorPicker(parent, className, posStyle) { if (arguments.length == 0) return; className = className || "DwtColorPicker"; DwtControl.call(this, parent, className, posStyle); this._createColorTable(); this._registerEventHdlrs(); this.setCursor("default"); } DwtColorPicker.prototype = new DwtControl; DwtColorPicker.prototype.constructor = DwtColorPicker; // RE to parse out components out of a "rgb(r, g, b);" string DwtColorPicker._RGB_RE = /rgb\(([0-9]{1,3}), ([0-9]{1,3}), ([0-9]{1,3})\)/; DwtColorPicker._HEX_RE = /\#([0-9FCfc]{2})([0-9FCfc]{2})([0-9FCfc]{2})/; // Public methods DwtColorPicker.prototype.toString = function() { return "DwtColorPicker"; } /** * Adds a listener to be notified when the button is pressed. * * @param listener a listener */ DwtColorPicker.prototype.addSelectionListener = function(listener) { this.addListener(DwtEvent.SELECTION, listener); } /** * Removes a selection listener. * * @param listener the listener to remove */ DwtColorPicker.prototype.removeSelectionListener = function(listener) { this.removeListener(DwtEvent.SELECTION, listener); } DwtColorPicker.prototype.dispose = function () { if (this._disposed) return; Dwt.disassociateElementFromObject(this.getHtmlElement().firstChild, this); DwtControl.prototype.dispose.call(this); } DwtColorPicker.prototype._registerEventHdlrs = function() { var table = this.getHtmlElement().firstChild; Dwt.associateElementWithObject(table, this); var rows = table.rows; var numRows = rows.length; for (var i = 0; i < numRows; i++) { var cells = rows[i].cells; var numCells = cells.length for (var j = 0; j < numCells; j++) { var cell = cells[j]; cell.onmouseover = DwtColorPicker._mouseOverHdlr; cell.onmouseout = DwtColorPicker._mouseOutHdlr; cell.onmousedown = DwtColorPicker._mouseDownHdlr; cell.onmouseup = DwtColorPicker._mouseUpHdlr; cell.style.border = "2px outset " + cell.style.backgroundColor; } } } DwtColorPicker.prototype._createColorTable = function() { this._tdId = Dwt.getNextId(); var html = new Array(150); var i = 0; html[i++] = ""; html[i++] = "" html[i++] = ""; html[i++] = ""; html[i++] = ""; html[i++] = ""; html[i++] = ""; html[i++] = ""; html[i++] = ""; html[i++] = ""; html[i++] = ""; html[i++] = ""; html[i++] = ""; html[i++] = ""; html[i++] = ""; html[i++] = ""; html[i++] = ""; html[i++] = ""; html[i++] = ""; html[i++] = ""; html[i++] = ""; html[i++] = ""; html[i++] = ""; html[i++] = ""; html[i++] = ""; html[i++] = ""; html[i++] = ""; html[i++] = ""; html[i++] = ""; html[i++] = ""; html[i++] = ""; html[i++] = ""; html[i++] = ""; html[i++] = ""; html[i++] = ""; html[i++] = ""; html[i++] = ""; html[i++] = ""; html[i++] = ""; html[i++] = ""; html[i++] = ""; html[i++] = ""; html[i++] = ""; html[i++] = ""; html[i++] = ""; html[i++] = ""; html[i++] = ""; html[i++] = ""; html[i++] = ""; html[i++] = ""; html[i++] = ""; html[i++] = ""; html[i++] = ""; html[i++] = ""; html[i++] = ""; html[i++] = ""; html[i++] = ""; html[i++] = ""; html[i++] = ""; html[i++] = ""; html[i++] = ""; html[i++] = ""; html[i++] = ""; html[i++] = ""; html[i++] = ""; html[i++] = ""; html[i++] = ""; html[i++] = ""; html[i++] = ""; html[i++] = ""; html[i++] = ""; html[i++] = ""; html[i++] = ""; html[i++] = ""; html[i++] = ""; html[i++] = ""; html[i++] = ""; html[i++] = ""; html[i++] = "
"; this.getHtmlElement().innerHTML = html.join(""); } DwtColorPicker._mouseOverHdlr = function(ev) { var mouseEv = DwtShell.mouseEvent; mouseEv.setFromDhtmlEvent(ev); var target = mouseEv.target; if (target.nodeName.toLowerCase() == "img") target = target.parentNode; if (mouseEv.dwtObj._downTdId == target.id) { var tmp = target.style.backgroundColor; target.style.backgroundColor = mouseEv.dwtObj._swappedColor; mouseEv.dwtObj._swappedColor = tmp target.style.border = "2px inset " + tmp; } this._stopPropagation = true; this._returnValue = false; mouseEv.setToDhtmlEvent(ev) return false; } DwtColorPicker._mouseOutHdlr = function(ev) { var mouseEv = DwtShell.mouseEvent; mouseEv.setFromDhtmlEvent(ev); var target = mouseEv.target; if (target.nodeName.toLowerCase() == "img") target = target.parentNode; if (mouseEv.dwtObj._downTdId == target.id) { var tmp = target.style.backgroundColor; target.style.backgroundColor = mouseEv.dwtObj._swappedColor; mouseEv.dwtObj._swappedColor = tmp target.style.border = "2px outset " + tmp; mouseEv.dwtObj._downTdId = null; } this._stopPropagation = true; this._returnValue = false; mouseEv.setToDhtmlEvent(ev) return false; } DwtColorPicker._mouseDownHdlr = function(ev) { var mouseEv = DwtShell.mouseEvent; mouseEv.setFromDhtmlEvent(ev); var target = mouseEv.target; if (target.nodeName.toLowerCase() == "img") target = target.parentNode; // Make a depressed button color darker than the original color to get // a true depressed effect var colorStr = mouseEv.target.style.backgroundColor; var rgb; var r, g, b; mouseEv.dwtObj._downTdId = target.id; mouseEv.dwtObj._swappedColor = colorStr; target.style.border = "2px inset " + colorStr; // IE refuses to convert Hex 2 rgb if (colorStr.substr(0, 1) == "#") { rgb = colorStr.match(DwtColorPicker._HEX_RE); rgb[1] = DwtColorPicker._hexConv(rgb[1]); rgb[2] = DwtColorPicker._hexConv(rgb[2]); rgb[3] = DwtColorPicker._hexConv(rgb[3]); } else { rgb = colorStr.match(DwtColorPicker._RGB_RE); } r = Math.max(Math.floor(rgb[1] - (rgb[1] * 0.25)), 0); g = Math.max(Math.floor(rgb[2] - (rgb[2] * 0.25)), 0); b = Math.max(Math.floor(rgb[3] - (rgb[3] * 0.25)), 0); colorStr = "rgb(" + r + "," + g + "," + b + ")"; target.style.backgroundColor = colorStr; mouseEv._stopPropagation = true; mouseEv._returnValue = false; mouseEv.setToDhtmlEvent(ev) return false; } DwtColorPicker._hexConv = function(hexStr) { if (hexStr == "00") return 0; else if (hexStr == "33") return 51; else if (hexStr == "66") return 102; else if (hexStr == "99") return 153; else if (hexStr.toUpperCase() == "CC") return 204; else if (hexStr.toUpperCase() == "FF") return 255; else if (hexStr.toUpperCase() == "C0") return 192; } DwtColorPicker._mouseUpHdlr = function(ev) { var mouseEv = DwtShell.mouseEvent; mouseEv.setFromDhtmlEvent(ev); var me = mouseEv.dwtObj; var target = mouseEv.target; if (target.nodeName.toLowerCase() == "img") target = target.parentNode; if (me._downTdId == target.id) { target.style.border = "2px outset " + mouseEv.dwtObj._swappedColor; target.style.backgroundColor = mouseEv.dwtObj._swappedColor; } if (me._downTdId == target.id) { // If our parent is a menu then we need to have it close if (me.parent instanceof DwtMenu) DwtMenu.closeActiveMenu(); // Call Listeners on mouseEv.target.id if (me.isListenerRegistered(DwtEvent.SELECTION)) { var selEv = DwtShell.selectionEvent; DwtUiEvent.copy(selEv, mouseEv); selEv.item = me; selEv.detail = mouseEv.target.id.substr(mouseEv.target.id.indexOf("#")); me.notifyListeners(DwtEvent.SELECTION, selEv); } } me._downTdId = null; mouseEv._stopPropagation = true; mouseEv._returnValue = false; mouseEv.setToDhtmlEvent(ev) return false; }