diff --git a/lib/WebGUI/Content/Setup.pm b/lib/WebGUI/Content/Setup.pm index 669b2b008..c5d5c6a42 100644 --- a/lib/WebGUI/Content/Setup.pm +++ b/lib/WebGUI/Content/Setup.pm @@ -184,16 +184,18 @@ sub handler { $logoUrl = $logo->getStorageLocation->getUrl($logo->get("filename")); } my $style = $session->style; - $style->setScript($url->extras('/yui/build/yahoo/yahoo-min.js'),{ type=>'text/javascript' }); - $style->setScript($url->extras('/yui/build/event/event-min.js'),{ type=>'text/javascript' }); - $style->setScript($url->extras('/yui/build/dom/dom-min.js'),{ type=>'text/javascript' }); - $style->setScript($url->extras('/yui/build/dragdrop/dragdrop-min.js'),{ type=>'text/javascript' }); - $style->setScript($url->extras('/yui/build/animation/animation-min.js'),{ type=>'text/javascript' }); - $style->setLink($url->extras('/colorpicker/colorpicker.css'),{ type=>'text/css', rel=>"stylesheet" }); - $style->setScript($url->extras('/colorpicker/color.js'),{ type=>'text/javascript' }); - $style->setScript($url->extras('/colorpicker/key.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->setLink($url->extras('/yui/build/container/assets/skins/sam/container.css'),{ type=>'text/css', rel=>"stylesheet" }); + $style->setLink($url->extras('/yui/build/colorpicker/assets/skins/sam/colorpicker.css'),{ type=>'text/css', rel=>"stylesheet" }); + $style->setScript($url->extras('/yui/build/yahoo/yahoo-min.js'),{ type=>'text/javascript' }); + $style->setScript($url->extras('/yui/build/event/event-min.js'),{ type=>'text/javascript' }); + $style->setScript($url->extras('/yui/build/dom/dom-min.js'),{ type=>'text/javascript' }); + $style->setScript($url->extras('/yui/build/dragdrop/dragdrop-min.js'),{ type=>'text/javascript' }); + $style->setScript($url->extras('/yui/build/utilities/utilities.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/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->setLink($url->extras("/styleDesigner/styleDesigner.css"), {rel=>"stylesheet", type=>"text/css"}); $legend = "Style Designer"; diff --git a/lib/WebGUI/Form/Color.pm b/lib/WebGUI/Form/Color.pm index b0e950cea..1228bf27d 100644 --- a/lib/WebGUI/Form/Color.pm +++ b/lib/WebGUI/Form/Color.pm @@ -88,26 +88,31 @@ Renders a color picker control. =cut sub toHtml { - my $self = shift; + my $self = shift; my $url = $self->session->url; my $style = $self->session->style; - $style->setScript($url->extras('/yui/build/yahoo/yahoo-min.js'),{ type=>'text/javascript' }); - $style->setScript($url->extras('/yui/build/event/event-min.js'),{ type=>'text/javascript' }); - $style->setScript($url->extras('/yui/build/dom/dom-min.js'),{ type=>'text/javascript' }); - $style->setScript($url->extras('/yui/build/dragdrop/dragdrop-min.js'),{ type=>'text/javascript' }); - $style->setScript($url->extras('/yui/build/animation/animation-min.js'),{ type=>'text/javascript' }); - $style->setLink($url->extras('/colorpicker/colorpicker.css'),{ type=>'text/css', rel=>"stylesheet" }); - $style->setScript($url->extras('/colorpicker/color.js'),{ type=>'text/javascript' }); - $style->setScript($url->extras('/colorpicker/key.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->setLink($url->extras('/yui/build/container/assets/skins/sam/container.css'),{ type=>'text/css', rel=>"stylesheet" }); + $style->setLink($url->extras('/yui/build/colorpicker/assets/skins/sam/colorpicker.css'),{ type=>'text/css', rel=>"stylesheet" }); + $style->setScript($url->extras('/yui/build/yahoo/yahoo-min.js'),{ type=>'text/javascript' }); + $style->setScript($url->extras('/yui/build/event/event-min.js'),{ type=>'text/javascript' }); + $style->setScript($url->extras('/yui/build/dom/dom-min.js'),{ type=>'text/javascript' }); + $style->setScript($url->extras('/yui/build/dragdrop/dragdrop-min.js'),{ type=>'text/javascript' }); + $style->setScript($url->extras('/yui/build/utilities/utilities.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/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 $value = $self->get("value"); - return q| - |; + my $name = $self->get("name"); + return qq{ +}; +# +# +# } 1; diff --git a/www/extras/colorpicker/color.js b/www/extras/colorpicker/color.js deleted file mode 100644 index 43f9b29e9..000000000 --- a/www/extras/colorpicker/color.js +++ /dev/null @@ -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 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; - } - } -}(); - diff --git a/www/extras/colorpicker/colorpicker.css b/www/extras/colorpicker/colorpicker.css index 0b7654a82..d6c8097b4 100644 --- a/www/extras/colorpicker/colorpicker.css +++ b/www/extras/colorpicker/colorpicker.css @@ -4,13 +4,18 @@ 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; } +.wg-picker-panel .ft { + text-align: right; +} +.wg-picker-panel .container-close { + height: 5px; +} +.wg-picker-panel { + z-index 100 !important; +} +.wg-picker-panel .yui-picker-controls .hd { + display: none; +} +.wg-picker-panel .yui-picker-controls .bd { + margin-top: 12px; +} diff --git a/www/extras/colorpicker/colorpicker.js b/www/extras/colorpicker/colorpicker.js index 1113d44c5..0fb268d11 100644 --- a/www/extras/colorpicker/colorpicker.js +++ b/www/extras/colorpicker/colorpicker.js @@ -1,133 +1,82 @@ -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" - img.outerHTML = strNewHTML - i = i-1 - } +YAHOO.namespace('WebGUI.Form'); +YAHOO.WebGUI.Form.ColorPicker = { + init: function() { + // Instantiate the Dialog + var dg = this.dialogElement = document.createElement('div'); + document.body.appendChild(dg); + YAHOO.util.Dom.generateId(dg); + YAHOO.util.Dom.addClass(dg, 'yui-picker-panel'); + YAHOO.util.Dom.addClass(dg, 'wg-picker-panel'); + var hd = document.createElement('div'); + YAHOO.util.Dom.addClass(hd, 'hd'); + dg.appendChild(hd); + var bd = document.createElement('div'); + YAHOO.util.Dom.addClass(bd, 'bd'); + dg.appendChild(bd); + var ft = document.createElement('div'); + YAHOO.util.Dom.addClass(ft, 'ft'); + dg.appendChild(ft); + this.dialog = new YAHOO.widget.Dialog(dg, { + width : "360px", + visible : false, + zIndex : 20, + draggable: false, + constraintoviewport : true, + buttons : [ + { text:"Set", handler:function() { this.submit() }, isDefault:true }, + { text:"Cancel", handler:function() { this.cancel() } } + ], + postmethod: 'manual' + }); + this.dialog.renderEvent.subscribe(function() { + if (!this.picker) { //make sure that we haven't already created our Color Picker + var extras = getWebguiProperty("extrasURL"); + var pickerdiv = document.createElement('div'); + YAHOO.util.Dom.addClass(pickerdiv, 'yui-picker'); + this.dialog.body.getElementsByTagName('form')[0].appendChild(pickerdiv); + this.picker = new YAHOO.widget.ColorPicker(pickerdiv, { + container: this.dialog, + images: { + PICKER_THUMB: extras + '/yui/build/colorpicker/assets/picker_thumb.png', + HUE_THUMB: extras + '/yui/build/colorpicker/assets/hue_thumb.png' + }, + showhexsummary: false, + showwebsafe: false, + showhexcontrols: true, // default is false + 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() { - 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 = '
 

R H
G S
B V

#
 
'; - 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); - - +}; +YAHOO.util.Event.onDOMReady(YAHOO.WebGUI.Form.ColorPicker.init, YAHOO.WebGUI.Form.ColorPicker, true); diff --git a/www/extras/colorpicker/example.html b/www/extras/colorpicker/example.html index 3b15e3235..c964bb24f 100644 --- a/www/extras/colorpicker/example.html +++ b/www/extras/colorpicker/example.html @@ -3,31 +3,44 @@ Yahoo! UI Library - Slider Widget - + + - - - - - - - + + + + + + + +
- - +
+ + + +
+
+ + +
+
+ + +
+ diff --git a/www/extras/colorpicker/hline.png b/www/extras/colorpicker/hline.png deleted file mode 100644 index e9b1649c8..000000000 Binary files a/www/extras/colorpicker/hline.png and /dev/null differ diff --git a/www/extras/colorpicker/hue.png b/www/extras/colorpicker/hue.png deleted file mode 100644 index 9a2d9c995..000000000 Binary files a/www/extras/colorpicker/hue.png and /dev/null differ diff --git a/www/extras/colorpicker/key.js b/www/extras/colorpicker/key.js deleted file mode 100644 index f2abf53f1..000000000 --- a/www/extras/colorpicker/key.js +++ /dev/null @@ -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; -}; - diff --git a/www/extras/colorpicker/pickerbg.png b/www/extras/colorpicker/pickerbg.png deleted file mode 100644 index 505af9d9c..000000000 Binary files a/www/extras/colorpicker/pickerbg.png and /dev/null differ diff --git a/www/extras/colorpicker/select.gif b/www/extras/colorpicker/select.gif deleted file mode 100644 index 599f7f13a..000000000 Binary files a/www/extras/colorpicker/select.gif and /dev/null differ diff --git a/www/extras/styleDesigner/styleDesigner.js b/www/extras/styleDesigner/styleDesigner.js index 3eba78ef3..47c176e12 100644 --- a/www/extras/styleDesigner/styleDesigner.js +++ b/www/extras/styleDesigner/styleDesigner.js @@ -129,7 +129,8 @@ WebguiStyleDesigner = function () { swatch.style.backgroundColor = field.value; swatch.onclick = function () { var id = this.id.replace(/(\w+)_swatch/,"$1"); - WebguiColorPicker.display(id); + YAHOO.WebGUI.Form.ColorPicker.display(id, this.id); + return false; } field.onchange = function () { Dom.get(this.id+"_swatch").style.backgroundColor = this.value;