Color Picker bug no IE7, IE8

[danilo_dl]

Olá estou colocando a opção de escolher cor no em um sistema, para isso estou usando um color picker, segue o script dele

se alguém puder ajudar agradeço desde já

PS: IE6, firefox e etc funciona normalmente....

<script>
var Colors = new function()
{
this.ColorFromHSV = function(hue, sat, val)
{
var color = new Color();
color.SetHSV(hue,sat,val);
return color;
}

this.ColorFromRGB = function(r, g, b)
{
var color = new Color();
color.SetRGB(r,g,b);
return color;
}

this.ColorFromHex = function(hexStr)
{
var color = new Color();
color.SetHexString(hexStr);
return color;
}

function Color()
{
//Stored as values between 0 and 1
var red = 0;
var green = 0;
var blue = 0;

//Stored as values between 0 and 360
var hue = 0;

//Strored as values between 0 and 1
var saturation = 0;
var value = 0;

this.SetRGB = function(r, g, b)
{
if (isNaN® || isNaN(g) || isNaN(b))
return false;

r = r/255.0;
red = r > 1 ? 1 : r < 0 ? 0 : r;
g = g/255.0;
green = g > 1 ? 1 : g < 0 ? 0 : g;
b = b/255.0;
blue = b > 1 ? 1 : b < 0 ? 0 : b;

calculateHSV();
return true;
}

this.Red = function()
{ return Math.round(red*255); }

this.Green = function()
{ return Math.round(green*255); }

this.Blue = function()
{ return Math.round(blue*255); }

this.SetHSV = function(h, s, v)
{
if (isNaN(h) || isNaN(s) || isNaN(v))
return false;

hue = (h >= 360) ? 359.99 : (h < 0) ? 0 : h;
saturation = (s > 1) ? 1 : (s < 0) ? 0 : s;
value = (v > 1) ? 1 : (v < 0) ? 0 : v;
calculateRGB();
return true;
}

this.Hue = function()
{ return hue; }

this.Saturation = function()
{ return saturation; }

this.Value = function()
{ return value; }

this.SetHexString = function(hexString)
{
if(hexString == null || typeof(hexString) != "string")
return false;

if (hexString.substr(0, 1) == '#')
hexString = hexString.substr(1);

if(hexString.length != 6)
return false;

var r = parseInt(hexString.substr(0, 2), 16);
var g = parseInt(hexString.substr(2, 2), 16);
var b = parseInt(hexString.substr(4, 2), 16);

return this.SetRGB(r,g,b);
}

this.HexString = function()
{
var rStr = this.Red().toString(16);
if (rStr.length == 1)
rStr = '0' + rStr;
var gStr = this.Green().toString(16);
if (gStr.length == 1)
gStr = '0' + gStr;
var bStr = this.Blue().toString(16);
if (bStr.length == 1)
bStr = '0' + bStr;
return ('#' + rStr + gStr + bStr).toUpperCase();
}

this.Complement = function()
{
var newHue = (hue>= 180) ? hue - 180 : hue + 180;
var newVal = (value * (saturation - 1) + 1);
var newSat = (value*saturation) / newVal;
var newColor = new Color();
newColor.SetHSV(newHue, newSat, newVal);
return newColor;
}

function calculateHSV()
{
var max = Math.max(Math.max(red, green), blue);
var min = Math.min(Math.min(red, green), blue);

value = max;

saturation = 0;
if(max != 0)
saturation = 1 - min/max;

hue = 0;
if(min == max)
return;

var delta = (max - min);
if (red == max)
hue = (green - blue) / delta;
else if (green == max)
hue = 2 + ((blue - red) / delta);
else
hue = 4 + ((red - green) / delta);
hue = hue * 60;
if(hue <0)
hue += 360;
}

function calculateRGB()
{
red = value;
green = value;
blue = value;

if(value == 0 || saturation == 0)
return;

var tHue = (hue / 60);
var i = Math.floor(tHue);
var f = tHue - i;
var p = value * (1 - saturation);
var q = value * (1 - saturation * f);
var t = value * (1 - saturation * (1 - f));
switch(i)
{
case 0:
red = value; green = t; blue = p;
break;
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;
default:
red = value; green = p; blue = q;
break;
}
}
}
}
();

function Position(x, y)
{
this.X = x;
this.Y = y;

this.Add = function(val)
{
var newPos = new Position(this.X, this.Y);
if(val != null)
{
if(!isNaN(val.X))
newPos.X += val.X;
if(!isNaN(val.Y))
newPos.Y += val.Y
}
return newPos;
}

this.Subtract = function(val)
{
var newPos = new Position(this.X, this.Y);
if(val != null)
{
if(!isNaN(val.X))
newPos.X -= val.X;
if(!isNaN(val.Y))
newPos.Y -= val.Y
}
return newPos;
}

this.Min = function(val)
{
var newPos = new Position(this.X, this.Y)
if(val == null)
return newPos;

if(!isNaN(val.X) && this.X > val.X)
newPos.X = val.X;
if(!isNaN(val.Y) && this.Y > val.Y)
newPos.Y = val.Y;

return newPos;
}

this.Max = function(val)
{
var newPos = new Position(this.X, this.Y)
if(val == null)
return newPos;

if(!isNaN(val.X) && this.X < val.X)
newPos.X = val.X;
if(!isNaN(val.Y) && this.Y < val.Y)
newPos.Y = val.Y;

return newPos;
}

this.Bound = function(lower, upper)
{
var newPos = this.Max(lower);
return newPos.Min(upper);
}

this.Check = function()
{
var newPos = new Position(this.X, this.Y);
if(isNaN(newPos.X))
newPos.X = 0;
if(isNaN(newPos.Y))
newPos.Y = 0;
return newPos;
}

this.Apply = function(element)
{
if(typeof(element) == "string")
element = document.getElementById(element);
if(element == null)
return;
if(!isNaN(this.X))
element.style.left = this.X + 'px';
if(!isNaN(this.Y))
element.style.top = this.Y + 'px';
}
}

var pointerOffset = new Position(0, navigator.userAgent.indexOf("Firefox") >= 0 ? 1 : 0);
var circleOffset = new Position(5, 5);
var arrowsOffset = new Position(0, 4);

var arrowsLowBounds = new Position(0, -4);
var arrowsUpBounds = new Position(0, 251);
var circleLowBounds = new Position(-5, -5);
var circleUpBounds = new Position(250, 250);

function correctOffset(pos, offset, neg)
{
if(neg)
return pos.Subtract(offset);
return pos.Add(offset);
}

function hookEvent(element, eventName, callback)
{
if(typeof(element) == "string")
element = document.getElementById(element);
if(element == null)
return;
if(element.addEventListener)
{
element.addEventListener(eventName, callback, false);
}
else if(element.attachEvent)
element.attachEvent("on" + eventName, callback);
}

function unhookEvent(element, eventName, callback)
{
if(typeof(element) == "string")
element = document.getElementById(element);
if(element == null)
return;
if(element.removeEventListener)
element.removeEventListener(eventName, callback, false);
else if(element.detachEvent)
element.detachEvent("on" + eventName, callback);
}

function cancelEvent(e)
{
e = e ? e : window.event;
if(e.stopPropagation)
e.stopPropagation();
if(e.preventDefault)
e.preventDefault();
e.cancelBubble = true;
e.cancel = true;
e.returnValue = false;
return false;
}

function getMousePos(eventObj)
{
eventObj = eventObj ? eventObj : window.event;
var pos;
if(isNaN(eventObj.layerX))
pos = new Position(eventObj.offsetX, eventObj.offsetY);
else
pos = new Position(eventObj.layerX, eventObj.layerY);
return correctOffset(pos, pointerOffset, true);
}

function getEventTarget(e)
{
e = e ? e : window.event;
return e.target ? e.target : e.srcElement;
}

function absoluteCursorPostion(eventObj)
{
eventObj = eventObj ? eventObj : window.event;

if(isNaN(window.scrollX))
return new Position(eventObj.clientX + document.documentElement.scrollLeft + document.body.scrollLeft,
eventObj.clientY + document.documentElement.scrollTop + document.body.scrollTop);
else
return new Position(eventObj.clientX + window.scrollX, eventObj.clientY + window.scrollY);
}

function dragObject(element, attachElement, lowerBound, upperBound, startCallback, moveCallback, endCallback, attachLater)
{
if(typeof(element) == "string")
element = document.getElementById(element);
if(element == null)
return;

if(lowerBound != null && upperBound != null)
{
var temp = lowerBound.Min(upperBound);
upperBound = lowerBound.Max(upperBound);
lowerBound = temp;
}

var cursorStartPos = null;
var elementStartPos = null;
var dragging = false;
var listening = false;
var disposed = false;

function dragStart(eventObj)
{
if(dragging || !listening || disposed) return;
dragging = true;

if(startCallback != null)
startCallback(eventObj, element);

cursorStartPos = absoluteCursorPostion(eventObj);

elementStartPos = new Position(parseInt(element.style.left), parseInt(element.style.top));

elementStartPos = elementStartPos.Check();

hookEvent(document, "mousemove", dragGo);
hookEvent(document, "mouseup", dragStopHook);

return cancelEvent(eventObj);
}

function dragGo(eventObj)
{
if(!dragging || disposed) return;

var newPos = absoluteCursorPostion(eventObj);
newPos = newPos.Add(elementStartPos).Subtract(cursorStartPos);
newPos = newPos.Bound(lowerBound, upperBound)
newPos.Apply(element);
if(moveCallback != null)
moveCallback(newPos, element);

return cancelEvent(eventObj);
}

function dragStopHook(eventObj)
{
dragStop();
return cancelEvent(eventObj);
}

function dragStop()
{
if(!dragging || disposed) return;
unhookEvent(document, "mousemove", dragGo);
unhookEvent(document, "mouseup", dragStopHook);
cursorStartPos = null;
elementStartPos = null;
if(endCallback != null)
endCallback(element);
dragging = false;
}

this.Dispose = function()
{
if(disposed) return;
this.StopListening(true);
element = null;
attachElement = null
lowerBound = null;
upperBound = null;
startCallback = null;
moveCallback = null
endCallback = null;
disposed = true;
}

this.StartListening = function()
{
if(listening || disposed) return;
listening = true;
hookEvent(attachElement, "mousedown", dragStart);
}

this.StopListening = function(stopCurrentDragging)
{
if(!listening || disposed) return;
unhookEvent(attachElement, "mousedown", dragStart);
listening = false;

if(stopCurrentDragging && dragging)
dragStop();
}

this.IsDragging = function(){ return dragging; }
this.IsListening = function() { return listening; }
this.IsDisposed = function() { return disposed; }

if(typeof(attachElement) == "string")
attachElement = document.getElementById(attachElement);
if(attachElement == null)
attachElement = element;

if(!attachLater)
this.StartListening();
}

function arrowsDown(e, arrows)
{
var pos = getMousePos(e);

if(getEventTarget(e) == arrows)
pos.Y += parseInt(arrows.style.top);

pos = correctOffset(pos, arrowsOffset, true);

pos = pos.Bound(arrowsLowBounds, arrowsUpBounds);

pos.Apply(arrows);

arrowsMoved(pos);
}

function circleDown(e, circle)
{
var pos = getMousePos(e);

if(getEventTarget(e) == circle)
{
pos.X += parseInt(circle.style.left);
pos.Y += parseInt(circle.style.top);
}

pos = correctOffset(pos, circleOffset, true);

pos = pos.Bound(circleLowBounds, circleUpBounds);

pos.Apply(circle);

circleMoved(pos);
}

function arrowsMoved(pos, element)
{
pos = correctOffset(pos, arrowsOffset, false);
currentColor.SetHSV((256 - pos.Y)*359.99/255, currentColor.Saturation(), currentColor.Value());
colorChanged("arrows");
}

function circleMoved(pos, element)
{
pos = correctOffset(pos, circleOffset, false);
currentColor.SetHSV(currentColor.Hue(), 1-pos.Y/255.0, pos.X/255.0);
colorChanged("circle");
}

function colorChanged(source)
{
document.getElementById("hexBox").value = currentColor.HexString();
document.getElementById("redBox").value = currentColor.Red();
document.getElementById("greenBox").value = currentColor.Green();
document.getElementById("blueBox").value = currentColor.Blue();
document.getElementById("hueBox").value = Math.round(currentColor.Hue());
var str = (currentColor.Saturation()*100).toString();
if(str.length > 4)
str = str.substr(0,4);
document.getElementById("saturationBox").value = str;
str = (currentColor.Value()*100).toString();
if(str.length > 4)
str = str.substr(0,4);
document.getElementById("valueBox").value = str;

if(source == "arrows" || source == "box")
document.getElementById("gradientBox").style.backgroundColor = Colors.ColorFromHSV(currentColor.Hue(), 1, 1).HexString();

if(source == "box")
{
var el = document.getElementById("arrows");
el.style.top = (256 - currentColor.Hue()*255/359.99 - arrowsOffset.Y) + 'px';
var pos = new Position(currentColor.Value()*255, (1-currentColor.Saturation())*255);
pos = correctOffset(pos, circleOffset, true);
pos.Apply("circle");
endMovement();
}

document.getElementById("quickColor").style.backgroundColor = currentColor.HexString();
}

function endMovement()
{
document.getElementById("staticColor").style.backgroundColor = currentColor.HexString();
}

function hexBoxChanged(e)
{
currentColor.SetHexString(document.getElementById("hexBox").value);
colorChanged("box");
}

function redBoxChanged(e)
{
currentColor.SetRGB(parseInt(document.getElementById("redBox").value), currentColor.Green(), currentColor.Blue());
colorChanged("box");
}

function greenBoxChanged(e)
{
currentColor.SetRGB(currentColor.Red(), parseInt(document.getElementById("greenBox").value), currentColor.Blue());
colorChanged("box");
}

function blueBoxChanged(e)
{
currentColor.SetRGB(currentColor.Red(), currentColor.Green(), parseInt(document.getElementById("blueBox").value));
colorChanged("box");
}

function hueBoxChanged(e)
{
currentColor.SetHSV(parseFloat(document.getElementById("hueBox").value), currentColor.Saturation(), currentColor.Value());
colorChanged("box");
}

function saturationBoxChanged(e)
{
currentColor.SetHSV(currentColor.Hue(), parseFloat(document.getElementById("saturationBox").value)/100.0, currentColor.Value());
colorChanged("box");
}

function valueBoxChanged(e)
{
currentColor.SetHSV(currentColor.Hue(), currentColor.Saturation(), parseFloat(document.getElementById("valueBox").value)/100.0);
colorChanged("box");
}

function fixPNG(myImage)
{
if(!document.body.filters)
return;
var arVersion = navigator.appVersion.split("MSIE");
var version = parseFloat(arVersion[1]);
if(version < 5.5 || version >= 7)
return;

var imgID = (myImage.id) ? "id='" + myImage.id + "' " : ""
var imgStyle = "display:inline-block;" + myImage.style.cssText
var strNewHTML = "<span " + imgID
+ " style=\"" + "width:" + myImage.width
+ "px; height:" + myImage.height
+ "px;" + imgStyle + ";"
+ "filter:progid:DXImageTransform.Microsoft.AlphaImageLoader"
+ "(src=\'" + myImage.src + "\', sizingMethod='scale');\"></span>"
myImage.outerHTML = strNewHTML
}

function fixGradientImg()
{
fixPNG(document.getElementById("gradientImg"));
}
</script>
<div style="position:relative;height:290px;width:531px;border:1px solid black;">
<div id="gradientBox" style="cursor:crosshair;position:absolute;top:15px;left:15px;width:256px;height:25
6px;">
<img id="gradientImg" style="display:block;width:256px;height:256px;" src="color_picker_gradient.png" />
<img id="circle" style="position:absolute;height:11px;width:11px;" src="color_picker_circle.gif" />
</div>
<div id="hueBarDiv" style="position:absolute;left:310px;width:35px;height:256px;top:15px;">
<img style="position:absolute;height:256px;width:19px;left:8px;" src="color_picker_bar.png" />
<img id="arrows" style="position:absolute;height:9px;width:35px;left:0px;" src="color_picker_arrows.gif" />
<br />

</div>
<div style="position:absolute;left:370px;width:145px;height:256px;top:15px;">
<div style="position:absolute;border: 1px solid black;height:50px;width:145px;top:0px;left:0px;">
<div id="quickColor" style="position:absolute;height:50px;width:73px;top:0px;left:0px;"></div>
<div id="staticColor" style="position:absolute;height:50px;width:72px;top:0px;left:73px;"></div>
</div>
<br />
<table width="100%" style="position:absolute;top:55px;">
<tr>

<td>Valor: </td>
<td>
<input style="width:80px;margin:0.3em;" name="cor" size="8" type="text" id="hexBox" onchange="hexBoxChanged();" />
</td>
</tr>
<tr>
<!-- Reg-->
<td>

<input style="margin:0.3em;" size="8" type="hidden" id="redBox" onchange="redBoxChanged();" />
</td>
</tr>
<tr>
<!--Green: -->
<td>
<input style="margin:0.3em;" size="8" type="hidden" id="greenBox" onchange="greenBoxChanged();" />
</td>

</tr>
<tr>
<!--Blue:-->
<td>
<input style="margin:0.3em;" size="8" type="hidden" id="blueBox" onchange="blueBoxChanged();" />
</td>
</tr>
<tr>

<!--Hur:-->
<td>
<input style="margin:0.3em;" size="8" type="hidden" id="hueBox" onchange="hueBoxChanged();" />
</td>
</tr>
<tr>
<!--Saturation:-->
<td>

<input style="margin:0.3em;" size="8" type="hidden" id="saturationBox" onchange="saturationBoxChanged();" />
</td>
</tr>
<tr>
<!--Value-->
<td>
<input style="margin:0.3em;" size="8" type="hidden" id="valueBox" onchange="valueBoxChanged();" />
</td>

</tr>
</table>
</div>
</div>
</center>
&lt;script type="text/javascript">
fixGradientImg();
var currentColor = Colors.ColorFromRGB(64,128,128);
new dragObject("arrows", "hueBarDiv", arrowsLowBounds, arrowsUpBounds, arrowsDown, arrowsMoved, endMovement);
new dragObject("circle", "gradientBox", circleLowBounds, circleUpBounds, circleDown, circleMoved, endMovement);
colorChanged('box');
</script>

Editado Maio 28, 2010 por kuroi
Adicionar tag CODE

[kuroi]

cara, isso é javascript, não é java.