[ Mini Kiebo ]
Server: Windows NT DESKTOP-5B8S0D4 6.2 build 9200 (Windows 8 Professional Edition) i586
Path:
D:
/
xampp182
/
htdocs
/
simpeg
/
zapatec
/
zpeditor
/
utils
/
jsdocs
/
[
Home
]
File: overview-summary-colorpicker.js.html
<!doctype html public "-//W3C//DTD HTML 4.0 Frameset//EN""http://www.w3.org/TR/REC-html40/frameset.dtd"> <html> <head> <title> Zapatec Utils Overview </title> <link rel ="stylesheet" type="text/css" href="stylesheet.css" title="Style"> <script> function asd() { parent.document.title="colorpicker.js Overview"; } </script> </head> <body bgcolor="white" onload="asd();"> <!-- ========== START OF NAVBAR ========== --> <a name="navbar_top"><!-- --></a> <table border="0" width="100%" cellpadding="1" cellspacing="0"> <tr> <td colspan=2 bgcolor="#EEEEFF" class="NavBarCell1"> <a name="navbar_top_firstrow"><!-- --></a> <table border="0" cellpadding="0" cellspacing="3"> <tr align="center" valign="top"> <td bgcolor="#EEEEFF" class="NavBarCell1"> <a href="overview-summary.html"><font class="NavBarFont1"><b>Overview</b></font></a> </td> <td bgcolor="#FFFFFF" class="NavBarCell1Rev"> <font class="NavBarFont1Rev"><b>File</b></font> </td> <td bgcolor="#FFFFFF" class="NavBarCell1"> <font class="NavBarFont1">Class</font> </td> <td bgcolor="#EEEEFF" class="NavBarCell1"> <a href="overview-tree.html"><font class="NavBarFont1"><b>Tree</b></font></a> </td> <td bgcolor="#EEEEFF" class="NavBarCell1"> <a href="index-all.html"--><font class="NavBarFont1"><b>Index</b></font></a> </td> <td bgcolor="#EEEEFF" class="NavBarCell1"> <a href="help-doc.html"><font class="NavBarFont1"><b>Help</b></font></a> </td> </tr> </table> </td> <td bgcolor="#EEEEFF" align="right" valign="top"> <em> <b>Zapatec Utils</b></em> </td> </tr> <tr> <td bgcolor="white" class="NavBarCell2"><font size="-2"> PREV NEXT</font></td> <td bgcolor="white" class="NavBarCell2"><font size="-2"> <a href="index.html" target="_top"><b>FRAMES</b></a> <a href="overview-summary.html" target="_top"><b>NO FRAMES</b></a> <script> <!-- if(window==top) { document.writeln('<A HREF="allclasses-noframe.html" TARGET=""><B>All Classes</B></A>'); } //--> </script> <noscript> <a href="allclasses-noframe.html" target=""><b>All Classes</b></a> </noscript> </font></td> </tr> </table> <!-- =========== END OF NAVBAR =========== --> <hr> <center> <h2>colorpicker.js</h2> </center> <h4>Summary</h4> <p> 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><BR/><BR/> </p> <hr> <table border="1" cellpadding="3" cellspacing="0" width="100%"> <tr bgcolor="#CCCCFF" class="TableHeadingColor"> <td colspan=2><font size="+2"> <b>Class Summary</b> </font></td> </tr> <tr bgcolor="white" class="TableRowColor"> <td width="15%"><b><a href="Zapatec/ColorPicker.html">Zapatec.ColorPicker</a></b></td> <td> </td> </tr> </table> <hr/> <!-- ========== METHOD SUMMARY =========== --> <!-- ========== END METHOD SUMMARY =========== --> <pre class="sourceview"><span class="comment">/* $Id: colorpicker.js 7599 2007-07-25 11:13:15Z roman $ */</span> <span class="comment">/** * <span class="attrib">@fileoverview</span> 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> */</span> <span class="comment">/** * 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. * <span class="attrib">@param</span> 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 */</span> <span class="comment">/** * ColorPicker class. * * <span class="attrib">@constructor</span> * <span class="attrib">@extends</span> Zapatec.Widget * <span class="attrib">@param</span> {object} objArgs User configuration */</span> Zapatec.ColorPicker = <span class="reserved">function</span>(objArgs) { <span class="reserved">if</span> (arguments.length == 0) { objArgs = {}; } Zapatec.ColorPicker.SUPERconstructor.call(<span class="reserved">this</span>, objArgs); }; <span class="comment">/** * 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. * <span class="attrib">@private</span> */</span> Zapatec.ColorPicker.id = <span class="literal">'Zapatec.ColorPicker'</span>; <span class="comment">// Inherit Widget</span> Zapatec.inherit(Zapatec.ColorPicker, Zapatec.Widget); <span class="comment">// Include Zapatec.SliderWidget</span> Zapatec.include(Zapatec.zapatecPath+<span class="literal">'../zpslider/src/slider.js'</span>, <span class="literal">'Zapatec.SliderWidget'</span>); Zapatec.Transport.include(Zapatec.zapatecPath + <span class="literal">'../zpextra/lang/colorpicker/eng.js'</span>); <span class="comment">/** * Converts decimal value of channel color to hexadecimal value * * <span class="attrib">@private</span> * <span class="attrib">@param</span> {number} dec Decimal color channel value * <span class="attrib">@type</span> string * <span class="attrib">@return</span> Hexadecimal value of channel color */</span> Zapatec.ColorPicker.convertChannelColorToHex = <span class="reserved">function</span> (dec) { var hexChars = <span class="literal">"0123456789ABCDEF"</span>; <span class="reserved">if</span> (dec > 255) { <span class="reserved">return</span> null; } var i = dec % 16; var j = (dec - i) / 16; var result = hexChars.charAt(j); result += hexChars.charAt(i); <span class="reserved">return</span> result; } <span class="comment">/** * Converts hexadecimal value of color to object with properties: * red, green, blue for color channels * * <span class="attrib">@private</span> * <span class="attrib">@param</span> {string} hec Hexadecimal color value * <span class="attrib">@type</span> object * <span class="attrib">@return</span> Object that contains values for color channels */</span> Zapatec.ColorPicker.convertHexToColorObject = <span class="reserved">function</span> (hex) { var hexChars = <span class="literal">"0123456789ABCDEF"</span>; var red, green, blue; <span class="reserved">if</span> (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)); } <span class="reserved">else</span> <span class="reserved">if</span> (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)); } <span class="reserved">else</span> { red = 0; green = 0; blue = 0; } <span class="reserved">return</span> {red:red,green:green,blue:blue}; } <span class="comment">/** * Initializes object. * * <span class="attrib">@param</span> {object} objArgs User configuration */</span> Zapatec.ColorPicker.<span class="reserved">prototype</span>.init = <span class="reserved">function</span>(objArgs) { var self = <span class="reserved">this</span>; <span class="comment">// Call init method of superclass</span> Zapatec.ColorPicker.SUPERclass.init.call(<span class="reserved">this</span>, objArgs); <span class="comment">// Generates HTML for ColorPicker</span> <span class="reserved">if</span> (Zapatec.windowLoaded) { <span class="reserved">this</span>.create(); } <span class="reserved">else</span> { Zapatec.Utils.addEvent(window, <span class="literal">"load"</span>, <span class="reserved">function</span>() { self.create(); }); }; }; <span class="comment">/** * Configures the widget. Gets called from init and reconfigure methods of * superclass. * * <span class="attrib">@private</span> * <span class="attrib">@param</span> {object} objArgs User configuration */</span> Zapatec.ColorPicker.<span class="reserved">prototype</span>.configure = <span class="reserved">function</span>(objArgs) { <span class="reserved">this</span>.defineConfigOption(<span class="literal">'button'</span>, null); <span class="reserved">this</span>.defineConfigOption(<span class="literal">'handleButtonClick'</span>, true); <span class="reserved">this</span>.defineConfigOption(<span class="literal">'inputField'</span>, null); <span class="reserved">this</span>.defineConfigOption(<span class="literal">'color'</span>,<span class="literal">'#000000'</span>); <span class="reserved">this</span>.defineConfigOption(<span class="literal">'title'</span>); <span class="reserved">this</span>.defineConfigOption(<span class="literal">'offset'</span>,10); <span class="reserved">this</span>.defineConfigOption(<span class="literal">'singleClick'</span>,false); <span class="reserved">this</span>.defineConfigOption(<span class="literal">'themePath'</span>, Zapatec.zapatecPath + <span class="literal">'../zpextra/themes/colorpicker/'</span>); <span class="reserved">this</span>.defineConfigOption(<span class="literal">'langId'</span>, Zapatec.ColorPicker.id); <span class="reserved">this</span>.defineConfigOption(<span class="literal">'lang'</span>, <span class="literal">"eng"</span>); Zapatec.ColorPicker.SUPERclass.configure.call(<span class="reserved">this</span>, objArgs); <span class="comment">// defines field to protect configuration value from changes</span> <span class="reserved">this</span>.currentColor = <span class="reserved">this</span>.config.color; <span class="comment">// Gets button and inputField if they are string ID values</span> <span class="reserved">this</span>.config.button = Zapatec.Widget.getElementById(<span class="reserved">this</span>.config.button); <span class="reserved">this</span>.config.inputField = Zapatec.Widget.getElementById(<span class="reserved">this</span>.config.inputField); <span class="comment">// Predefined colors</span> <span class="reserved">this</span>.allColors = [ [<span class="literal">'000000'</span>, <span class="literal">'003300'</span>, <span class="literal">'006600'</span>, <span class="literal">'009900'</span>, <span class="literal">'00CC00'</span>, <span class="literal">'00FF00'</span>, <span class="literal">'330000'</span>, <span class="literal">'333300'</span>, <span class="literal">'336600'</span>, <span class="literal">'339900'</span>, <span class="literal">'33CC00'</span>, <span class="literal">'33FF00'</span>, <span class="literal">'660000'</span>, <span class="literal">'663300'</span>, <span class="literal">'666600'</span>, <span class="literal">'669900'</span>, <span class="literal">'66CC00'</span>, <span class="literal">'66FF00'</span>], [<span class="literal">'000033'</span>, <span class="literal">'003333'</span>, <span class="literal">'006633'</span>, <span class="literal">'009933'</span>, <span class="literal">'00CC33'</span>, <span class="literal">'00FF33'</span>, <span class="literal">'330033'</span>, <span class="literal">'333333'</span>, <span class="literal">'336633'</span>, <span class="literal">'339933'</span>, <span class="literal">'33CC33'</span>, <span class="literal">'33FF33'</span>, <span class="literal">'660033'</span>, <span class="literal">'663333'</span>, <span class="literal">'666633'</span>, <span class="literal">'669933'</span>, <span class="literal">'66CC33'</span>, <span class="literal">'66FF33'</span>], [<span class="literal">'000066'</span>, <span class="literal">'003366'</span>, <span class="literal">'006666'</span>, <span class="literal">'009966'</span>, <span class="literal">'00CC66'</span>, <span class="literal">'00FF66'</span>, <span class="literal">'330066'</span>, <span class="literal">'333366'</span>, <span class="literal">'336666'</span>, <span class="literal">'339966'</span>, <span class="literal">'33CC66'</span>, <span class="literal">'33FF66'</span>, <span class="literal">'660066'</span>, <span class="literal">'663366'</span>, <span class="literal">'666666'</span>, <span class="literal">'669966'</span>, <span class="literal">'66CC66'</span>, <span class="literal">'66FF66'</span>], [<span class="literal">'000099'</span>, <span class="literal">'003399'</span>, <span class="literal">'006699'</span>, <span class="literal">'009999'</span>, <span class="literal">'00CC99'</span>, <span class="literal">'00FF99'</span>, <span class="literal">'330099'</span>, <span class="literal">'333399'</span>, <span class="literal">'336699'</span>, <span class="literal">'339999'</span>, <span class="literal">'33CC99'</span>, <span class="literal">'33FF99'</span>, <span class="literal">'660099'</span>, <span class="literal">'663399'</span>, <span class="literal">'666699'</span>, <span class="literal">'669999'</span>, <span class="literal">'66CC99'</span>, <span class="literal">'66FF99'</span>], [<span class="literal">'0000CC'</span>, <span class="literal">'0033CC'</span>, <span class="literal">'0066CC'</span>, <span class="literal">'0099CC'</span>, <span class="literal">'00CCCC'</span>, <span class="literal">'00FFCC'</span>, <span class="literal">'3300CC'</span>, <span class="literal">'3333CC'</span>, <span class="literal">'3366CC'</span>, <span class="literal">'3399CC'</span>, <span class="literal">'33CCCC'</span>, <span class="literal">'33FFCC'</span>, <span class="literal">'6600CC'</span>, <span class="literal">'6633CC'</span>, <span class="literal">'6666CC'</span>, <span class="literal">'6699CC'</span>, <span class="literal">'66CCCC'</span>, <span class="literal">'66FFCC'</span>], [<span class="literal">'0000FF'</span>, <span class="literal">'0033FF'</span>, <span class="literal">'0066FF'</span>, <span class="literal">'0099FF'</span>, <span class="literal">'00CCFF'</span>, <span class="literal">'00FFFF'</span>, <span class="literal">'3300FF'</span>, <span class="literal">'3333FF'</span>, <span class="literal">'3366FF'</span>, <span class="literal">'3399FF'</span>, <span class="literal">'33CCFF'</span>, <span class="literal">'33FFFF'</span>, <span class="literal">'6600FF'</span>, <span class="literal">'6633FF'</span>, <span class="literal">'6666FF'</span>, <span class="literal">'6699FF'</span>, <span class="literal">'66CCFF'</span>, <span class="literal">'66FFFF'</span>], [<span class="literal">'990000'</span>, <span class="literal">'993300'</span>, <span class="literal">'996600'</span>, <span class="literal">'999900'</span>, <span class="literal">'99CC00'</span>, <span class="literal">'99FF00'</span>, <span class="literal">'CC0000'</span>, <span class="literal">'CC3300'</span>, <span class="literal">'CC6600'</span>, <span class="literal">'CC9900'</span>, <span class="literal">'CCCC00'</span>, <span class="literal">'CCFF00'</span>, <span class="literal">'FF0000'</span>, <span class="literal">'FF3300'</span>, <span class="literal">'FF6600'</span>, <span class="literal">'FF9900'</span>, <span class="literal">'FFCC00'</span>, <span class="literal">'FFFF00'</span>], [<span class="literal">'990033'</span>, <span class="literal">'993333'</span>, <span class="literal">'996633'</span>, <span class="literal">'999933'</span>, <span class="literal">'99CC33'</span>, <span class="literal">'99FF33'</span>, <span class="literal">'CC0033'</span>, <span class="literal">'CC3333'</span>, <span class="literal">'CC6633'</span>, <span class="literal">'CC9933'</span>, <span class="literal">'CCCC33'</span>, <span class="literal">'CCFF33'</span>, <span class="literal">'FF0033'</span>, <span class="literal">'FF3333'</span>, <span class="literal">'FF6633'</span>, <span class="literal">'FF9933'</span>, <span class="literal">'FFCC33'</span>, <span class="literal">'FFFF33'</span>], [<span class="literal">'990066'</span>, <span class="literal">'993366'</span>, <span class="literal">'996666'</span>, <span class="literal">'999966'</span>, <span class="literal">'99CC66'</span>, <span class="literal">'99FF66'</span>, <span class="literal">'CC0066'</span>, <span class="literal">'CC3366'</span>, <span class="literal">'CC6666'</span>, <span class="literal">'CC9966'</span>, <span class="literal">'CCCC66'</span>, <span class="literal">'CCFF66'</span>, <span class="literal">'FF0066'</span>, <span class="literal">'FF3366'</span>, <span class="literal">'FF6666'</span>, <span class="literal">'FF9966'</span>, <span class="literal">'FFCC66'</span>, <span class="literal">'FFFF66'</span>], [<span class="literal">'990099'</span>, <span class="literal">'993399'</span>, <span class="literal">'996699'</span>, <span class="literal">'999999'</span>, <span class="literal">'99CC99'</span>, <span class="literal">'99FF99'</span>, <span class="literal">'CC0099'</span>, <span class="literal">'CC3399'</span>, <span class="literal">'CC6699'</span>, <span class="literal">'CC9999'</span>, <span class="literal">'CCCC99'</span>, <span class="literal">'CCFF99'</span>, <span class="literal">'FF0099'</span>, <span class="literal">'FF3399'</span>, <span class="literal">'FF6699'</span>, <span class="literal">'FF9999'</span>, <span class="literal">'FFCC99'</span>, <span class="literal">'FFFF99'</span>], [<span class="literal">'9900CC'</span>, <span class="literal">'9933CC'</span>, <span class="literal">'9966CC'</span>, <span class="literal">'9999CC'</span>, <span class="literal">'99CCCC'</span>, <span class="literal">'99FFCC'</span>, <span class="literal">'CC00CC'</span>, <span class="literal">'CC33CC'</span>, <span class="literal">'CC66CC'</span>, <span class="literal">'CC99CC'</span>, <span class="literal">'CCCCCC'</span>, <span class="literal">'CCFFCC'</span>, <span class="literal">'FF00CC'</span>, <span class="literal">'FF33CC'</span>, <span class="literal">'FF66CC'</span>, <span class="literal">'FF99CC'</span>, <span class="literal">'FFCCCC'</span>, <span class="literal">'FFFFCC'</span>], [<span class="literal">'9900FF'</span>, <span class="literal">'9933FF'</span>, <span class="literal">'9966FF'</span>, <span class="literal">'9999FF'</span>, <span class="literal">'99CCFF'</span>, <span class="literal">'99FFFF'</span>, <span class="literal">'CC00FF'</span>, <span class="literal">'CC33FF'</span>, <span class="literal">'CC66FF'</span>, <span class="literal">'CC99FF'</span>, <span class="literal">'CCCCFF'</span>, <span class="literal">'CCFFFF'</span>, <span class="literal">'FF00FF'</span>, <span class="literal">'FF33FF'</span>, <span class="literal">'FF66FF'</span>, <span class="literal">'FF99FF'</span>, <span class="literal">'FFCCFF'</span>, <span class="literal">'FFFFFF'</span>] ]; }; Zapatec.ColorPicker.<span class="reserved">prototype</span>.DEFAULT_SLIDER_WIDTH = 362; <span class="comment">/** * Creates HTML for Color Picker * <span class="attrib">@private</span> */</span> Zapatec.ColorPicker.<span class="reserved">prototype</span>.create = <span class="reserved">function</span>() { var self = <span class="reserved">this</span>; <span class="comment">// is used to process document onClick</span> <span class="reserved">this</span>.isShown = false; <span class="reserved">this</span>.sizeCalculated = false; <span class="reserved">this</span>.container = Zapatec.Utils.createElement(<span class="literal">"div"</span>); document.body.insertBefore(<span class="reserved">this</span>.container,document.body.firstChild); <span class="reserved">this</span>.container.className = <span class="reserved">this</span>.getClassName({prefix: <span class="literal">"zpColorPicker"</span>, suffix: <span class="literal">"Container"</span>}); <span class="reserved">this</span>.container.id = <span class="literal">"zpColorPicker"</span> + <span class="reserved">this</span>.id + <span class="literal">"Container"</span>; <span class="reserved">this</span>.container.onclick = <span class="reserved">function</span> () { self.isShown = true; } <span class="comment">// Header DIV</span> <span class="reserved">this</span>.container.header = Zapatec.Utils.createElement(<span class="literal">"div"</span>, <span class="reserved">this</span>.container); <span class="reserved">this</span>.container.header.className = <span class="literal">"header"</span>; var titleDiv = Zapatec.Utils.createElement(<span class="literal">"div"</span>, <span class="reserved">this</span>.container.header); titleDiv.className = <span class="literal">'title'</span>; titleDiv.innerHTML = <span class="reserved">this</span>.config.title?<span class="reserved">this</span>.config.title:<span class="reserved">this</span>.getMessage(<span class="literal">'windowTitle'</span>); titleDiv.id = <span class="literal">"zpColorPicker"</span>+<span class="reserved">this</span>.id+<span class="literal">"Title"</span>; <span class="comment">// make picker window draggable</span> new Zapatec.Utils.Draggable(<span class="reserved">this</span>.container,{ handler: titleDiv, dragCSS:<span class="literal">'dragging'</span>, onDragInit : <span class="reserved">function</span> () { self.isShown = true; }, onDragMove: <span class="reserved">function</span> () { <span class="reserved">if</span> (self.WCH) { self.WCH.style.left = self.container.style.left; self.WCH.style.top = self.container.style.top; } } }); var closeDiv = Zapatec.Utils.createElement(<span class="literal">"div"</span>, <span class="reserved">this</span>.container.header); closeDiv.className = <span class="literal">'close'</span>; closeDiv.id = <span class="literal">"zpColorPicker"</span>+<span class="reserved">this</span>.id+<span class="literal">"Close"</span>; closeDiv.onclick = <span class="reserved">function</span> (){ self.hide(); } <span class="comment">// Palette container</span> <span class="reserved">this</span>.container.fullPalette = Zapatec.Utils.createElement(<span class="literal">"div"</span>, <span class="reserved">this</span>.container,true); <span class="reserved">this</span>.container.fullPalette.className = <span class="literal">"fullPalette"</span>; <span class="comment">// RGB input fields container</span> <span class="reserved">this</span>.container.rgbFields = Zapatec.Utils.createElement(<span class="literal">"div"</span>, <span class="reserved">this</span>.container,true); <span class="reserved">this</span>.container.rgbFields.className = <span class="literal">"rgbFields"</span>; <span class="comment">// RGB input fields</span> var inputRedContainer = Zapatec.Utils.createElement(<span class="literal">"div"</span>, <span class="reserved">this</span>.container.rgbFields, true); inputRedContainer.appendChild(document.createTextNode(<span class="reserved">this</span>.getMessage(<span class="literal">'redFieldLabel'</span>))); <span class="reserved">this</span>.container.rgbFields.inputRed = Zapatec.Utils.createElement(<span class="literal">"input"</span>, inputRedContainer, true); <span class="reserved">this</span>.container.rgbFields.inputRed.size = 3; <span class="reserved">this</span>.container.rgbFields.inputRed.maxLength = 3; <span class="reserved">this</span>.container.rgbFields.inputRed.id = <span class="literal">"zpColorPicker"</span>+<span class="reserved">this</span>.id+<span class="literal">"InputRedField"</span>; var inputGreenContainer = Zapatec.Utils.createElement(<span class="literal">"div"</span>, <span class="reserved">this</span>.container.rgbFields, true); inputGreenContainer.appendChild(document.createTextNode(<span class="reserved">this</span>.getMessage(<span class="literal">'greenFieldLabel'</span>))); <span class="reserved">this</span>.container.rgbFields.inputGreen = Zapatec.Utils.createElement(<span class="literal">"input"</span>, inputGreenContainer, true); <span class="reserved">this</span>.container.rgbFields.inputGreen.size = 3; <span class="reserved">this</span>.container.rgbFields.inputGreen.maxLength = 3; <span class="reserved">this</span>.container.rgbFields.inputGreen.id = <span class="literal">"zpColorPicker"</span>+<span class="reserved">this</span>.id+<span class="literal">"InputGreenField"</span>; var inputBlueContainer = Zapatec.Utils.createElement(<span class="literal">"div"</span>, <span class="reserved">this</span>.container.rgbFields, true); inputBlueContainer.appendChild(document.createTextNode(<span class="reserved">this</span>.getMessage(<span class="literal">'blueFieldLabel'</span>))); <span class="reserved">this</span>.container.rgbFields.inputBlue = Zapatec.Utils.createElement(<span class="literal">"input"</span>, inputBlueContainer, true); <span class="reserved">this</span>.container.rgbFields.inputBlue.size = 3; <span class="reserved">this</span>.container.rgbFields.inputBlue.maxLength = 3; <span class="reserved">this</span>.container.rgbFields.inputBlue.id = <span class="literal">"zpColorPicker"</span>+<span class="reserved">this</span>.id+<span class="literal">"InputBlueField"</span>; <span class="comment">// Table that contains palette</span> var imgSrc = Zapatec.ColorPicker.path+<span class="literal">'../zpextra/themes/colorpicker/px.gif'</span>; var paletteTableHTML = []; paletteTableHTML.push (<span class="literal">'<table class="paletteTable" cellspacing="0" cellpadding="0">'</span>); paletteTableHTML.push (<span class="literal">'<tbody>'</span>); <span class="reserved">for</span> (var ii = 0; ii < <span class="reserved">this</span>.allColors.length; ii++) { paletteTableHTML.push (<span class="literal">'<tr>'</span>); <span class="reserved">for</span> (var jj = 0; jj < <span class="reserved">this</span>.allColors[ii].length; jj++) { <span class="reserved">if</span> (<span class="reserved">this</span>.config.singleClick) { paletteTableHTML.push (<span class="literal">'<td id="zpColorPicker'</span>+<span class="reserved">this</span>.id+<span class="literal">'Palette_'</span>+ii+<span class="literal">'_'</span>+jj+<span class="literal">'" style="background-color: #'</span>+<span class="reserved">this</span>.allColors[ii][jj]+<span class="literal">'" onclick="Zapatec.Widget.callMethod(\'</span><span class="literal">'+this.id+'</span>\<span class="literal">',\'</span>cellOnDoubleClick\<span class="literal">',\'</span><span class="literal">'+this.allColors[ii][jj]+'</span>\<span class="literal">');" onmouseover="Zapatec.Widget.callMethod(\'</span><span class="literal">'+this.id+'</span>\<span class="literal">',\'</span>cellOnMouseOver\<span class="literal">',this);" onmouseout="Zapatec.Widget.callMethod(\'</span><span class="literal">'+this.id+'</span>\<span class="literal">',\'</span>cellOnMouseOut\<span class="literal">',this);">'</span> ); } <span class="reserved">else</span> { paletteTableHTML.push (<span class="literal">'<td id="zpColorPicker'</span>+<span class="reserved">this</span>.id+<span class="literal">'Palette_'</span>+ii+<span class="literal">'_'</span>+jj+<span class="literal">'" style="background-color: #'</span>+<span class="reserved">this</span>.allColors[ii][jj]+<span class="literal">'" onclick="Zapatec.Widget.callMethod(\'</span><span class="literal">'+this.id+'</span>\<span class="literal">',\'</span>cellOnClick\<span class="literal">',\'</span><span class="literal">'+this.allColors[ii][jj]+'</span>\<span class="literal">');" ondblclick="Zapatec.Widget.callMethod(\'</span><span class="literal">'+this.id+'</span>\<span class="literal">',\'</span>cellOnDoubleClick\<span class="literal">',\'</span><span class="literal">'+this.allColors[ii][jj]+'</span>\<span class="literal">');" onmouseover="Zapatec.Widget.callMethod(\'</span><span class="literal">'+this.id+'</span>\<span class="literal">',\'</span>cellOnMouseOver\<span class="literal">',this);" onmouseout="Zapatec.Widget.callMethod(\'</span><span class="literal">'+this.id+'</span>\<span class="literal">',\'</span>cellOnMouseOut\<span class="literal">',this);">'</span> ); } paletteTableHTML.push (<span class="literal">'<img src="'</span>+ imgSrc +<span class="literal">'" id="'</span>+<span class="literal">'zpColorPicker'</span>+<span class="reserved">this</span>.id+<span class="literal">'Palette_'</span>+ii+<span class="literal">'_'</span>+jj+<span class="literal">'image'</span>+<span class="literal">'" height="13" width="12">'</span>); paletteTableHTML.push (<span class="literal">'</td>'</span>); } paletteTableHTML.push (<span class="literal">'</tr>'</span>); } paletteTableHTML.push (<span class="literal">'</tbody>'</span>); paletteTableHTML.push (<span class="literal">'</table>'</span>); <span class="reserved">this</span>.container.fullPalette.innerHTML = paletteTableHTML.join(<span class="literal">""</span>); <span class="reserved">this</span>.container.colorPreview = Zapatec.Utils.createElement(<span class="literal">"div"</span>, <span class="reserved">this</span>.container); <span class="reserved">this</span>.container.colorPreview.className = <span class="literal">"colorPreview"</span>; <span class="reserved">this</span>.container.colorPreview.id = <span class="literal">"zpColorPicker"</span>+<span class="reserved">this</span>.id+<span class="literal">"ColorPreview"</span>; <span class="reserved">this</span>.container.buttonsContainer = Zapatec.Utils.createElement(<span class="literal">"div"</span>, <span class="reserved">this</span>.container); <span class="reserved">this</span>.container.buttonsContainer.className = <span class="literal">"buttons"</span>; var okButton = Zapatec.Utils.createElement(<span class="literal">"button"</span>, <span class="reserved">this</span>.container.buttonsContainer); okButton.appendChild(document.createTextNode(<span class="reserved">this</span>.getMessage(<span class="literal">'okButtonCaption'</span>))); okButton.id = <span class="literal">"zpColorPicker"</span>+<span class="reserved">this</span>.id+<span class="literal">"OkButton"</span>; okButton.onclick = <span class="reserved">function</span> () { <span class="reserved">if</span> (self.config.inputField) { self.sendValueToinputField(); } self.select(); } var cancelButton = Zapatec.Utils.createElement(<span class="literal">"button"</span>, <span class="reserved">this</span>.container.buttonsContainer); cancelButton.id = <span class="literal">"zpColorPicker"</span>+<span class="reserved">this</span>.id+<span class="literal">"CancelButton"</span>; cancelButton.appendChild(document.createTextNode(<span class="reserved">this</span>.getMessage(<span class="literal">'cancelButtonCaption'</span>))); cancelButton.onclick = <span class="reserved">function</span> () { self.hide(); } <span class="reserved">this</span>.container.hexFields = Zapatec.Utils.createElement(<span class="literal">"div"</span>, <span class="reserved">this</span>.container, true); <span class="reserved">this</span>.container.hexFields.className = <span class="literal">"hexFields"</span>; <span class="reserved">this</span>.container.hexFields.inputHex = Zapatec.Utils.createElement(<span class="literal">"input"</span>, <span class="reserved">this</span>.container.hexFields, true); <span class="reserved">this</span>.container.hexFields.inputHex.id = <span class="literal">"zpColorPicker"</span>+<span class="reserved">this</span>.id+<span class="literal">"InputHexField"</span>; <span class="reserved">this</span>.container.hexFields.inputHex.size = 7; <span class="reserved">this</span>.container.hexFields.inputHex.maxLength = 7; <span class="comment">// Slider containers</span> <span class="reserved">this</span>.container.slidersContainer = Zapatec.Utils.createElement(<span class="literal">"div"</span>, <span class="reserved">this</span>.container, true); <span class="reserved">this</span>.container.slidersContainer.className = <span class="literal">"slidersContainer"</span>; var slidersTable = Zapatec.Utils.createElement(<span class="literal">"table"</span>, <span class="reserved">this</span>.container.slidersContainer, true); slidersTable.cellPadding = 1; slidersTable.cellSpacing = 0; var slidersTableBody = Zapatec.Utils.createElement(<span class="literal">"tbody"</span>, slidersTable, true); var redSliderRow = Zapatec.Utils.createElement(<span class="literal">"tr"</span>, slidersTableBody, true); <span class="reserved">this</span>.container.slidersContainer.redSliderLabelCol = Zapatec.Utils.createElement(<span class="literal">"td"</span>, redSliderRow); <span class="reserved">this</span>.container.slidersContainer.redSliderLabelCol.appendChild(document.createTextNode(<span class="reserved">this</span>.getMessage(<span class="literal">'redFieldLabel'</span>))); <span class="reserved">this</span>.container.slidersContainer.redSliderSliderCol = Zapatec.Utils.createElement(<span class="literal">"td"</span>, redSliderRow); var greenSliderRow = Zapatec.Utils.createElement(<span class="literal">"tr"</span>, slidersTableBody, true); <span class="reserved">this</span>.container.slidersContainer.greenSliderLabelCol = Zapatec.Utils.createElement(<span class="literal">"td"</span>, greenSliderRow); <span class="reserved">this</span>.container.slidersContainer.greenSliderLabelCol.appendChild(document.createTextNode(<span class="reserved">this</span>.getMessage(<span class="literal">'greenFieldLabel'</span>))); <span class="reserved">this</span>.container.slidersContainer.greenSliderSliderCol = Zapatec.Utils.createElement(<span class="literal">"td"</span>, greenSliderRow); var blueSliderRow = Zapatec.Utils.createElement(<span class="literal">"tr"</span>, slidersTableBody, true); <span class="reserved">this</span>.container.slidersContainer.blueSliderLabelCol = Zapatec.Utils.createElement(<span class="literal">"td"</span>, blueSliderRow); <span class="reserved">this</span>.container.slidersContainer.blueSliderSliderCol = Zapatec.Utils.createElement(<span class="literal">"td"</span>, blueSliderRow); <span class="reserved">this</span>.container.slidersContainer.blueSliderLabelCol.appendChild(document.createTextNode(<span class="reserved">this</span>.getMessage(<span class="literal">'blueFieldLabel'</span>))); <span class="comment">// Creating sliders (must be here because sliders needs parent elements</span> <span class="comment">// to be already created)</span> <span class="reserved">this</span>.createSliders(); <span class="comment">// Input fields event handlers</span> <span class="reserved">this</span>.container.rgbFields.inputRed.onkeyup = <span class="reserved">function</span>(){ var value = parseInt(<span class="reserved">this</span>.value); <span class="reserved">if</span> (isNaN(value)) { value = 0; } <span class="reserved">else</span> { <span class="reserved">this</span>.value = value; } <span class="reserved">if</span> (<span class="reserved">this</span>.value < 0 ) { <span class="reserved">this</span>.value=0; } <span class="reserved">if</span> (<span class="reserved">this</span>.value > 255 ) { <span class="reserved">this</span>.value=255; } self.sliders.red.setPos(<span class="reserved">this</span>.value); }; <span class="reserved">this</span>.container.rgbFields.inputGreen.onkeyup = <span class="reserved">function</span>(){ var value = parseInt(<span class="reserved">this</span>.value); <span class="reserved">if</span> (isNaN(value)) { value = 0; } <span class="reserved">if</span> (<span class="reserved">this</span>.value < 0 ) { <span class="reserved">this</span>.value=0; } <span class="reserved">if</span> (<span class="reserved">this</span>.value > 255 ) { <span class="reserved">this</span>.value=255; } self.sliders.green.setPos(<span class="reserved">this</span>.value); }; <span class="reserved">this</span>.container.rgbFields.inputBlue.onkeyup = <span class="reserved">function</span>(){ var value = parseInt(<span class="reserved">this</span>.value); <span class="reserved">if</span> (isNaN(value)) { value = 0; } <span class="reserved">if</span> (<span class="reserved">this</span>.value < 0 ) { <span class="reserved">this</span>.value=0; } <span class="reserved">if</span> (<span class="reserved">this</span>.value > 255 ) { <span class="reserved">this</span>.value=255; } self.sliders.blue.setPos(<span class="reserved">this</span>.value); }; <span class="reserved">this</span>.container.hexFields.inputHex.onchange = <span class="reserved">function</span>(){ self.setColor(<span class="reserved">this</span>.value); }; <span class="comment">// Select color handler</span> <span class="reserved">this</span>.container.colorPreview.onclick = <span class="reserved">function</span>(){ <span class="reserved">if</span> (self.config.inputField) { self.sendValueToinputField(); } self.select(); }; <span class="reserved">if</span> (<span class="reserved">this</span>.config.handleButtonClick) { <span class="comment">// Show/hide picker event</span> <span class="reserved">this</span>.config.button.onclick = <span class="reserved">function</span>(){ self.isShown = true; self.show(); }; } <span class="comment">// Hide picker on Esc key and on click at other document element</span> Zapatec.Utils.addEvent(document, <span class="literal">'keypress'</span>, <span class="reserved">function</span>(e) { <span class="reserved">if</span> (!e) { e = window.event; } <span class="reserved">if</span> (e.keyCode == 27) { self.hide() } }); Zapatec.Utils.addEvent(document, <span class="literal">'click'</span>, <span class="reserved">function</span>() { <span class="reserved">if</span> (!self.isShown) { self.hide(); } self.isShown = false; }); } <span class="comment">/** * onClick handler for palette cell * <span class="attrib">@param</span> {Object} color */</span> Zapatec.ColorPicker.<span class="reserved">prototype</span>.cellOnClick = <span class="reserved">function</span> (color){ <span class="reserved">this</span>.setColor(color); } <span class="comment">/** * onDblClick handler for palette cell */</span> Zapatec.ColorPicker.<span class="reserved">prototype</span>.cellOnDoubleClick = <span class="reserved">function</span> (color){ <span class="reserved">if</span> (<span class="reserved">this</span>.config.singleClick) { <span class="reserved">this</span>.setColor(color); } <span class="reserved">if</span> (<span class="reserved">this</span>.config.inputField) { <span class="reserved">this</span>.sendValueToinputField(); } <span class="reserved">this</span>.select(); } <span class="comment">/** * onMouseOver handler for palette cell * <span class="attrib">@param</span> {Object} cell * <span class="attrib">@private</span> */</span> Zapatec.ColorPicker.<span class="reserved">prototype</span>.cellOnMouseOver = <span class="reserved">function</span> (cell){ Zapatec.Utils.removeClass(<span class="reserved">this</span>.highlightedCell, <span class="literal">'under'</span>); Zapatec.Utils.addClass(cell,<span class="literal">'under'</span>); } <span class="comment">/** * onMouseOut handler for palette cell * <span class="attrib">@param</span> {Object} cell * <span class="attrib">@private</span> */</span> Zapatec.ColorPicker.<span class="reserved">prototype</span>.cellOnMouseOut = <span class="reserved">function</span> (cell){ Zapatec.Utils.removeClass(cell,<span class="literal">'under'</span>); } <span class="comment">/** * Creates sliders and attaches handlers to them * <span class="attrib">@private</span> */</span> Zapatec.ColorPicker.<span class="reserved">prototype</span>.createSliders = <span class="reserved">function</span>() { var self = <span class="reserved">this</span>; <span class="reserved">this</span>.sliders = {}; <span class="reserved">this</span>.sliders.red = new Zapatec.Slider({ div : <span class="reserved">this</span>.container.slidersContainer.redSliderSliderCol, length : 255, start: Zapatec.ColorPicker.convertHexToColorObject(<span class="reserved">this</span>.currentColor).red, step: 1, orientation : <span class="literal">'H'</span>, onChange : <span class="reserved">function</span> (pos) { self.container.rgbFields.inputRed.value = pos; self.previewColor(); }, newPosition: <span class="reserved">function</span>(){ self.isShown = true; } }); <span class="reserved">this</span>.sliders.green = new Zapatec.Slider({ div : <span class="reserved">this</span>.container.slidersContainer.greenSliderSliderCol, length : 255, step: 1, start: Zapatec.ColorPicker.convertHexToColorObject(<span class="reserved">this</span>.currentColor).green, orientation : <span class="literal">'H'</span>, onChange : <span class="reserved">function</span> (pos) { self.container.rgbFields.inputGreen.value = pos; self.previewColor(); }, newPosition: <span class="reserved">function</span>(){ self.isShown = true; } }); <span class="reserved">this</span>.sliders.blue = new Zapatec.Slider({ div : <span class="reserved">this</span>.container.slidersContainer.blueSliderSliderCol, length : 255, start: Zapatec.ColorPicker.convertHexToColorObject(<span class="reserved">this</span>.currentColor).blue, step: 1, orientation : <span class="literal">'H'</span>, onChange : <span class="reserved">function</span> (pos) { self.container.rgbFields.inputBlue.value = pos; self.previewColor(); }, newPosition: <span class="reserved">function</span>(){ self.isShown = true; } }); } <span class="comment">/** * Calculates top position for picker container based on position of button. * <span class="attrib">@private</span> * <span class="attrib">@type</span> number * <span class="attrib">@return</span> Top position in pixels */</span> Zapatec.ColorPicker.<span class="reserved">prototype</span>.calculateTopPos = <span class="reserved">function</span>() { var elementOffset = Zapatec.Utils.getElementOffset(<span class="reserved">this</span>.config.button); var top = elementOffset.top - <span class="reserved">this</span>.container.clientHeight - <span class="reserved">this</span>.config.offset; <span class="reserved">if</span> (top <= 0) { top = elementOffset.top + <span class="reserved">this</span>.config.button.clientHeight + <span class="reserved">this</span>.config.offset; } <span class="reserved">return</span> top; } <span class="comment">/** * Calculates left position for picker container based on position of button. * <span class="attrib">@private</span> * <span class="attrib">@type</span> number * <span class="attrib">@return</span> Left position in pixels */</span> Zapatec.ColorPicker.<span class="reserved">prototype</span>.calculateLeftPos = <span class="reserved">function</span>() { var elementOffset = Zapatec.Utils.getElementOffset(<span class="reserved">this</span>.config.button); var left = elementOffset.left + <span class="reserved">this</span>.config.button.clientWidth + <span class="reserved">this</span>.config.offset; <span class="reserved">if</span> ((left + <span class="reserved">this</span>.container.clientWidth) >= document.body.clientWidth) { left = elementOffset.left - <span class="reserved">this</span>.container.clientWidth - <span class="reserved">this</span>.config.offset; } <span class="reserved">if</span> (left <= 0) { left = elementOffset.left + <span class="reserved">this</span>.config.button.clientWidth + <span class="reserved">this</span>.config.offset; } <span class="reserved">return</span> left; } Zapatec.ColorPicker.<span class="reserved">prototype</span>.calculateSize = <span class="reserved">function</span> () { var containerWidth; <span class="reserved">if</span> (<span class="reserved">this</span>.sliders.red.container) { containerWidth= <span class="reserved">this</span>.sliders.red.container.offsetWidth; } <span class="reserved">else</span> { containerWidth = <span class="reserved">this</span>.DEFAULT_SLIDER_WIDTH; <span class="comment">// containerWidth = this.container.slidersContainer.redSliderSliderCol.offsetWidth;</span> } <span class="reserved">this</span>.container.slidersContainer.style.width = (containerWidth+<span class="reserved">this</span>.container.slidersContainer.redSliderLabelCol.offsetWidth) +<span class="literal">'px'</span>; var basicWidth = <span class="reserved">this</span>.container.slidersContainer.offsetWidth; <span class="reserved">this</span>.container.style.width = (basicWidth + 2)+ <span class="literal">'px'</span>; <span class="reserved">this</span>.container.header.style.width = (basicWidth - 4)+<span class="literal">'px'</span>; <span class="reserved">this</span>.container.buttonsContainer.style.width = (basicWidth-<span class="reserved">this</span>.container.fullPalette.offsetWidth-<span class="reserved">this</span>.container.colorPreview.offsetWidth-4)+<span class="literal">'px'</span>; <span class="reserved">this</span>.container.rgbFields.style.width = (basicWidth-<span class="reserved">this</span>.container.fullPalette.offsetWidth - 13)+<span class="literal">'px'</span>; <span class="reserved">this</span>.container.hexFields.style.width = (basicWidth-<span class="reserved">this</span>.container.fullPalette.offsetWidth - 9)+<span class="literal">'px'</span>; <span class="reserved">this</span>.sizeCalculated = true; } <span class="comment">/** * Shows Color Picker */</span> Zapatec.ColorPicker.<span class="reserved">prototype</span>.show = <span class="reserved">function</span> () { var self = <span class="reserved">this</span>; <span class="reserved">if</span> (!<span class="reserved">this</span>.sizeCalculated) { <span class="reserved">this</span>.calculateSize(); } <span class="reserved">this</span>.container.style.visibility = <span class="literal">'visible'</span>; <span class="reserved">this</span>.container.style.left = <span class="reserved">this</span>.calculateLeftPos() + <span class="literal">"px"</span>; <span class="reserved">this</span>.container.style.top = <span class="reserved">this</span>.calculateTopPos() + <span class="literal">"px"</span>; <span class="comment">// Windowed controls hider</span> <span class="reserved">this</span>.WCH = Zapatec.Utils.createWCH(); <span class="reserved">if</span> (<span class="reserved">this</span>.WCH) { <span class="reserved">this</span>.WCH.style.zIndex = <span class="reserved">this</span>.container.style.zIndex; Zapatec.Utils.setupWCH_el(<span class="reserved">this</span>.WCH,<span class="reserved">this</span>.container); } <span class="reserved">if</span> (<span class="reserved">this</span>.config.handleButtonClick) { <span class="comment">// Attaches hide method to button</span> <span class="reserved">this</span>.config.button.onclick = <span class="reserved">function</span>(){ self.isShown = false; self.hide(); }; } <span class="reserved">this</span>.highlightCell(); } <span class="comment">/** * Hides ColorPicker */</span> Zapatec.ColorPicker.<span class="reserved">prototype</span>.hide = <span class="reserved">function</span> () { var self = <span class="reserved">this</span>; <span class="reserved">this</span>.container.style.visibility = <span class="literal">'hidden'</span>; <span class="reserved">this</span>.container.style.left = <span class="literal">'-1000px'</span>; <span class="reserved">this</span>.container.style.top = <span class="literal">'-1000px'</span>; <span class="reserved">if</span> (<span class="reserved">this</span>.WCH){ Zapatec.ScrollWithWindow.unregister(<span class="reserved">this</span>.WCH); <span class="reserved">if</span> (<span class="reserved">this</span>.WCH.outerHTML) { <span class="reserved">this</span>.WCH.outerHTML = <span class="literal">""</span>; } <span class="reserved">else</span> { Zapatec.Utils.destroy(<span class="reserved">this</span>.WCH); } } <span class="comment">// Zapatec.Utils.hideWCH(this.WCH);</span> <span class="reserved">if</span> (<span class="reserved">this</span>.config.handleButtonClick) { <span class="comment">// Attaches show method to button</span> <span class="reserved">this</span>.config.button.onclick = <span class="reserved">function</span>() { self.isShown = true; self.show(); }; } } <span class="comment">/** * Returns current color from picker. * <span class="attrib">@type</span> string * <span class="attrib">@return</span> Current color, format '#FFFFFF' */</span> Zapatec.ColorPicker.<span class="reserved">prototype</span>.getColor = <span class="reserved">function</span> () { <span class="reserved">return</span> <span class="reserved">this</span>.currentColor; } <span class="comment">/** * Sets current color. Used to handle changes in Hex input field * Sets color channels values to sliders positions * <span class="attrib">@private</span> * <span class="attrib">@param</span> [string] Color, format '#FFFFFF' or 'FFFFFF' */</span> Zapatec.ColorPicker.<span class="reserved">prototype</span>.setColor = <span class="reserved">function</span> (hexcolor) { var color = Zapatec.ColorPicker.convertHexToColorObject(hexcolor); <span class="reserved">this</span>.sliders.red.setPos(color.red); <span class="reserved">this</span>.sliders.green.setPos(color.green); <span class="reserved">this</span>.sliders.blue.setPos(color.blue); } <span class="comment">/** * Displays color preview based on RGB input fields value * Sets hex field value and current color * <span class="attrib">@private</span> * <span class="attrib">@param</span> [string] Color, format '#FFFFFF' or 'FFFFFF' */</span> Zapatec.ColorPicker.<span class="reserved">prototype</span>.previewColor = <span class="reserved">function</span> () { var hexColor = <span class="literal">'#'</span> + Zapatec.ColorPicker.convertChannelColorToHex(<span class="reserved">this</span>.container.rgbFields.inputRed.value) + Zapatec.ColorPicker.convertChannelColorToHex(<span class="reserved">this</span>.container.rgbFields.inputGreen.value) + Zapatec.ColorPicker.convertChannelColorToHex(<span class="reserved">this</span>.container.rgbFields.inputBlue.value); <span class="reserved">this</span>.container.colorPreview.style.backgroundColor = hexColor; <span class="reserved">this</span>.container.hexFields.inputHex.value = hexColor; <span class="reserved">this</span>.currentColor = hexColor; } <span class="comment">/** * Highlights palette cell if current color is in predefined colors collection * <span class="attrib">@private</span> */</span> Zapatec.ColorPicker.<span class="reserved">prototype</span>.highlightCell = <span class="reserved">function</span> () { <span class="reserved">for</span> (var ii = 0; ii < <span class="reserved">this</span>.allColors.length; ii++) { <span class="reserved">for</span> (var jj = 0; jj < <span class="reserved">this</span>.allColors[ii].length; jj++) { var cell = document.getElementById(<span class="literal">'zpColorPicker'</span>+<span class="reserved">this</span>.id+<span class="literal">'Palette_'</span>+ii+<span class="literal">'_'</span>+jj); <span class="reserved">if</span> (((<span class="reserved">this</span>.currentColor.charAt(0) == <span class="literal">'#'</span>) && (<span class="reserved">this</span>.currentColor == <span class="literal">'#'</span> + <span class="reserved">this</span>.allColors[ii][jj])) || (<span class="reserved">this</span>.currentColor == <span class="reserved">this</span>.allColors[ii][jj])) { Zapatec.Utils.addClass(cell,<span class="literal">'under'</span>); <span class="reserved">this</span>.highlightedCell = cell; } <span class="reserved">else</span> { Zapatec.Utils.removeClass(cell,<span class="literal">'under'</span>); } } } } <span class="comment">/** * 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 * <span class="attrib">@private</span> */</span> Zapatec.ColorPicker.<span class="reserved">prototype</span>.sendValueToinputField = <span class="reserved">function</span> () { <span class="reserved">if</span> (<span class="reserved">this</span>.config.inputField != null) { var tagName = <span class="reserved">this</span>.config.inputField.tagName.toUpperCase(); switch (tagName) { case <span class="literal">"TEXTAREA"</span>: case <span class="literal">"INPUT"</span>: <span class="reserved">this</span>.config.inputField.value = <span class="reserved">this</span>.currentColor; break; case <span class="literal">"SELECT"</span>: <span class="reserved">for</span>(var i = 0; i < <span class="reserved">this</span>.config.inputField.options.length; i++){ <span class="reserved">if</span> (<span class="reserved">this</span>.config.inputField.options[i].value == <span class="reserved">this</span>.currentColor){ <span class="reserved">this</span>.config.inputField.selectedIndex = i; break; } } break; default: <span class="reserved">this</span>.config.inputField.innerHTML = <span class="reserved">this</span>.currentColor; break; } } } <span class="comment">/** * Fires select event * Sends current color value to inputField element * Hides color picker * <span class="attrib">@private</span> */</span> Zapatec.ColorPicker.<span class="reserved">prototype</span>.select = <span class="reserved">function</span> () { <span class="reserved">this</span>.fireEvent(<span class="literal">'select'</span>, <span class="reserved">this</span>.currentColor); <span class="reserved">this</span>.hide(); } </pre> <hr> <!-- ========== START OF NAVBAR ========== --> <a name="navbar_top"><!-- --></a> <table border="0" width="100%" cellpadding="1" cellspacing="0"> <tr> <td colspan=2 bgcolor="#EEEEFF" class="NavBarCell1"> <a name="navbar_top_firstrow"><!-- --></a> <table border="0" cellpadding="0" cellspacing="3"> <tr align="center" valign="top"> <td bgcolor="#EEEEFF" class="NavBarCell1"> <a href="overview-summary.html"><font class="NavBarFont1"><b>Overview</b></font></a> </td> <td bgcolor="#FFFFFF" class="NavBarCell1Rev"> <font class="NavBarFont1Rev"><b>File</b></font> </td> <td bgcolor="#FFFFFF" class="NavBarCell1"> <font class="NavBarFont1">Class</font> </td> <td bgcolor="#EEEEFF" class="NavBarCell1"> <a href="overview-tree.html"><font class="NavBarFont1"><b>Tree</b></font></a> </td> <td bgcolor="#EEEEFF" class="NavBarCell1"> <a href="index-all.html"--><font class="NavBarFont1"><b>Index</b></font></a> </td> <td bgcolor="#EEEEFF" class="NavBarCell1"> <a href="help-doc.html"><font class="NavBarFont1"><b>Help</b></font></a> </td> </tr> </table> </td> <td bgcolor="#EEEEFF" align="right" valign="top"><em> <b>Zapatec Utils</b></em> </td> </tr> <tr> <td bgcolor="white" class="NavBarCell2"><font size="-2"> PREV NEXT</font></td> <td bgcolor="white" class="NavBarCell2"><font size="-2"> <a href="index.html" target="_top"><b>FRAMES</b></a> <a href="overview-summary.html" target="_top"><b>NO FRAMES</b></a> <script> <!-- if(window==top) { document.writeln('<A HREF="allclasses-noframe.html" TARGET=""><B>All Classes</B></A>'); } //--> </script> <noscript> <a href="allclasses-noframe.html" target=""><b>All Classes</b></a> </noscript> </font></td> </tr> </table> <!-- =========== END OF NAVBAR =========== --> <hr> <font size="-1"> </font> <div class="jsdoc_ctime">Documentation generated by <a href="http://jsdoc.sourceforge.net/" target="_parent">JSDoc</a> on Thu Aug 16 12:18:39 2007</div> </body> </html>