/*
*+------------------------------------------------------------------------+
*| Licensed Materials - Property of IBM
*| BI and PM: prmt
*| (C) Copyright IBM Corp. 2002, 2016
*|
*| US Government Users Restricted Rights - Use, duplication or
*| disclosure restricted by GSA ADP Schedule Contract with IBM Corp.
*|
*+------------------------------------------------------------------------+
*/
/*
CColorPicker.js
This script provides interactivity for the color prompt control.
*/
// Constructor to create a new Color Picker prompt
// sPromptId: The id of the prompt control (String)
// sRef: the name of this object
// sCallBackFunction: function to call with the new color value as a parameter
// bAutoReset: automatically reset the color to the default if true
// sDefaultValue: a default CSS RGB value to initialize the controls
// (e.g. '#000000', '#FFFFFF')
// sType: define the whether the control is foreground or background
// (e.g. TYPE_COLOR | TYPE_BACKGROUND_COLOR)
// sTooltip: string to used as a tooltip for the color picker button
// bToolbar: (Optional, Default: true). Is this button in a toolbar?
function CColorPicker(sPromptId, sRef, sCallBackFunction, bAutoReset, sDefaultValue, sType, sToolTip, bToolbar)
{
// set up control
this.m_sSkin = (typeof getPromptSkin != "undefined" ? getPromptSkin() : "../skins/corporate");
this.m_sImgPath = this.m_sSkin + "/prompting/images/";
this.m_sToolTip = sToolTip;
this.m_bToolbar = (bToolbar != false);
if (sType == TYPE_BACKGROUND_COLOR)
{
this.m_sIcon = "bgcolor.gif";
}
else
{
this.m_sIcon = "color.gif";
}
this.m_sPromptId = sPromptId;
this.m_sRef = sRef;
//the parent object
this.m_oParent = document.getElementById('selectColor' + this.m_sPromptId);
//dialog
this.m_sDialogId = "colorDialog" + sPromptId;
this.m_sCaptionId = "colorDialogCaption" + sPromptId;
this.m_sPaletteId = "colorDialogPalette" + sPromptId;
//drawn palettes
this.m_sSelectedPalette = null;
this.m_bNamedPallete = false;
this.m_bWebPallete = false;
this.m_bCustomPallete = false;
//auto reset back to default
this.m_bAutoReset = (bAutoReset != null) ? bAutoReset : false;
//current color
this.m_sColor = ((sDefaultValue != null) && (sDefaultValue != '')) ? parseRGB(sDefaultValue) : '';
this.m_oNamedColor = new CNamedColor();
this.m_oNamedColors = null;
//custom palette textboxes
this.m_sCustomR = "customR" + sPromptId;
this.m_sCustomG = "customG" + sPromptId;
this.m_sCustomB = "customB" + sPromptId;
this.m_sCustomPreview = "customPreview" + sPromptId;
//set callback function
this.m_sCallBackFunction = sCallBackFunction;
this.init();
// update the UI
this.draw();
}
//initialize the control
function CColorPicker_init()
{
//draw the button
var s = (this.m_bToolbar ? '' : '');
//draw the picker
s += ' ';
if (window.ie) { s += ''; }
s += '
';
s += '
';
s += '
';
s += '
';
this.m_oParent.innerHTML = s;
this.m_oDialog = document.getElementById(this.m_sDialogId);
this.m_oDialogCaption = document.getElementById(this.m_sCaptionId);
this.m_oDialogPalette = document.getElementById(this.m_sPaletteId);
}
//render the UI for the control
function CColorPicker_draw()
{
this.drawCaptionBar();
this.setActiveColor('');
}
//render the caption bar for the picker dialog
function CColorPicker_drawCaptionBar()
{
var s = '';
this.m_oDialogCaption.innerHTML = s;
}
function CColorPicker_drawPalette()
{
if (!this.m_bNamedPalette && this.m_sSelectedPalette == PALETTE_NAMED)
{
this.drawNamedPalette();
this.m_bNamedPalette = true;
this.setActiveClass(true, false);
}
else if (!this.m_bWebPalette && this.m_sSelectedPalette == PALETTE_WEB)
{
this.drawWebsafePalette();
this.m_bWebPalette = true;
this.setActiveClass(true, false);
}
else if (!this.m_bCustomPalettte && this.m_sSelectedPalette == PALETTE_CUSTOM)
{
this.drawCustomPalette();
this.m_bCustomPalette = true;
this.setActiveClass(true, false);
}
}
//custom palette dialog
function CColorPicker_drawCustomPalette()
{
var color = this.getColor();
var s = '';
s += '
';
//user selection
s += '
';
s += '
';
s += '
' + PMT_CP_RED + '
';
s += '
#
';
s += '
' + PMT_CP_GREEN + '
';
s += '
';
s += '
' + PMT_CP_BLUE + '
';
s += '
';
s += '
';
s += '
';
//preview
s += '
';
s += '
';
s += '
' + PMT_CP_PREVIEW + '
';
s += '
';
s += '
';
s += '
';
s += '
' + PMT_CP_APPLY_NOW + '
';
this.m_oDialogPalette.innerHTML += s;
}
//named palette dialog
function CColorPicker_drawNamedPalette()
{
//create named palette array if it doesn't already exist
if (this.m_oNamedColors == null)
{
this.m_oNamedColors = this.m_oNamedColor.getNamedColors();
}
var iRowCount = Math.floor(this.m_oNamedColors.length / 2);
var s = '
';
//default
s += '
';
s += '
';
s += '
';
s += '
';
s += '
';
s += '
';
s += '
';
s += '
';
s += '
' + this.m_oNamedColors[0].getName();
s += '
';
s += '
';
s += '
';
for (var j=1; j < this.m_oNamedColors.length; j++)
{
s += '
';
s += '
';
s += '
';
s += '
';
s += '
';
s += '
';
s += '
';
s += '
' + this.m_oNamedColors[j].getName();
s += '
';
if (j==iRowCount)
{
s += '
';
}
else
{
s += '';
}
}
s += '
';
this.m_oDialogPalette.innerHTML += s;
}
//web safe palette dialog
function CColorPicker_drawWebsafePalette()
{
var s = '
';
var v_aColorBytes = new Array( "00", "33", "66", "99", "CC", "FF" );
var v_iNumberOfBytes = v_aColorBytes.length;
var iCounter = 1;
s+= '
';
for ( var r = 0; r < v_iNumberOfBytes; r++ )
{
for ( var g = 0; g < v_iNumberOfBytes; g++ )
{
for ( var b = 0; b < v_iNumberOfBytes; b++ )
{
var v_sRGB = "#" + v_aColorBytes[r] + v_aColorBytes[g] + v_aColorBytes[b];
s+= '
';
s+= '
';
if (iCounter % 18 === 0) { s+= '
'; }
iCounter ++;
}
}
}
s+= '
';
s += '
';
this.m_oDialogPalette.innerHTML += s;
}
function CColorPicker_setActiveColor(s)
{
this.setActiveClass(false,false);
this.m_sColor = parseRGB(s);
this.setActiveClass(true,true);
}
function CColorPicker_setActiveClass(bActive, bSetPalette)
{
var classSuffix = (bActive ? '_active' : '');
var bNamed = false;
var bIsWebSafe = false;
var idx = this.m_oNamedColor.indexOf(this.m_sColor);
//if it is a named color
if (idx >= 0)
{
if (bSetPalette) {
this.setPalette(PALETTE_NAMED);
}
var nc = document.getElementById(this.m_sPromptId+'_namedColor'+idx);
if (nc != null) {
nc.className = 'clsCPItem' + classSuffix;
}
var ncs = document.getElementById(this.m_sPromptId+'_namedColorSwatch'+idx);
if (ncs != null) {
ncs.className = 'clsCPCell' + classSuffix;
}
bNamed = true;
}
if (this.m_sColor.indexOf('#') === 0 && this.m_sColor.length == 7)
{
for (var i=1; i < this.m_sColor.length; i+=2)
{
var ch1 = this.m_sColor.charAt(i).toLowerCase();
var ch2 = this.m_sColor.charAt(i+1).toLowerCase();
if (ch1 == ch2 && (ch1 == '0' || ch1 == '3' || ch1 == '6' || ch1 == '9' || ch1 == 'c' || ch1 == 'f')) {
bIsWebSafe = true;
}
else
{
bIsWebSafe = false;
break;
}
}
if (bIsWebSafe)
{
//find color on websafe palette and activate it
var wsc = document.getElementById(this.m_sPromptId+'_ws_'+this.m_sColor.substring(1));
if (wsc != null) {
wsc.className = 'clsCPCell' + classSuffix;
}
if (!bNamed && bSetPalette) {
this.setPalette(PALETTE_WEB);
}
}
}
if (!bNamed && !bIsWebSafe && bSetPalette) {
this.setPalette(PALETTE_CUSTOM);
}
//fill in custom color palette
var oR = document.getElementById(this.m_sCustomR);
var oG = document.getElementById(this.m_sCustomG);
var oB = document.getElementById(this.m_sCustomB);
if (oR != null && oG != null && oB != null)
{
if (this.m_sColor.length == 7)
{
oR.value = getR(this.m_sColor);
oG.value = getG(this.m_sColor);
oB.value = getB(this.m_sColor);
}
else
{
oR.value = '';
oG.value = '';
oB.value = '';
}
this.updateCustomStyle();
}
}
//apply the user selected color
function CColorPicker_setColor(s)
{
if (this.m_sColor != s)
{
this.setActiveColor(s);
if (typeof this.m_sCallBackFunction == 'string' && this.m_sCallBackFunction !== null && this.m_sCallBackFunction !== "")
{
var theCommand = this.m_sCallBackFunction + '("' + this.m_sColor + '")';
eval (theCommand);
}
}
//hide the picker
this.hide();
if (this.m_bAutoReset) {
this.setActiveColor('');
}
}
//update the color picker with the new user selection
function CColorPicker_updateCustomStyle()
{
var oR = document.getElementById(this.m_sCustomR);
var oG = document.getElementById(this.m_sCustomG);
var oB = document.getElementById(this.m_sCustomB);
if ((typeof oR != 'undefined') && (typeof oG != 'undefined') && (typeof oB != 'undefined'))
{
var s = parseRGB("#" + oR.value + oG.value + oB.value);
var oCustomPreview = document.getElementById(this.m_sCustomPreview);
if (typeof oCustomPreview != 'undefined' && s.length == 7 || s == '')
{
oCustomPreview.style.backgroundColor = s;
return s;
}
}
return '';
}
//take a user specified custom color and apply it
function CColorPicker_applyCustomStyle()
{
this.setColor(this.updateCustomStyle());
}
//get the current color for the dialog
function CColorPicker_getColor()
{
return this.m_sColor;
}
//set a new palette
function CColorPicker_setPalette(s)
{
if (this.m_sSelectedPalette != s)
{
this.m_sSelectedPalette = s;
this.drawPalette();
var palette = null;
palette = document.getElementById(this.m_sPromptId+'_'+PALETTE_NAMED);
if (palette != null) { palette.style.display = 'none'; }
palette = document.getElementById(this.m_sPromptId+'_'+PALETTE_WEB);
if (palette != null) { palette.style.display = 'none'; }
palette = document.getElementById(this.m_sPromptId+'_'+PALETTE_CUSTOM);
if (palette != null) { palette.style.display = 'none'; }
palette = document.getElementById(this.m_sPromptId+'_'+this.m_sSelectedPalette);
if (palette != null) { palette.style.display = (window.ie ? 'block' : 'table'); }
//set the drop down
var palSel = document.getElementById(this.m_sPromptId+'_select');
if (palSel != null)
{
for (var i=0; i < palSel.options.length; i++)
{
if (palSel.options[i].value == this.m_sSelectedPalette)
{
palSel.selectedIndex = i;
break;
}
}
}
}
}
//switch that will hide and show the picker dialog
function CColorPicker_togglePicker(e)
{
if (this.m_oDialog.style.display == "inline")
{
this.hide();
}
else
{
this.show();
}
this.preventBubbling(e);
}
function CColorPicker_preventBubbling(e)
{
if (typeof e == "object")
{
if (window.ie)
{
e.returnValue = false;
e.cancelBubble = true;
}
else
{
e.preventDefault();
e.stopPropagation();
}
}
}
// show the picker dialog
function CColorPicker_show()
{
//hide any other pickers that might be visible
if ((typeof hidePickers != 'undefined') && (hidePickers))
{
hidePickers();
}
this.m_oDialog.style.zIndex = '3';
this.m_oDialog.style.display = 'inline';
var iframe = document.getElementById('iframe'+this.m_sDialogId);
if (iframe != null)
{
iframe.style.zIndex = '2';
iframe.style.width = this.m_oDialog.offsetWidth + "px";
iframe.style.height = this.m_oDialog.offsetHeight + "px";
iframe.style.display = 'inline';
}
}
//hide the picker dialog
function CColorPicker_hide()
{
var iframe = document.getElementById('iframe'+this.m_sDialogId);
if (iframe != null) {
iframe.style.zIndex = '1';
iframe.style.display = 'none';
}
this.m_oDialog.style.display = 'none';
this.m_oDialog.style.zIndex = '1';
this.setActiveClass(true,true);
}
function CColorPicker_buttonMouseHandler(button, action)
{
var namedColor = 'namedColor';
var idx = button.id.indexOf(namedColor);
if (idx >= 0)
{
idx = button.id.substring(idx+namedColor.length);
if (this.m_oNamedColor.indexOf(this.m_sColor) == parseInt(idx,10))
{
if (action == 'over' || action == 'out' || action == 'down') {
button.className = 'clsCPItem_active';
}
}
else
{
if (action == 'over') {
button.className = 'clsCPItem_hover';
}
else if (action == 'out') {
button.className = 'clsCPItem';
}
else if (action == 'down') {
button.className = 'clsCPItem_active';
}
}
}
var cell = null;
var bNamed = false;
if (idx > -1)
{
cell = document.getElementById(this.m_sPromptId+'_namedColorSwatch'+idx);
bNamed = true;
}
else {
cell = button;
}
if ((bNamed && this.m_oNamedColor.indexOf(this.m_sColor) == idx) || (!bNamed && this.m_sColor != '' && cell.id.indexOf(this.m_sColor.substring(1)) >= 0))
{
if (action == 'over' || action == 'out' || action == 'down') {
cell.className = 'clsCPCell_active';
}
}
else
{
if (action == 'over') {
cell.className = 'clsCPCell_hover';
}
else if (action == 'out') {
cell.className = 'clsCPCell';
}
else if (action == 'down') {
cell.className = 'clsCPCell_active';
}
}
}
//update associated swatch control
function CColorPicker_updateSwatch(s)
{
var oSwatch = document.getElementById('selectColorSwatch' + this.m_sPromptId);
if (oSwatch) {
s = parseRGB(s);
if (s == '') {
oSwatch.className = "colorSwatchDefault";
}
else if (s == "#FFFFFF") {
oSwatch.className = "colorSwatchWhite";
}
else {
oSwatch.className = "";
}
oSwatch.style.backgroundColor = s;
var sNamedColor = s;
var idx = this.m_oNamedColor.indexOf(sNamedColor);
if (idx >= 0 ) {
sNamedColor = this.m_oNamedColor.m_Colors[idx].getName();
}
oSwatch.title = (sNamedColor == '' ? PMT_CP_COLOR_DEFAULT : sNamedColor);
}
// Update the input fields with the same name.
for (var i = 0; i < document.forms.length; i++) {
var o = eval('document.forms[' + i + '].' + this.m_sPromptId);
if (o) {
o.value = s;
}
}
}
CColorPicker.prototype.init = CColorPicker_init;
CColorPicker.prototype.draw = CColorPicker_draw;
CColorPicker.prototype.drawCaptionBar = CColorPicker_drawCaptionBar;
CColorPicker.prototype.drawPalette = CColorPicker_drawPalette;
CColorPicker.prototype.drawNamedPalette = CColorPicker_drawNamedPalette;
CColorPicker.prototype.drawWebsafePalette = CColorPicker_drawWebsafePalette;
CColorPicker.prototype.drawCustomPalette = CColorPicker_drawCustomPalette;
CColorPicker.prototype.setPalette = CColorPicker_setPalette;
CColorPicker.prototype.setActiveColor = CColorPicker_setActiveColor;
CColorPicker.prototype.setActiveClass = CColorPicker_setActiveClass;
CColorPicker.prototype.setColor = CColorPicker_setColor;
CColorPicker.prototype.getColor = CColorPicker_getColor;
CColorPicker.prototype.togglePicker = CColorPicker_togglePicker;
CColorPicker.prototype.hide = CColorPicker_hide;
CColorPicker.prototype.show = CColorPicker_show;
CColorPicker.prototype.applyCustomStyle = CColorPicker_applyCustomStyle;
CColorPicker.prototype.updateCustomStyle = CColorPicker_updateCustomStyle;
CColorPicker.prototype.updateSwatch = CColorPicker_updateSwatch;
CColorPicker.prototype.preventBubbling = CColorPicker_preventBubbling;
CColorPicker.prototype.buttonMouseHandler = CColorPicker_buttonMouseHandler;
//CNamedColor: named colors class
// this class is used to translated between named colors and RGB values
function CNamedColor()
{
this.m_Colors = new Array();
this.init();
}
// initialize the lsit of named colors
function CNamedColor_init()
{
this.add(PMT_CP_COLOR_DEFAULT, '');
this.add(PMT_CP_COLOR_BLACK, '#000000');
this.add(PMT_CP_COLOR_SILVER, '#C0C0C0');
this.add(PMT_CP_COLOR_GRAY, '#808080');
this.add(PMT_CP_COLOR_WHITE, '#FFFFFF');
this.add(PMT_CP_COLOR_MAROON, '#800000');
this.add(PMT_CP_COLOR_RED, '#FF0000');
this.add(PMT_CP_COLOR_PURPLE, '#800080');
this.add(PMT_CP_COLOR_FUSHIA, '#FF00FF');
this.add(PMT_CP_COLOR_GREEN, '#008000');
this.add(PMT_CP_COLOR_LIME, '#00FF00');
this.add(PMT_CP_COLOR_OLIVE, '#808000');
this.add(PMT_CP_COLOR_YELLOW, '#FFFF00');
this.add(PMT_CP_COLOR_NAVY, '#000080');
this.add(PMT_CP_COLOR_BLUE, '#0000FF');
this.add(PMT_CP_COLOR_TEAL, '#008080');
this.add(PMT_CP_COLOR_AQUA, '#00FFFF');
}
// return the array of color objects
function CNamedColor_getNamedColors()
{
return this.m_Colors;
}
//add a new color object
function CNamedColor_add(sName,sColor)
{
var c = new CColor (sName,sColor);
this.m_Colors = this.m_Colors.concat(c);
}
//get the index of a named color
function CNamedColor_indexOf(sColor)
{
for (var i=0; i < this.m_Colors.length; i++)
{
if (sColor == this.m_Colors[i].getColor()) {
return i;
}
}
return -1;
}
CNamedColor.prototype.init = CNamedColor_init;
CNamedColor.prototype.getNamedColors = CNamedColor_getNamedColors;
CNamedColor.prototype.add = CNamedColor_add;
CNamedColor.prototype.indexOf = CNamedColor_indexOf;
//CColor: Color class
// used to store names and color values for a color
function CColor(sName,sColor)
{
this.m_sName = sName;
this.m_sRGBColor = sColor;
}
function CColor_getName()
{
return this.m_sName;
}
function CColor_getColor()
{
return this.m_sRGBColor;
}
CColor.prototype.getName = CColor_getName;
CColor.prototype.getColor = CColor_getColor;
//color utility functions
function parseRGB(s)
{
if (s == null) {
s = '';
}
s = s.toUpperCase();
//take a string and return a valid color string
if (s.length == 7 && s.indexOf('#') === 0)
{
if (!(/[^0-9A-F#]/gi).test(s)) {
return s;
}
}
else if (s.match(/RGB\s*\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)\s*\)/gi)) {
// convert 'rbg(255,255,255)' to '#FFFFFF'
var r = RegExp.$1;
var g = RegExp.$2;
var b = RegExp.$3;
return "#" + numberToHex(r) + numberToHex(g) + numberToHex(b);
}
return '';
}
//return the hex value for a given color
function getR(sColor)
{
var s = parseRGB(sColor);
var sHex = s.slice(1,3);
return sHex;
}
function getG(sColor)
{
var s = parseRGB(sColor);
var sHex = s.slice(3,5);
return sHex;
}
function getB(sColor)
{
var s = parseRGB(sColor);
var sHex = s.slice(5,7);
return sHex;
}
function numberToHex(d)
{
var hex = '';
var i = Math.floor(d / 16);
hex += digitToHex(i);
i = (d % 16);
hex += digitToHex(i);
return hex;
}
function digitToHex(d)
{
switch (d) {
case 0:
case 1:
case 2:
case 3:
case 4:
case 5:
case 6:
case 7:
case 8:
case 9:
return ('' + d);
case 10:
return 'A';
case 11:
return 'B';
case 12:
return 'C';
case 13:
return 'D';
case 14:
return 'E';
case 15:
return 'F';
}
return '0';
}
// CONSTANTS
var PALETTE_NAMED = 'named';
var PALETTE_WEB = 'web';
var PALETTE_CUSTOM = 'custom';
var TYPE_BACKGROUND_COLOR = 'background-color';
var TYPE_COLOR = 'color';
';
s+= '