From e40549980dd988f71e4facdd9552272ebd451cc4 Mon Sep 17 00:00:00 2001 From: wei <> Date: Sat, 4 Feb 2006 01:03:23 +0000 Subject: Adding TColorPicker. --- .gitattributes | 11 + buildscripts/jsbuilder/build.php | 6 + framework/Web/Javascripts/TClientScript.php | 3 +- .../Web/Javascripts/colorpicker/background.png | Bin 0 -> 14501 bytes framework/Web/Javascripts/colorpicker/button.gif | Bin 0 -> 58 bytes .../Web/Javascripts/colorpicker/colorpicker.js | 507 +++++++ framework/Web/Javascripts/colorpicker/default.css | 258 ++++ framework/Web/Javascripts/colorpicker/hue.gif | Bin 0 -> 2793 bytes framework/Web/Javascripts/colorpicker/slider.gif | Bin 0 -> 81 bytes .../Web/Javascripts/colorpicker/target_black.gif | Bin 0 -> 56 bytes .../Web/Javascripts/colorpicker/target_white.gif | Bin 0 -> 56 bytes framework/Web/Javascripts/extended/builder.js | 2 +- framework/Web/Javascripts/js/clientscripts.php | 2 +- framework/Web/Javascripts/js/colorpicker.js | 469 +++++++ framework/Web/Javascripts/js/prado.js | 2 +- framework/Web/Javascripts/js/rico.js | 1452 +++++++++----------- framework/Web/Javascripts/rico/colors.js | 32 +- framework/Web/UI/WebControls/TColorPicker.php | 221 +++ framework/Web/UI/WebControls/TDatePicker.php | 2 +- .../protected/pages/UI/ColorPicker.page | 40 + 20 files changed, 2183 insertions(+), 824 deletions(-) create mode 100644 framework/Web/Javascripts/colorpicker/background.png create mode 100644 framework/Web/Javascripts/colorpicker/button.gif create mode 100644 framework/Web/Javascripts/colorpicker/colorpicker.js create mode 100644 framework/Web/Javascripts/colorpicker/default.css create mode 100644 framework/Web/Javascripts/colorpicker/hue.gif create mode 100644 framework/Web/Javascripts/colorpicker/slider.gif create mode 100644 framework/Web/Javascripts/colorpicker/target_black.gif create mode 100644 framework/Web/Javascripts/colorpicker/target_white.gif create mode 100644 framework/Web/Javascripts/js/colorpicker.js create mode 100644 framework/Web/UI/WebControls/TColorPicker.php create mode 100644 tests/FunctionalTests/protected/pages/UI/ColorPicker.page diff --git a/.gitattributes b/.gitattributes index e3859b99..460c053c 100644 --- a/.gitattributes +++ b/.gitattributes @@ -568,6 +568,14 @@ framework/TComponent.php -text framework/Web/Javascripts/TClientScript.php -text framework/Web/Javascripts/TJSON.php -text framework/Web/Javascripts/TJavascriptSerializer.php -text +framework/Web/Javascripts/colorpicker/background.png -text +framework/Web/Javascripts/colorpicker/button.gif -text +framework/Web/Javascripts/colorpicker/colorpicker.js -text +framework/Web/Javascripts/colorpicker/default.css -text +framework/Web/Javascripts/colorpicker/hue.gif -text +framework/Web/Javascripts/colorpicker/slider.gif -text +framework/Web/Javascripts/colorpicker/target_black.gif -text +framework/Web/Javascripts/colorpicker/target_white.gif -text framework/Web/Javascripts/datepicker/calendar.png -text framework/Web/Javascripts/datepicker/datepicker.js -text framework/Web/Javascripts/datepicker/default.css -text @@ -592,6 +600,7 @@ framework/Web/Javascripts/extra/json.js -text framework/Web/Javascripts/extra/logger.js -text framework/Web/Javascripts/js/ajax.js -text framework/Web/Javascripts/js/clientscripts.php -text +framework/Web/Javascripts/js/colorpicker.js -text framework/Web/Javascripts/js/datepicker.js -text framework/Web/Javascripts/js/effects.js -text framework/Web/Javascripts/js/logger.js -text @@ -650,6 +659,7 @@ framework/Web/UI/WebControls/TButtonColumn.php -text framework/Web/UI/WebControls/TCheckBox.php -text framework/Web/UI/WebControls/TCheckBoxColumn.php -text framework/Web/UI/WebControls/TCheckBoxList.php -text +framework/Web/UI/WebControls/TColorPicker.php -text framework/Web/UI/WebControls/TCompareValidator.php -text framework/Web/UI/WebControls/TContent.php -text framework/Web/UI/WebControls/TContentPlaceHolder.php -text @@ -730,6 +740,7 @@ tests/FunctionalTests/protected/pages/Tickets/Ticket_21.php -text tests/FunctionalTests/protected/pages/Tickets/Ticket_27.page -text tests/FunctionalTests/protected/pages/Tickets/Ticket_27.php -text tests/FunctionalTests/protected/pages/Tickets/config.xml -text +tests/FunctionalTests/protected/pages/UI/ColorPicker.page -text tests/FunctionalTests/protected/pages/UI/DatePicker.page -text tests/FunctionalTests/protected/pages/UI/LabeledTextBox.php -text tests/FunctionalTests/protected/pages/UI/LabeledTextBox.tpl -text diff --git a/buildscripts/jsbuilder/build.php b/buildscripts/jsbuilder/build.php index 0b61b1bb..e1ea417c 100644 --- a/buildscripts/jsbuilder/build.php +++ b/buildscripts/jsbuilder/build.php @@ -118,6 +118,12 @@ $libraries = array( //date picker 'datepicker.js' => array( 'datepicker/datepicker.js' + ), + + //color picker + 'colorpicker.js' => array( + 'rico/colors.js', + 'colorpicker/colorpicker.js' ) ); diff --git a/framework/Web/Javascripts/TClientScript.php b/framework/Web/Javascripts/TClientScript.php index 5f11758a..5047959d 100644 --- a/framework/Web/Javascripts/TClientScript.php +++ b/framework/Web/Javascripts/TClientScript.php @@ -36,7 +36,8 @@ class TClientScript 'validator' => array('prado', 'validator'), 'logger' => array('prado', 'logger'), 'datepicker' => array('prado', 'datepicker'), - 'rico' => array('prado', 'effects', 'ajax', 'rico') + 'rico' => array('prado', 'effects', 'ajax', 'rico'), + 'colorpicker' => array('prado', 'colorpicker') ); public function __construct($manager) diff --git a/framework/Web/Javascripts/colorpicker/background.png b/framework/Web/Javascripts/colorpicker/background.png new file mode 100644 index 00000000..91798cf5 Binary files /dev/null and b/framework/Web/Javascripts/colorpicker/background.png differ diff --git a/framework/Web/Javascripts/colorpicker/button.gif b/framework/Web/Javascripts/colorpicker/button.gif new file mode 100644 index 00000000..67f17975 Binary files /dev/null and b/framework/Web/Javascripts/colorpicker/button.gif differ diff --git a/framework/Web/Javascripts/colorpicker/colorpicker.js b/framework/Web/Javascripts/colorpicker/colorpicker.js new file mode 100644 index 00000000..c2c9cd28 --- /dev/null +++ b/framework/Web/Javascripts/colorpicker/colorpicker.js @@ -0,0 +1,507 @@ +Prado.WebUI.TColorPicker = Class.create(); + +Object.extend(Prado.WebUI.TColorPicker, +{ + palettes: + { + Small : [["fff", "fcc", "fc9", "ff9", "ffc", "9f9", "9ff", "cff", "ccf", "fcf"], + ["ccc", "f66", "f96", "ff6", "ff3", "6f9", "3ff", "6ff", "99f", "f9f"], + ["c0c0c0", "f00", "f90", "fc6", "ff0", "3f3", "6cc", "3cf", "66c", "c6c"], + ["999", "c00", "f60", "fc3", "fc0", "3c0", "0cc", "36f", "63f", "c3c"], + ["666", "900", "c60", "c93", "990", "090", "399", "33f", "60c", "939"], + ["333", "600", "930", "963", "660", "060", "366", "009", "339", "636"], + ["000", "300", "630", "633", "330", "030", "033", "006", "309", "303"]], + + Tiny : [["ffffff"/*white*/, "00ff00"/*lime*/, "008000"/*green*/, "0000ff"/*blue*/], + ["c0c0c0"/*silver*/, "ffff00"/*yellow*/, "ff00ff"/*fuchsia*/, "000080"/*navy*/], + ["808080"/*gray*/, "ff0000"/*red*/, "800080"/*purple*/, "000000"/*black*/]] + }, + + UIImages : + { + 'button.gif' : 'button.gif', +// 'target_black.gif' : 'target_black.gif', +// 'target_white.gif' : 'target_white.gif', + 'background.png' : 'background.png' +// 'slider.gif' : 'slider.gif', +// 'hue.gif' : 'hue.gif' + } +}); + +Object.extend(Prado.WebUI.TColorPicker.prototype, +{ + initialize : function(options) + { + var basics = + { + Palette : 'Small', + ClassName : 'TColorPicker', + Mode : 'Basic', + OKButtonText : 'OK', + CancelButtonText : 'Cancel', + ShowColorPicker : true + } + + this.element = null; + this.showing = false; + + options = Object.extend(basics, options); + this.options = options; + this.input = $(options['ID']); + this.button = $(options['ID']+'_button'); + this._buttonOnClick = this.buttonOnClick.bind(this); + if(options['ShowColorPicker']) + Event.observe(this.button, "click", this._buttonOnClick); + Event.observe(this.input, "change", this.updatePicker.bind(this)); + }, + + updatePicker : function(e) + { + var color = Rico.Color.createFromHex(this.input.value); + this.button.style.backgroundColor = color.toString(); + }, + + buttonOnClick : function(event) + { + var mode = this.options['Mode']; + if(this.element == null) + { + var constructor = mode == "Basic" ? "getBasicPickerContainer": "getFullPickerContainer" + this.element = this[constructor](this.options['ID'], this.options['Palette']) + document.body.appendChild(this.element); + this.element.style.display = "none"; + + if(Prado.Browser().ie) + { + this.iePopUp = document.createElement('iframe'); + this.iePopUp.src = ""; + this.iePopUp.style.position = "absolute" + this.iePopUp.scrolling="no" + this.iePopUp.frameBorder="0" + this.input.parentNode.appendChild(this.iePopUp); + } + if(mode == "Full") + this.initializeFullPicker(); + } + this.show(); + }, + + show : function(type) + { + if(!this.showing) + { + var pos = Position.cumulativeOffset(this.input); + pos[1] += this.input.offsetHeight; + + this.element.style.top = (pos[1]-1) + "px"; + this.element.style.left = pos[0] + "px"; + this.element.style.display = "block"; + + this.ieHack(type); + + //observe for clicks on the document body + this._documentClickEvent = this.hideOnClick.bindEvent(this, type); + this._documentKeyDownEvent = this.keyPressed.bindEvent(this, type); + Event.observe(document.body, "click", this._documentClickEvent); + Event.observe(document,"keydown", this._documentKeyDownEvent); + this.showing = true; + + if(type == "Full") + { + var color = Rico.Color.createFromHex(this.input.value); + this.inputs.oldColor.style.backgroundColor = color.asHex(); + this.setColor(color,true); + } + } + }, + + hide : function(event) + { + if(this.showing) + { + if(this.iePopUp) + this.iePopUp.style.display = "none"; + + this.element.style.display = "none"; + this.showing = false; + Event.stopObserving(document.body, "click", this._documentClickEvent); + Event.stopObserving(document,"keydown", this._documentKeyDownEvent); + } + }, + + keyPressed : function(event,type) + { + if(Event.keyCode(event) == Event.KEY_ESC) + this.hide(event,type); + }, + + hideOnClick : function(ev) + { + if(!this.showing) return; + var el = Event.element(ev); + var within = false; + do + { within = within || String(el.className).indexOf('FullColorPicker') > -1 + within = within || el == this.button; + within = within || el == this.input; + if(within) break; + el = el.parentNode; + } + while(el); + if(!within) this.hide(ev); + }, + + ieHack : function() + { + // IE hack + if(this.iePopUp) + { + this.iePopUp.style.display = "block"; + this.iePopUp.style.top = (this.element.offsetTop) + "px"; + this.iePopUp.style.left = (this.element.offsetLeft)+ "px"; + this.iePopUp.style.width = Math.abs(this.element.offsetWidth)+ "px"; + this.iePopUp.style.height = (this.element.offsetHeight + 1)+ "px"; + } + }, + + getBasicPickerContainer : function(pickerID, palette) + { + var table = TABLE({className:'basic_colors palette_'+palette},TBODY()); + var colors = Prado.WebUI.TColorPicker.palettes[palette]; + var pickerOnClick = this.cellOnClick.bind(this); + colors.each(function(color) + { + var row = document.createElement("tr"); + color.each(function(c) + { + var td = document.createElement("td"); + var img = IMG({src:Prado.WebUI.TColorPicker.UIImages['button.gif'],width:16,height:16}); + img.style.backgroundColor = "#"+c; + Event.observe(img,"click", pickerOnClick); + Event.observe(img,"mouseover", function(e) + { + Element.addClassName(Event.element(e), "pickerhover"); + }); + Event.observe(img,"mouseout", function(e) + { + Element.removeClassName(Event.element(e), "pickerhover"); + }); + td.appendChild(img); + row.appendChild(td); + }); + table.childNodes[0].appendChild(row); + }); + return DIV({className:this.options['ClassName']+" BasicColorPicker", + id:pickerID+"_picker"}, table); + }, + + cellOnClick : function(e) + { + var el = Event.element(e); + if(el.tagName.toLowerCase() != "img") + return; + var color = Rico.Color.createColorFromBackground(el); + this.updateColor(color); + }, + + updateColor : function(color) + { + this.input.value = color.toString().toUpperCase(); + this.button.style.backgroundColor = color.toString(); + if(isFunction(this.onChange)) + this.onChange(color); + }, + + getFullPickerContainer : function(pickerID) + { + //create the 3 buttons + this.buttons = + { + //Less : INPUT({value:'Less Colors', className:'button', type:'button'}), + OK : INPUT({value:this.options.OKButtonText, className:'button', type:'button'}), + Cancel : INPUT({value:this.options.CancelButtonText, className:'button', type:'button'}) + }; + + //create the 6 inputs + var inputs = {}; + ['H','S','V','R','G','B'].each(function(type) + { + inputs[type] = INPUT({type:'text',size:'3',maxlength:'3'}); + }); + + //create the HEX input + inputs['HEX'] = INPUT({className:'hex',type:'text',size:'6',maxlength:'6'}); + this.inputs = inputs; + + var images = Prado.WebUI.TColorPicker.UIImages; + + this.inputs['currentColor'] = SPAN({className:'currentColor'}); + this.inputs['oldColor'] = SPAN({className:'oldColor'}); + + var inputsTable = + TABLE({className:'inputs'}, TBODY(null, + TR(null, + TD({className:'currentcolor',colSpan:2}, + this.inputs['currentColor'], this.inputs['oldColor'])), + + TR(null, + TD(null,'H:'), + TD(null,this.inputs['H'], '°')), + + TR(null, + TD(null,'S:'), + TD(null,this.inputs['S'], '%')), + + TR(null, + TD(null,'V:'), + TD(null,this.inputs['V'], '%')), + + TR(null, + TD({className:'gap'},'R:'), + TD({className:'gap'},this.inputs['R'])), + + TR(null, + TD(null,'G:'), + TD(null, this.inputs['G'])), + + TR(null, + TD(null,'B:'), + TD(null, this.inputs['B'])), + + TR(null, + TD({className:'gap'},'#'), + TD({className:'gap'},this.inputs['HEX'])) + )); + + var UIimages = + { + selector : SPAN({className:'selector'}), + background : SPAN({className:'colorpanel'}), + slider : SPAN({className:'slider'}), + hue : SPAN({className:'strip'}) + } + + //png alpha channels for IE + if(Prado.Browser().ie) + { + var filter = "filter:progid:DXImageTransform.Microsoft.AlphaImageLoader"; + UIimages['background'] = SPAN({className:'colorpanel',style:filter+"(src='"+images['background.png']+"' sizingMethod=scale);"}) + } + + this.inputs = Object.extend(this.inputs, UIimages); + + var pickerTable = + TABLE(null,TBODY(null, + TR({className:'selection'}, + TD({className:'colors'},UIimages['selector'],UIimages['background']), + TD({className:'hue'},UIimages['slider'],UIimages['hue']), + TD({className:'inputs'}, inputsTable) + ), + TR({className:'options'}, + TD({colSpan:3}, + this.buttons['OK'], + this.buttons['Cancel']) + ) + )); + + return DIV({className:this.options['ClassName']+" FullColorPicker", + id:pickerID+"_picker"},pickerTable); + }, + + initializeFullPicker : function() + { + var color = Rico.Color.createFromHex(this.input.value); + this.inputs.oldColor.style.backgroundColor = color.asHex(); + this.setColor(color,true); + + var i = 0; + for(var type in this.inputs) + { + Event.observe(this.inputs[type], "change", + this.onInputChanged.bindEvent(this,type)); + i++; + + if(i > 6) break; + } + + this.isMouseDownOnColor = false; + this.isMouseDownOnHue = false; + + this._onColorMouseDown = this.onColorMouseDown.bind(this); + this._onHueMouseDown = this.onHueMouseDown.bind(this); + this._onMouseUp = this.onMouseUp.bind(this); + this._onMouseMove = this.onMouseMove.bind(this); + + Event.observe(this.inputs.background, "mousedown", this._onColorMouseDown); + Event.observe(this.inputs.hue, "mousedown", this._onHueMouseDown); + + Event.observe(document.body, "mouseup", this._onMouseUp); + + //Because of using the CSS filter, IE can't do colour change quickly + if(!Prado.Browser().ie) + Event.observe(document.body, "mousemove", this._onMouseMove); + + Event.observe(this.buttons.Cancel, "click", this.hide.bindEvent(this,this.options['Mode'])); + Event.observe(this.buttons.OK, "click", this.onOKClicked.bind(this)); + }, + + onColorMouseDown : function(ev) + { + this.isMouseDownOnColor = true; + this.onMouseMove(ev); + }, + + onHueMouseDown : function(ev) + { + this.isMouseDownOnHue = true; + this.onMouseMove(ev); + }, + + onMouseUp : function(ev) + { + this.isMouseDownOnColor = false; + this.isMouseDownOnHue = false; + }, + + onMouseMove : function(ev) + { + if(this.isMouseDownOnColor) + this.changeSV(ev); + if(this.isMouseDownOnHue) + this.changeH(ev); + }, + + changeSV : function(ev) + { + var px = Event.pointerX(ev); + var py = Event.pointerY(ev); + var pos = Position.cumulativeOffset(this.inputs.background); + var x = this.truncate(px - pos[0],0,255); + var y = this.truncate(py - pos[1],0,255); + + + var h = this.truncate(this.inputs.H.value,0,360)/360; + var s = x/255; + var b = (255-y)/255; + + + var color = new Rico.Color(); + color.rgb = Rico.Color.HSBtoRGB(h,s,b); + + this.inputs.selector.style.left = x+"px"; + this.inputs.selector.style.top = y+"px"; + + this.inputs.currentColor.style.backgroundColor = color.asHex(); + + return this.setColor(color); + }, + + changeH : function(ev) + { + var py = Event.pointerY(ev); + var pos = Position.cumulativeOffset(this.inputs.background); + var y = this.truncate(py - pos[1],0,255); + + var h = (255-y)/255; + var s = parseInt(this.inputs.S.value)/100; + var b = parseInt(this.inputs.V.value)/100; + var color = new Rico.Color(); + color.rgb = Rico.Color.HSBtoRGB(h,s,b); + + var hue = new Rico.Color(color.rgb.r,color.rgb.g,color.rgb.b); + hue.setSaturation(1); hue.setBrightness(1); + + this.inputs.background.style.backgroundColor = hue.asHex(); + this.inputs.currentColor.style.backgroundColor = color.asHex(); + + this.inputs.slider.style.top = this.truncate(y,0,255)+"px"; + return this.setColor(color); + + }, + + onOKClicked : function(ev) + { + var r = this.truncate(this.inputs.R.value,0,255);///255; + var g = this.truncate(this.inputs.G.value,0,255);///255; + var b = this.truncate(this.inputs.B.value,0,255);///255; + var color = new Rico.Color(r,g,b); + this.updateColor(color); + this.inputs.oldColor.style.backgroundColor = color.asHex(); + this.hide(ev); + }, + + onInputChanged : function(ev, type) + { + if(this.isMouseDownOnColor || isMouseDownOnHue) + return; + + + switch(type) + { + case "H": case "S": case "V": + var h = this.truncate(this.inputs.H.value,0,360)/360; + var s = this.truncate(this.inputs.S.value,0,100)/100; + var b = this.truncate(this.inputs.V.value,0,100)/100; + var color = new Rico.Color(); + color.rgb = Rico.Color.HSBtoRGB(h,s,b); + return this.setColor(color,true); + case "R": case "G": case "B": + var r = this.truncate(this.inputs.R.value,0,255);///255; + var g = this.truncate(this.inputs.G.value,0,255);///255; + var b = this.truncate(this.inputs.B.value,0,255);///255; + var color = new Rico.Color(r,g,b); + return this.setColor(color,true); + case "HEX": + var color = Rico.Color.createFromHex(this.inputs.HEX.value); + return this.setColor(color,true); + } + }, + + setColor : function(color, update) + { + var hsb = color.asHSB(); + + this.inputs.H.value = parseInt(hsb.h*360); + this.inputs.S.value = parseInt(hsb.s*100); + this.inputs.V.value = parseInt(hsb.b*100); + this.inputs.R.value = color.rgb.r; + this.inputs.G.value = color.rgb.g; + this.inputs.B.value = color.rgb.b; + this.inputs.HEX.value = color.asHex().substring(1).toUpperCase(); + + var images = Prado.WebUI.TColorPicker.UIImages; + + var changeCss = color.isBright() ? 'removeClassName' : 'addClassName'; + Element[changeCss](this.inputs.selector, 'target_white'); +/* if(color.isBright()) + Element.removeCssClass(this.inputs.selector, 'target_white'); + //this.inputs.selector.src = images['target_black.gif']; + else + Element.addCssClass(this.inputs.selector, 'target_white'); + //this.inputs.selector.src = images['target_white.gif']; +*/ + if(update) + this.updateSelectors(color); + }, + + updateSelectors : function(color) + { + var hsb = color.asHSB(); + var pos = [hsb.s*255, hsb.b*255, hsb.h*255]; + + this.inputs.selector.style.left = this.truncate(pos[0],0,255)+"px"; + this.inputs.selector.style.top = this.truncate(255-pos[1],0,255)+"px"; + this.inputs.slider.style.top = this.truncate(255-pos[2],0,255)+"px"; + + var hue = new Rico.Color(color.rgb.r,color.rgb.g,color.rgb.b); + hue.setSaturation(1); hue.setBrightness(1); + this.inputs.background.style.backgroundColor = hue.asHex(); + this.inputs.currentColor.style.backgroundColor = color.asHex(); + }, + + truncate : function(value, min, max) + { + value = parseInt(value); + return value < min ? min : value > max ? max : value; + } +}); diff --git a/framework/Web/Javascripts/colorpicker/default.css b/framework/Web/Javascripts/colorpicker/default.css new file mode 100644 index 00000000..67235c08 --- /dev/null +++ b/framework/Web/Javascripts/colorpicker/default.css @@ -0,0 +1,258 @@ + +/** Colors **/ + +.TColorPicker_button +{ + border: 1px solid #919EA9; + background-color: #fff; +} + +.TColorPicker +{ + background-color: white; + border: 1px solid #919EA9; +} + +.FullColorPicker +{ + width: 388px; +} + +.BasicColorPicker .basic_colors td img +{ + border: 1px solid #919EA9; +} + +.BasicColorPicker .basic_colors .pickerhover +{ + border-color: white; +} + +.FullColorPicker .colors .colorpanel +{ + border: 1px solid #919EA9; +} + +.FullColorPicker .hue .strip +{ + border: 1px solid #919EA9; +} + +.FullColorPicker .inputs .currentcolor span +{ + border: 1px solid #919EA9; +} + +.FullColorPicker .options td +{ + border-top: 1px solid #919EA9; +} + +/** UI **/ +.TColorPicker_button +{ + position: absolute; + font-size: 0; + padding: 1px; + margin-left: 1px; +} + +.TColorPicker_button img +{ + width: 18px; + height: 18px; +} + +* html .TColorPicker_button +{ + margin-top: 1px; +} + +.TColorPicker +{ + position: absolute; +} + +.BasicColorPicker .palette_Tiny img +{ + width: 30px; + height: 30px; +} +.BasicColorPicker .basic_colors +{ + border-collapse: separate; + border-spacing: 2px; +} + +.BasicColorPicker .basic_colors td +{ + padding: 0; + font-size: 0; +} + +.FullColorPicker table +{ + border-collapse: collapse; + border-spacing: 0; +} + +.FullColorPicker .colors .colorpanel +{ + margin-left: 7px; + margin-top: -9px; + display: block; + width:256px; + height:256px; + background-image: url(background.png); +} + +* html .FullColorPicker .colors .colorpanel +{ + background-image: none; + margin-top: -10px; +} + +.FullColorPicker .colors +{ + padding-bottom: 10px; + padding-top: 17px; +} + +* html .FullColorPicker .colors +{ + margin-top: 10px; +} + +.FullColorPicker .colors .selector +{ + position: relative; + top: 0px; + left: 0px; + border: 0 none; + float: left; + margin-left: 2px; + margin-top: -12px; + display: block; + background-image: url(target_black.gif); + background-repeat: no-repeat; + width: 8px; + height:8px; + background-position: 50% +} + +* html .FullColorPicker .colors .selector +{ + margin-top: -16px; +} + +.FullColorPicker .colors span.target_white +{ + background-image: url(target_white.gif); +} + +.FullColorPicker .hue +{ + text-align: center; + width: 50px; +} + +.FullColorPicker .hue .strip +{ + margin-top: -5px; + margin-left: 9px; + display: block; + background-image: url(hue.gif); + width:19px; + height:256px; +} + +* html .FullColorPicker .hue .strip +{ + margin-left: 10px; +} + +.FullColorPicker .slider +{ + position: relative; + top: 0px; + margin-top: -5px; + background-image: url(slider.gif); + width: 40px; + height: 9px; + font-size: 0; + display: block; +} + +* html .FullColorPicker .slider +{ + margin-left: 10px; +} + +.FullColorPicker .inputs +{ + font-family: Tahoma; + font-size: 10pt; +} + +.FullColorPicker .inputs input +{ + width: 30px; + text-align: center; + height: 16px; + margin-right: 2px; +} + +.FullColorPicker .currentcolor +{ + text-align: center; +} + +.FullColorPicker .inputs .currentcolor span +{ + display: block; + width: 60px; + height: 30px; +} + +.FullColorPicker .inputs .currentcolor span.currentColor +{ + margin: 5px 5px 0 2px; + border-bottom: 0 none; +} + +.FullColorPicker .inputs .currentcolor span.oldColor +{ + margin: 0px 5px 5px 2px; + border-top: 0 none; +} + +.FullColorPicker input.hex +{ + width: 50px; + margin-right: 5px; +} + +.FullColorPicker input.button +{ + width: 90px; + margin: 3px; + font-size: 10px; +} + +.FullColorPicker .inputs .gap +{ + padding-top: 8px; +} + +.FullColorPicker .customs +{ + width: 100%; + border-collapse: separate; +} + +.FullColorPicker .options td +{ + height: 0px; + text-align: right; + padding: 7px 10px 7px 0px; +} \ No newline at end of file diff --git a/framework/Web/Javascripts/colorpicker/hue.gif b/framework/Web/Javascripts/colorpicker/hue.gif new file mode 100644 index 00000000..901e409c Binary files /dev/null and b/framework/Web/Javascripts/colorpicker/hue.gif differ diff --git a/framework/Web/Javascripts/colorpicker/slider.gif b/framework/Web/Javascripts/colorpicker/slider.gif new file mode 100644 index 00000000..92f9d744 Binary files /dev/null and b/framework/Web/Javascripts/colorpicker/slider.gif differ diff --git a/framework/Web/Javascripts/colorpicker/target_black.gif b/framework/Web/Javascripts/colorpicker/target_black.gif new file mode 100644 index 00000000..ebb89f58 Binary files /dev/null and b/framework/Web/Javascripts/colorpicker/target_black.gif differ diff --git a/framework/Web/Javascripts/colorpicker/target_white.gif b/framework/Web/Javascripts/colorpicker/target_white.gif new file mode 100644 index 00000000..c3527c86 Binary files /dev/null and b/framework/Web/Javascripts/colorpicker/target_white.gif differ diff --git a/framework/Web/Javascripts/extended/builder.js b/framework/Web/Javascripts/extended/builder.js index f6c33bf6..24b565e5 100644 --- a/framework/Web/Javascripts/extended/builder.js +++ b/framework/Web/Javascripts/extended/builder.js @@ -11,7 +11,7 @@ Object.extend(Builder, if(args.length==0) return Builder.node(tag,null); if(args.length==1) - return Builder.node(tag,args[1]); + return Builder.node(tag,args[0]); if(args.length>1) return Builder.node(tag,args.shift(),args); diff --git a/framework/Web/Javascripts/js/clientscripts.php b/framework/Web/Javascripts/js/clientscripts.php index cbf0c9fa..1fb14003 100644 --- a/framework/Web/Javascripts/js/clientscripts.php +++ b/framework/Web/Javascripts/js/clientscripts.php @@ -12,7 +12,7 @@ else $expiresOffset = 3600 * 24 * 10; // 10 days util client cache expires //allowed libraries -$library = array('prado', 'effects', 'ajax', 'validator', 'logger', 'datepicker', 'rico'); +$library = array('prado', 'effects', 'ajax', 'validator', 'logger', 'datepicker', 'rico', 'colorpicker'); $param = isset($_GET['js']) ? $_GET['js'] : ''; diff --git a/framework/Web/Javascripts/js/colorpicker.js b/framework/Web/Javascripts/js/colorpicker.js new file mode 100644 index 00000000..2484b6d8 --- /dev/null +++ b/framework/Web/Javascripts/js/colorpicker.js @@ -0,0 +1,469 @@ +if(typeof (Rico)=="undefined"){ +Rico={}; +} +Rico.Color=Class.create(); +Rico.Color.prototype={initialize:function(_1,_2,_3){ +this.rgb={r:_1,g:_2,b:_3}; +},setRed:function(r){ +this.rgb.r=r; +},setGreen:function(g){ +this.rgb.g=g; +},setBlue:function(b){ +this.rgb.b=b; +},setHue:function(h){ +var _8=this.asHSB(); +_8.h=h; +this.rgb=Rico.Color.HSBtoRGB(_8.h,_8.s,_8.b); +},setSaturation:function(s){ +var hsb=this.asHSB(); +hsb.s=s; +this.rgb=Rico.Color.HSBtoRGB(hsb.h,hsb.s,hsb.b); +},setBrightness:function(b){ +var hsb=this.asHSB(); +hsb.b=b; +this.rgb=Rico.Color.HSBtoRGB(hsb.h,hsb.s,hsb.b); +},darken:function(_11){ +var hsb=this.asHSB(); +this.rgb=Rico.Color.HSBtoRGB(hsb.h,hsb.s,Math.max(hsb.b-_11,0)); +},brighten:function(_12){ +var hsb=this.asHSB(); +this.rgb=Rico.Color.HSBtoRGB(hsb.h,hsb.s,Math.min(hsb.b+_12,1)); +},blend:function(_13){ +this.rgb.r=Math.floor((this.rgb.r+_13.rgb.r)/2); +this.rgb.g=Math.floor((this.rgb.g+_13.rgb.g)/2); +this.rgb.b=Math.floor((this.rgb.b+_13.rgb.b)/2); +},isBright:function(){ +var hsb=this.asHSB(); +return this.asHSB().b>0.5; +},isDark:function(){ +return !this.isBright(); +},asRGB:function(){ +return "rgb("+this.rgb.r+","+this.rgb.g+","+this.rgb.b+")"; +},asHex:function(){ +return "#"+this.rgb.r.toColorPart()+this.rgb.g.toColorPart()+this.rgb.b.toColorPart(); +},asHSB:function(){ +return Rico.Color.RGBtoHSB(this.rgb.r,this.rgb.g,this.rgb.b); +},toString:function(){ +return this.asHex(); +}}; +Rico.Color.createFromHex=function(_14){ +if(_14.indexOf("#")==0){ +_14=_14.substring(1); +} +var red="ff",green="ff",blue="ff"; +if(_14.length>4){ +red=_14.substring(0,2); +green=_14.substring(2,4); +blue=_14.substring(4,6); +}else{ +if(_14.length>0&_14.length<4){ +var r=_14.substring(0,1); +var g=_14.substring(1,2); +var b=_14.substring(2); +red=r+r; +green=g+g; +blue=b+b; +} +} +return new Rico.Color(parseInt(red,16),parseInt(green,16),parseInt(blue,16)); +}; +Rico.Color.createColorFromBackground=function(_16){ +var _17=Element.getStyle($(_16),"background-color"); +if(_17=="transparent"&&_16.parent){ +return Rico.Color.createColorFromBackground(_16.parent); +} +if(_17==null){ +return new Rico.Color(255,255,255); +} +if(_17.indexOf("rgb(")==0){ +var _18=_17.substring(4,_17.length-1); +var _19=_18.split(","); +return new Rico.Color(parseInt(_19[0]),parseInt(_19[1]),parseInt(_19[2])); +}else{ +if(_17.indexOf("#")==0){ +return Rico.Color.createFromHex(_17); +}else{ +return new Rico.Color(255,255,255); +} +} +}; +Rico.Color.HSBtoRGB=function(hue,_21,_22){ +var red=0; +var _23=0; +var _24=0; +if(_21==0){ +red=parseInt(_22*255+0.5); +_23=red; +_24=red; +}else{ +var h=(hue-Math.floor(hue))*6; +var f=h-Math.floor(h); +var p=_22*(1-_21); +var q=_22*(1-_21*f); +var t=_22*(1-(_21*(1-f))); +switch(parseInt(h)){ +case 0: +red=(_22*255+0.5); +_23=(t*255+0.5); +_24=(p*255+0.5); +break; +case 1: +red=(q*255+0.5); +_23=(_22*255+0.5); +_24=(p*255+0.5); +break; +case 2: +red=(p*255+0.5); +_23=(_22*255+0.5); +_24=(t*255+0.5); +break; +case 3: +red=(p*255+0.5); +_23=(q*255+0.5); +_24=(_22*255+0.5); +break; +case 4: +red=(t*255+0.5); +_23=(p*255+0.5); +_24=(_22*255+0.5); +break; +case 5: +red=(_22*255+0.5); +_23=(p*255+0.5); +_24=(q*255+0.5); +break; +} +} +return {r:parseInt(red),g:parseInt(_23),b:parseInt(_24)}; +}; +Rico.Color.RGBtoHSB=function(r,g,b){ +var hue; +var _29; +var _30; +var _31=(r>g)?r:g; +if(b>_31){ +_31=b; +} +var _32=(r-1; +_51=_51||el==this.button; +_51=_51||el==this.input; +if(_51){ +break; +} +el=el.parentNode; +}while(el); +if(!_51){ +this.hide(ev); +} +},ieHack:function(){ +if(this.iePopUp){ +this.iePopUp.style.display="block"; +this.iePopUp.style.top=(this.element.offsetTop)+"px"; +this.iePopUp.style.left=(this.element.offsetLeft)+"px"; +this.iePopUp.style.width=Math.abs(this.element.offsetWidth)+"px"; +this.iePopUp.style.height=(this.element.offsetHeight+1)+"px"; +} +},getBasicPickerContainer:function(_52,_53){ +var _54=TABLE({className:"basic_colors palette_"+_53},TBODY()); +var _55=Prado.WebUI.TColorPicker.palettes[_53]; +var _56=this.cellOnClick.bind(this); +_55.each(function(_57){ +var row=document.createElement("tr"); +_57.each(function(c){ +var td=document.createElement("td"); +var img=IMG({src:Prado.WebUI.TColorPicker.UIImages["button.gif"],width:16,height:16}); +img.style.backgroundColor="#"+c; +Event.observe(img,"click",_56); +Event.observe(img,"mouseover",function(e){ +Element.addClassName(Event.element(e),"pickerhover"); +}); +Event.observe(img,"mouseout",function(e){ +Element.removeClassName(Event.element(e),"pickerhover"); +}); +td.appendChild(img); +row.appendChild(td); +}); +_54.childNodes[0].appendChild(row); +}); +return DIV({className:this.options["ClassName"]+" BasicColorPicker",id:_52+"_picker"},_54); +},cellOnClick:function(e){ +var el=Event.element(e); +if(el.tagName.toLowerCase()!="img"){ +return; +} +var _62=Rico.Color.createColorFromBackground(el); +this.updateColor(_62); +},updateColor:function(_63){ +this.input.value=_63.toString().toUpperCase(); +this.button.style.backgroundColor=_63.toString(); +if(isFunction(this.onChange)){ +this.onChange(_63); +} +},getFullPickerContainer:function(_64){ +this.buttons={OK:INPUT({value:this.options.OKButtonText,className:"button",type:"button"}),Cancel:INPUT({value:this.options.CancelButtonText,className:"button",type:"button"})}; +var _65={}; +["H","S","V","R","G","B"].each(function(_66){ +_65[_66]=INPUT({type:"text",size:"3",maxlength:"3"}); +}); +_65["HEX"]=INPUT({className:"hex",type:"text",size:"6",maxlength:"6"}); +this.inputs=_65; +var _67=Prado.WebUI.TColorPicker.UIImages; +this.inputs["currentColor"]=SPAN({className:"currentColor"}); +this.inputs["oldColor"]=SPAN({className:"oldColor"}); +var _68=TABLE({className:"inputs"},TBODY(null,TR(null,TD({className:"currentcolor",colSpan:2},this.inputs["currentColor"],this.inputs["oldColor"])),TR(null,TD(null,"H:"),TD(null,this.inputs["H"],"\xc2\xb0")),TR(null,TD(null,"S:"),TD(null,this.inputs["S"],"%")),TR(null,TD(null,"V:"),TD(null,this.inputs["V"],"%")),TR(null,TD({className:"gap"},"R:"),TD({className:"gap"},this.inputs["R"])),TR(null,TD(null,"G:"),TD(null,this.inputs["G"])),TR(null,TD(null,"B:"),TD(null,this.inputs["B"])),TR(null,TD({className:"gap"},"#"),TD({className:"gap"},this.inputs["HEX"])))); +var _69={selector:SPAN({className:"selector"}),background:SPAN({className:"colorpanel"}),slider:SPAN({className:"slider"}),hue:SPAN({className:"strip"})}; +if(Prado.Browser().ie){ +var _70="filter:progid:DXImageTransform.Microsoft.AlphaImageLoader"; +_69["background"]=SPAN({className:"colorpanel",style:_70+"(src='"+_67["background.png"]+"' sizingMethod=scale);"}); +} +this.inputs=Object.extend(this.inputs,_69); +var _71=TABLE(null,TBODY(null,TR({className:"selection"},TD({className:"colors"},_69["selector"],_69["background"]),TD({className:"hue"},_69["slider"],_69["hue"]),TD({className:"inputs"},_68)),TR({className:"options"},TD({colSpan:3},this.buttons["OK"],this.buttons["Cancel"])))); +return DIV({className:this.options["ClassName"]+" FullColorPicker",id:_64+"_picker"},_71); +},initializeFullPicker:function(){ +var _72=Rico.Color.createFromHex(this.input.value); +this.inputs.oldColor.style.backgroundColor=_72.asHex(); +this.setColor(_72,true); +var i=0; +for(var _74 in this.inputs){ +Event.observe(this.inputs[_74],"change",this.onInputChanged.bindEvent(this,_74)); +i++; +if(i>6){ +break; +} +} +this.isMouseDownOnColor=false; +this.isMouseDownOnHue=false; +this._onColorMouseDown=this.onColorMouseDown.bind(this); +this._onHueMouseDown=this.onHueMouseDown.bind(this); +this._onMouseUp=this.onMouseUp.bind(this); +this._onMouseMove=this.onMouseMove.bind(this); +Event.observe(this.inputs.background,"mousedown",this._onColorMouseDown); +Event.observe(this.inputs.hue,"mousedown",this._onHueMouseDown); +Event.observe(document.body,"mouseup",this._onMouseUp); +if(!Prado.Browser().ie){ +Event.observe(document.body,"mousemove",this._onMouseMove); +} +Event.observe(this.buttons.Cancel,"click",this.hide.bindEvent(this,this.options["Mode"])); +Event.observe(this.buttons.OK,"click",this.onOKClicked.bind(this)); +},onColorMouseDown:function(ev){ +this.isMouseDownOnColor=true; +this.onMouseMove(ev); +},onHueMouseDown:function(ev){ +this.isMouseDownOnHue=true; +this.onMouseMove(ev); +},onMouseUp:function(ev){ +this.isMouseDownOnColor=false; +this.isMouseDownOnHue=false; +},onMouseMove:function(ev){ +if(this.isMouseDownOnColor){ +this.changeSV(ev); +} +if(this.isMouseDownOnHue){ +this.changeH(ev); +} +},changeSV:function(ev){ +var px=Event.pointerX(ev); +var py=Event.pointerY(ev); +var pos=Position.cumulativeOffset(this.inputs.background); +var x=this.truncate(px-pos[0],0,255); +var y=this.truncate(py-pos[1],0,255); +var h=this.truncate(this.inputs.H.value,0,360)/360; +var s=x/255; +var b=(255-y)/255; +var _79=new Rico.Color(); +_79.rgb=Rico.Color.HSBtoRGB(h,s,b); +this.inputs.selector.style.left=x+"px"; +this.inputs.selector.style.top=y+"px"; +this.inputs.currentColor.style.backgroundColor=_79.asHex(); +return this.setColor(_79); +},changeH:function(ev){ +var py=Event.pointerY(ev); +var pos=Position.cumulativeOffset(this.inputs.background); +var y=this.truncate(py-pos[1],0,255); +var h=(255-y)/255; +var s=parseInt(this.inputs.S.value)/100; +var b=parseInt(this.inputs.V.value)/100; +var _80=new Rico.Color(); +_80.rgb=Rico.Color.HSBtoRGB(h,s,b); +var hue=new Rico.Color(_80.rgb.r,_80.rgb.g,_80.rgb.b); +hue.setSaturation(1); +hue.setBrightness(1); +this.inputs.background.style.backgroundColor=hue.asHex(); +this.inputs.currentColor.style.backgroundColor=_80.asHex(); +this.inputs.slider.style.top=this.truncate(y,0,255)+"px"; +return this.setColor(_80); +},onOKClicked:function(ev){ +var r=this.truncate(this.inputs.R.value,0,255); +var g=this.truncate(this.inputs.G.value,0,255); +var b=this.truncate(this.inputs.B.value,0,255); +var _81=new Rico.Color(r,g,b); +this.updateColor(_81); +this.inputs.oldColor.style.backgroundColor=_81.asHex(); +this.hide(ev); +},onInputChanged:function(ev,_82){ +if(this.isMouseDownOnColor||isMouseDownOnHue){ +return; +} +switch(_82){ +case "H": +case "S": +case "V": +var h=this.truncate(this.inputs.H.value,0,360)/360; +var s=this.truncate(this.inputs.S.value,0,100)/100; +var b=this.truncate(this.inputs.V.value,0,100)/100; +var _83=new Rico.Color(); +_83.rgb=Rico.Color.HSBtoRGB(h,s,b); +return this.setColor(_83,true); +case "R": +case "G": +case "B": +var r=this.truncate(this.inputs.R.value,0,255); +var g=this.truncate(this.inputs.G.value,0,255); +var b=this.truncate(this.inputs.B.value,0,255); +var _83=new Rico.Color(r,g,b); +return this.setColor(_83,true); +case "HEX": +var _83=Rico.Color.createFromHex(this.inputs.HEX.value); +return this.setColor(_83,true); +} +},setColor:function(_84,_85){ +var hsb=_84.asHSB(); +this.inputs.H.value=parseInt(hsb.h*360); +this.inputs.S.value=parseInt(hsb.s*100); +this.inputs.V.value=parseInt(hsb.b*100); +this.inputs.R.value=_84.rgb.r; +this.inputs.G.value=_84.rgb.g; +this.inputs.B.value=_84.rgb.b; +this.inputs.HEX.value=_84.asHex().substring(1).toUpperCase(); +var _86=Prado.WebUI.TColorPicker.UIImages; +var _87=_84.isBright()?"removeClassName":"addClassName"; +Element[_87](this.inputs.selector,"target_white"); +if(_85){ +this.updateSelectors(_84); +} +},updateSelectors:function(_88){ +var hsb=_88.asHSB(); +var pos=[hsb.s*255,hsb.b*255,hsb.h*255]; +this.inputs.selector.style.left=this.truncate(pos[0],0,255)+"px"; +this.inputs.selector.style.top=this.truncate(255-pos[1],0,255)+"px"; +this.inputs.slider.style.top=this.truncate(255-pos[2],0,255)+"px"; +var hue=new Rico.Color(_88.rgb.r,_88.rgb.g,_88.rgb.b); +hue.setSaturation(1); +hue.setBrightness(1); +this.inputs.background.style.backgroundColor=hue.asHex(); +this.inputs.currentColor.style.backgroundColor=_88.asHex(); +},truncate:function(_89,min,max){ +_89=parseInt(_89); +return _89max?max:_89; +}}); + diff --git a/framework/Web/Javascripts/js/prado.js b/framework/Web/Javascripts/js/prado.js index 9dc93ce8..0ca9d306 100644 --- a/framework/Web/Javascripts/js/prado.js +++ b/framework/Web/Javascripts/js/prado.js @@ -1412,7 +1412,7 @@ if(args.length==0){ return Builder.node(tag,null); } if(args.length==1){ -return Builder.node(tag,args[1]); +return Builder.node(tag,args[0]); } if(args.length>1){ return Builder.node(tag,args.shift(),args); diff --git a/framework/Web/Javascripts/js/rico.js b/framework/Web/Javascripts/js/rico.js index a68f5952..0d3d0a32 100644 --- a/framework/Web/Javascripts/js/rico.js +++ b/framework/Web/Javascripts/js/rico.js @@ -229,251 +229,85 @@ this.titleBar.onclick=this.titleBarClicked.bindAsEventListener(this); this.titleBar.onmouseover=this.hover.bindAsEventListener(this); this.titleBar.onmouseout=this.unhover.bindAsEventListener(this); }}; -Rico.Color=Class.create(); -Rico.Color.prototype={initialize:function(red,_44,_45){ -this.rgb={r:red,g:_44,b:_45}; -},setRed:function(r){ -this.rgb.r=r; -},setGreen:function(g){ -this.rgb.g=g; -},setBlue:function(b){ -this.rgb.b=b; -},setHue:function(h){ -var hsb=this.asHSB(); -hsb.h=h; -this.rgb=Rico.Color.HSBtoRGB(hsb.h,hsb.s,hsb.b); -},setSaturation:function(s){ -var hsb=this.asHSB(); -hsb.s=s; -this.rgb=Rico.Color.HSBtoRGB(hsb.h,hsb.s,hsb.b); -},setBrightness:function(b){ -var hsb=this.asHSB(); -hsb.b=b; -this.rgb=Rico.Color.HSBtoRGB(hsb.h,hsb.s,hsb.b); -},darken:function(_51){ -var hsb=this.asHSB(); -this.rgb=Rico.Color.HSBtoRGB(hsb.h,hsb.s,Math.max(hsb.b-_51,0)); -},brighten:function(_52){ -var hsb=this.asHSB(); -this.rgb=Rico.Color.HSBtoRGB(hsb.h,hsb.s,Math.min(hsb.b+_52,1)); -},blend:function(_53){ -this.rgb.r=Math.floor((this.rgb.r+_53.rgb.r)/2); -this.rgb.g=Math.floor((this.rgb.g+_53.rgb.g)/2); -this.rgb.b=Math.floor((this.rgb.b+_53.rgb.b)/2); -},isBright:function(){ -var hsb=this.asHSB(); -return this.asHSB().b>0.5; -},isDark:function(){ -return !this.isBright(); -},asRGB:function(){ -return "rgb("+this.rgb.r+","+this.rgb.g+","+this.rgb.b+")"; -},asHex:function(){ -return "#"+this.rgb.r.toColorPart()+this.rgb.g.toColorPart()+this.rgb.b.toColorPart(); -},asHSB:function(){ -return Rico.Color.RGBtoHSB(this.rgb.r,this.rgb.g,this.rgb.b); -},toString:function(){ -return this.asHex(); -}}; -Rico.Color.createFromHex=function(_54){ -if(_54.indexOf("#")==0){ -_54=_54.substring(1); -} -var red=_54.substring(0,2); -var _55=_54.substring(2,4); -var _56=_54.substring(4,6); -return new Rico.Color(parseInt(red,16),parseInt(_55,16),parseInt(_56,16)); -}; -Rico.Color.createColorFromBackground=function(_57){ -var _58=RicoUtil.getElementsComputedStyle($(_57),"backgroundColor","background-color"); -if(_58=="transparent"&&_57.parent){ -return Rico.Color.createColorFromBackground(_57.parent); -} -if(_58==null){ -return new Rico.Color(255,255,255); -} -if(_58.indexOf("rgb(")==0){ -var _59=_58.substring(4,_58.length-1); -var _60=_59.split(","); -return new Rico.Color(parseInt(_60[0]),parseInt(_60[1]),parseInt(_60[2])); -}else{ -if(_58.indexOf("#")==0){ -var _61=parseInt(_58.substring(1,3),16); -var _62=parseInt(_58.substring(3,5),16); -var _63=parseInt(_58.substring(5),16); -return new Rico.Color(_61,_62,_63); -}else{ -return new Rico.Color(255,255,255); -} -} -}; -Rico.Color.HSBtoRGB=function(hue,_65,_66){ -var red=0; -var _67=0; -var _68=0; -if(_65==0){ -red=parseInt(_66*255+0.5); -_67=red; -_68=red; -}else{ -var h=(hue-Math.floor(hue))*6; -var f=h-Math.floor(h); -var p=_66*(1-_65); -var q=_66*(1-_65*f); -var t=_66*(1-(_65*(1-f))); -switch(parseInt(h)){ -case 0: -red=(_66*255+0.5); -_67=(t*255+0.5); -_68=(p*255+0.5); -break; -case 1: -red=(q*255+0.5); -_67=(_66*255+0.5); -_68=(p*255+0.5); -break; -case 2: -red=(p*255+0.5); -_67=(_66*255+0.5); -_68=(t*255+0.5); -break; -case 3: -red=(p*255+0.5); -_67=(q*255+0.5); -_68=(_66*255+0.5); -break; -case 4: -red=(t*255+0.5); -_67=(p*255+0.5); -_68=(_66*255+0.5); -break; -case 5: -red=(_66*255+0.5); -_67=(p*255+0.5); -_68=(q*255+0.5); -break; -} -} -return {r:parseInt(red),g:parseInt(_67),b:parseInt(_68)}; -}; -Rico.Color.RGBtoHSB=function(r,g,b){ -var hue; -var _73; -var _74; -var _75=(r>g)?r:g; -if(b>_75){ -_75=b; -} -var _76=(r"+el.innerHTML+""; -},_roundTopCorners:function(el,_91,_92){ -var _93=this._createCorner(_92); +this._roundBottomCorners(e,_46,_47); +} +},_renderBorder:function(el,_49){ +var _50="1px solid "+this._borderColor(_49); +var _51="border-left: "+_50; +var _52="border-right: "+_50; +var _53="style='"+_51+";"+_52+"'"; +el.innerHTML="
"+el.innerHTML+"
"; +},_roundTopCorners:function(el,_54,_55){ +var _56=this._createCorner(_55); for(var i=0;i=0;i--){ -_96.appendChild(this._createCornerSlice(_94,_95,i,"bottom")); +_59.appendChild(this._createCornerSlice(_57,_58,i,"bottom")); } el.style.paddingBottom=0; -el.appendChild(_96); -},_createCorner:function(_97){ -var _98=document.createElement("div"); -_98.style.backgroundColor=(this._isTransparent()?"transparent":_97); -return _98; -},_createCornerSlice:function(_99,_100,n,_102){ -var _103=document.createElement("span"); -var _104=_103.style; -_104.backgroundColor=_99; -_104.display="block"; -_104.height="1px"; -_104.overflow="hidden"; -_104.fontSize="1px"; -var _105=this._borderColor(_99,_100); +el.appendChild(_59); +},_createCorner:function(_60){ +var _61=document.createElement("div"); +_61.style.backgroundColor=(this._isTransparent()?"transparent":_60); +return _61; +},_createCornerSlice:function(_62,_63,n,_65){ +var _66=document.createElement("span"); +var _67=_66.style; +_67.backgroundColor=_62; +_67.display="block"; +_67.height="1px"; +_67.overflow="hidden"; +_67.fontSize="1px"; +var _68=this._borderColor(_62,_63); if(this.options.border&&n==0){ -_104.borderTopStyle="solid"; -_104.borderTopWidth="1px"; -_104.borderLeftWidth="0px"; -_104.borderRightWidth="0px"; -_104.borderBottomWidth="0px"; -_104.height="0px"; -_104.borderColor=_105; +_67.borderTopStyle="solid"; +_67.borderTopWidth="1px"; +_67.borderLeftWidth="0px"; +_67.borderRightWidth="0px"; +_67.borderBottomWidth="0px"; +_67.height="0px"; +_67.borderColor=_68; }else{ -if(_105){ -_104.borderColor=_105; -_104.borderStyle="solid"; -_104.borderWidth="0px 1px"; +if(_68){ +_67.borderColor=_68; +_67.borderStyle="solid"; +_67.borderWidth="0px 1px"; } } if(!this.options.compact&&(n==(this.options.numSlices-1))){ -_104.height="2px"; +_67.height="2px"; } -this._setMargin(_103,n,_102); -this._setBorder(_103,n,_102); -return _103; -},_setOptions:function(_106){ +this._setMargin(_66,n,_65); +this._setBorder(_66,n,_65); +return _66; +},_setOptions:function(_69){ this.options={corners:"all",color:"fromElement",bgColor:"fromParent",blend:true,border:false,compact:false}; -Object.extend(this.options,_106||{}); +Object.extend(this.options,_69||{}); this.options.numSlices=this.options.compact?2:4; if(this._isTransparent()){ this.options.blend=false; @@ -508,94 +342,94 @@ return "right"; } } return ""; -},_borderColor:function(_107,_108){ -if(_107=="transparent"){ -return _108; +},_borderColor:function(_70,_71){ +if(_70=="transparent"){ +return _71; }else{ if(this.options.border){ return this.options.border; }else{ if(this.options.blend){ -return this._blend(_108,_107); +return this._blend(_71,_70); }else{ return ""; } } } -},_setMargin:function(el,n,_109){ -var _110=this._marginSize(n); -var _111=_109=="top"?this._whichSideTop():this._whichSideBottom(); -if(_111=="left"){ -el.style.marginLeft=_110+"px"; +},_setMargin:function(el,n,_72){ +var _73=this._marginSize(n); +var _74=_72=="top"?this._whichSideTop():this._whichSideBottom(); +if(_74=="left"){ +el.style.marginLeft=_73+"px"; el.style.marginRight="0px"; }else{ -if(_111=="right"){ -el.style.marginRight=_110+"px"; +if(_74=="right"){ +el.style.marginRight=_73+"px"; el.style.marginLeft="0px"; }else{ -el.style.marginLeft=_110+"px"; -el.style.marginRight=_110+"px"; +el.style.marginLeft=_73+"px"; +el.style.marginRight=_73+"px"; } } -},_setBorder:function(el,n,_112){ -var _113=this._borderSize(n); -var _114=_112=="top"?this._whichSideTop():this._whichSideBottom(); -if(_114=="left"){ -el.style.borderLeftWidth=_113+"px"; +},_setBorder:function(el,n,_75){ +var _76=this._borderSize(n); +var _77=_75=="top"?this._whichSideTop():this._whichSideBottom(); +if(_77=="left"){ +el.style.borderLeftWidth=_76+"px"; el.style.borderRightWidth="0px"; }else{ -if(_114=="right"){ -el.style.borderRightWidth=_113+"px"; +if(_77=="right"){ +el.style.borderRightWidth=_76+"px"; el.style.borderLeftWidth="0px"; }else{ -el.style.borderLeftWidth=_113+"px"; -el.style.borderRightWidth=_113+"px"; +el.style.borderLeftWidth=_76+"px"; +el.style.borderRightWidth=_76+"px"; } } if(this.options.border!=false){ -el.style.borderLeftWidth=_113+"px"; +el.style.borderLeftWidth=_76+"px"; } -el.style.borderRightWidth=_113+"px"; +el.style.borderRightWidth=_76+"px"; },_marginSize:function(n){ if(this._isTransparent()){ return 0; } -var _115=[5,3,2,1]; -var _116=[3,2,1,0]; -var _117=[2,1]; -var _118=[1,0]; +var _78=[5,3,2,1]; +var _79=[3,2,1,0]; +var _80=[2,1]; +var _81=[1,0]; if(this.options.compact&&this.options.blend){ -return _118[n]; +return _81[n]; }else{ if(this.options.compact){ -return _117[n]; +return _80[n]; }else{ if(this.options.blend){ -return _116[n]; +return _79[n]; }else{ -return _115[n]; +return _78[n]; } } } },_borderSize:function(n){ -var _119=[5,3,2,1]; -var _120=[2,1,1,1]; -var _121=[1,0]; -var _122=[0,2,0,0]; +var _82=[5,3,2,1]; +var _83=[2,1,1,1]; +var _84=[1,0]; +var _85=[0,2,0,0]; if(this.options.compact&&(this.options.blend||this._isTransparent())){ return 1; }else{ if(this.options.compact){ -return _121[n]; +return _84[n]; }else{ if(this.options.blend){ -return _120[n]; +return _83[n]; }else{ if(this.options.border){ -return _122[n]; +return _85[n]; }else{ if(this._isTransparent()){ -return _119[n]; +return _82[n]; } } } @@ -633,14 +467,14 @@ if(window.Effect==undefined){ Effect={}; } Effect.SizeAndPosition=Class.create(); -Effect.SizeAndPosition.prototype={initialize:function(_127,x,y,w,h,_131,_132,_133){ -this.element=$(_127); +Effect.SizeAndPosition.prototype={initialize:function(_90,x,y,w,h,_95,_96,_97){ +this.element=$(_90); this.x=x; this.y=y; this.w=w; this.h=h; -this.duration=_131; -this.steps=_132; +this.duration=_95; +this.steps=_96; this.options=arguments[7]||{}; this.sizeAndPosition(); },sizeAndPosition:function(){ @@ -653,72 +487,72 @@ return; if(this.timer){ clearTimeout(this.timer); } -var _134=Math.round(this.duration/this.steps); -var _135=this.element.offsetLeft; -var _136=this.element.offsetTop; -var _137=this.element.offsetWidth; -var _138=this.element.offsetHeight; -this.x=(this.x)?this.x:_135; -this.y=(this.y)?this.y:_136; -this.w=(this.w)?this.w:_137; -this.h=(this.h)?this.h:_138; -var difX=this.steps>0?(this.x-_135)/this.steps:0; -var difY=this.steps>0?(this.y-_136)/this.steps:0; -var difW=this.steps>0?(this.w-_137)/this.steps:0; -var difH=this.steps>0?(this.h-_138)/this.steps:0; +var _98=Math.round(this.duration/this.steps); +var _99=this.element.offsetLeft; +var _100=this.element.offsetTop; +var _101=this.element.offsetWidth; +var _102=this.element.offsetHeight; +this.x=(this.x)?this.x:_99; +this.y=(this.y)?this.y:_100; +this.w=(this.w)?this.w:_101; +this.h=(this.h)?this.h:_102; +var difX=this.steps>0?(this.x-_99)/this.steps:0; +var difY=this.steps>0?(this.y-_100)/this.steps:0; +var difW=this.steps>0?(this.w-_101)/this.steps:0; +var difH=this.steps>0?(this.h-_102)/this.steps:0; this.moveBy(difX,difY); this.resizeBy(difW,difH); -this.duration-=_134; +this.duration-=_98; this.steps--; -this.timer=setTimeout(this.sizeAndPosition.bind(this),_134); +this.timer=setTimeout(this.sizeAndPosition.bind(this),_98); },isFinished:function(){ return this.steps<=0; },moveBy:function(difX,difY){ -var _143=this.element.offsetLeft; -var _144=this.element.offsetTop; -var _145=parseInt(difX); -var _146=parseInt(difY); -var _147=this.element.style; -if(_145!=0){ -_147.left=(_143+_145)+"px"; +var _107=this.element.offsetLeft; +var _108=this.element.offsetTop; +var _109=parseInt(difX); +var _110=parseInt(difY); +var _111=this.element.style; +if(_109!=0){ +_111.left=(_107+_109)+"px"; } -if(_146!=0){ -_147.top=(_144+_146)+"px"; +if(_110!=0){ +_111.top=(_108+_110)+"px"; } },resizeBy:function(difW,difH){ -var _148=this.element.offsetWidth; -var _149=this.element.offsetHeight; -var _150=parseInt(difW); -var _151=parseInt(difH); -var _152=this.element.style; -if(_150!=0){ -_152.width=(_148+_150)+"px"; +var _112=this.element.offsetWidth; +var _113=this.element.offsetHeight; +var _114=parseInt(difW); +var _115=parseInt(difH); +var _116=this.element.style; +if(_114!=0){ +_116.width=(_112+_114)+"px"; } -if(_151!=0){ -_152.height=(_149+_151)+"px"; +if(_115!=0){ +_116.height=(_113+_115)+"px"; } }}; Effect.Size=Class.create(); -Effect.Size.prototype={initialize:function(_153,w,h,_154,_155,_156){ -new Effect.SizeAndPosition(_153,null,null,w,h,_154,_155,_156); +Effect.Size.prototype={initialize:function(_117,w,h,_118,_119,_120){ +new Effect.SizeAndPosition(_117,null,null,w,h,_118,_119,_120); }}; Effect.Position=Class.create(); -Effect.Position.prototype={initialize:function(_157,x,y,_158,_159,_160){ -new Effect.SizeAndPosition(_157,x,y,null,null,_158,_159,_160); +Effect.Position.prototype={initialize:function(_121,x,y,_122,_123,_124){ +new Effect.SizeAndPosition(_121,x,y,null,null,_122,_123,_124); }}; Effect.Round=Class.create(); -Effect.Round.prototype={initialize:function(_161,_162,_163){ -var _164=document.getElementsByTagAndClassName(_161,_162); -for(var i=0;i<_164.length;i++){ -Rico.Corner.round(_164[i],_163); +Effect.Round.prototype={initialize:function(_125,_126,_127){ +var _128=document.getElementsByTagAndClassName(_125,_126); +for(var i=0;i<_128.length;i++){ +Rico.Corner.round(_128[i],_127); } }}; Effect.FadeTo=Class.create(); -Effect.FadeTo.prototype={initialize:function(_165,_166,_167,_168,_169){ -this.element=$(_165); -this.opacity=_166; -this.duration=_167; -this.steps=_168; +Effect.FadeTo.prototype={initialize:function(_129,_130,_131,_132,_133){ +this.element=$(_129); +this.opacity=_130; +this.duration=_131; +this.steps=_132; this.options=arguments[4]||{}; this.fadeTo(); },fadeTo:function(){ @@ -731,36 +565,36 @@ return; if(this.timer){ clearTimeout(this.timer); } -var _170=Math.round(this.duration/this.steps); -var _171=this.getElementOpacity(); -var _172=this.steps>0?(this.opacity-_171)/this.steps:0; -this.changeOpacityBy(_172); -this.duration-=_170; +var _134=Math.round(this.duration/this.steps); +var _135=this.getElementOpacity(); +var _136=this.steps>0?(this.opacity-_135)/this.steps:0; +this.changeOpacityBy(_136); +this.duration-=_134; this.steps--; -this.timer=setTimeout(this.fadeTo.bind(this),_170); +this.timer=setTimeout(this.fadeTo.bind(this),_134); },changeOpacityBy:function(v){ -var _174=this.getElementOpacity(); -var _175=Math.max(0,Math.min(_174+v,1)); -this.element.ricoOpacity=_175; -this.element.style.filter="alpha(opacity:"+Math.round(_175*100)+")"; -this.element.style.opacity=_175; +var _138=this.getElementOpacity(); +var _139=Math.max(0,Math.min(_138+v,1)); +this.element.ricoOpacity=_139; +this.element.style.filter="alpha(opacity:"+Math.round(_139*100)+")"; +this.element.style.opacity=_139; },isFinished:function(){ return this.steps<=0; },getElementOpacity:function(){ if(this.element.ricoOpacity==undefined){ -var _176=RicoUtil.getElementsComputedStyle(this.element,"opacity"); -this.element.ricoOpacity=_176!=undefined?_176:1; +var _140=RicoUtil.getElementsComputedStyle(this.element,"opacity"); +this.element.ricoOpacity=_140!=undefined?_140:1; } return parseFloat(this.element.ricoOpacity); }}; Effect.AccordionSize=Class.create(); -Effect.AccordionSize.prototype={initialize:function(e1,e2,_179,end,_181,_182,_183){ +Effect.AccordionSize.prototype={initialize:function(e1,e2,_143,end,_145,_146,_147){ this.e1=$(e1); this.e2=$(e2); -this.start=_179; +this.start=_143; this.end=end; -this.duration=_181; -this.steps=_182; +this.duration=_145; +this.steps=_146; this.options=arguments[6]||{}; this.accordionSize(); },accordionSize:function(){ @@ -775,35 +609,35 @@ return; if(this.timer){ clearTimeout(this.timer); } -var _184=Math.round(this.duration/this.steps); +var _148=Math.round(this.duration/this.steps); var diff=this.steps>0?(parseInt(this.e1.offsetHeight)-this.start)/this.steps:0; this.resizeBy(diff); -this.duration-=_184; +this.duration-=_148; this.steps--; -this.timer=setTimeout(this.accordionSize.bind(this),_184); +this.timer=setTimeout(this.accordionSize.bind(this),_148); },isFinished:function(){ return this.steps<=0; },resizeBy:function(diff){ -var _186=this.e1.offsetHeight; -var _187=this.e2.offsetHeight; -var _188=parseInt(diff); +var _150=this.e1.offsetHeight; +var _151=this.e2.offsetHeight; +var _152=parseInt(diff); if(diff!=0){ -this.e1.style.height=(_186-_188)+"px"; -this.e2.style.height=(_187+_188)+"px"; +this.e1.style.height=(_150-_152)+"px"; +this.e2.style.height=(_151+_152)+"px"; } }}; if(window.Effect==undefined){ Effect={}; } Effect.SizeAndPosition=Class.create(); -Effect.SizeAndPosition.prototype={initialize:function(_189,x,y,w,h,_190,_191,_192){ -this.element=$(_189); +Effect.SizeAndPosition.prototype={initialize:function(_153,x,y,w,h,_154,_155,_156){ +this.element=$(_153); this.x=x; this.y=y; this.w=w; this.h=h; -this.duration=_190; -this.steps=_191; +this.duration=_154; +this.steps=_155; this.options=arguments[7]||{}; this.sizeAndPosition(); },sizeAndPosition:function(){ @@ -816,72 +650,72 @@ return; if(this.timer){ clearTimeout(this.timer); } -var _193=Math.round(this.duration/this.steps); -var _194=this.element.offsetLeft; -var _195=this.element.offsetTop; -var _196=this.element.offsetWidth; -var _197=this.element.offsetHeight; -this.x=(this.x)?this.x:_194; -this.y=(this.y)?this.y:_195; -this.w=(this.w)?this.w:_196; -this.h=(this.h)?this.h:_197; -var difX=this.steps>0?(this.x-_194)/this.steps:0; -var difY=this.steps>0?(this.y-_195)/this.steps:0; -var difW=this.steps>0?(this.w-_196)/this.steps:0; -var difH=this.steps>0?(this.h-_197)/this.steps:0; +var _157=Math.round(this.duration/this.steps); +var _158=this.element.offsetLeft; +var _159=this.element.offsetTop; +var _160=this.element.offsetWidth; +var _161=this.element.offsetHeight; +this.x=(this.x)?this.x:_158; +this.y=(this.y)?this.y:_159; +this.w=(this.w)?this.w:_160; +this.h=(this.h)?this.h:_161; +var difX=this.steps>0?(this.x-_158)/this.steps:0; +var difY=this.steps>0?(this.y-_159)/this.steps:0; +var difW=this.steps>0?(this.w-_160)/this.steps:0; +var difH=this.steps>0?(this.h-_161)/this.steps:0; this.moveBy(difX,difY); this.resizeBy(difW,difH); -this.duration-=_193; +this.duration-=_157; this.steps--; -this.timer=setTimeout(this.sizeAndPosition.bind(this),_193); +this.timer=setTimeout(this.sizeAndPosition.bind(this),_157); },isFinished:function(){ return this.steps<=0; },moveBy:function(difX,difY){ -var _198=this.element.offsetLeft; -var _199=this.element.offsetTop; -var _200=parseInt(difX); -var _201=parseInt(difY); -var _202=this.element.style; -if(_200!=0){ -_202.left=(_198+_200)+"px"; +var _162=this.element.offsetLeft; +var _163=this.element.offsetTop; +var _164=parseInt(difX); +var _165=parseInt(difY); +var _166=this.element.style; +if(_164!=0){ +_166.left=(_162+_164)+"px"; } -if(_201!=0){ -_202.top=(_199+_201)+"px"; +if(_165!=0){ +_166.top=(_163+_165)+"px"; } },resizeBy:function(difW,difH){ -var _203=this.element.offsetWidth; -var _204=this.element.offsetHeight; -var _205=parseInt(difW); -var _206=parseInt(difH); -var _207=this.element.style; -if(_205!=0){ -_207.width=(_203+_205)+"px"; +var _167=this.element.offsetWidth; +var _168=this.element.offsetHeight; +var _169=parseInt(difW); +var _170=parseInt(difH); +var _171=this.element.style; +if(_169!=0){ +_171.width=(_167+_169)+"px"; } -if(_206!=0){ -_207.height=(_204+_206)+"px"; +if(_170!=0){ +_171.height=(_168+_170)+"px"; } }}; Effect.Size=Class.create(); -Effect.Size.prototype={initialize:function(_208,w,h,_209,_210,_211){ -new Effect.SizeAndPosition(_208,null,null,w,h,_209,_210,_211); +Effect.Size.prototype={initialize:function(_172,w,h,_173,_174,_175){ +new Effect.SizeAndPosition(_172,null,null,w,h,_173,_174,_175); }}; Effect.Position=Class.create(); -Effect.Position.prototype={initialize:function(_212,x,y,_213,_214,_215){ -new Effect.SizeAndPosition(_212,x,y,null,null,_213,_214,_215); +Effect.Position.prototype={initialize:function(_176,x,y,_177,_178,_179){ +new Effect.SizeAndPosition(_176,x,y,null,null,_177,_178,_179); }}; Effect.Round=Class.create(); -Effect.Round.prototype={initialize:function(_216,_217,_218){ -var _219=document.getElementsByTagAndClassName(_216,_217); -for(var i=0;i<_219.length;i++){ -Rico.Corner.round(_219[i],_218); +Effect.Round.prototype={initialize:function(_180,_181,_182){ +var _183=document.getElementsByTagAndClassName(_180,_181); +for(var i=0;i<_183.length;i++){ +Rico.Corner.round(_183[i],_182); } }}; Effect.FadeTo=Class.create(); -Effect.FadeTo.prototype={initialize:function(_220,_221,_222,_223,_224){ -this.element=$(_220); -this.opacity=_221; -this.duration=_222; -this.steps=_223; +Effect.FadeTo.prototype={initialize:function(_184,_185,_186,_187,_188){ +this.element=$(_184); +this.opacity=_185; +this.duration=_186; +this.steps=_187; this.options=arguments[4]||{}; this.fadeTo(); },fadeTo:function(){ @@ -894,36 +728,36 @@ return; if(this.timer){ clearTimeout(this.timer); } -var _225=Math.round(this.duration/this.steps); -var _226=this.getElementOpacity(); -var _227=this.steps>0?(this.opacity-_226)/this.steps:0; -this.changeOpacityBy(_227); -this.duration-=_225; +var _189=Math.round(this.duration/this.steps); +var _190=this.getElementOpacity(); +var _191=this.steps>0?(this.opacity-_190)/this.steps:0; +this.changeOpacityBy(_191); +this.duration-=_189; this.steps--; -this.timer=setTimeout(this.fadeTo.bind(this),_225); +this.timer=setTimeout(this.fadeTo.bind(this),_189); },changeOpacityBy:function(v){ -var _228=this.getElementOpacity(); -var _229=Math.max(0,Math.min(_228+v,1)); -this.element.ricoOpacity=_229; -this.element.style.filter="alpha(opacity:"+Math.round(_229*100)+")"; -this.element.style.opacity=_229; +var _192=this.getElementOpacity(); +var _193=Math.max(0,Math.min(_192+v,1)); +this.element.ricoOpacity=_193; +this.element.style.filter="alpha(opacity:"+Math.round(_193*100)+")"; +this.element.style.opacity=_193; },isFinished:function(){ return this.steps<=0; },getElementOpacity:function(){ if(this.element.ricoOpacity==undefined){ -var _230=RicoUtil.getElementsComputedStyle(this.element,"opacity"); -this.element.ricoOpacity=_230!=undefined?_230:1; +var _194=RicoUtil.getElementsComputedStyle(this.element,"opacity"); +this.element.ricoOpacity=_194!=undefined?_194:1; } return parseFloat(this.element.ricoOpacity); }}; Effect.AccordionSize=Class.create(); -Effect.AccordionSize.prototype={initialize:function(e1,e2,_231,end,_232,_233,_234){ +Effect.AccordionSize.prototype={initialize:function(e1,e2,_195,end,_196,_197,_198){ this.e1=$(e1); this.e2=$(e2); -this.start=_231; +this.start=_195; this.end=end; -this.duration=_232; -this.steps=_233; +this.duration=_196; +this.steps=_197; this.options=arguments[6]||{}; this.accordionSize(); },accordionSize:function(){ @@ -938,33 +772,33 @@ return; if(this.timer){ clearTimeout(this.timer); } -var _235=Math.round(this.duration/this.steps); +var _199=Math.round(this.duration/this.steps); var diff=this.steps>0?(parseInt(this.e1.offsetHeight)-this.start)/this.steps:0; this.resizeBy(diff); -this.duration-=_235; +this.duration-=_199; this.steps--; -this.timer=setTimeout(this.accordionSize.bind(this),_235); +this.timer=setTimeout(this.accordionSize.bind(this),_199); },isFinished:function(){ return this.steps<=0; },resizeBy:function(diff){ -var _236=this.e1.offsetHeight; -var _237=this.e2.offsetHeight; -var _238=parseInt(diff); +var _200=this.e1.offsetHeight; +var _201=this.e2.offsetHeight; +var _202=parseInt(diff); if(diff!=0){ -this.e1.style.height=(_236-_238)+"px"; -this.e2.style.height=(_237+_238)+"px"; +this.e1.style.height=(_200-_202)+"px"; +this.e2.style.height=(_201+_202)+"px"; } }}; Rico.LiveGridMetaData=Class.create(); -Rico.LiveGridMetaData.prototype={initialize:function(_239,_240,_241,_242){ -this.pageSize=_239; -this.totalRows=_240; -this.setOptions(_242); +Rico.LiveGridMetaData.prototype={initialize:function(_203,_204,_205,_206){ +this.pageSize=_203; +this.totalRows=_204; +this.setOptions(_206); this.ArrowHeight=16; -this.columnCount=_241; -},setOptions:function(_243){ +this.columnCount=_205; +},setOptions:function(_207){ this.options={largeBufferSize:7,nearLimitFactor:0.2}; -Object.extend(this.options,_243||{}); +Object.extend(this.options,_207||{}); },getPageSize:function(){ return this.pageSize; },getTotalRows:function(){ @@ -977,14 +811,14 @@ return parseInt(this.options.largeBufferSize*this.pageSize); return parseInt(this.getLargeBufferSize()*this.options.nearLimitFactor); }}; Rico.LiveGridScroller=Class.create(); -Rico.LiveGridScroller.prototype={initialize:function(_244,_245){ +Rico.LiveGridScroller.prototype={initialize:function(_208,_209){ this.isIE=navigator.userAgent.toLowerCase().indexOf("msie")>=0; -this.liveGrid=_244; -this.metaData=_244.metaData; +this.liveGrid=_208; +this.metaData=_208.metaData; this.createScrollBar(); this.scrollTimeout=null; this.lastScrollPos=0; -this.viewPort=_245; +this.viewPort=_209; this.rows=new Array(); },isUnPlugged:function(){ return this.scrollerDiv.onscroll==null; @@ -996,29 +830,29 @@ this.scrollerDiv.onscroll=null; if(!this.isIE){ return; } -var _246=$(this.liveGrid.tableId+"_header"); -if(_246){ -_246.rows[0].cells[0].style.width=(_246.rows[0].cells[0].offsetWidth+1)+"px"; +var _210=$(this.liveGrid.tableId+"_header"); +if(_210){ +_210.rows[0].cells[0].style.width=(_210.rows[0].cells[0].offsetWidth+1)+"px"; } },createScrollBar:function(){ -var _247=this.liveGrid.viewPort.visibleHeight(); +var _211=this.liveGrid.viewPort.visibleHeight(); this.scrollerDiv=document.createElement("div"); -var _248=this.scrollerDiv.style; -_248.borderRight=this.liveGrid.options.scrollerBorderRight; -_248.position="relative"; -_248.left=this.isIE?"-6px":"-3px"; -_248.width="19px"; -_248.height=_247+"px"; -_248.overflow="auto"; +var _212=this.scrollerDiv.style; +_212.borderRight=this.liveGrid.options.scrollerBorderRight; +_212.position="relative"; +_212.left=this.isIE?"-6px":"-3px"; +_212.width="19px"; +_212.height=_211+"px"; +_212.overflow="auto"; this.heightDiv=document.createElement("div"); this.heightDiv.style.width="1px"; -this.heightDiv.style.height=parseInt(_247*this.metaData.getTotalRows()/this.metaData.getPageSize())+"px"; +this.heightDiv.style.height=parseInt(_211*this.metaData.getTotalRows()/this.metaData.getPageSize())+"px"; this.scrollerDiv.appendChild(this.heightDiv); this.scrollerDiv.onscroll=this.handleScroll.bindAsEventListener(this); -var _249=this.liveGrid.table; -_249.parentNode.parentNode.insertBefore(this.scrollerDiv,_249.parentNode.nextSibling); -var _250=this.isIE?"mousewheel":"DOMMouseScroll"; -Event.observe(_249,_250,function(evt){ +var _213=this.liveGrid.table; +_213.parentNode.parentNode.insertBefore(this.scrollerDiv,_213.parentNode.nextSibling); +var _214=this.isIE?"mousewheel":"DOMMouseScroll"; +Event.observe(_213,_214,function(evt){ if(evt.wheelDelta>=0||evt.detail<0){ this.scrollerDiv.scrollTop-=(2*this.viewPort.rowHeight); }else{ @@ -1027,26 +861,26 @@ this.scrollerDiv.scrollTop+=(2*this.viewPort.rowHeight); this.handleScroll(false); }.bindAsEventListener(this),false); },updateSize:function(){ -var _252=this.liveGrid.table; -var _253=this.viewPort.visibleHeight(); -this.heightDiv.style.height=parseInt(_253*this.metaData.getTotalRows()/this.metaData.getPageSize())+"px"; -},rowToPixel:function(_254){ -return (_254/this.metaData.getTotalRows())*this.heightDiv.offsetHeight; -},moveScroll:function(_255){ -this.scrollerDiv.scrollTop=this.rowToPixel(_255); +var _216=this.liveGrid.table; +var _217=this.viewPort.visibleHeight(); +this.heightDiv.style.height=parseInt(_217*this.metaData.getTotalRows()/this.metaData.getPageSize())+"px"; +},rowToPixel:function(_218){ +return (_218/this.metaData.getTotalRows())*this.heightDiv.offsetHeight; +},moveScroll:function(_219){ +this.scrollerDiv.scrollTop=this.rowToPixel(_219); if(this.metaData.options.onscroll){ -this.metaData.options.onscroll(this.liveGrid,_255); +this.metaData.options.onscroll(this.liveGrid,_219); } },handleScroll:function(){ if(this.scrollTimeout){ clearTimeout(this.scrollTimeout); } -var _256=this.lastScrollPos-this.scrollerDiv.scrollTop; -if(_256!=0){ +var _220=this.lastScrollPos-this.scrollerDiv.scrollTop; +if(_220!=0){ var r=this.scrollerDiv.scrollTop%this.viewPort.rowHeight; if(r!=0){ this.unplug(); -if(_256<0){ +if(_220<0){ this.scrollerDiv.scrollTop+=(this.viewPort.rowHeight-r); }else{ this.scrollerDiv.scrollTop-=r; @@ -1054,11 +888,11 @@ this.scrollerDiv.scrollTop-=r; this.plugin(); } } -var _257=parseInt(this.scrollerDiv.scrollTop/this.viewPort.rowHeight); -this.liveGrid.requestContentRefresh(_257); +var _222=parseInt(this.scrollerDiv.scrollTop/this.viewPort.rowHeight); +this.liveGrid.requestContentRefresh(_222); this.viewPort.scrollTo(this.scrollerDiv.scrollTop); if(this.metaData.options.onscroll){ -this.metaData.options.onscroll(this.liveGrid,_257); +this.metaData.options.onscroll(this.liveGrid,_222); } this.scrollTimeout=setTimeout(this.scrollIdle.bind(this),1200); this.lastScrollPos=this.scrollerDiv.scrollTop; @@ -1068,15 +902,15 @@ this.metaData.options.onscrollidle(); } }}; Rico.LiveGridBuffer=Class.create(); -Rico.LiveGridBuffer.prototype={initialize:function(_258,_259){ +Rico.LiveGridBuffer.prototype={initialize:function(_223,_224){ this.startPos=0; this.size=0; -this.metaData=_258; +this.metaData=_223; this.rows=new Array(); this.updateInProgress=false; -this.viewPort=_259; -this.maxBufferSize=_258.getLargeBufferSize()*2; -this.maxFetchSize=_258.getLargeBufferSize(); +this.viewPort=_224; +this.maxBufferSize=_223.getLargeBufferSize()*2; +this.maxFetchSize=_223.getLargeBufferSize(); this.lastOffset=0; },getBlankRow:function(){ if(!this.blankRow){ @@ -1086,141 +920,141 @@ this.blankRow[i]=" "; } } return this.blankRow; -},loadRows:function(_260){ -var _261=_260.getElementsByTagName("rows")[0]; -this.updateUI=_261.getAttribute("update_ui")=="true"; -var _262=new Array(); -var trs=_261.getElementsByTagName("tr"); +},loadRows:function(_225){ +var _226=_225.getElementsByTagName("rows")[0]; +this.updateUI=_226.getAttribute("update_ui")=="true"; +var _227=new Array(); +var trs=_226.getElementsByTagName("tr"); for(var i=0;ithis.startPos){ -if(this.startPos+this.rows.length<_270){ -this.rows=_271; -this.startPos=_270; +if(_235>this.startPos){ +if(this.startPos+this.rows.length<_235){ +this.rows=_236; +this.startPos=_235; }else{ -this.rows=this.rows.concat(_271.slice(0,_271.length)); +this.rows=this.rows.concat(_236.slice(0,_236.length)); if(this.rows.length>this.maxBufferSize){ -var _272=this.rows.length; +var _237=this.rows.length; this.rows=this.rows.slice(this.rows.length-this.maxBufferSize,this.rows.length); -this.startPos=this.startPos+(_272-this.rows.length); +this.startPos=this.startPos+(_237-this.rows.length); } } }else{ -if(_270+_271.lengththis.maxBufferSize){ this.rows=this.rows.slice(0,this.maxBufferSize); } } -this.startPos=_270; +this.startPos=_235; } this.size=this.rows.length; },clear:function(){ this.rows=new Array(); this.startPos=0; this.size=0; -},isOverlapping:function(_273,size){ -return ((_273=this.startPos)&&(_275+this.metaData.getPageSize()<=this.endPos()); -},isNearingTopLimit:function(_276){ -return _276-this.startPos=this.startPos)&&(_240+this.metaData.getPageSize()<=this.endPos()); +},isNearingTopLimit:function(_241){ +return _241-this.startPos=this.startPos){ -var _282=this.maxFetchSize+_280; -if(_282>this.metaData.totalRows){ -_282=this.metaData.totalRows; -} -_281=_282-_280; -if(_280==0&&_281=this.startPos){ +var _247=this.maxFetchSize+_245; +if(_247>this.metaData.totalRows){ +_247=this.metaData.totalRows; +} +_246=_247-_245; +if(_245==0&&_246this.maxFetchSize){ -_281=this.maxFetchSize; +var _246=this.startPos-_245; +if(_246>this.maxFetchSize){ +_246=this.maxFetchSize; } } -return _281; -},getFetchOffset:function(_283){ -var _284=_283; -if(_283>this.startPos){ -_284=(_283>this.endPos())?_283:this.endPos(); +return _246; +},getFetchOffset:function(_248){ +var _249=_248; +if(_248>this.startPos){ +_249=(_248>this.endPos())?_248:this.endPos(); }else{ -if(_283+this.maxFetchSize>=this.startPos){ -var _284=this.startPos-this.maxFetchSize; -if(_284<0){ -_284=0; +if(_248+this.maxFetchSize>=this.startPos){ +var _249=this.startPos-this.maxFetchSize; +if(_249<0){ +_249=0; } } } -this.lastOffset=_284; -return _284; -},getRows:function(_285,_286){ -var _287=_285-this.startPos; -var _288=_287+_286; -if(_288>this.size){ -_288=this.size; +this.lastOffset=_249; +return _249; +},getRows:function(_250,_251){ +var _252=_250-this.startPos; +var _253=_252+_251; +if(_253>this.size){ +_253=this.size; } -var _289=new Array(); -var _290=0; -for(var i=_287;i<_288;i++){ -_289[_290++]=this.rows[i]; +var _254=new Array(); +var _255=0; +for(var i=_252;i<_253;i++){ +_254[_255++]=this.rows[i]; } -return _289; +return _254; },convertSpaces:function(s){ return s.split(" ").join(" "); }}; Rico.GridViewPort=Class.create(); -Rico.GridViewPort.prototype={initialize:function(_291,_292,_293,_294,_295){ +Rico.GridViewPort.prototype={initialize:function(_256,_257,_258,_259,_260){ this.lastDisplayedStartPos=0; -this.div=_291.parentNode; -this.table=_291; -this.rowHeight=_292; -this.div.style.height=this.rowHeight*_293; +this.div=_256.parentNode; +this.table=_256; +this.rowHeight=_257; +this.div.style.height=this.rowHeight*_258; this.div.style.overflow="hidden"; -this.buffer=_294; -this.liveGrid=_295; -this.visibleRows=_293+1; +this.buffer=_259; +this.liveGrid=_260; +this.visibleRows=_258+1; this.lastPixelOffset=0; this.startPos=0; -},populateRow:function(_296,row){ +},populateRow:function(_261,row){ for(var j=0;j_297; -var _299=_298?this.buffer.startPos:_297; -var _300=(this.buffer.startPos+this.buffer.size<_297+this.visibleRows)?this.buffer.startPos+this.buffer.size:_297+this.visibleRows; -var _301=_300-_299; -var rows=this.buffer.getRows(_299,_301); -var _303=this.visibleRows-_301; -var _304=_298?0:_301; -var _305=_298?_303:0; +var _263=this.buffer.startPos>_262; +var _264=_263?this.buffer.startPos:_262; +var _265=(this.buffer.startPos+this.buffer.size<_262+this.visibleRows)?this.buffer.startPos+this.buffer.size:_262+this.visibleRows; +var _266=_265-_264; +var rows=this.buffer.getRows(_264,_266); +var _268=this.visibleRows-_266; +var _269=_263?0:_266; +var _270=_263?_268:0; for(var i=0;i0; -this.lastRowPos=_297; +this.isPartialBlank=_268>0; +this.lastRowPos=_262; this.liveGrid.table.className=this.liveGrid.options.tableClass; -var _306=this.liveGrid.options.onRefreshComplete; -if(_306!=null){ -_306(); +var _271=this.liveGrid.options.onRefreshComplete; +if(_271!=null){ +_271(); } -},scrollTo:function(_307){ -if(this.lastPixelOffset==_307){ +},scrollTo:function(_272){ +if(this.lastPixelOffset==_272){ return; } -this.refreshContents(parseInt(_307/this.rowHeight)); -this.div.scrollTop=_307%this.rowHeight; -this.lastPixelOffset=_307; +this.refreshContents(parseInt(_272/this.rowHeight)); +this.div.scrollTop=_272%this.rowHeight; +this.lastPixelOffset=_272; },visibleHeight:function(){ return parseInt(RicoUtil.getElementsComputedStyle(this.div,"height")); }}; Rico.LiveGridRequest=Class.create(); -Rico.LiveGridRequest.prototype={initialize:function(_308,_309){ -this.requestOffset=_308; +Rico.LiveGridRequest.prototype={initialize:function(_273,_274){ +this.requestOffset=_273; }}; Rico.LiveGrid=Class.create(); -Rico.LiveGrid.prototype={initialize:function(_310,_311,_312,url,_314,_315){ -this.options={tableClass:$(_310).className,loadingClass:$(_310).className,scrollerBorderRight:"1px solid #ababab",bufferTimeout:20000,sortAscendImg:"images/sort_asc.gif",sortDescendImg:"images/sort_desc.gif",sortImageWidth:9,sortImageHeight:5,ajaxSortURLParms:[],onRefreshComplete:null,requestParameters:null,inlineStyles:true}; -Object.extend(this.options,_314||{}); +Rico.LiveGrid.prototype={initialize:function(_275,_276,_277,url,_279,_280){ +this.options={tableClass:$(_275).className,loadingClass:$(_275).className,scrollerBorderRight:"1px solid #ababab",bufferTimeout:20000,sortAscendImg:"images/sort_asc.gif",sortDescendImg:"images/sort_desc.gif",sortImageWidth:9,sortImageHeight:5,ajaxSortURLParms:[],onRefreshComplete:null,requestParameters:null,inlineStyles:true}; +Object.extend(this.options,_279||{}); this.ajaxOptions={parameters:null}; -Object.extend(this.ajaxOptions,_315||{}); -this.tableId=_310; -this.table=$(_310); +Object.extend(this.ajaxOptions,_280||{}); +this.tableId=_275; +this.table=$(_275); this.addLiveGridHtml(); -var _316=this.table.rows[0].cells.length; -this.metaData=new Rico.LiveGridMetaData(_311,_312,_316,_314); +var _281=this.table.rows[0].cells.length; +this.metaData=new Rico.LiveGridMetaData(_276,_277,_281,_279); this.buffer=new Rico.LiveGridBuffer(this.metaData); -var _317=this.table.rows.length; -this.viewPort=new Rico.GridViewPort(this.table,this.table.offsetHeight/_317,_311,this.buffer,this); +var _282=this.table.rows.length; +this.viewPort=new Rico.GridViewPort(this.table,this.table.offsetHeight/_282,_276,this.buffer,this); this.scroller=new Rico.LiveGridScroller(this,this.viewPort); this.options.sortHandler=this.sortHandler.bind(this); -if($(_310+"_header")){ -this.sort=new Rico.LiveGridSort(_310+"_header",this.options); +if($(_275+"_header")){ +this.sort=new Rico.LiveGridSort(_275+"_header",this.options); } this.processingRequest=null; this.unprocessedRequest=null; this.initAjax(url); if(this.options.prefetchBuffer||this.options.prefetchOffset>0){ -var _318=0; +var _283=0; if(this.options.offset){ -_318=this.options.offset; -this.scroller.moveScroll(_318); -this.viewPort.scrollTo(this.scroller.rowToPixel(_318)); +_283=this.options.offset; +this.scroller.moveScroll(_283); +this.viewPort.scrollTo(this.scroller.rowToPixel(_283)); } if(this.options.sortCol){ -this.sortCol=_314.sortCol; -this.sortDir=_314.sortDir; +this.sortCol=_279.sortCol; +this.sortDir=_279.sortDir; } -this.requestContentRefresh(_318); +this.requestContentRefresh(_283); } },addLiveGridHtml:function(){ if(this.table.getElementsByTagName("thead").length>0){ -var _319=this.table.cloneNode(true); -_319.setAttribute("id",this.tableId+"_header"); -_319.setAttribute("class",this.table.className+"_header"); -for(var i=0;i<_319.tBodies.length;i++){ -_319.removeChild(_319.tBodies[i]); +var _284=this.table.cloneNode(true); +_284.setAttribute("id",this.tableId+"_header"); +_284.setAttribute("class",this.table.className+"_header"); +for(var i=0;i<_284.tBodies.length;i++){ +_284.removeChild(_284.tBodies[i]); } this.table.deleteTHead(); -this.table.parentNode.insertBefore(_319,this.table); +this.table.parentNode.insertBefore(_284,this.table); } new Insertion.Before(this.table,"
"); this.table.previousSibling.appendChild(this.table); @@ -1335,14 +1169,14 @@ this.table.previousSibling.appendChild(this.table); this.scroller.moveScroll(0); this.buffer.clear(); this.viewPort.clearContents(); -},sortHandler:function(_320){ -this.sortCol=_320.name; -this.sortDir=_320.currentSort; +},sortHandler:function(_285){ +this.sortCol=_285.name; +this.sortDir=_285.currentSort; this.resetContents(); this.requestContentRefresh(0); -},setTotalRows:function(_321){ +},setTotalRows:function(_286){ this.resetContents(); -this.metaData.setTotalRows(_321); +this.metaData.setTotalRows(_286); this.scroller.updateSize(); },initAjax:function(url){ ajaxEngine.registerRequest(this.tableId+"_request",url); @@ -1351,29 +1185,29 @@ ajaxEngine.registerAjaxObject(this.tableId+"_updater",this); },handleTimedOut:function(){ this.processingRequest=null; this.processQueuedRequest(); -},fetchBuffer:function(_322){ -if(this.buffer.isInRange(_322)&&!this.buffer.isNearingLimit(_322)){ +},fetchBuffer:function(_287){ +if(this.buffer.isInRange(_287)&&!this.buffer.isNearingLimit(_287)){ return; } if(this.processingRequest){ -this.unprocessedRequest=new Rico.LiveGridRequest(_322); +this.unprocessedRequest=new Rico.LiveGridRequest(_287); return; } -var _323=this.buffer.getFetchOffset(_322); -this.processingRequest=new Rico.LiveGridRequest(_322); -this.processingRequest.bufferOffset=_323; -var _324=this.buffer.getFetchSize(_322); -var _325=false; -var _326; +var _288=this.buffer.getFetchOffset(_287); +this.processingRequest=new Rico.LiveGridRequest(_287); +this.processingRequest.bufferOffset=_288; +var _289=this.buffer.getFetchSize(_287); +var _290=false; +var _291; if(this.options.requestParameters){ -_326=this._createQueryString(this.options.requestParameters,0); +_291=this._createQueryString(this.options.requestParameters,0); } -_326=(_326==null)?"":_326+"&"; -_326=_326+"id="+this.tableId+"&page_size="+_324+"&offset="+_323; +_291=(_291==null)?"":_291+"&"; +_291=_291+"id="+this.tableId+"&page_size="+_289+"&offset="+_288; if(this.sortCol){ -_326=_326+"&sort_col="+escape(this.sortCol)+"&sort_dir="+this.sortDir; +_291=_291+"&sort_col="+escape(this.sortCol)+"&sort_dir="+this.sortDir; } -this.ajaxOptions.parameters=_326; +this.ajaxOptions.parameters=_291; ajaxEngine.sendRequest(this.tableId+"_request",this.ajaxOptions); this.timeoutHandler=setTimeout(this.handleTimedOut.bind(this),this.options.bufferTimeout); },setRequestParams:function(){ @@ -1381,12 +1215,12 @@ this.options.requestParameters=[]; for(var i=0;i"+"   "; } },headerCellClicked:function(evt){ -var _343=evt.target?evt.target:evt.srcElement; -var _344=_343.id; -var _345=parseInt(_344.substring(_344.lastIndexOf("_")+1)); -var _346=this.getSortedColumnIndex(); -if(_346!=-1){ -if(_346!=_345){ -this.removeColumnSort(_346); -this.setColumnSort(_345,Rico.TableColumn.SORT_ASC); +var _308=evt.target?evt.target:evt.srcElement; +var _309=_308.id; +var _310=parseInt(_309.substring(_309.lastIndexOf("_")+1)); +var _311=this.getSortedColumnIndex(); +if(_311!=-1){ +if(_311!=_310){ +this.removeColumnSort(_311); +this.setColumnSort(_310,Rico.TableColumn.SORT_ASC); }else{ -this.toggleColumnSort(_346); +this.toggleColumnSort(_311); } }else{ -this.setColumnSort(_345,Rico.TableColumn.SORT_ASC); +this.setColumnSort(_310,Rico.TableColumn.SORT_ASC); } if(this.options.sortHandler){ -this.options.sortHandler(this.options.columns[_345]); +this.options.sortHandler(this.options.columns[_310]); } },removeColumnSort:function(n){ this.options.columns[n].setUnsorted(); this.setSortImage(n); -},setColumnSort:function(n,_347){ -this.options.columns[n].setSorted(_347); +},setColumnSort:function(n,_312){ +this.options.columns[n].setSorted(_312); this.setSortImage(n); },toggleColumnSort:function(n){ this.options.columns[n].toggleSort(); this.setSortImage(n); },setSortImage:function(n){ -var _348=this.options.columns[n].getSortDirection(); -var _349=$(this.headerTableId+"_img_"+n); -if(_348==Rico.TableColumn.UNSORTED){ -_349.innerHTML="  "; +var _313=this.options.columns[n].getSortDirection(); +var _314=$(this.headerTableId+"_img_"+n); +if(_313==Rico.TableColumn.UNSORTED){ +_314.innerHTML="  "; }else{ -if(_348==Rico.TableColumn.SORT_ASC){ -_349.innerHTML="  "; +if(_313==Rico.TableColumn.SORT_ASC){ +_314.innerHTML="  "; }else{ -if(_348==Rico.TableColumn.SORT_DESC){ -_349.innerHTML="  "; +if(_313==Rico.TableColumn.SORT_DESC){ +_314.innerHTML="  "; } } } @@ -1511,30 +1345,30 @@ return i; } return -1; },introspectForColumnInfo:function(){ -var _350=new Array(); -var _351=this.headerTable.rows[0]; -var _352=_351.cells; -for(var i=0;i<_352.length;i++){ -_350.push(new Rico.TableColumn(this.deriveColumnNameFromCell(_352[i],i),true)); +var _315=new Array(); +var _316=this.headerTable.rows[0]; +var _317=_316.cells; +for(var i=0;i<_317.length;i++){ +_315.push(new Rico.TableColumn(this.deriveColumnNameFromCell(_317[i],i),true)); } -return _350; +return _315; },convertToTableColumns:function(cols){ -var _353=new Array(); +var _318=new Array(); for(var i=0;i=0){ -var _395=this.options.initialOffset; -this.scroller.moveScroll(_395); -this.viewPort.scrollTo(this.scroller.rowToPixel(_395)); +var _360=this.options.initialOffset; +this.scroller.moveScroll(_360); +this.viewPort.scrollTo(this.scroller.rowToPixel(_360)); if(this.options.sortCol){ -this.sortCol=_392.sortCol; -this.sortDir=_392.sortDir; +this.sortCol=_357.sortCol; +this.sortDir=_357.sortDir; } var grid=this; setTimeout(function(){ -grid.requestContentRefresh(_395); +grid.requestContentRefresh(_360); },100); } -},fetchBuffer:function(_397){ -if(this.buffer.isInRange(_397)&&!this.buffer.isNearingLimit(_397)){ +},fetchBuffer:function(_362){ +if(this.buffer.isInRange(_362)&&!this.buffer.isNearingLimit(_362)){ return; } if(this.processingRequest){ -this.unprocessedRequest=new Rico.LiveGridRequest(_397); +this.unprocessedRequest=new Rico.LiveGridRequest(_362); return; } -var _398=this.buffer.getFetchOffset(_397); -this.processingRequest=new Rico.LiveGridRequest(_397); -this.processingRequest.bufferOffset=_398; -var _399=this.buffer.getFetchSize(_397); -var _400=false; -var _401={"page_size":_399,"offset":_398}; +var _363=this.buffer.getFetchOffset(_362); +this.processingRequest=new Rico.LiveGridRequest(_362); +this.processingRequest.bufferOffset=_363; +var _364=this.buffer.getFetchSize(_362); +var _365=false; +var _366={"page_size":_364,"offset":_363}; if(this.sortCol){ -Object.extend(_401,{"sort_col":this.sortCol,"sort_dir":this.sortDir}); +Object.extend(_366,{"sort_col":this.sortCol,"sort_dir":this.sortDir}); } -Prado.Callback(this.tableId,_401,this.ajaxUpdate.bind(this),this.options); +Prado.Callback(this.tableId,_366,this.ajaxUpdate.bind(this),this.options); this.timeoutHandler=setTimeout(this.handleTimedOut.bind(this),this.options.bufferTimeout); -},ajaxUpdate:function(_402,_403){ +},ajaxUpdate:function(_367,_368){ try{ clearTimeout(this.timeoutHandler); -this.buffer.update(_402,this.processingRequest.bufferOffset); +this.buffer.update(_367,this.processingRequest.bufferOffset); this.viewPort.bufferChanged(); } catch(err){ @@ -1857,42 +1691,42 @@ this.processingRequest=null; } this.processQueuedRequest(); }}); -Object.extend(Rico.LiveGridBuffer.prototype,{update:function(_404,_405){ +Object.extend(Rico.LiveGridBuffer.prototype,{update:function(_369,_370){ if(this.rows.length==0){ -this.rows=_404; +this.rows=_369; this.size=this.rows.length; -this.startPos=_405; +this.startPos=_370; return; } -if(_405>this.startPos){ -if(this.startPos+this.rows.length<_405){ -this.rows=_404; -this.startPos=_405; +if(_370>this.startPos){ +if(this.startPos+this.rows.length<_370){ +this.rows=_369; +this.startPos=_370; }else{ -this.rows=this.rows.concat(_404.slice(0,_404.length)); +this.rows=this.rows.concat(_369.slice(0,_369.length)); if(this.rows.length>this.maxBufferSize){ -var _406=this.rows.length; +var _371=this.rows.length; this.rows=this.rows.slice(this.rows.length-this.maxBufferSize,this.rows.length); -this.startPos=this.startPos+(_406-this.rows.length); +this.startPos=this.startPos+(_371-this.rows.length); } } }else{ -if(_405+_404.lengththis.maxBufferSize){ this.rows=this.rows.slice(0,this.maxBufferSize); } } -this.startPos=_405; +this.startPos=_370; } this.size=this.rows.length; }}); -Object.extend(Rico.GridViewPort.prototype,{populateRow:function(_407,row){ -if(isdef(_407)){ +Object.extend(Rico.GridViewPort.prototype,{populateRow:function(_372,row){ +if(isdef(_372)){ for(var j=0;j 4) + { + red = hexCode.substring(0,2); + green = hexCode.substring(2,4); + blue = hexCode.substring(4,6); + } + else if(hexCode.length > 0 & hexCode.length < 4) + { + var r = hexCode.substring(0,1); + var g = hexCode.substring(1,2); + var b = hexCode.substring(2); + red = r+r; + green = g+g; + blue = b+b; + } return new Rico.Color( parseInt(red,16), parseInt(green,16), parseInt(blue,16) ); } @@ -106,9 +122,8 @@ Rico.Color.createFromHex = function(hexCode) { */ Rico.Color.createColorFromBackground = function(elem) { - var actualColor = RicoUtil.getElementsComputedStyle($(elem), "backgroundColor", "background-color"); - - if ( actualColor == "transparent" && elem.parent ) + var actualColor = Element.getStyle($(elem), "background-color"); + if ( actualColor == "transparent" && elem.parent ) return Rico.Color.createColorFromBackground(elem.parent); if ( actualColor == null ) @@ -123,10 +138,7 @@ Rico.Color.createColorFromBackground = function(elem) { } else if ( actualColor.indexOf("#") == 0 ) { - var redPart = parseInt(actualColor.substring(1,3), 16); - var greenPart = parseInt(actualColor.substring(3,5), 16); - var bluePart = parseInt(actualColor.substring(5), 16); - return new Rico.Color( redPart, greenPart, bluePart ); + return Rico.Color.createFromHex(actualColor); } else return new Rico.Color(255,255,255); diff --git a/framework/Web/UI/WebControls/TColorPicker.php b/framework/Web/UI/WebControls/TColorPicker.php new file mode 100644 index 00000000..11c5f9d5 --- /dev/null +++ b/framework/Web/UI/WebControls/TColorPicker.php @@ -0,0 +1,221 @@ + + * @version $Revision: $ $Date: $ + * @package System.Web.UI.WebControls + * @since 3.0 + */ +class TColorPicker extends TTextBox +{ + /** + * @return boolean whether the color picker should pop up when the button is clicked. + */ + public function getShowColorPicker() + { + return $this->getViewState('ShowColorPicker',true); + } + + /** + * Sets whether to pop up the color picker when the button is clicked. + * @param boolean whether to show the color picker popup + */ + public function setShowColorPicker($value) + { + $this->setViewState('ShowColorPicker',TPropertyValue::ensureBoolean($value),true); + } + + /** + * @param string color picker UI mode, "Simple", "Basic" or "Full", default is "Basic" + */ + public function setMode($value) + { + $this->setViewState('Mode', TPropertyValue::ensureEnum($value, 'Simple', 'Basic', 'Full'), 'Basic'); + } + + /** + * @return string current color picker UI mode. + */ + public function getMode() + { + return $this->getViewState('Mode', 'Basic'); + } + + /** + * @param string set the color picker style + */ + public function setColorPickerStyle($value) + { + $this->setViewState('ColorStyle', $value, 'default'); + } + + /** + * @return string current color picker style + */ + public function getColorPickerStyle() + { + return $this->getViewState('ColorStyle', 'default'); + } + + /** + * @return string text for the color picker OK button. Default is "OK". + */ + public function getOKButtonText() + { + return $this->getViewState('OKButtonText', 'OK'); + } + + /** + * @param string text for the color picker OK button + */ + public function setOKButtonText($value) + { + $this->setViewState('OKButtonText', $value, 'OK'); + } + + /** + * @return string text for the color picker Cancel button. Default is "Cancel". + */ + public function getCancelButtonText() + { + return $this->getViewState('CancelButtonText', 'Cancel'); + } + + /** + * @param string text for the color picker Cancel button + */ + public function setCancelButtonText($value) + { + $this->setViewState('CancelButtonText', $value, 'Cancel'); + } + + /** + * Get javascript color picker options. + * @return array color picker client-side options + */ + protected function getColorPickerOptions() + { + $options['ID'] = $this->getClientID(); + $options['ClassName'] = $this->getCssClass(); + $options['ShowColorPicker'] = $this->getShowColorPicker(); + + if($options['ShowColorPicker']) + { + $mode = $this->getMode(); + + if($mode == 'Full') $options['Mode'] = $mode; + else if($mode == 'Simple') $options['Palette'] = 'Tiny'; + + $options['OKButtonText'] = $this->getOKButtonText(); + $options['CancelButtonText'] = $this->getCancelButtonText(); + } + + return $options; + } + + /** + * Publish the color picker Css asset files. + */ + public function onPreRender($param) + { + parent::onPreRender($param); + $this->publishColorPickerStyle(); + } + + /** + * Publish the color picker style Css asset file. + * @return string Css file url. + */ + protected function publishColorPickerStyle() + { + $cs = $this->getPage()->getClientScript(); + $style = 'System.Web.Javascripts.colorpicker.'.$this->getColorPickerStyle(); + $cssFile=Prado::getPathOfNamespace($style,'.css'); + $url = $this->getService()->getAsset($cssFile); + if(!$cs->isStyleSheetFileRegistered($style)) + $cs->registerStyleSheetFile($style, $url); + return $url; + } + + /** + * Publish the color picker image assets. + * @return array list of image URLs + */ + protected function publishColorPickerImageAssets() + { + $cs = $this->getPage()->getClientScript(); + $key = "prado:".get_class($this); + + $images = array('button' => '.gif', 'target_black' => '.gif', + 'target_white' => '.gif', 'background' => '.png', + 'slider' => '.gif', 'hue' => '.gif'); + + $cs = $this->getPage()->getClientScript(); + $list = array(); + + foreach($images as $filename => $ext) + { + $image = 'System.Web.Javascripts.colorpicker.'.$filename; + $file = Prado::getPathOfNamespace($image, $ext); + $list[$filename.$ext] = $this->getService()->getAsset($file); + } + $imgs['button.gif'] = $list['button.gif']; + $imgs['background.png'] = $list['background.png']; + $serializer = new TJavascriptSerializer($imgs); + $options = $serializer->toJavascript(); + $code = "Prado.WebUI.TColorPicker.UIImages = {$options};"; + $cs->registerEndScript($key, $code); + return $list; + } + + /** + * Registers the javascript code to initialize the color picker. + * Must use "Event.OnLoad" to initialize the color picker when the + * full page is loaded, otherwise IE will throw an error. + * @param THtmlWriter writer + */ + protected function addAttributesToRender($writer) + { + parent::addAttributesToRender($writer); + $writer->addAttribute('id',$this->getClientID()); + $scripts = $this->getPage()->getClientScript(); + $scripts->registerClientScript("colorpicker"); + $serializer = new TJavascriptSerializer($this->getColorPickerOptions()); + $options = $serializer->toJavascript(); + $id = $this->getClientID(); + $code = "Event.OnLoad(function(){ new Prado.WebUI.TColorPicker($options); });"; + $scripts->registerEndScript("prado:$id", $code); + } + + /** + * Renders body content. + * This method overrides parent implementation by adding + * additional color picker button. + * @param THtmlWriter writer + */ + protected function render($writer) + { + parent::render($writer); + + $images = $this->publishColorPickerImageAssets(); + $color = $this->getText(); + + $writer->addAttribute('class', 'TColorPicker_button'); + $writer->renderBeginTag('span'); + + $writer->addAttribute('id', $this->getClientID().'_button'); + $writer->addAttribute('src', $images['button.gif']); + if($color != '') + $writer->addAttribute('style', "background-color:{$color};"); + $writer->addAttribute('width', '20'); + $writer->addAttribute('height', '20'); + $writer->renderBeginTag('img'); + $writer->renderEndTag('img'); + $writer->renderEndTag('span'); + } + +} + +?> \ No newline at end of file diff --git a/framework/Web/UI/WebControls/TDatePicker.php b/framework/Web/UI/WebControls/TDatePicker.php index 30b14add..301b7f70 100644 --- a/framework/Web/UI/WebControls/TDatePicker.php +++ b/framework/Web/UI/WebControls/TDatePicker.php @@ -148,7 +148,7 @@ class TDatePicker extends TTextBox } /** - * @return string current calendar styl + * @return string current calendar style */ public function getCalendarStyle() { diff --git a/tests/FunctionalTests/protected/pages/UI/ColorPicker.page b/tests/FunctionalTests/protected/pages/UI/ColorPicker.page new file mode 100644 index 00000000..3d8c46db --- /dev/null +++ b/tests/FunctionalTests/protected/pages/UI/ColorPicker.page @@ -0,0 +1,40 @@ + + +
+ + +

asda

+

asda

+

asda

+ +

asda

+

asda

+ +
+ + +

asda

+

asda

+

asda

+ +
+ +

asda

+ +
+ +

asda

+

asda

+ +

asda

+

asda

+

asda

+

asda

+

asda

+

asda

+

asda

+

asda

+

asda

+ + + \ No newline at end of file -- cgit v1.2.3