// Licensed Materials - Property of IBM // // IBM Cognos Products: pps // // (C) Copyright IBM Corp. 2005, 2017 // // US Government Users Restricted Rights - Use, duplication or disclosure restricted by GSA ADP Schedule Contract with IBM Corp. var currentColorPicker = null; var colorPickerDOM = null; var patternPickerDOM = null; var ownerControl = null; var currentColor = ""; var currentlySelectedColorCell = null; var isIE = navigator.appVersion.indexOf("MSIE")>0; var notifyColorChange = ""; var MAX_RGB = 255; var MAX_HSL = 240; function RGB(red, green, blue) { if (red < 0) this.red = 0; else if (red > MAX_RGB) this.red = MAX_RGB; else this.red = red; if (green < 0) this.green = 0; else if (green > MAX_RGB) this.green = MAX_RGB; else this.green = green; if (blue < 0) this.blue = 0; else if (blue > MAX_RGB) this.blue = MAX_RGB; else this.blue = blue; } function HSL(hue, sat, lum) { if (hue < 0) this.hue = 0; else if (hue > MAX_HSL) this.hue = MAX_HSL; else this.hue = hue; if (sat < 0) this.sat = 0; else if (sat > MAX_HSL) this.sat = MAX_HSL; else this.sat = sat; if (lum < 0) this.lum = 0; else if (lum > MAX_HSL) this.lum = MAX_HSL; else this.lum = lum; } function displayColorPicker(event) { var eventM = new eventManager(event); eventM.cancelBubble(); displayColorPickerObj(eventM.getSrc().parentNode.parentNode.parentNode.parentNode); } function displayColorPickerObj(obj) { //Create the dom for the color Picker. if (currentColorPicker != null) return; ownerControl = obj; //Get the table if (colorPickerDOM == null) { currentColorPicker = document.createElement("DIV"); currentColorPicker.className = "ColorPickerDiv"; var outerTable = document.createElement("TABLE"); if (isIE){ outerTable.setAttribute("cellpadding",8); outerTable.setAttribute("cellspacing",0); } var outerTableBody = document.createElement("TBODY"); if (outerTableBody.addEventListener) outerTableBody.addEventListener('click',stopProp,false); else outerTableBody.onclick = function() {stopProp();} var row = document.createElement("TR"); var cell = document.createElement("TD"); cell.className = "colorPickerPreviewCell"; var center = document.createElement("CENTER"); var div = document.createElement("DIV"); div.className = "colorPickerPreview"; div.id = "colorPickerPreviewDiv"; center.appendChild(div); cell.appendChild(center); row.appendChild(cell); cell = document.createElement("TD"); cell.className = "colorPickerColorTableContainer"; div = document.createElement("DIV"); div.className = "colorPickerColorTable"; createWebSafeColorPicker(div); cell.appendChild(div); row.appendChild(cell); outerTableBody.appendChild(row); row = document.createElement("TR"); cell = document.createElement("TD"); row.appendChild(cell); cell = document.createElement("TD"); var innerTable = document.createElement("TABLE"); if (isIE){ innerTable.setAttribute("cellpadding",8); innerTable.setAttribute("cellspacing",0); } var innerTableBody = document.createElement("TBODY"); var innerrow = document.createElement("TR"); var innercell = document.createElement("TD"); innercell.className = "colorPickerLabel"; innercell.appendChild(document.createTextNode(strColorPickerRed + " ")); innerrow.appendChild(innercell); innercell = document.createElement("TD"); var textBox = document.createElement("INPUT"); textBox.type = "text"; textBox.size = "5"; textBox.id = "colorPickerRed" textBox.onchange = function() { onRGBChange(); }; textBox.onkeyup = function() { onRGBChange(); }; innercell.appendChild(textBox); innerrow.appendChild(innercell); innercell = document.createElement("TD"); innercell.className = "colorPickerLabel"; innercell.appendChild(document.createTextNode(strColorPickerHue + " ")); innerrow.appendChild(innercell); innercell = document.createElement("TD"); textBox = document.createElement("INPUT"); textBox.type = "text"; textBox.size = "5"; textBox.id = "colorPickerHue" textBox.onchange = function() { onHSLChange(); }; textBox.onkeyup = function() { onHSLChange(); }; innercell.appendChild(textBox); innerrow.appendChild(innercell); innerTableBody.appendChild(innerrow); innerrow = document.createElement("TR"); innercell = document.createElement("TD"); innercell.className = "colorPickerLabel"; innercell.appendChild(document.createTextNode(strColorPickerGreen + " ")); innerrow.appendChild(innercell); innercell = document.createElement("TD"); textBox = document.createElement("INPUT"); textBox.type = "text"; textBox.size = "5"; textBox.id = "colorPickerGreen" textBox.onchange = function() { onRGBChange(); }; textBox.onkeyup = function() { onRGBChange(); }; innercell.appendChild(textBox); innerrow.appendChild(innercell); innercell = document.createElement("TD"); innercell.className = "colorPickerLabel"; innercell.appendChild(document.createTextNode(strColorPickerSat + " ")); innerrow.appendChild(innercell); innercell = document.createElement("TD"); textBox = document.createElement("INPUT"); textBox.type = "text"; textBox.size = "5"; textBox.id = "colorPickerSat" textBox.onchange = function() { onHSLChange(); }; textBox.onkeyup = function() { onHSLChange(); }; innercell.appendChild(textBox); innerrow.appendChild(innercell); innerTableBody.appendChild(innerrow); innerrow = document.createElement("TR"); innercell = document.createElement("TD"); innercell.className = "colorPickerLabel"; innercell.appendChild(document.createTextNode(strColorPickerBlue + " ")); innerrow.appendChild(innercell); innercell = document.createElement("TD"); textBox = document.createElement("INPUT"); textBox.type = "text"; textBox.size = "5"; textBox.id = "colorPickerBlue" textBox.onchange = function() { onRGBChange(); }; textBox.onkeyup = function() { onRGBChange(); }; innercell.appendChild(textBox); innerrow.appendChild(innercell); innercell = document.createElement("TD"); innercell.className = "colorPickerLabel"; innercell.appendChild(document.createTextNode(strColorPickerLum + " ")); innerrow.appendChild(innercell); innercell = document.createElement("TD"); textBox = document.createElement("INPUT"); textBox.type = "text"; textBox.size = "5"; textBox.id = "colorPickerLum" textBox.onchange = function() { onHSLChange(); }; textBox.onkeyup = function() { onHSLChange(); }; innercell.appendChild(textBox); innerrow.appendChild(innercell); innerTableBody.appendChild(innerrow); innerTable.appendChild(innerTableBody); cell.appendChild(innerTable); row.appendChild(cell); outerTableBody.appendChild(row); row = document.createElement("TR"); cell = document.createElement("TD"); cell.colspan = 2; cell.className = "colorPickerButtonArea"; var span = document.createElement("SPAN"); span.className = "colorPickerButton"; span.appendChild(document.createTextNode(strColorPickerOK)); span.onclick = function() { setOwnerControlColor();hideColorPicker();eval(notifyColorChange); } span.onmouseover = new Function("this.className = 'colorPickerButtonRollover';"); span.onmouseout = new Function("this.className = 'colorPickerButton';"); cell.appendChild(span); cell.appendChild(document.createTextNode(" ")); span = document.createElement("SPAN"); span.className = "colorPickerButton"; span.appendChild(document.createTextNode(strColorPickerCancel)); span.onclick = function() { hideColorPicker(); } span.onmouseover = new Function("this.className = 'colorPickerButtonRollover';"); span.onmouseout = new Function("this.className = 'colorPickerButton';"); cell.appendChild(span); row.appendChild(cell); outerTableBody.appendChild(row); outerTable.appendChild(outerTableBody); currentColorPicker.appendChild(outerTable); document.body.appendChild(currentColorPicker); colorPickerDOM = currentColorPicker; } else { currentColorPicker = colorPickerDOM; currentColorPicker.style.display = ""; } positionColorPicker(); initializeColorPicker(); } function createWebSafeColorPicker(parent) { //This function creates a table of the 216 web safe colors. var table = document.createElement("TABLE"); if (isIE){ table.setAttribute("cellpadding",2); table.setAttribute("cellspacing",2); } table.setAttribute("border",0); var tableBody = document.createElement("TBODY"); tableBody.id = "ColorPickerWebSafePaletteTable"; var row; var cell; var color; for (var i = 0; i < 12; i++) { row = document.createElement("TR"); for (var j = 0; j < 18; j++) { cell = document.createElement("TD"); cell.className = "colorPickerWebSafeColorCell"; color = getHexColor(parseInt(j % 6) * 51, parseInt(i % 6) * 51, (parseInt(j / 6) + 3 * parseInt(i / 6)) * 51); cell.style.backgroundColor = "#" + color; cell.onclick = new Function ( "setColorPickerColor('" + color + "');" ); row.appendChild(cell); } tableBody.appendChild(row); } table.appendChild(tableBody); parent.appendChild(table); } function getHexColor(red, green, blue) { var redHex = convertIntToHex(red); while (redHex.length < 2) redHex = "0" + redHex; var greenHex = convertIntToHex(green); while (greenHex.length < 2) greenHex = "0" + greenHex; var blueHex = convertIntToHex(blue); while (blueHex.length < 2) blueHex = "0" + blueHex; var hexColor = redHex + greenHex + blueHex; if (hexColor.length != 6) { alert(red + "," + green + "," + blue + " = " + hexColor); } return hexColor; } function convertIntToHex(num) { var hexDigits = "0123456789ABCDEF"; var hexNo = ""; var tempNo = num; var tempDigit; while (tempNo > 0) { tempDigit = tempNo % 16; tempNo = parseInt(tempNo / 16); hexNo = hexDigits.charAt(tempDigit) + hexNo; } return hexNo; } function getRGBFromHex(hexColor) { var red = 0; var green = 0; var blue = 0; red = getIntFromHex(hexColor.substr(0,2)); green = getIntFromHex(hexColor.substr(2,2)); blue = getIntFromHex(hexColor.substr(4,2)); return new RGB(red,green,blue); } function getIntFromHex(hexNum) { var num = 0; var digit; for (var i = 0; i < hexNum.length; i++) { digit = hexNum.charAt(i); switch (digit) { case 'A': num = 16 * num + 10; break; case 'B': num = 16 * num + 11; break; case 'C': num = 16 * num + 12; break; case 'D': num = 16 * num + 13; break; case 'E': num = 16 * num + 14; break; case 'F': num = 16 * num + 15; break; default: num = 16 * num + parseInt(digit); } } return num; } function displayPatternPicker(event) { var eventM = new eventManager(event); eventM.cancelBubble(); displayPatternPickerObj(eventM.getSrc().parentNode.parentNode.parentNode.parentNode); } function displayPatternPickerObj(obj) { //Create the dom for the color Picker. if (currentColorPicker != null) return; ownerControl = obj; //Get the table var currentPattern = parseInt(ownerControl.getAttribute("pattern")); if (patternPickerDOM == null) { currentColorPicker = document.createElement("DIV"); currentColorPicker.className = "PatternPickerDiv"; var outerTable = document.createElement("TABLE"); outerTable.setAttribute("cellpadding",0); outerTable.setAttribute("cellspacing",4); var outerTableBody = document.createElement("TBODY"); var row; var cell; var div; var patternNo; for (var i = 0; i < 6; i++) { row = document.createElement("TR"); for (var j = 1; j <= 7; j++) { patternNo = (i*7 + j); cell = document.createElement("TD"); cell.id = "patternpickercell" + i + "-" + j; div = document.createElement("DIV"); cell.setAttribute("pattern", patternNo); cell.className = "patternPickerPatternCell"; div.style.backgroundImage = getPatternStyle(patternNo); div.className = (patternNo == currentPattern)? "patternPickerPatternDivSelected": "patternPickerPatternDiv" ; cell.onclick = new Function( "selectPattern(" + patternNo + ");eval(notifyColorChange);" ); cell.appendChild(div); row.appendChild(cell); } outerTableBody.appendChild(row); } outerTable.appendChild(outerTableBody); currentColorPicker.appendChild(outerTable); document.body.appendChild(currentColorPicker); patternPickerDOM = currentColorPicker; } else { currentColorPicker = patternPickerDOM; currentColorPicker.style.display = ""; //We have to select the correct item var patternNo; for (var i = 0; i < 6; i++) { for (var j = 1; j <= 7; j++) { patternNo = (i*7 + j); var cell = document.getElementById("patternpickercell" + i + "-" + j); cell.firstChild.className = (patternNo == currentPattern)? "patternPickerPatternDivSelected": "patternPickerPatternDiv" ; } } } positionColorPicker(); } function getPatternStyle(patternNo) { //return "background-image: url(" + topparent.getGlobal("menuImagePath") + "pattern" + patternNo + ".png);"; return "url(" + topparent.getGlobal("menuImagePath") + "pattern" + patternNo + ".png)"; } function selectPattern(patternNo) { ownerControl.setAttribute("pattern",patternNo); ownerControl.firstChild.firstChild.firstChild.style.backgroundImage = getPatternStyle(patternNo); hideColorPicker(); } function positionColorPicker() { var colorPickerWidth = currentColorPicker.offsetWidth; var colorPickerHeight = currentColorPicker.offsetHeight; var docheight,docwidth; if (window.innerHeight) { docheight = window.innerHeight; docwidth = window.innerWidth; } else { docheight = document.body.offsetHeight; docwidth = document.body.offsetWidth; } var verticalScroll = 0; if (window.scrollY) verticalScroll = scrollY; else verticalScroll = document.body.scrollTop; currentColorPicker.style.top = parseInt((docheight - colorPickerHeight) / 2) + verticalScroll; currentColorPicker.style.left = parseInt((docwidth - colorPickerWidth) / 2); } function initializeColorPicker() { setColorPickerColor(ownerControl.getAttribute("color")); } function selectCurrentWebSafeColorCell() { if (currentlySelectedColorCell) currentlySelectedColorCell.removeChild(currentlySelectedColorCell.firstChild); //Find the correct cell; var rgb = getRGBFromHex(currentColor); if ((rgb.red % 51) || (rgb.green % 51) || (rgb.blue % 51)) { //Not a websafe color currentlySelectedColorCell = null; } else { //find the row var rowNum = parseInt(rgb.green / 51); if (rgb.blue >= (51 * 3)) rowNum += 6; var colNum = parseInt(rgb.red / 51); if (colNum += 6 * ((rgb.blue % (3 * 51)) / 51)); currentlySelectedColorCell = document.getElementById("ColorPickerWebSafePaletteTable").childNodes[rowNum].childNodes[colNum]; var selectImg = document.createElement("IMG"); selectImg.className = "colorPickerWebSafeColorCellSelected"; selectImg.src = topparent.getGlobal("menuImagePath") + "blank.gif"; if (((rgb.red + rgb.green + rgb.blue)/3) < (255/3)) selectImg.style.borderColor = "#FFFFFF"; else selectImg.style.borderColor = "#000000"; if (topparent.getGlobal("nn7")) { selectImg.style.height = "2px"; } currentlySelectedColorCell.appendChild(selectImg); } } function setColorPickerColor(color) { var colorPreview = document.getElementById("colorPickerPreviewDiv"); colorPreview.style.backgroundColor = "#" + color; currentColor = color; selectCurrentWebSafeColorCell(); var rgb = getRGBFromHex(color); document.getElementById("colorPickerRed").value = rgb.red; document.getElementById("colorPickerGreen").value = rgb.green; document.getElementById("colorPickerBlue").value = rgb.blue; var hsl = RGBtoHSL(rgb); document.getElementById("colorPickerHue").value = hsl.hue; document.getElementById("colorPickerSat").value = hsl.sat; document.getElementById("colorPickerLum").value = hsl.lum; } function onRGBChange() { var rgb = new RGB(parseInt(document.getElementById("colorPickerRed").value),parseInt(document.getElementById("colorPickerGreen").value),parseInt(document.getElementById("colorPickerBlue").value)); var hexColor = getHexColor(rgb.red, rgb.green, rgb.blue); var colorPreview = document.getElementById("colorPickerPreviewDiv"); colorPreview.style.backgroundColor = "#" + hexColor; currentColor = hexColor; selectCurrentWebSafeColorCell(); var hsl = RGBtoHSL(rgb); document.getElementById("colorPickerHue").value = hsl.hue; document.getElementById("colorPickerSat").value = hsl.sat; document.getElementById("colorPickerLum").value = hsl.lum; } function onHSLChange() { var hsl = new HSL(parseInt(document.getElementById("colorPickerHue").value),parseInt(document.getElementById("colorPickerSat").value),parseInt(document.getElementById("colorPickerLum").value)); var rgb = HSLtoRGB(hsl); var hexColor = getHexColor(rgb.red, rgb.green, rgb.blue); var colorPreview = document.getElementById("colorPickerPreviewDiv"); colorPreview.style.backgroundColor = "#" + hexColor; currentColor = hexColor; selectCurrentWebSafeColorCell(); document.getElementById("colorPickerRed").value = rgb.red; document.getElementById("colorPickerGreen").value = rgb.green; document.getElementById("colorPickerBlue").value = rgb.blue; } function setOwnerControlColor() { ownerControl.setAttribute("color",currentColor); ownerControl.firstChild.firstChild.firstChild.style.backgroundColor = "#" + currentColor; } function hideColorPicker() { if (currentColorPicker != null) { currentColorPicker.style.display = "none"; currentColorPicker = null; ownerControl = null; currentColor = ""; } } /**********************************/ /* RGB / HSL conversions routines */ /**********************************/ function RGBtoHSL(rgb) { var hue = 0; var sat = 0; var lum = 0; var minColor = rgb.red; var maxColor = rgb.red; if (rgb.green < minColor) minColor = rgb.green; else if (rgb.green > maxColor) maxColor = rgb.green; if (rgb.blue < minColor) minColor = rgb.blue; else if (rgb.blue > maxColor) maxColor = rgb.blue; lum = parseInt(((maxColor + minColor) / 2) * MAX_HSL/MAX_RGB + 0.5); if (maxColor != minColor) { if (lum < (MAX_HSL / 2)) { sat = (maxColor - minColor) / (maxColor + minColor); } else { sat = (maxColor - minColor) / ((2 * MAX_RGB) - maxColor - minColor); } sat = parseInt(sat * MAX_HSL + 0.5); } if ((maxColor == 0 && minColor == 0) || (maxColor - minColor == 0)) hue = 0; else if (rgb.red == maxColor) { hue = parseInt(((rgb.green - rgb.blue)/(maxColor - minColor)) * MAX_HSL/6); } else if (rgb.green == maxColor) { hue = parseInt(((rgb.blue - rgb.red)/(maxColor - minColor)) * MAX_HSL/6 + MAX_HSL/3); } else { hue = parseInt(((rgb.red - rgb.green)/(maxColor - minColor)) * MAX_HSL/6 + 2 * MAX_HSL/3); } if (hue < 0) hue += MAX_HSL; return new HSL(hue,sat,lum); } function HSLtoRGB(hsl) { var red = 0; var green = 0; var blue = 0; var temp1, temp2, Rtemp, Gtemp, Btemp; if (hsl.sat == 0) { red = parseInt(hsl.lum * MAX_RGB/MAX_HSL + 0.5); green = parseInt(hsl.lum * MAX_RGB/MAX_HSL + 0.5); blue = parseInt(hsl.lum * MAX_RGB/MAX_HSL + 0.5); } else { if (hsl.lum < (MAX_HSL / 2)) { temp2 = hsl.lum/MAX_HSL * (1 + hsl.sat/MAX_HSL); } else temp2 = (hsl.lum + hsl.sat)/MAX_HSL - (hsl.lum/MAX_HSL * hsl.sat/MAX_HSL); temp1 = 2 * hsl.lum/MAX_HSL - temp2; Rtemp = hsl.hue/MAX_HSL + 1/3; if (Rtemp > 1) Rtemp -= 1; else if (Rtemp < 0) Rtemp += 1; Gtemp = hsl.hue/MAX_HSL; if (Gtemp > 1) Gtemp -= 1; else if (Gtemp < 0) Gtemp += 1; Btemp = hsl.hue/MAX_HSL - 1/3; if (Btemp > 1) Btemp -= 1; else if (Btemp < 0) Btemp += 1; if (6 * Rtemp < 1) red = temp1 + (temp2 - temp1) * 6 * Rtemp; else if (2 * Rtemp < 1) red = temp2; else if (3 * Rtemp < 2) red = temp1 + (temp2 - temp1) * (2/3 - Rtemp) * 6; else red = temp1; if (6 * Gtemp < 1) green = temp1 + (temp2 - temp1) * 6 * Gtemp; else if (2 * Gtemp < 1) green = temp2; else if (3 * Gtemp < 2) green = temp1 + (temp2 - temp1) * (2/3 - Gtemp) * 6; else green = temp1; if (6 * Btemp < 1) blue = temp1 + (temp2 - temp1) * 6 * Btemp; else if (2 * Btemp < 1) blue = temp2; else if (3 * Btemp < 2) blue = temp1 + (temp2 - temp1) * (2/3 - Btemp) * 6; else blue = temp1; } return new RGB(parseInt(red * MAX_RGB + 0.5), parseInt(green * MAX_RGB + 0.5), parseInt(blue * MAX_RGB + 0.5)); } function setColorPicker(id, color) { var colorPicker = document.getElementById(id); colorPicker.setAttribute("color",color); colorPicker.firstChild.firstChild.firstChild.style.backgroundColor = "#" + color; } function getColorPickerColor(id) { return document.getElementById(id).getAttribute("color"); } function setPatternPicker(id, pattern) { var patternPicker = document.getElementById(id); patternPicker.setAttribute("pattern",pattern); patternPicker.firstChild.firstChild.firstChild.style.backgroundImage = getPatternStyle(pattern); } function getPatternPickerPattern(id) { return parseInt(document.getElementById(id).getAttribute("pattern")); } //*************************************** //slider var dragging_slider = null; var sliderPageOffsetLeft = 0; var sliderContainerOffsetWidth = 0; var sliderOffsetWidth = 0; var sliderTextBox = null; var minSliderValue = 0; var maxSliderValue = 0; function startdragslider(event) { var eventM = new eventManager(event); eventM.cancelBubble(); dragging_slider = eventM.getSrc(); if (dragging_slider.tagName.toUpperCase() != "IMG") { dragging_slider = dragging_slider.firstChild; } sliderPageOffsetLeft = getPageOffsetLeft(dragging_slider.parentNode); sliderOffsetWidth = dragging_slider.offsetWidth; sliderContainerOffsetWidth = dragging_slider.parentNode.offsetWidth - sliderOffsetWidth; sliderTextBox = dragging_slider.parentNode.nextSibling.firstChild.nextSibling; minSliderValue = parseInt(dragging_slider.parentNode.getAttribute("min")); maxSliderValue = parseInt(dragging_slider.parentNode.getAttribute("max")); } function stopdragslider(event) { dragging_slider = null; } function dragslider(event) { var eventM = new eventManager(event); eventM.cancelBubble(); if (dragging_slider != null) { var val = eventM.theEvent.clientX - sliderPageOffsetLeft - sliderOffsetWidth/2; if (val > 0 && val < sliderContainerOffsetWidth ) { dragging_slider.style.left = val; if ((val - 2) <= 0) sliderTextBox.value = minSliderValue; else if ((val + 2) >= sliderContainerOffsetWidth) sliderTextBox.value = maxSliderValue; else sliderTextBox.value = parseInt(minSliderValue + ((val - 2) * (maxSliderValue - minSliderValue)/(sliderContainerOffsetWidth - 4))); } } } function sliderCLicked(event) { //Clicking the slider is the same as a complete drag operation startdragslider(event); dragslider(event); stopdragslider(event); } function getPageOffsetLeft(obj) { var left = obj.offsetLeft; var oParent = obj.offsetParent; while (oParent) { left += oParent.offsetLeft; oParent = oParent.offsetParent; } return left; } function changeSlider(event) { var eventM = new eventManager(event); eventM.cancelBubble(); var text = eventM.getSrc(); sliderValueChanged(text); } function sliderValueChanged(text) { var slider = text.parentNode.previousSibling.firstChild; var sliderWidth = text.parentNode.previousSibling.offsetWidth; var sliderMin = text.parentNode.previousSibling.getAttribute("min"); var sliderMax = text.parentNode.previousSibling.getAttribute("max"); if (text.value == "") { val = 0; text.value = ""; } else if (text.value == "-") { val = 0; text.value = "-"; } else { var val = parseInt(text.value); if (isNaN(val)) { val = sliderMin; } if (val < sliderMin) val = sliderMin; if (val > sliderMax) val = sliderMax; text.value = val; } slider.style.left = (val * (sliderWidth - 4 - slider.offsetWidth)/(sliderMax - sliderMin) ) + 2; } function stopProp(event) { var eventM = new eventManager(event); eventM.cancelBubble(); }