// Copyright 2008 Sebo Zoltan // // Permission is hereby granted, free of charge, to any person obtaining // a copy of this software and associated documentation files (the // "Software"), to deal in the Software without restriction, including // without limitation the rights to use, copy, modify, merge, publish, // distribute, sublicense, and/or sell copies of the Software, and to // permit persons to whom the Software is furnished to do so, subject // to the following conditions: // // The above copyright notice and this permission notice shall be // included in all copies or substantial portions of the Software. // // THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, // EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF // MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND // NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS // BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN // ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN // CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. // A few configuration settings var CROSSHAIRS_LOCATION = 'https://www.financeads.net/javascript/colorpicker/images/crosshairs.png'; var HUE_SLIDER_LOCATION = 'https://www.financeads.net/javascript/colorpicker/images/h.png'; var HUE_SLIDER_ARROWS_LOCATION = 'https://www.financeads.net/javascript/colorpicker/images/position.png'; var SAT_VAL_SQUARE_LOCATION = 'https://www.financeads.net/javascript/colorpicker/images/sv.png'; var BUTON_CLOSE_LOCATION='https://www.financeads.net/javascript/colorpicker/images/close.jpg'; var HEIGHT_OF_OBJ=25;//manualy move the the color picker top or botom var WIDTH_OF_OBJ=150; //manualy move the color picker left or right var wasColor = ''; var wasInput = ''; // Here are some boring utility functions. The real code comes later. var is_div_init=false; function hexToRgb(hex_string, default_) { if (default_ == undefined) { default_ = null; } if (hex_string.substr(0, 1) == '#') { hex_string = hex_string.substr(1); } var r; var g; var b; if (hex_string.length == 3) { r = hex_string.substr(0, 1); r += r; g = hex_string.substr(1, 1); g += g; b = hex_string.substr(2, 1); b += b; } else if (hex_string.length == 6) { r = hex_string.substr(0, 2); g = hex_string.substr(2, 2); b = hex_string.substr(4, 2); } else { return default_; } r = parseInt(r, 16); g = parseInt(g, 16); b = parseInt(b, 16); if (isNaN(r) || isNaN(g) || isNaN(b)) { return default_; } else { return {r: r / 255, g: g / 255, b: b / 255}; } } function rgbToHex(r, g, b, includeHash) { r = Math.round(r * 255); g = Math.round(g * 255); b = Math.round(b * 255); if (includeHash == undefined) { includeHash = true; } r = r.toString(16); if (r.length == 1) { r = '0' + r; } g = g.toString(16); if (g.length == 1) { g = '0' + g; } b = b.toString(16); if (b.length == 1) { b = '0' + b; } return ((includeHash ? '#' : '') + r + g + b).toUpperCase(); } var arVersion = navigator.appVersion.split("MSIE"); var version = parseFloat(arVersion[1]); function fixPNG(myImage) { if ((version >= 5.5) && (version < 7) && (document.body.filters)) { var node = document.createElement('span'); node.id = myImage.id; node.className = myImage.className; node.title = myImage.title; node.style.cssText = myImage.style.cssText; node.style.setAttribute('filter', "progid:DXImageTransform.Microsoft.AlphaImageLoader" + "(src=\'" + myImage.src + "\', sizingMethod='scale')"); node.style.fontSize = '0'; node.style.width = myImage.width.toString() + 'px'; node.style.height = myImage.height.toString() + 'px'; node.style.display = 'inline-block'; return node; } else { return myImage.cloneNode(false); } } function trackDrag(node, handler) { function fixCoords(x, y) { var nodePageCoords = pageCoords(node); x = (x - nodePageCoords.x) + document.documentElement.scrollLeft; y = (y - nodePageCoords.y) + document.documentElement.scrollTop; if (x < 0) x = 0; if (y < 0) y = 0; if (x > node.offsetWidth - 1) x = node.offsetWidth - 1; if (y > node.offsetHeight - 1) y = node.offsetHeight - 1; return {x: x, y: y}; } function mouseDown(ev) { var coords = fixCoords(ev.clientX, ev.clientY); var lastX = coords.x; var lastY = coords.y; handler(coords.x, coords.y); function moveHandler(ev) { var coords = fixCoords(ev.clientX, ev.clientY); if (coords.x != lastX || coords.y != lastY) { lastX = coords.x; lastY = coords.y; handler(coords.x, coords.y); } } function upHandler(ev) { myRemoveEventListener(document, 'mouseup', upHandler); myRemoveEventListener(document, 'mousemove', moveHandler); myAddEventListener(node, 'mousedown', mouseDown); } myAddEventListener(document, 'mouseup', upHandler); myAddEventListener(document, 'mousemove', moveHandler); myRemoveEventListener(node, 'mousedown', mouseDown); if (ev.preventDefault) ev.preventDefault(); } myAddEventListener(node, 'mousedown', mouseDown); node.onmousedown = function(e) { return false; }; node.onselectstart = function(e) { return false; }; node.ondragstart = function(e) { return false; }; } var eventListeners = []; function findEventListener(node, event, handler) { var i; for (i in eventListeners) { if (eventListeners[i].node == node && eventListeners[i].event == event && eventListeners[i].handler == handler) { return i; } } return null; } function myAddEventListener(node, event, handler) { if (findEventListener(node, event, handler) != null) { return; } if (!node.addEventListener) { node.attachEvent('on' + event, handler); } else { node.addEventListener(event, handler, false); } eventListeners.push({node: node, event: event, handler: handler}); } function removeEventListenerIndex(index) { var eventListener = eventListeners[index]; delete eventListeners[index]; if (!eventListener.node.removeEventListener) { eventListener.node.detachEvent('on' + eventListener.event, eventListener.handler); } else { eventListener.node.removeEventListener(eventListener.event, eventListener.handler, false); } } function myRemoveEventListener(node, event, handler) { removeEventListenerIndex(findEventListener(node, event, handler)); } function cleanupEventListeners() { var i; for (i = eventListeners.length; i > 0; i--) { if (eventListeners[i] != undefined) { removeEventListenerIndex(i); } } } myAddEventListener(window, 'unload', cleanupEventListeners); // This copyright statement applies to the following two functions, // which are taken from MochiKit. // // Copyright 2005 Bob Ippolito // // Permission is hereby granted, free of charge, to any person obtaining // a copy of this software and associated documentation files (the // "Software"), to deal in the Software without restriction, including // without limitation the rights to use, copy, modify, merge, publish, // distribute, sublicense, and/or sell copies of the Software, and to // permit persons to whom the Software is furnished to do so, subject // to the following conditions: // // The above copyright notice and this permission notice shall be // included in all copies or substantial portions of the Software. // // THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, // EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF // MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND // NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS // BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN // ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN // CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. function hsvToRgb(hue, saturation, value) { var red; var green; var blue; if (value == 0.0) { red = 0; green = 0; blue = 0; } else { var i = Math.floor(hue * 6); var f = (hue * 6) - i; var p = value * (1 - saturation); var q = value * (1 - (saturation * f)); var t = value * (1 - (saturation * (1 - f))); switch (i) { case 1: red = q; green = value; blue = p; break; case 2: red = p; green = value; blue = t; break; case 3: red = p; green = q; blue = value; break; case 4: red = t; green = p; blue = value; break; case 5: red = value; green = p; blue = q; break; case 6: // fall through case 0: red = value; green = t; blue = p; break; } } return {r: red, g: green, b: blue}; } function rgbToHsv(red, green, blue) { var max = Math.max(Math.max(red, green), blue); var min = Math.min(Math.min(red, green), blue); var hue; var saturation; var value = max; if (min == max) { hue = 0; saturation = 0; } else { var delta = (max - min); saturation = delta / max; if (red == max) { hue = (green - blue) / delta; } else if (green == max) { hue = 2 + ((blue - red) / delta); } else { hue = 4 + ((red - green) / delta); } hue /= 6; if (hue < 0) { hue += 1; } if (hue > 1) { hue -= 1; } } return { h: hue, s: saturation, v: value }; } function pageCoords(node) { var x = node.offsetLeft; var y = node.offsetTop; var parent = node.offsetParent; while (parent != null) { x += parent.offsetLeft; y += parent.offsetTop; parent = parent.offsetParent; } return {x: x, y: y}; } // The real code begins here. var huePositionImg = document.createElement('img'); huePositionImg.galleryImg = false; huePositionImg.width = 35; huePositionImg.height = 11; huePositionImg.src = HUE_SLIDER_ARROWS_LOCATION; huePositionImg.style.position = 'absolute'; var hueSelectorImg = document.createElement('img'); hueSelectorImg.galleryImg = false; hueSelectorImg.width = 35; hueSelectorImg.height = 200; hueSelectorImg.src = HUE_SLIDER_LOCATION; hueSelectorImg.style.display = 'block'; var satValImg = document.createElement('img'); satValImg.galleryImg = false; satValImg.width = 200; satValImg.height = 200; satValImg.src = SAT_VAL_SQUARE_LOCATION; satValImg.style.display = 'block'; var crossHairsImg = document.createElement('img'); crossHairsImg.galleryImg = false; crossHairsImg.width = 21; crossHairsImg.height = 21; crossHairsImg.src = CROSSHAIRS_LOCATION; crossHairsImg.style.position = 'absolute'; var buttonCloseImg = document.createElement('img'); buttonCloseImg.galleryImg = false; buttonCloseImg.width = 200; buttonCloseImg.height = 17; buttonCloseImg.src = BUTON_CLOSE_LOCATION; buttonCloseImg.style.position = 'absolute'; buttonCloseImg.style.cursor='pointer'; buttonCloseImg.onclick=hideColorPicker; function makeColorSelector(inputBox) { var rgb, hsv function colorChanged() { is_div_init=false; var hex = rgbToHex(rgb.r, rgb.g, rgb.b); var hueRgb = hsvToRgb(hsv.h, 1, 1); var hueHex = rgbToHex(hueRgb.r, hueRgb.g, hueRgb.b); //alert(hex); inputBox.style.background = hex; inputBox.value =hex; // popox ideea if(((rgb.r*100+rgb.g*100+rgb.b*100)/3)<65) //change text color to white if the background color is to dark inputBox.style.color="#fff"; else inputBox.style.color="#000"; satValDiv.style.background = hueHex; crossHairs.style.left = ((hsv.v*199)-10).toString() + 'px'; crossHairs.style.top = (((1-hsv.s)*199)-10).toString() + 'px'; huePos.style.top = ((hsv.h*199)-5).toString() + 'px'; is_div_init=true; livePreview(); } function rgbChanged() { hsv = rgbToHsv(rgb.r, rgb.g, rgb.b); colorChanged(); } function hsvChanged() { rgb = hsvToRgb(hsv.h, hsv.s, hsv.v); colorChanged(); } var colorSelectorDiv = document.createElement('div'); colorSelectorDiv.style.paddingLeft = '5px'; colorSelectorDiv.style.paddingRight = '5px'; colorSelectorDiv.style.paddingBottom = '5px'; colorSelectorDiv.style.position = 'relative'; colorSelectorDiv.style.diplay="inline"; colorSelectorDiv.style.height = '260px'; colorSelectorDiv.style.width = '210px'; var butonclose = document.createElement('div'); butonclose.style.position = 'relative'; butonclose.style.diplay="inline"; butonclose.style.height = '10px'; butonclose.style.width = '200px'; butonclose.style.left="2px"; butonclose.style.top="20px"; butonclose.style.backgroundColor="#FFFFFF"; butonclose.style.fontSize=11+'px'; butonclose.innerHTML=' '; butonclose.style.fontFamily="Arial, Helvetica"; butonclose.style.cursor='pointer'; butonclose.onclick=hideColorPicker; var escinfo = document.createElement('div'); escinfo.style.position = 'relative'; escinfo.style.diplay="inline"; escinfo.style.height = '10px'; escinfo.style.width = '230px'; escinfo.style.left="2px"; escinfo.style.top="35px"; escinfo.style.backgroundColor="#FFFFFF"; escinfo.style.fontSize=10+'px'; escinfo.innerHTML=''; escinfo.style.fontFamily="Arial, Helvetica"; escinfo.style.textAlign='right'; // escinfo.onclick=abort(wasInput, wasColor); // escinfo.style.cursor='pointer'; // butonclose.appendChild(buttonCloseImg); // colorSelectorDiv.appendChild(butonclose); var satValDiv = document.createElement('div'); satValDiv.style.position = 'relative'; satValDiv.style.diplay="inline"; satValDiv.style.top = '10px'; satValDiv.style.width = '200px'; satValDiv.style.height = '200px'; var newSatValImg = fixPNG(satValImg); satValDiv.appendChild(newSatValImg); var crossHairs = crossHairsImg.cloneNode(false); satValDiv.appendChild(crossHairs); function satValDragged(x, y) { hsv.s = 1-(y/199); hsv.v = (x/199); hsvChanged(); } trackDrag(satValDiv, satValDragged) colorSelectorDiv.appendChild(satValDiv); var hueDiv = document.createElement('div'); hueDiv.style.position = 'absolute'; hueDiv.style.diplay="inline"; hueDiv.style.left = '210px'; hueDiv.style.top = '10px'; hueDiv.style.width = '35px'; hueDiv.style.height = '200px'; var huePos = fixPNG(huePositionImg); hueDiv.appendChild(hueSelectorImg.cloneNode(false)); hueDiv.appendChild(huePos); function hueDragged(x, y) { is_div_init=false; hsv.h = y/199; hsvChanged(); } trackDrag(hueDiv, hueDragged); colorSelectorDiv.appendChild(hueDiv); function inputBoxChanged() { rgb = hexToRgb(inputBox.value, {r: 0, g: 0, b: 0}); rgbChanged(); } myAddEventListener(inputBox, 'change', inputBoxChanged); inputBoxChanged(); colorSelectorDiv.appendChild(butonclose); colorSelectorDiv.appendChild(escinfo); return colorSelectorDiv; } function colorPickerGetTopPos(inputObj) { var returnValue = inputObj.offsetTop; while((inputObj = inputObj.offsetParent) != null){ returnValue += inputObj.offsetTop; } return returnValue-HEIGHT_OF_OBJ; } function colorPickerGetLeftPos(inputObj) { var returnValue = inputObj.offsetLeft; while((inputObj = inputObj.offsetParent) != null)returnValue += inputObj.offsetLeft; return returnValue+WIDTH_OF_OBJ; } function startColorPicker(inputObj, oldColor) { hideColorPicker(); var color_picker_div = document.createElement('DIV'); color_picker_div.style.left = colorPickerGetLeftPos(inputObj) + 'px'; color_picker_div.style.width='250px'; color_picker_div.style.heigth='190px'; color_picker_div.style.top = colorPickerGetTopPos(inputObj) + inputObj.offsetHeight + 2 + 'px'; color_picker_div.id = 'The_colorPicker'; color_picker_div.style.display='block'; color_picker_div.appendChild(makeColorSelector(inputObj)); document.body.appendChild(color_picker_div); is_div_init=true; wasColor = inputObj.value; wasInput = inputObj; } function hideColorPicker() { if (is_div_init){ is_div_init=false; document.body.removeChild(document.getElementById('The_colorPicker')); } } function maskedHex(input) { var mask = '#[0-9a-fA-F]{7}'; input.value=input.value.replace(mask,""); } function abort(wasInput, wasColor) { // hideColorPicker(); // alert(wasColor); // alert(wasInput); wasInput.value=wasColor; window.setTimeout("colorizeInputs();livePreview();hideColorPicker()", 10); } document.onkeydown = Taste_druecken; function Taste_druecken (druecken) { if(!druecken) druecken = window.event; if(druecken.which) { Hexadezimalcode = druecken.which; } else if(druecken.keyCode) { Hexadezimalcode = druecken.keyCode; } if (Hexadezimalcode==27) { abort(wasInput, wasColor); } }