Zapatec Utils Overview

Overview | File | Class | Tree | Index | Help

Zapatec Utils

PREV NEXT | FRAMES NO FRAMES

## colorpicker.js

#### Summary

Color Picker widget class derived from Widget. See description of base Widget class at http://trac.zapatec.com:8000/trac/wiki/Widget.

     Copyright (c) 2004-2006 by Zapatec, Inc.
     http://www.zapatec.com
     1700 MLK Way, Berkeley, California,
     94709, U.S.A.
     All rights reserved.

Class Summary
Zapatec.ColorPicker |

    /* $Id: colorpicker.js 7599 2007-07-25 11:13:15Z roman $ */
    /**
     * @fileoverview Color Picker widget class derived from Widget. See description
     * of base Widget class at http://trac.zapatec.com:8000/trac/wiki/Widget.
     *
     * <pre>
     * Copyright (c) 2004-2006 by Zapatec, Inc.
     * http://www.zapatec.com
     * 1700 MLK Way, Berkeley, California,
     * 94709, U.S.A.
     * All rights reserved.
     * </pre>
     */

    /**
    * Zapatec ColorPicker object. Creates the element for selecting color
    * Displays 216 predefined colors palette, three Sliders and three input fields
    * for red, green and blue channels and input field for hex color value.
    * @param config [object] - color picker config.
    *
    * Constructor recognizes the following properties of the config object
    * \code
    *	property name			| description
    *------------------------------------------------------------------------------
    *	button						| [string or object] Reference to DOM element.  Optional
    *										| Click on this element will popup color picker.
    *	inputField				| [string or object] Reference to DOM element. Optional
    *										| If option is given - value will be written into this
    *										| element.
    *	color							| [string] Initial color, format: '#FFCCFF', Optional,
    *										| default '#000000'
    *	title 						| [string] Title of color picker. Optional, default 'Color Picker'
    *	offset  					| [number] offset between button and picker. Optional,
    *										| default 10 pixels
    * singleClick 			| [boolean] This defines how to handle color selecting.
    *             			| If true, color is selected on single click on palette.
    *             			| If false, on click color is set active, and selecting is attached to double click.
    * lang							| Set language for color picker. Use three letters short form of the language name as a parameter.
    * handleButtonClick | Set to true if you want to handle button clicks by yourself, especially for use in another widgets.
    *
    * \endcode
    */

    /**
     * ColorPicker class.
     *
     * @constructor
     * @extends Zapatec.Widget
     * @param {object} objArgs User configuration
     */
    Zapatec.ColorPicker = function(objArgs) {
    	if (arguments.length == 0) {
    		objArgs = {};
    	}
    	Zapatec.ColorPicker.SUPERconstructor.call(this, objArgs);
    };

    /**
     * Unique static id of the widget class. Gives ability for Zapatec#inherit to
     * determine and store path to this file correctly when it is included using
     * Zapatec#include. When this file is included using Zapatec#include or path
     * to this file is gotten using Zapatec#getPath, this value must be specified
     * as script id.
     * @private
     */
    Zapatec.ColorPicker.id = 'Zapatec.ColorPicker';
    // Inherit Widget
    Zapatec.inherit(Zapatec.ColorPicker, Zapatec.Widget);

    // Include Zapatec.SliderWidget
    Zapatec.include(Zapatec.zapatecPath+'../zpslider/src/slider.js',
    		'Zapatec.SliderWidget');
    Zapatec.Transport.include(Zapatec.zapatecPath + '../zpextra/lang/colorpicker/eng.js');

    /**
     * Converts decimal value of channel color to hexadecimal value
     *
     * @private
     * @param {number} dec Decimal color channel value
     * @type string
     * @return Hexadecimal value of channel color
     */
    Zapatec.ColorPicker.convertChannelColorToHex = function (dec) {
    	var hexChars = "0123456789ABCDEF";
    	if (dec > 255) {
    		return null;
    	}
    	var i = dec % 16;
    	var j = (dec - i) / 16;
    	var result = hexChars.charAt(j);
    	result += hexChars.charAt(i);
    	return result;
    }

    /**
     * Converts hexadecimal value of color to object with properties:
     * red, green, blue for color channels
     *
     * @private
     * @param {string} hec Hexadecimal color value
     * @type object
     * @return Object that contains values for color channels
     */
    Zapatec.ColorPicker.convertHexToColorObject = function (hex) {
    	var hexChars = "0123456789ABCDEF";
    	var red, green, blue;
    	if (hex.match(/#[0123456789ABCDEF]{6}/i)) {
    		red = hexChars.indexOf(hex.charAt(1))*16+
    			  hexChars.indexOf(hex.charAt(2));
    		green = hexChars.indexOf(hex.charAt(3))*16+
    				hexChars.indexOf(hex.charAt(4));
    		blue = hexChars.indexOf(hex.charAt(5))*16+
    			   hexChars.indexOf(hex.charAt(6));
    	} else if (hex.match(/[0123456789ABCDEF]{6}/i)) {
    		red = hexChars.indexOf(hex.charAt(0))*16+
    			  hexChars.indexOf(hex.charAt(1));
    		green = hexChars.indexOf(hex.charAt(2))*16+
    				hexChars.indexOf(hex.charAt(3));
    		blue = hexChars.indexOf(hex.charAt(4))*16+
    			   hexChars.indexOf(hex.charAt(5));
    	} else {
    		red = 0; green = 0; blue = 0;
    	}

    	return {red:red,green:green,blue:blue};
    }

    /**
     * Initializes object.
     *
     * @param {object} objArgs User configuration
     */
    Zapatec.ColorPicker.prototype.init = function(objArgs) {
    	var self = this;
    	// Call init method of superclass
    	Zapatec.ColorPicker.SUPERclass.init.call(this, objArgs);
    	// Generates HTML for ColorPicker
    	if (Zapatec.windowLoaded) {
    		this.create();
    	} else {
    		Zapatec.Utils.addEvent(window, "load", function() {
    			self.create();
    		});
    	};
    };

    /**
     * Configures the widget. Gets called from init and reconfigure methods of
     * superclass.
     *
     * @private
     * @param {object} objArgs User configuration
     */
    Zapatec.ColorPicker.prototype.configure = function(objArgs) {
    	this.defineConfigOption('button', null);
    	this.defineConfigOption('handleButtonClick', true);
    	this.defineConfigOption('inputField', null);
    	this.defineConfigOption('color','#000000');
    	this.defineConfigOption('title');
    	this.defineConfigOption('offset',10);
    	this.defineConfigOption('singleClick',false);
    	this.defineConfigOption('themePath', Zapatec.zapatecPath +
    										 '../zpextra/themes/colorpicker/');

    	this.defineConfigOption('langId', Zapatec.ColorPicker.id);
    	this.defineConfigOption('lang', "eng");

    	Zapatec.ColorPicker.SUPERclass.configure.call(this, objArgs);

    	// defines field to protect configuration value from changes
    	this.currentColor = this.config.color;

    	// Gets button and inputField if they are string ID values
    	this.config.button = Zapatec.Widget.getElementById(this.config.button);
    	this.config.inputField = Zapatec.Widget.getElementById(this.config.inputField);

    	// Predefined colors
    	this.allColors = [
    			['000000', '003300', '006600', '009900', '00CC00', '00FF00',
    			'330000', '333300', '336600', '339900', '33CC00', '33FF00',
    			'660000', '663300', '666600', '669900', '66CC00', '66FF00'],
    			['000033', '003333', '006633', '009933', '00CC33', '00FF33',
    			'330033', '333333', '336633', '339933', '33CC33', '33FF33',
    			'660033', '663333', '666633', '669933', '66CC33', '66FF33'],
    			['000066', '003366', '006666', '009966', '00CC66', '00FF66',
    			'330066', '333366', '336666', '339966', '33CC66', '33FF66',
    			'660066', '663366', '666666', '669966', '66CC66', '66FF66'],
    			['000099', '003399', '006699', '009999', '00CC99', '00FF99',
    			'330099', '333399', '336699', '339999', '33CC99', '33FF99',
    			'660099', '663399', '666699', '669999', '66CC99', '66FF99'],
    			['0000CC', '0033CC', '0066CC', '0099CC', '00CCCC', '00FFCC',
    			'3300CC', '3333CC', '3366CC', '3399CC', '33CCCC', '33FFCC',
    			'6600CC', '6633CC', '6666CC', '6699CC', '66CCCC', '66FFCC'],
    			['0000FF', '0033FF', '0066FF', '0099FF', '00CCFF', '00FFFF',
    			'3300FF', '3333FF', '3366FF', '3399FF', '33CCFF', '33FFFF',
    			'6600FF', '6633FF', '6666FF', '6699FF', '66CCFF', '66FFFF'],
    			['990000', '993300', '996600', '999900', '99CC00', '99FF00',
    			'CC0000', 'CC3300', 'CC6600', 'CC9900', 'CCCC00', 'CCFF00',
    			'FF0000', 'FF3300', 'FF6600', 'FF9900', 'FFCC00', 'FFFF00'],
    			['990033', '993333', '996633', '999933', '99CC33', '99FF33',
    			'CC0033', 'CC3333', 'CC6633', 'CC9933', 'CCCC33', 'CCFF33',
    			'FF0033', 'FF3333', 'FF6633', 'FF9933', 'FFCC33', 'FFFF33'],
    			['990066', '993366', '996666', '999966', '99CC66', '99FF66',
    			'CC0066', 'CC3366', 'CC6666', 'CC9966', 'CCCC66', 'CCFF66',
    			'FF0066', 'FF3366', 'FF6666', 'FF9966', 'FFCC66', 'FFFF66'],
    			['990099', '993399', '996699', '999999', '99CC99', '99FF99',
    			'CC0099', 'CC3399', 'CC6699', 'CC9999', 'CCCC99', 'CCFF99',
    			'FF0099', 'FF3399', 'FF6699', 'FF9999', 'FFCC99', 'FFFF99'],
    			['9900CC', '9933CC', '9966CC', '9999CC', '99CCCC', '99FFCC',
    			'CC00CC', 'CC33CC', 'CC66CC', 'CC99CC', 'CCCCCC', 'CCFFCC',
    			'FF00CC', 'FF33CC', 'FF66CC', 'FF99CC', 'FFCCCC', 'FFFFCC'],
    			['9900FF', '9933FF', '9966FF', '9999FF', '99CCFF', '99FFFF',
    			'CC00FF', 'CC33FF', 'CC66FF', 'CC99FF', 'CCCCFF', 'CCFFFF',
    			'FF00FF', 'FF33FF', 'FF66FF', 'FF99FF', 'FFCCFF', 'FFFFFF']
    			];

    };

    Zapatec.ColorPicker.prototype.DEFAULT_SLIDER_WIDTH = 362;

    /**
     * Creates HTML for Color Picker
     * @private
     */
    Zapatec.ColorPicker.prototype.create = function() {
    	var self = this;

    	// is used to process document onClick
    	this.isShown = false;
    	this.sizeCalculated = false;

    	this.container = Zapatec.Utils.createElement("div");
    	document.body.insertBefore(this.container,document.body.firstChild);
    	this.container.className = this.getClassName({prefix: "zpColorPicker", suffix: "Container"});
    	this.container.id = "zpColorPicker" + this.id + "Container";
    	this.container.onclick = function () {
    		self.isShown = true;
    	}

    	// Header DIV
    	this.container.header = Zapatec.Utils.createElement("div", this.container);
    	this.container.header.className = "header";

    	var titleDiv = Zapatec.Utils.createElement("div", this.container.header);
    	titleDiv.className = 'title';
    	titleDiv.innerHTML = this.config.title?this.config.title:this.getMessage('windowTitle');
    	titleDiv.id = "zpColorPicker"+this.id+"Title";

    	// make picker window draggable
    	new Zapatec.Utils.Draggable(this.container,{
    		handler: titleDiv,
    		dragCSS:'dragging',
    		onDragInit : function () {
    			self.isShown = true;
    		},
    		onDragMove: function () {
    			if (self.WCH) {
    				self.WCH.style.left = self.container.style.left;
    				self.WCH.style.top = self.container.style.top;
    			}
    		}
    	});

    	var closeDiv = Zapatec.Utils.createElement("div", this.container.header);
    	closeDiv.className = 'close';
    	closeDiv.id = "zpColorPicker"+this.id+"Close";
    	closeDiv.onclick = function (){
    		self.hide();
    	}

    	// Palette container
    	this.container.fullPalette = Zapatec.Utils.createElement("div", this.container,true);
    	this.container.fullPalette.className = "fullPalette";

    	// RGB input fields container
    	this.container.rgbFields = Zapatec.Utils.createElement("div", this.container,true);
    	this.container.rgbFields.className = "rgbFields";

    	// RGB input fields
    	var inputRedContainer =	Zapatec.Utils.createElement("div", this.container.rgbFields, true);
    	inputRedContainer.appendChild(document.createTextNode(this.getMessage('redFieldLabel')));
    	this.container.rgbFields.inputRed =	Zapatec.Utils.createElement("input", inputRedContainer, true);
    	this.container.rgbFields.inputRed.size = 3;
    	this.container.rgbFields.inputRed.maxLength = 3;
    	this.container.rgbFields.inputRed.id = "zpColorPicker"+this.id+"InputRedField";

    	var inputGreenContainer = Zapatec.Utils.createElement("div", this.container.rgbFields, true);
    	inputGreenContainer.appendChild(document.createTextNode(this.getMessage('greenFieldLabel')));
    	this.container.rgbFields.inputGreen = Zapatec.Utils.createElement("input", inputGreenContainer, true);
    	this.container.rgbFields.inputGreen.size = 3;
    	this.container.rgbFields.inputGreen.maxLength = 3;
    	this.container.rgbFields.inputGreen.id = "zpColorPicker"+this.id+"InputGreenField";

    	var inputBlueContainer = Zapatec.Utils.createElement("div", this.container.rgbFields, true);
    	inputBlueContainer.appendChild(document.createTextNode(this.getMessage('blueFieldLabel')));

    	this.container.rgbFields.inputBlue = Zapatec.Utils.createElement("input", inputBlueContainer, true);
    	this.container.rgbFields.inputBlue.size = 3;
    	this.container.rgbFields.inputBlue.maxLength = 3;
    	this.container.rgbFields.inputBlue.id = "zpColorPicker"+this.id+"InputBlueField";

    	// Table that contains palette

    	var imgSrc = Zapatec.ColorPicker.path+'../zpextra/themes/colorpicker/px.gif';
    	var paletteTableHTML = [];
    	paletteTableHTML.push ('<table class="paletteTable" cellspacing="0" cellpadding="0">');
    	paletteTableHTML.push ('<tbody>');
    	for (var ii = 0; ii < this.allColors.length; ii++) {
    		paletteTableHTML.push ('<tr>');
    		for (var jj = 0; jj < this.allColors[ii].length; jj++) {
    			if (this.config.singleClick) {
    				paletteTableHTML.push ('<td id="zpColorPicker'+this.id+'Palette_'+ii+'_'+jj+'" style="background-color: #'+this.allColors[ii][jj]+'" onclick="Zapatec.Widget.callMethod(\''+this.id+'\',\'cellOnDoubleClick\',\''+this.allColors[ii][jj]+'\');" onmouseover="Zapatec.Widget.callMethod(\''+this.id+'\',\'cellOnMouseOver\',this);" onmouseout="Zapatec.Widget.callMethod(\''+this.id+'\',\'cellOnMouseOut\',this);">' );
    			} else {
    				paletteTableHTML.push ('<td id="zpColorPicker'+this.id+'Palette_'+ii+'_'+jj+'" style="background-color: #'+this.allColors[ii][jj]+'" onclick="Zapatec.Widget.callMethod(\''+this.id+'\',\'cellOnClick\',\''+this.allColors[ii][jj]+'\');" ondblclick="Zapatec.Widget.callMethod(\''+this.id+'\',\'cellOnDoubleClick\',\''+this.allColors[ii][jj]+'\');" onmouseover="Zapatec.Widget.callMethod(\''+this.id+'\',\'cellOnMouseOver\',this);" onmouseout="Zapatec.Widget.callMethod(\''+this.id+'\',\'cellOnMouseOut\',this);">' );
    			}
    			paletteTableHTML.push ('<img src="'+ imgSrc +'" id="'+'zpColorPicker'+this.id+'Palette_'+ii+'_'+jj+'image'+'" height="13" width="12">');
    			paletteTableHTML.push ('</td>');
    		}
    		paletteTableHTML.push ('</tr>');
    	}
    	paletteTableHTML.push ('</tbody>');
    	paletteTableHTML.push ('</table>');

    	this.container.fullPalette.innerHTML = paletteTableHTML.join("");

    	this.container.colorPreview = Zapatec.Utils.createElement("div", this.container);
    	this.container.colorPreview.className = "colorPreview";
    	this.container.colorPreview.id = "zpColorPicker"+this.id+"ColorPreview";

    	this.container.buttonsContainer = Zapatec.Utils.createElement("div", this.container);
    	this.container.buttonsContainer.className = "buttons";

    	var okButton = Zapatec.Utils.createElement("button", this.container.buttonsContainer);
    	okButton.appendChild(document.createTextNode(this.getMessage('okButtonCaption')));
    	okButton.id = "zpColorPicker"+this.id+"OkButton";
    	okButton.onclick = function () {
    		if (self.config.inputField) {
    			self.sendValueToinputField();
    		}
    		self.select();
    	}
    	var cancelButton = Zapatec.Utils.createElement("button", this.container.buttonsContainer);
    	cancelButton.id = "zpColorPicker"+this.id+"CancelButton";
    	cancelButton.appendChild(document.createTextNode(this.getMessage('cancelButtonCaption')));
    	cancelButton.onclick = function () {
    		self.hide();
    	}

    	this.container.hexFields = Zapatec.Utils.createElement("div", this.container, true);
    	this.container.hexFields.className = "hexFields";
    	this.container.hexFields.inputHex = Zapatec.Utils.createElement("input", this.container.hexFields, true);
    	this.container.hexFields.inputHex.id = "zpColorPicker"+this.id+"InputHexField";
    	this.container.hexFields.inputHex.size = 7;
    	this.container.hexFields.inputHex.maxLength = 7;

    	// Slider containers
    	this.container.slidersContainer = Zapatec.Utils.createElement("div", this.container, true);
    	this.container.slidersContainer.className = "slidersContainer";
    	var slidersTable = Zapatec.Utils.createElement("table", this.container.slidersContainer, true);
    	slidersTable.cellPadding = 1;
    	slidersTable.cellSpacing = 0;
    	var slidersTableBody = Zapatec.Utils.createElement("tbody", slidersTable, true);

    	var redSliderRow = Zapatec.Utils.createElement("tr", slidersTableBody, true);
    	this.container.slidersContainer.redSliderLabelCol = Zapatec.Utils.createElement("td", redSliderRow);
    	this.container.slidersContainer.redSliderLabelCol.appendChild(document.createTextNode(this.getMessage('redFieldLabel')));
    	this.container.slidersContainer.redSliderSliderCol = Zapatec.Utils.createElement("td", redSliderRow);

    	var greenSliderRow = Zapatec.Utils.createElement("tr", slidersTableBody, true);
    	this.container.slidersContainer.greenSliderLabelCol = Zapatec.Utils.createElement("td", greenSliderRow);
    	this.container.slidersContainer.greenSliderLabelCol.appendChild(document.createTextNode(this.getMessage('greenFieldLabel')));
    	this.container.slidersContainer.greenSliderSliderCol = Zapatec.Utils.createElement("td", greenSliderRow);

    	var blueSliderRow = Zapatec.Utils.createElement("tr", slidersTableBody, true);
    	this.container.slidersContainer.blueSliderLabelCol = Zapatec.Utils.createElement("td", blueSliderRow);
    	this.container.slidersContainer.blueSliderSliderCol = Zapatec.Utils.createElement("td", blueSliderRow);
    	this.container.slidersContainer.blueSliderLabelCol.appendChild(document.createTextNode(this.getMessage('blueFieldLabel')));

    	// Creating sliders (must be here because sliders needs parent elements
    	// to be already created)
    	this.createSliders();

    	// Input fields event handlers
    	this.container.rgbFields.inputRed.onkeyup = function(){
    		var value = parseInt(this.value);
    		if (isNaN(value)) {
    			value = 0;
    		} else {
    			this.value = value;
    		}
    		if (this.value < 0 ) {
    			this.value=0;
    		}
    		if (this.value > 255 ) {
    			this.value=255;
    		}
    		self.sliders.red.setPos(this.value);
    	};
    	this.container.rgbFields.inputGreen.onkeyup = function(){
    		var value = parseInt(this.value);
    		if (isNaN(value)) {
    			value = 0;
    		}
    		if (this.value < 0 ) {
    			this.value=0;
    		}
    		if (this.value > 255 ) {
    			this.value=255;
    		}
    		self.sliders.green.setPos(this.value);
    	};
    	this.container.rgbFields.inputBlue.onkeyup = function(){
    		var value = parseInt(this.value);
    		if (isNaN(value)) {
    			value = 0;
    		}
    		if (this.value < 0 ) {
    			this.value=0;
    		}
    		if (this.value > 255 ) {
    			this.value=255;
    		}
    		self.sliders.blue.setPos(this.value);
    	};

    	this.container.hexFields.inputHex.onchange = function(){
    		self.setColor(this.value);
    	};

    	// Select color handler
    	this.container.colorPreview.onclick = function(){
    		if (self.config.inputField) {
    			self.sendValueToinputField();
    		}
    		self.select();
    	};

      if (this.config.handleButtonClick) {
        // Show/hide picker event
        this.config.button.onclick = function(){
          self.isShown = true;
          self.show();
        };
      }

    	// Hide picker on Esc key and on click at other document element
    	Zapatec.Utils.addEvent(document, 'keypress', function(e) {
    		if (!e) {
    			e = window.event;
    		}
    		if (e.keyCode == 27) {
    			self.hide()
    		}
    	});
    	Zapatec.Utils.addEvent(document, 'click', function() {
    		if (!self.isShown) {
    			self.hide();
    		}
    		self.isShown = false;
    	});

    }
    /**
     * onClick handler for palette cell
     * @param {Object} color
     */
    Zapatec.ColorPicker.prototype.cellOnClick = function (color){
    	this.setColor(color);
    }

    /**
     * onDblClick handler for palette cell
     */
    Zapatec.ColorPicker.prototype.cellOnDoubleClick = function (color){
    	if (this.config.singleClick) {
    		this.setColor(color);
    	}
    	if (this.config.inputField) {
    		this.sendValueToinputField();
    	}
    	this.select();
    }
    /**
     * onMouseOver handler for palette cell
     * @param {Object} cell
     * @private
     */
    Zapatec.ColorPicker.prototype.cellOnMouseOver = function (cell){
    	Zapatec.Utils.removeClass(this.highlightedCell, 'under');
    	Zapatec.Utils.addClass(cell,'under');
    }
    /**
     * onMouseOut handler for palette cell
     * @param {Object} cell
     * @private
     */
    Zapatec.ColorPicker.prototype.cellOnMouseOut = function (cell){
    		Zapatec.Utils.removeClass(cell,'under');
    }

    /**
     * Creates sliders and attaches handlers to them
     * @private
     */
    Zapatec.ColorPicker.prototype.createSliders = function() {
    	var self = this;
    	this.sliders = {};

    	this.sliders.red = new Zapatec.Slider({
    		div : this.container.slidersContainer.redSliderSliderCol,
    		length : 255,
    		start: Zapatec.ColorPicker.convertHexToColorObject(this.currentColor).red,
    		step: 1,
    		orientation : 'H',
    		onChange : function (pos) {
    			self.container.rgbFields.inputRed.value = pos;
    			self.previewColor();
    		},
    		newPosition: function(){
    			self.isShown = true;
    		}
    	});

    	this.sliders.green = new Zapatec.Slider({
    		div : this.container.slidersContainer.greenSliderSliderCol,
    		length : 255,
    		step: 1,
    		start: Zapatec.ColorPicker.convertHexToColorObject(this.currentColor).green,
    		orientation : 'H',
    		onChange : function (pos) {
    			self.container.rgbFields.inputGreen.value = pos;
    			self.previewColor();
    		},
    		newPosition: function(){
    			self.isShown = true;
    		}
    	});

    	this.sliders.blue = new Zapatec.Slider({
    		div : this.container.slidersContainer.blueSliderSliderCol,
    		length : 255,
    		start: Zapatec.ColorPicker.convertHexToColorObject(this.currentColor).blue,
    		step: 1,
    		orientation : 'H',
    		onChange : function (pos) {
    			self.container.rgbFields.inputBlue.value = pos;
    			self.previewColor();
    		},
    		newPosition: function(){
    			self.isShown = true;
    		}
    	});
    }

    /**
     * Calculates top position for picker container based on position of button.
     * @private
     * @type number
     * @return Top position in pixels
     */
    Zapatec.ColorPicker.prototype.calculateTopPos = function() {
    	var elementOffset = Zapatec.Utils.getElementOffset(this.config.button);
    	var top = elementOffset.top - this.container.clientHeight -
    			  this.config.offset;
    	if (top <= 0) {
    		top = elementOffset.top + this.config.button.clientHeight +
    			  this.config.offset;
    	}
    	return top;
    }

    /**
     * Calculates left position for picker container based on position of button.
     * @private
     * @type number
     * @return Left position in pixels
     */
    Zapatec.ColorPicker.prototype.calculateLeftPos = function() {
    	var elementOffset = Zapatec.Utils.getElementOffset(this.config.button);
    	var left = elementOffset.left + this.config.button.clientWidth +
    			   this.config.offset;
    	if ((left + this.container.clientWidth) >= document.body.clientWidth) {
    		left =
    		elementOffset.left - this.container.clientWidth - this.config.offset;
    	}
    	if (left <= 0) {
    		left = elementOffset.left + this.config.button.clientWidth +
    			   this.config.offset;
    	}

    	return left;
    }

    Zapatec.ColorPicker.prototype.calculateSize = function () {

    	var containerWidth;

    	if (this.sliders.red.container) {
    		containerWidth= this.sliders.red.container.offsetWidth;
    	} else {
    		containerWidth = this.DEFAULT_SLIDER_WIDTH;
    //		containerWidth = this.container.slidersContainer.redSliderSliderCol.offsetWidth;
    	}

    	this.container.slidersContainer.style.width = (containerWidth+this.container.slidersContainer.redSliderLabelCol.offsetWidth) +'px';
    	var basicWidth = this.container.slidersContainer.offsetWidth;
    	this.container.style.width = (basicWidth + 2)+ 'px';

    	this.container.header.style.width = (basicWidth - 4)+'px';

    	this.container.buttonsContainer.style.width = (basicWidth-this.container.fullPalette.offsetWidth-this.container.colorPreview.offsetWidth-4)+'px';

    	this.container.rgbFields.style.width = (basicWidth-this.container.fullPalette.offsetWidth - 13)+'px';
    	this.container.hexFields.style.width = (basicWidth-this.container.fullPalette.offsetWidth - 9)+'px';

    	this.sizeCalculated = true;
    }

    /**
     * Shows Color Picker
     */
    Zapatec.ColorPicker.prototype.show = function () {
    	var self = this;

    	if (!this.sizeCalculated) {
    		this.calculateSize();
    	}

    	this.container.style.visibility = 'visible';
    	this.container.style.left = this.calculateLeftPos() + "px";
    	this.container.style.top =  this.calculateTopPos() + "px";
    	// Windowed controls hider
    	this.WCH = Zapatec.Utils.createWCH();
    	if (this.WCH) {
    		this.WCH.style.zIndex = this.container.style.zIndex;
    		Zapatec.Utils.setupWCH_el(this.WCH,this.container);
    	}
      if (this.config.handleButtonClick) {
        // Attaches hide method to button
        this.config.button.onclick = function(){
          self.isShown = false;
          self.hide();
        };
      }
      this.highlightCell();
    }

    /**
     * Hides ColorPicker
     */
    Zapatec.ColorPicker.prototype.hide = function () {
    	var self = this;
    	this.container.style.visibility = 'hidden';
    	this.container.style.left = '-1000px';
    	this.container.style.top = '-1000px';
    	if (this.WCH){
    		Zapatec.ScrollWithWindow.unregister(this.WCH);
    		if (this.WCH.outerHTML) {
    			this.WCH.outerHTML = "";
    		} else {
    			Zapatec.Utils.destroy(this.WCH);
    		}
    	}
    //	Zapatec.Utils.hideWCH(this.WCH);
      if (this.config.handleButtonClick) {
        // Attaches show method to button
        this.config.button.onclick = function() {
          self.isShown = true;
          self.show();
        };
      }
    }

    /**
     * Returns current color from picker.
     * @type string
     * @return Current color, format '#FFFFFF'
     */

    Zapatec.ColorPicker.prototype.getColor = function () {
    	return this.currentColor;
    }

    /**
     * Sets current color. Used to handle changes in Hex input field
     * Sets color channels values to sliders positions
     * @private
     * @param [string] Color, format '#FFFFFF' or 'FFFFFF'
     */
    Zapatec.ColorPicker.prototype.setColor = function (hexcolor) {
    	var color = Zapatec.ColorPicker.convertHexToColorObject(hexcolor);
    	this.sliders.red.setPos(color.red);
    	this.sliders.green.setPos(color.green);
    	this.sliders.blue.setPos(color.blue);
    }

    /**
     * Displays color preview based on RGB input fields value
     * Sets hex field value and current color
     * @private
     * @param [string] Color, format '#FFFFFF' or 'FFFFFF'
     */
    Zapatec.ColorPicker.prototype.previewColor = function () {
    	var hexColor = '#' +
    		   Zapatec.ColorPicker.convertChannelColorToHex(this.container.rgbFields.inputRed.value) +
    		   Zapatec.ColorPicker.convertChannelColorToHex(this.container.rgbFields.inputGreen.value) +
    		   Zapatec.ColorPicker.convertChannelColorToHex(this.container.rgbFields.inputBlue.value);
    	this.container.colorPreview.style.backgroundColor = hexColor;
    	this.container.hexFields.inputHex.value = hexColor;
    	this.currentColor = hexColor;
    }

    /**
     * Highlights palette cell if current color is in predefined colors collection
     * @private
     */
    Zapatec.ColorPicker.prototype.highlightCell = function () {
    	for (var ii = 0; ii < this.allColors.length; ii++) {
    		for (var jj = 0; jj < this.allColors[ii].length; jj++) {
    			var cell = document.getElementById('zpColorPicker'+this.id+'Palette_'+ii+'_'+jj);
    			if (((this.currentColor.charAt(0) == '#') &&
    				(this.currentColor == '#' + this.allColors[ii][jj])) ||
    				(this.currentColor == this.allColors[ii][jj])) {
    				Zapatec.Utils.addClass(cell,'under');
    					this.highlightedCell = cell;
    			} else {
    				Zapatec.Utils.removeClass(cell,'under');
    			}
    		}
    	}
    }

    /**
     * Sends selected color value to inputField element
     * If inputField is an INPUT or TEXTAREA - current color is set as its value
     * If inputField is a SELECT - options that corresponds to current color is
     * selected (if present)
     * Otherwise - current color is put into element's innerHtml
     * @private
     */
    Zapatec.ColorPicker.prototype.sendValueToinputField = function () {
    	if (this.config.inputField != null) {
    		var tagName = this.config.inputField.tagName.toUpperCase();
    		switch (tagName) {
    			case "TEXTAREA":
    			case "INPUT":
    				this.config.inputField.value = this.currentColor;
    				break;
    			case "SELECT":
    				for(var i = 0; i < this.config.inputField.options.length; i++){
    					if (this.config.inputField.options[i].value == this.currentColor){
    						this.config.inputField.selectedIndex = i;
    						break;
    					}
    				}

    				break;
    			default:
    				this.config.inputField.innerHTML = this.currentColor;
    				break;
    		}
    	}
    }

    /**
     * Fires select event
     * Sends current color value to inputField element
     * Hides color picker
     * @private
     */
    Zapatec.ColorPicker.prototype.select = function () {
    	this.fireEvent('select', this.currentColor);
    	this.hide();
    }

Overview | File | Class | Tree | Index | Help

Zapatec Utils

PREV NEXT | FRAMES NO FRAMES

Documentation generated by JSDoc on Thu Aug 16 12:18:39 2007