replacing it with the new YUI one
This commit is contained in:
JT Smith
parent
20d401edf6
commit
1a7b7bae20
9 changed files with 0 additions and 318 deletions
|
|
@ -1,102 +0,0 @@
|
|||
/* Copyright (c) 2006 Yahoo! Inc. All rights reserved. */
|
||||
|
||||
YAHOO.util.Color = function() {
|
||||
|
||||
var hexchars = "0123456789ABCDEF";
|
||||
|
||||
var real2int = function(n) {
|
||||
return Math.min(255, Math.round(n*256));
|
||||
};
|
||||
|
||||
return {
|
||||
|
||||
/**
|
||||
* HSV to RGB. h[0,360], s[0,1], v[0,1]
|
||||
*/
|
||||
hsv2rgb: function(h,s,v) {
|
||||
var r,g,b,i,f,p,q,t;
|
||||
i = Math.floor((h/60)%6);
|
||||
f = (h/60)-i;
|
||||
p = v*(1-s);
|
||||
q = v*(1-f*s);
|
||||
t = v*(1-(1-f)*s);
|
||||
switch(i) {
|
||||
case 0: r=v; g=t; b=p; break;
|
||||
case 1: r=q; g=v; b=p; break;
|
||||
case 2: r=p; g=v; b=t; break;
|
||||
case 3: r=p; g=q; b=v; break;
|
||||
case 4: r=t; g=p; b=v; break;
|
||||
case 5: r=v; g=p; b=q; break;
|
||||
}
|
||||
//alert([h,s,v] + "-" + [r,g,b]);
|
||||
|
||||
return [real2int(r), real2int(g), real2int(b)];
|
||||
},
|
||||
|
||||
rgb2hsv: function(r,g,b) {
|
||||
var min,max,delta,h,s,v;
|
||||
min = Math.min(Math.min(r,g),b);
|
||||
max = Math.max(Math.max(r,g),b);
|
||||
delta = max-min;
|
||||
|
||||
switch (max) {
|
||||
case min: h=0; break;
|
||||
case r: h=(g-b)/delta;
|
||||
if (g<b) {
|
||||
h+=360;
|
||||
}
|
||||
break;
|
||||
case g: h=((b-r)/delta)+120; break;
|
||||
case b: h=((r-g)/delta)+240; break;
|
||||
}
|
||||
|
||||
s = (max==0) ? 0 : 1-(min/max);
|
||||
|
||||
return {"h": h, "s": s, "v": max};
|
||||
|
||||
},
|
||||
|
||||
rgb2hex: function (r,g,b) {
|
||||
return this.int2hex(r) + this.int2hex(g) + this.int2hex(b);
|
||||
},
|
||||
|
||||
/**
|
||||
* Converts an int [0,255] to hex [00,FF]
|
||||
*/
|
||||
int2hex: function(n) {
|
||||
n = n || 0;
|
||||
n = parseInt(n, 10);
|
||||
if (isNaN(n)) n = 0;
|
||||
n = Math.round(Math.min(Math.max(0, n), 255));
|
||||
|
||||
return hexchars.charAt((n - n % 16) / 16) + hexchars.charAt(n % 16);
|
||||
},
|
||||
|
||||
hex2dec: function(hexchar) {
|
||||
return hexchars.indexOf(hexchar.toUpperCase());
|
||||
},
|
||||
|
||||
hex2rgb: function(s) {
|
||||
var rgb = [];
|
||||
rgb[0] = (this.hex2dec(s.substr(0, 1)) * 16) + this.hex2dec(s.substr(1, 1));
|
||||
rgb[1] = (this.hex2dec(s.substr(2, 1)) * 16) + this.hex2dec(s.substr(3, 1));
|
||||
rgb[2] = (this.hex2dec(s.substr(4, 1)) * 16) + this.hex2dec(s.substr(5, 1));
|
||||
// gLogger.debug("hex2rgb: " + str + ", " + rgb.toString());
|
||||
return rgb;
|
||||
},
|
||||
|
||||
hex2hsv: function (s) {
|
||||
var rgb = this.hex2rgb(s);
|
||||
return this.rgb2hsv(rgb[0], rgb[1], rgb[2]);
|
||||
},
|
||||
|
||||
isValidRGB: function(a) {
|
||||
if ((!a[0] && a[0] !=0) || isNaN(a[0]) || a[0] < 0 || a[0] > 255) return false;
|
||||
if ((!a[1] && a[1] !=0) || isNaN(a[1]) || a[1] < 0 || a[1] > 255) return false;
|
||||
if ((!a[2] && a[2] !=0) || isNaN(a[2]) || a[2] < 0 || a[2] > 255) return false;
|
||||
|
||||
return true;
|
||||
}
|
||||
}
|
||||
}();
|
||||
|
||||
|
|
@ -1,16 +0,0 @@
|
|||
.colorPickerFormSwatch {
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
border: 1px solid black;
|
||||
float: left;
|
||||
}
|
||||
#ddPicker { position: absolute; background-color: #eeeeee; top: 200px; left: 20px; width: 380px; height: 260px; z-index: 1000; }
|
||||
#ddPicker input { font-size: .85em }
|
||||
#pickerHandle { background-color: #bbbbbb; height: 10px; cursor: move; }
|
||||
#hueThumb { cursor:default; width:18px; height:18px; z-index: 9; position:absolute; }
|
||||
#hueBg {-moz-outline: none; outline:0px none; position:absolute; left:216px; height:198px; width:18px; background:url(/extras/colorpicker/hue.png) no-repeat; top:18px; }
|
||||
#pickerDiv {-moz-outline: none; outline:0px none; position:absolute; left:10px; height:187px; width:188px; background-color:#FF0000; top:20px; }
|
||||
#pickerbg { position:absolute; z-index: 1; top:0px; left:0px; }
|
||||
#selector { cursor:default; width:11px; height:11px; z-index: 9; position:absolute; top:0px; left:0px; }
|
||||
#valdiv { text-align:right; position:absolute; top: 86px; left:246px; }
|
||||
#swatch { position:absolute; left:260px; top:30px; height:60px; width:60px; border:2px solid #aaaaaa; }
|
||||
|
|
@ -1,133 +0,0 @@
|
|||
WebguiColorPicker = function() {
|
||||
var Slider=YAHOO.widget.Slider;
|
||||
var Color=YAHOO.util.Color;
|
||||
var Dom=YAHOO.util.Dom;
|
||||
|
||||
var pickerSize=180;
|
||||
|
||||
var hue,picker,panel;
|
||||
|
||||
// hue, int[0,359]
|
||||
var getH = function() {
|
||||
var h = (pickerSize - hue.getValue()) / pickerSize;
|
||||
h = Math.round(h*360);
|
||||
return (h == 360) ? 0 : h;
|
||||
}
|
||||
|
||||
// saturation, int[0,1], left to right
|
||||
var getS = function() {
|
||||
return picker.getXValue() / pickerSize;
|
||||
}
|
||||
|
||||
// value, int[0,1], top to bottom
|
||||
var getV = function() {
|
||||
return (pickerSize - picker.getYValue()) / pickerSize;
|
||||
}
|
||||
|
||||
// correctly handle PNG transparency in Win IE 5.5 or higher.
|
||||
var correctPNG = function() {
|
||||
if (YAHOO.util.Event.isIE) {
|
||||
for(var i=0; i<document.images.length; i++) {
|
||||
var img = document.images[i]
|
||||
var imgName = img.src.toUpperCase()
|
||||
if (imgName.substring(imgName.length-3, imgName.length) == "PNG") {
|
||||
var imgID = (img.id) ? "id='" + img.id + "' " : ""
|
||||
var imgClass = (img.className) ? "class='" + img.className + "' " : ""
|
||||
var imgTitle = (img.title) ? "title='" + img.title + "' " : "title='" + img.alt + "' "
|
||||
var imgStyle = "display:inline-block;" + img.style.cssText
|
||||
if (img.align == "left") imgStyle = "float:left;" + imgStyle
|
||||
if (img.align == "right") imgStyle = "float:right;" + imgStyle
|
||||
if (img.parentElement.href) imgStyle = "cursor:hand;" + imgStyle
|
||||
var strNewHTML = "<span " + imgID + imgClass + imgTitle
|
||||
+ " style=\"" + "width:" + img.width + "px; height:" + img.height + "px;" + imgStyle + ";"
|
||||
+ "filter:progid:DXImageTransform.Microsoft.AlphaImageLoader"
|
||||
+ "(src=\'" + img.src + "\', sizingMethod='scale');\"></span>"
|
||||
img.outerHTML = strNewHTML
|
||||
i = i-1
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
var swatchUpdate = function() {
|
||||
var h=getH(), s=getS(), v=getV();
|
||||
|
||||
Dom.get("hval").value = h;
|
||||
Dom.get("sval").value = Math.round(s*100);
|
||||
Dom.get("vval").value = Math.round(v*100);
|
||||
|
||||
var rgb = Color.hsv2rgb(h, s, v);
|
||||
|
||||
var styleDef = "rgb(" + rgb.join(",") + ")";
|
||||
Dom.setStyle("swatch", "background-color", styleDef);
|
||||
|
||||
Dom.get("rval").value = rgb[0];
|
||||
Dom.get("gval").value = rgb[1];
|
||||
Dom.get("bval").value = rgb[2];
|
||||
|
||||
Dom.get("hexval").value = Color.rgb2hex(rgb[0], rgb[1], rgb[2]);
|
||||
};
|
||||
|
||||
var hueUpdate = function(newOffset) {
|
||||
var rgb = Color.hsv2rgb(getH(), 1, 1);
|
||||
var styleDef = "rgb(" + rgb.join(",") + ")";
|
||||
Dom.setStyle("pickerDiv", "background-color", styleDef);
|
||||
|
||||
swatchUpdate();
|
||||
};
|
||||
|
||||
pickerUpdate = function(newOffset) {
|
||||
swatchUpdate();
|
||||
};
|
||||
var currentColorField = "";
|
||||
|
||||
return {
|
||||
init: function () {
|
||||
var thepicker = document.createElement('div');
|
||||
thepicker.id = "ddPicker";
|
||||
thepicker.style.display = "none";
|
||||
document.body.appendChild(thepicker);
|
||||
},
|
||||
|
||||
display: function (field) {
|
||||
currentColorField = Dom.get(field);
|
||||
var extras = getWebguiProperty("extrasURL");
|
||||
thepicker = Dom.get("ddPicker");
|
||||
thepicker.style.top = YAHOO.util.Dom.getY(currentColorField) + "px";
|
||||
thepicker.style.left = YAHOO.util.Dom.getX(currentColorField) + "px";
|
||||
thepicker.style.display = "block";
|
||||
thepicker.innerHTML = ' <div id="pickerHandle"> </div> <div id="pickerDiv" tabindex="-1" hidefocus="true"> <img id="pickerbg" src="' + extras + 'colorpicker/pickerbg.png" alt="" /> <div id="selector"><img src="' + extras + 'colorpicker/select.gif" /></div> </div> <div id="hueBg" tabindex="-1" hidefocus="true"> <div id="hueThumb"><img src="' + extras + 'colorpicker/hline.png" /></div> </div> <div id="valdiv"> <form name="rgbform"> <br /> R <input autocomplete="off" name="rval" id="rval" type="text" value="0" size="3" maxlength="3" /> H <input autocomplete="off" name="hval" id="hval" type="text" value="0" size="3" maxlength="3" /> <br />G <input autocomplete="off" name="gval" id="gval" type="text" value="0" size="3" maxlength="3" /> S <input autocomplete="off" name="gsal" id="sval" type="text" value="0" size="3" maxlength="3" /> <br /> B <input autocomplete="off" name="bval" id="bval" type="text" value="0" size="3" maxlength="3" /> V <input autocomplete="off" name="vval" id="vval" type="text" value="0" size="3" maxlength="3" /> <br /> <br /> # <input autocomplete="off" name="hexval" id="hexval" type="text" value="0" size="6" maxlength="6" /> <br /> <input type="button" value="Set" onclick="WebguiColorPicker.setColor()" /> </form> </div> <div id="swatch"> </div> ';
|
||||
correctPNG();
|
||||
hue = Slider.getVertSlider("hueBg", "hueThumb", 0, pickerSize);
|
||||
hue.subscribe("change", hueUpdate);
|
||||
|
||||
picker = Slider.getSliderRegion("pickerDiv", "selector", 0, pickerSize, 0, pickerSize);
|
||||
picker.subscribe("change", pickerUpdate);
|
||||
hueUpdate(0);
|
||||
panel = new YAHOO.util.DD("ddPicker");
|
||||
panel.setHandleElId("pickerHandle");
|
||||
|
||||
// set field color
|
||||
var color = currentColorField.value;
|
||||
color = color.substring(1,7);
|
||||
var hsv = Color.hex2hsv(color);
|
||||
hue.setValue(pickerSize - Math.round((hsv["h"] * pickerSize)/360));
|
||||
picker.setRegionValue(hsv["s"] * pickerSize, pickerSize - Math.round(hsv["v"]*128/pickerSize) +1);
|
||||
Dom.get("hexval").value = color;
|
||||
},
|
||||
|
||||
setColor: function () {
|
||||
var color = "#"+document.getElementById("hexval").value;
|
||||
currentColorField.value = color;
|
||||
currentColorField.onchange();
|
||||
thepicker = Dom.get("ddPicker");
|
||||
thepicker.innerHTML = "";
|
||||
thepicker.style.display = "none";
|
||||
}
|
||||
}
|
||||
}();
|
||||
|
||||
YAHOO.util.Event.on(window, "load", WebguiColorPicker.init);
|
||||
|
||||
|
||||
|
||||
|
|
@ -1,33 +0,0 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
|
||||
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
||||
<html>
|
||||
<head>
|
||||
<title>Yahoo! UI Library - Slider Widget</title>
|
||||
<script type="text/javascript">
|
||||
function getWebguiProperty (propName) {
|
||||
var props = new Array();
|
||||
props["extrasURL"] = "/extras/";
|
||||
props["pageURL"] = "/home";
|
||||
return props[propName];
|
||||
}
|
||||
</script>
|
||||
<script type="text/javascript" src="/extras/yui/build/yahoo/yahoo-min.js" ></script>
|
||||
<script type="text/javascript" src="/extras/yui/build/event/event-min.js" ></script>
|
||||
<script type="text/javascript" src="/extras/yui/build/dom/dom-min.js" ></script>
|
||||
<script type="text/javascript" src="/extras/yui/build/dragdrop/dragdrop-min.js" ></script>
|
||||
<script type="text/javascript" src="/extras/yui/build/animation/animation-min.js" ></script>
|
||||
<link type="text/css" rel="stylesheet" href="/extras/colorpicker/colorpicker.css" />
|
||||
<script type="text/javascript" src="/extras/colorpicker/color.js" ></script>
|
||||
<script type="text/javascript" src="/extras/colorpicker/key.js" ></script>
|
||||
<script type="text/javascript" src="/extras/yui/build/slider/slider-min.js" ></script>
|
||||
<script type="text/javascript" src="/extras/colorpicker/colorpicker.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<form>
|
||||
<a href="#" id="color_formId_swatch" style="width: 20px; height: 20px; background-color: #008000; border: 1px solid black; float: left;" onclick="WebguiColorPicker.display('color_formId');"></a>
|
||||
<input onchange="document.getElementById('color_formId_swatch').style.backgroundColor=this.value;"
|
||||
maxlength="7" name="color" type="text" size="8" value="#008000" id="color_formId" />
|
||||
</form>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 416 B |
Binary file not shown.
|
Before Width: | Height: | Size: 1.3 KiB |
|
|
@ -1,34 +0,0 @@
|
|||
/* Copyright (c) 2006 Yahoo! Inc. All rights reserved. */
|
||||
|
||||
YAHOO.util.Key = new function() {
|
||||
// this.logger = new ygLogger("ygEventUtil");
|
||||
// DOM key constants
|
||||
this.DOM_VK_UNDEFINED = 0x0;
|
||||
this.DOM_VK_RIGHT_ALT = 0x12;
|
||||
this.DOM_VK_LEFT_ALT = 0x12;
|
||||
this.DOM_VK_LEFT_CONTROL = 0x11;
|
||||
this.DOM_VK_RIGHT_CONTROL = 0x11;
|
||||
this.DOM_VK_LEFT_SHIFT = 0x10;
|
||||
this.DOM_VK_RIGHT_SHIFT = 0x10;
|
||||
this.DOM_VK_META = 0x9D;
|
||||
this.DOM_VK_BACK_SPACE = 0x08;
|
||||
this.DOM_VK_CAPS_LOCK = 0x14;
|
||||
this.DOM_VK_DELETE = 0x7F;
|
||||
this.DOM_VK_END = 0x23;
|
||||
this.DOM_VK_ENTER = 0x0D;
|
||||
this.DOM_VK_ESCAPE = 0x1B;
|
||||
this.DOM_VK_HOME = 0x24;
|
||||
this.DOM_VK_NUM_LOCK = 0x90;
|
||||
this.DOM_VK_PAUSE = 0x13;
|
||||
this.DOM_VK_PRINTSCREEN = 0x9A;
|
||||
this.DOM_VK_SCROLL_LOCK = 0x91;
|
||||
this.DOM_VK_SPACE = 0x20;
|
||||
this.DOM_VK_TAB = 0x09;
|
||||
this.DOM_VK_LEFT = 0x25;
|
||||
this.DOM_VK_RIGHT = 0x27;
|
||||
this.DOM_VK_UP = 0x26;
|
||||
this.DOM_VK_DOWN = 0x28;
|
||||
this.DOM_VK_PAGE_DOWN = 0x22;
|
||||
this.DOM_VK_PAGE_UP = 0x21;
|
||||
};
|
||||
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 12 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 78 B |
Loading…
Add table
Add a link
Reference in a new issue