new colorpicker
This commit is contained in:
Graham Knop
parent
8af6f28988
commit
ef83ebbcaf
12 changed files with 158 additions and 319 deletions
|
|
@ -184,16 +184,18 @@ sub handler {
|
||||||
$logoUrl = $logo->getStorageLocation->getUrl($logo->get("filename"));
|
$logoUrl = $logo->getStorageLocation->getUrl($logo->get("filename"));
|
||||||
}
|
}
|
||||||
my $style = $session->style;
|
my $style = $session->style;
|
||||||
$style->setScript($url->extras('/yui/build/yahoo/yahoo-min.js'),{ type=>'text/javascript' });
|
$style->setLink($url->extras('/yui/build/container/assets/skins/sam/container.css'),{ type=>'text/css', rel=>"stylesheet" });
|
||||||
$style->setScript($url->extras('/yui/build/event/event-min.js'),{ type=>'text/javascript' });
|
$style->setLink($url->extras('/yui/build/colorpicker/assets/skins/sam/colorpicker.css'),{ type=>'text/css', rel=>"stylesheet" });
|
||||||
$style->setScript($url->extras('/yui/build/dom/dom-min.js'),{ type=>'text/javascript' });
|
$style->setScript($url->extras('/yui/build/yahoo/yahoo-min.js'),{ type=>'text/javascript' });
|
||||||
$style->setScript($url->extras('/yui/build/dragdrop/dragdrop-min.js'),{ type=>'text/javascript' });
|
$style->setScript($url->extras('/yui/build/event/event-min.js'),{ type=>'text/javascript' });
|
||||||
$style->setScript($url->extras('/yui/build/animation/animation-min.js'),{ type=>'text/javascript' });
|
$style->setScript($url->extras('/yui/build/dom/dom-min.js'),{ type=>'text/javascript' });
|
||||||
$style->setLink($url->extras('/colorpicker/colorpicker.css'),{ type=>'text/css', rel=>"stylesheet" });
|
$style->setScript($url->extras('/yui/build/dragdrop/dragdrop-min.js'),{ type=>'text/javascript' });
|
||||||
$style->setScript($url->extras('/colorpicker/color.js'),{ type=>'text/javascript' });
|
$style->setScript($url->extras('/yui/build/utilities/utilities.js'),{ type=>'text/javascript' });
|
||||||
$style->setScript($url->extras('/colorpicker/key.js'),{ type=>'text/javascript' });
|
$style->setScript($url->extras('/yui/build/container/container-min.js'),{ type=>'text/javascript' });
|
||||||
$style->setScript($url->extras('/yui/build/slider/slider-min.js'),{ type=>'text/javascript' });
|
$style->setScript($url->extras('/yui/build/slider/slider-min.js'),{ type=>'text/javascript' });
|
||||||
$style->setScript($url->extras('/colorpicker/colorpicker.js'),{ type=>'text/javascript' });
|
$style->setScript($url->extras('/yui/build/colorpicker/colorpicker-min.js'),{ type=>'text/javascript' });
|
||||||
|
$style->setLink($url->extras('/colorpicker/colorpicker.css'),{ type=>'text/css', rel=>"stylesheet" });
|
||||||
|
$style->setScript($url->extras('/colorpicker/colorpicker.js'),{ type=>'text/javascript' });
|
||||||
$style->setScript($url->extras("/styleDesigner/styleDesigner.js"), {type=>"text/javascript"});
|
$style->setScript($url->extras("/styleDesigner/styleDesigner.js"), {type=>"text/javascript"});
|
||||||
$style->setLink($url->extras("/styleDesigner/styleDesigner.css"), {rel=>"stylesheet", type=>"text/css"});
|
$style->setLink($url->extras("/styleDesigner/styleDesigner.css"), {rel=>"stylesheet", type=>"text/css"});
|
||||||
$legend = "Style Designer";
|
$legend = "Style Designer";
|
||||||
|
|
|
||||||
|
|
@ -88,26 +88,31 @@ Renders a color picker control.
|
||||||
=cut
|
=cut
|
||||||
|
|
||||||
sub toHtml {
|
sub toHtml {
|
||||||
my $self = shift;
|
my $self = shift;
|
||||||
my $url = $self->session->url;
|
my $url = $self->session->url;
|
||||||
my $style = $self->session->style;
|
my $style = $self->session->style;
|
||||||
$style->setScript($url->extras('/yui/build/yahoo/yahoo-min.js'),{ type=>'text/javascript' });
|
$style->setLink($url->extras('/yui/build/container/assets/skins/sam/container.css'),{ type=>'text/css', rel=>"stylesheet" });
|
||||||
$style->setScript($url->extras('/yui/build/event/event-min.js'),{ type=>'text/javascript' });
|
$style->setLink($url->extras('/yui/build/colorpicker/assets/skins/sam/colorpicker.css'),{ type=>'text/css', rel=>"stylesheet" });
|
||||||
$style->setScript($url->extras('/yui/build/dom/dom-min.js'),{ type=>'text/javascript' });
|
$style->setScript($url->extras('/yui/build/yahoo/yahoo-min.js'),{ type=>'text/javascript' });
|
||||||
$style->setScript($url->extras('/yui/build/dragdrop/dragdrop-min.js'),{ type=>'text/javascript' });
|
$style->setScript($url->extras('/yui/build/event/event-min.js'),{ type=>'text/javascript' });
|
||||||
$style->setScript($url->extras('/yui/build/animation/animation-min.js'),{ type=>'text/javascript' });
|
$style->setScript($url->extras('/yui/build/dom/dom-min.js'),{ type=>'text/javascript' });
|
||||||
$style->setLink($url->extras('/colorpicker/colorpicker.css'),{ type=>'text/css', rel=>"stylesheet" });
|
$style->setScript($url->extras('/yui/build/dragdrop/dragdrop-min.js'),{ type=>'text/javascript' });
|
||||||
$style->setScript($url->extras('/colorpicker/color.js'),{ type=>'text/javascript' });
|
$style->setScript($url->extras('/yui/build/utilities/utilities.js'),{ type=>'text/javascript' });
|
||||||
$style->setScript($url->extras('/colorpicker/key.js'),{ type=>'text/javascript' });
|
$style->setScript($url->extras('/yui/build/container/container-min.js'),{ type=>'text/javascript' });
|
||||||
$style->setScript($url->extras('/yui/build/slider/slider-min.js'),{ type=>'text/javascript' });
|
$style->setScript($url->extras('/yui/build/slider/slider-min.js'),{ type=>'text/javascript' });
|
||||||
$style->setScript($url->extras('/colorpicker/colorpicker.js'),{ type=>'text/javascript' });
|
$style->setScript($url->extras('/yui/build/colorpicker/colorpicker-min.js'),{ type=>'text/javascript' });
|
||||||
|
$style->setLink($url->extras('/colorpicker/colorpicker.css'),{ type=>'text/css', rel=>"stylesheet" });
|
||||||
|
$style->setScript($url->extras('/colorpicker/colorpicker.js'),{ type=>'text/javascript' });
|
||||||
my $id = $self->get("id");
|
my $id = $self->get("id");
|
||||||
my $value = $self->get("value");
|
my $value = $self->get("value");
|
||||||
return q| <a href="javascript:WebguiColorPicker.display('|. $id. q|');" id="|. $id.q|_swatch"
|
my $name = $self->get("name");
|
||||||
class="colorPickerFormSwatch" style="background-color: |.$value.q|;"></a>
|
return qq{<a href="javascript:YAHOO.WebGUI.ColorPicker.display('$id', '${id}_swatch');" id="${id}_swatch" class="colorPickerFormSwatch" style="background-color: $value"></a>
|
||||||
<input onchange="document.getElementById('|.$id.q|_swatch').style.backgroundColor=this.value;"
|
<input onchange="YAHOO.util.Dom.setStyle('${id}_swatch', 'background-color', this.value)"
|
||||||
maxlength="7" name="|.$self->get("name").q|" type="text" size="8" value="|.$value.q|" id="|.$id.q|" />|;
|
maxlength="7" name="$name" type="text" size="8" value="$value" id="$id" />};
|
||||||
|
|
||||||
|
# <a href="#" id="${id}_swatch" class="colorPickerFormSwatch" style="background-color: #008000;"></a>
|
||||||
|
# <input maxlength="7" name="$name" type="text" size="8" value="$value" id="$id" />
|
||||||
|
# <script type="text/javascript">YAHOO.WebGUI.Form.ColorPicker.attach('$id', '${id}_swatch')</script>
|
||||||
}
|
}
|
||||||
|
|
||||||
1;
|
1;
|
||||||
|
|
|
||||||
|
|
@ -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;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}();
|
|
||||||
|
|
||||||
|
|
@ -4,13 +4,18 @@
|
||||||
border: 1px solid black;
|
border: 1px solid black;
|
||||||
float: left;
|
float: left;
|
||||||
}
|
}
|
||||||
#ddPicker { position: absolute; background-color: #eeeeee; top: 200px; left: 20px; width: 380px; height: 260px; z-index: 1000; }
|
.wg-picker-panel .ft {
|
||||||
#ddPicker input { font-size: .85em }
|
text-align: right;
|
||||||
#pickerHandle { background-color: #bbbbbb; height: 10px; cursor: move; }
|
}
|
||||||
#hueThumb { cursor:default; width:18px; height:18px; z-index: 9; position:absolute; }
|
.wg-picker-panel .container-close {
|
||||||
#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; }
|
height: 5px;
|
||||||
#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; }
|
.wg-picker-panel {
|
||||||
#selector { cursor:default; width:11px; height:11px; z-index: 9; position:absolute; top:0px; left:0px; }
|
z-index 100 !important;
|
||||||
#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; }
|
.wg-picker-panel .yui-picker-controls .hd {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
.wg-picker-panel .yui-picker-controls .bd {
|
||||||
|
margin-top: 12px;
|
||||||
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,133 +1,82 @@
|
||||||
WebguiColorPicker = function() {
|
YAHOO.namespace('WebGUI.Form');
|
||||||
var Slider=YAHOO.widget.Slider;
|
YAHOO.WebGUI.Form.ColorPicker = {
|
||||||
var Color=YAHOO.util.Color;
|
init: function() {
|
||||||
var Dom=YAHOO.util.Dom;
|
// Instantiate the Dialog
|
||||||
|
var dg = this.dialogElement = document.createElement('div');
|
||||||
var pickerSize=180;
|
document.body.appendChild(dg);
|
||||||
|
YAHOO.util.Dom.generateId(dg);
|
||||||
var hue,picker,panel;
|
YAHOO.util.Dom.addClass(dg, 'yui-picker-panel');
|
||||||
|
YAHOO.util.Dom.addClass(dg, 'wg-picker-panel');
|
||||||
// hue, int[0,359]
|
var hd = document.createElement('div');
|
||||||
var getH = function() {
|
YAHOO.util.Dom.addClass(hd, 'hd');
|
||||||
var h = (pickerSize - hue.getValue()) / pickerSize;
|
dg.appendChild(hd);
|
||||||
h = Math.round(h*360);
|
var bd = document.createElement('div');
|
||||||
return (h == 360) ? 0 : h;
|
YAHOO.util.Dom.addClass(bd, 'bd');
|
||||||
}
|
dg.appendChild(bd);
|
||||||
|
var ft = document.createElement('div');
|
||||||
// saturation, int[0,1], left to right
|
YAHOO.util.Dom.addClass(ft, 'ft');
|
||||||
var getS = function() {
|
dg.appendChild(ft);
|
||||||
return picker.getXValue() / pickerSize;
|
this.dialog = new YAHOO.widget.Dialog(dg, {
|
||||||
}
|
width : "360px",
|
||||||
|
visible : false,
|
||||||
// value, int[0,1], top to bottom
|
zIndex : 20,
|
||||||
var getV = function() {
|
draggable: false,
|
||||||
return (pickerSize - picker.getYValue()) / pickerSize;
|
constraintoviewport : true,
|
||||||
}
|
buttons : [
|
||||||
|
{ text:"Set", handler:function() { this.submit() }, isDefault:true },
|
||||||
// correctly handle PNG transparency in Win IE 5.5 or higher.
|
{ text:"Cancel", handler:function() { this.cancel() } }
|
||||||
var correctPNG = function() {
|
],
|
||||||
if (YAHOO.util.Event.isIE) {
|
postmethod: 'manual'
|
||||||
for(var i=0; i<document.images.length; i++) {
|
});
|
||||||
var img = document.images[i]
|
this.dialog.renderEvent.subscribe(function() {
|
||||||
var imgName = img.src.toUpperCase()
|
if (!this.picker) { //make sure that we haven't already created our Color Picker
|
||||||
if (imgName.substring(imgName.length-3, imgName.length) == "PNG") {
|
var extras = getWebguiProperty("extrasURL");
|
||||||
var imgID = (img.id) ? "id='" + img.id + "' " : ""
|
var pickerdiv = document.createElement('div');
|
||||||
var imgClass = (img.className) ? "class='" + img.className + "' " : ""
|
YAHOO.util.Dom.addClass(pickerdiv, 'yui-picker');
|
||||||
var imgTitle = (img.title) ? "title='" + img.title + "' " : "title='" + img.alt + "' "
|
this.dialog.body.getElementsByTagName('form')[0].appendChild(pickerdiv);
|
||||||
var imgStyle = "display:inline-block;" + img.style.cssText
|
this.picker = new YAHOO.widget.ColorPicker(pickerdiv, {
|
||||||
if (img.align == "left") imgStyle = "float:left;" + imgStyle
|
container: this.dialog,
|
||||||
if (img.align == "right") imgStyle = "float:right;" + imgStyle
|
images: {
|
||||||
if (img.parentElement.href) imgStyle = "cursor:hand;" + imgStyle
|
PICKER_THUMB: extras + '/yui/build/colorpicker/assets/picker_thumb.png',
|
||||||
var strNewHTML = "<span " + imgID + imgClass + imgTitle
|
HUE_THUMB: extras + '/yui/build/colorpicker/assets/hue_thumb.png'
|
||||||
+ " style=\"" + "width:" + img.width + "px; height:" + img.height + "px;" + imgStyle + ";"
|
},
|
||||||
+ "filter:progid:DXImageTransform.Microsoft.AlphaImageLoader"
|
showhexsummary: false,
|
||||||
+ "(src=\'" + img.src + "\', sizingMethod='scale');\"></span>"
|
showwebsafe: false,
|
||||||
img.outerHTML = strNewHTML
|
showhexcontrols: true, // default is false
|
||||||
i = i-1
|
showhsvcontrols: true // default is false
|
||||||
}
|
});
|
||||||
}
|
}
|
||||||
|
}, this, true);
|
||||||
|
this.dialog.beforeShowEvent.subscribe(function() {
|
||||||
|
var hex = this.saveElement.value.substr(1);
|
||||||
|
this.picker.setValue(YAHOO.util.Color.hex2rgb(hex), false);
|
||||||
|
}, this, true);
|
||||||
|
this.dialog.manualSubmitEvent.subscribe(function() {
|
||||||
|
var hex = '#' + this.picker.get('hex');
|
||||||
|
this.saveElement.value = hex;
|
||||||
|
this.saveElement.onchange();
|
||||||
|
}, this, true);
|
||||||
|
this.dialog.render();
|
||||||
|
},
|
||||||
|
display: function(el, swatch) {
|
||||||
|
this.saveElement = YAHOO.util.Dom.get(el);
|
||||||
|
this.swatchElement = YAHOO.util.Dom.get(swatch);
|
||||||
|
if (this.dialog) {
|
||||||
|
this.dialog.cancel();
|
||||||
}
|
}
|
||||||
|
this.dialog.cfg.setProperty('context', [this.swatchElement, 'tl', 'tr']);
|
||||||
|
this.dialog.align(YAHOO.widget.Overlay.TOP_LEFT, YAHOO.widget.Overlay.TOP_RIGHT);
|
||||||
|
this.dialog.show();
|
||||||
|
},
|
||||||
|
attach: function(el, swatch) {
|
||||||
|
YAHOO.util.Event.on(el, 'change', function(e, swatch) {
|
||||||
|
YAHOO.util.Dom.setStyle(swatch, 'background-color', this.value);
|
||||||
|
}, swatch);
|
||||||
|
YAHOO.util.Event.on(swatch, 'click', function(e, objs) {
|
||||||
|
YAHOO.util.Event.preventDefault(e);
|
||||||
|
this.display(objs[0], objs[1]);
|
||||||
|
}, [el, swatch], this);
|
||||||
}
|
}
|
||||||
|
};
|
||||||
var swatchUpdate = function() {
|
YAHOO.util.Event.onDOMReady(YAHOO.WebGUI.Form.ColorPicker.init, YAHOO.WebGUI.Form.ColorPicker, true);
|
||||||
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);
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -3,31 +3,44 @@
|
||||||
<html>
|
<html>
|
||||||
<head>
|
<head>
|
||||||
<title>Yahoo! UI Library - Slider Widget</title>
|
<title>Yahoo! UI Library - Slider Widget</title>
|
||||||
<script type="text/javascript">
|
<link rel="stylesheet" type="text/css" href="/extras/yui/build/container/assets/skins/sam/container.css" />
|
||||||
function getWebguiProperty (propName) {
|
<link rel="stylesheet" type="text/css" href="/extras/yui/build/colorpicker/assets/skins/sam/colorpicker.css" />
|
||||||
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/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/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/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/dragdrop/dragdrop-min.js"></script>
|
||||||
<script type="text/javascript" src="/extras/yui/build/animation/animation-min.js" ></script>
|
<script type="text/javascript" src="/extras/yui/build/utilities/utilities.js" ></script>
|
||||||
<link type="text/css" rel="stylesheet" href="/extras/colorpicker/colorpicker.css" />
|
<script type="text/javascript" src="/extras/yui/build/container/container-min.js"></script>
|
||||||
<script type="text/javascript" src="/extras/colorpicker/color.js" ></script>
|
<script type="text/javascript" src="/extras/yui/build/slider/slider-min.js"></script>
|
||||||
<script type="text/javascript" src="/extras/colorpicker/key.js" ></script>
|
<script type="text/javascript" src="/extras/yui/build/colorpicker/colorpicker-min.js"></script>
|
||||||
<script type="text/javascript" src="/extras/yui/build/slider/slider-min.js" ></script>
|
<script type="text/javascript">
|
||||||
<script type="text/javascript" src="/extras/colorpicker/colorpicker.js"></script>
|
function getWebguiProperty (propName) {
|
||||||
|
var props = new Array();
|
||||||
|
props["extrasURL"] = "/extras/";
|
||||||
|
props["pageURL"] = "/home";
|
||||||
|
return props[propName];
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
<link rel="stylesheet" type="text/css" href="colorpicker.css" />
|
||||||
|
<script type="text/javascript" src="colorpicker.js"></script>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<form>
|
<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>
|
<div>
|
||||||
<input onchange="document.getElementById('color_formId_swatch').style.backgroundColor=this.value;"
|
<a href="#" id="color_formId_swatch" style="width: 20px; height: 20px; background-color: #008000; border: 1px solid black; float: left;"></a>
|
||||||
maxlength="7" name="color" type="text" size="8" value="#008000" id="color_formId" />
|
<input maxlength="7" name="color" type="text" size="8" value="#008000" id="color_formId" />
|
||||||
|
<script type="text/javascript">YAHOO.WebGUI.Form.ColorPicker.attach('color_formId', 'color_formId_swatch')</script>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<a href="#" id="color2_formId_swatch" style="width: 20px; height: 20px; background-color: #008000; border: 1px solid black; float: left;" onclick="YAHOO.WebGUI.Form.ColorPicker.display('color2_formId', 'color2_formId_swatch'); return false"></a>
|
||||||
|
<input onchange="YAHOO.util.Dom.setStyle('color2_formId_swatch', 'background-color', this.value);" maxlength="7" name="color2" type="text" size="8" value="#008000" id="color2_formId" />
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<a href="#" id="color3_formId_swatch" style="width: 20px; height: 20px; background-color: #008000; border: 1px solid black; float: left;" onclick="YAHOO.WebGUI.Form.ColorPicker.display('color3_formId', 'color3_formId_swatch'); return false"></a>
|
||||||
|
<input onchange="YAHOO.util.Dom.setStyle('color3_formId_swatch', 'background-color', this.value);" maxlength="7" name="color3" type="text" size="8" value="#008000" id="color3_formId" />
|
||||||
|
</div>
|
||||||
</form>
|
</form>
|
||||||
|
|
||||||
|
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</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 |
|
|
@ -129,7 +129,8 @@ WebguiStyleDesigner = function () {
|
||||||
swatch.style.backgroundColor = field.value;
|
swatch.style.backgroundColor = field.value;
|
||||||
swatch.onclick = function () {
|
swatch.onclick = function () {
|
||||||
var id = this.id.replace(/(\w+)_swatch/,"$1");
|
var id = this.id.replace(/(\w+)_swatch/,"$1");
|
||||||
WebguiColorPicker.display(id);
|
YAHOO.WebGUI.Form.ColorPicker.display(id, this.id);
|
||||||
|
return false;
|
||||||
}
|
}
|
||||||
field.onchange = function () {
|
field.onchange = function () {
|
||||||
Dom.get(this.id+"_swatch").style.backgroundColor = this.value;
|
Dom.get(this.id+"_swatch").style.backgroundColor = this.value;
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue