From d333551610131ab486ef566f20b9762645ef5ebb Mon Sep 17 00:00:00 2001 From: wei <> Date: Sat, 27 May 2006 02:57:23 +0000 Subject: Possible fix for #171 (including TColorPicker). Fixed #160. --- .gitattributes | 1 + .../Controls/Samples/TDataTypeValidator/Home.page | 7 ++--- .../Web/Javascripts/colorpicker/colorpicker.js | 2 +- framework/Web/Javascripts/datepicker/datepicker.js | 29 +++++++++++++------- framework/Web/Javascripts/datepicker/default.css | 25 ++++++++++++----- framework/Web/Javascripts/datepicker/spacer.gif | Bin 0 -> 43 bytes framework/Web/Javascripts/js/colorpicker.js | 2 +- framework/Web/Javascripts/js/datepicker.js | 16 ++++++----- framework/Web/UI/WebControls/TDatePicker.php | 30 ++++++++++++++++----- 9 files changed, 78 insertions(+), 34 deletions(-) create mode 100755 framework/Web/Javascripts/datepicker/spacer.gif diff --git a/.gitattributes b/.gitattributes index 0495890b..2db5261b 100644 --- a/.gitattributes +++ b/.gitattributes @@ -741,6 +741,7 @@ 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 +framework/Web/Javascripts/datepicker/spacer.gif -text framework/Web/Javascripts/effects/CHANGELOG -text framework/Web/Javascripts/effects/MIT-LICENSE -text framework/Web/Javascripts/effects/README -text diff --git a/demos/quickstart/protected/pages/Controls/Samples/TDataTypeValidator/Home.page b/demos/quickstart/protected/pages/Controls/Samples/TDataTypeValidator/Home.page index 783769ff..ac83f745 100644 --- a/demos/quickstart/protected/pages/Controls/Samples/TDataTypeValidator/Home.page +++ b/demos/quickstart/protected/pages/Controls/Samples/TDataTypeValidator/Home.page @@ -31,8 +31,8 @@ Data type validator with client-side validation disabled: ValidationGroup="Group2" EnableClientScript="false" ControlToValidate="TextBox2" - DataType="Currency" - Text="You must enter a currency." /> + DataType="Integer" + Text="You must enter an integer." /> @@ -47,7 +47,8 @@ Validating a date input: ValidationGroup="Group3" ControlToValidate="TextBox3" DataType="Date" - Text="You must enter a valid date." /> + DateFormat="d/M/yyyy" + Text="You must enter a valid date (d/M/yyyy)." /> diff --git a/framework/Web/Javascripts/colorpicker/colorpicker.js b/framework/Web/Javascripts/colorpicker/colorpicker.js index dc80f0c7..06cfb037 100644 --- a/framework/Web/Javascripts/colorpicker/colorpicker.js +++ b/framework/Web/Javascripts/colorpicker/colorpicker.js @@ -74,7 +74,7 @@ Object.extend(Prado.WebUI.TColorPicker.prototype, if(Prado.Browser().ie) { this.iePopUp = document.createElement('iframe'); - this.iePopUp.src = ""; + this.iePopUp.src = Prado.WebUI.TColorPicker.UIImages['button.gif']; this.iePopUp.style.position = "absolute" this.iePopUp.scrolling="no" this.iePopUp.frameBorder="0" diff --git a/framework/Web/Javascripts/datepicker/datepicker.js b/framework/Web/Javascripts/datepicker/datepicker.js index 79763811..d5d9496c 100644 --- a/framework/Web/Javascripts/datepicker/datepicker.js +++ b/framework/Web/Javascripts/datepicker/datepicker.js @@ -81,11 +81,14 @@ Prado.WebUI.TDatePicker.prototype = Object.extend(this,options); Event.observe(this.trigger, triggerEvent, this.show.bindEvent(this)); - this.create(); + }, create : function() { + if(typeof(this._calDiv) != "undefined") + return; + var div; var table; var tbody; @@ -115,9 +118,10 @@ Prado.WebUI.TDatePicker.prototype = // Previous Month Button td = document.createElement("td"); - var previousMonth = document.createElement("button"); - previousMonth.className = "prevMonthButton"; - previousMonth.appendChild(document.createTextNode("<<")); + var previousMonth = document.createElement("input"); + previousMonth.className = "prevMonthButton button"; + previousMonth.type = "button" + previousMonth.value = "<<"; td.appendChild(previousMonth); tr.appendChild(td); @@ -162,9 +166,10 @@ Prado.WebUI.TDatePicker.prototype = td = document.createElement("td"); - td.className = "nextMonthButton"; - var nextMonth = document.createElement("button"); - nextMonth.appendChild(document.createTextNode(">>")); + var nextMonth = document.createElement("input"); + nextMonth.className = "nextMonthButton button"; + nextMonth.type = "button"; + nextMonth.value = ">>"; td.appendChild(nextMonth); tr.appendChild(td); @@ -178,6 +183,7 @@ Prado.WebUI.TDatePicker.prototype = var text; table = document.createElement("table"); + table.align="center"; table.className = "grid"; div.appendChild(table); @@ -226,11 +232,12 @@ Prado.WebUI.TDatePicker.prototype = div.className = "calendarFooter"; this._calDiv.appendChild(div); - var todayButton = document.createElement("button"); + var todayButton = document.createElement("input"); + todayButton.type="button"; todayButton.className = "todayButton"; var today = this.newDate(); var buttonText = today.SimpleFormat(this.Format,this); - todayButton.appendChild(document.createTextNode(buttonText)); + todayButton.value = buttonText; div.appendChild(todayButton); /*var clearButton = document.createElement("button"); @@ -243,7 +250,7 @@ Prado.WebUI.TDatePicker.prototype = if(Prado.Browser().ie) { this.iePopUp = document.createElement('iframe'); - this.iePopUp.src = ""; + this.iePopUp.src = Prado.WebUI.TDatePicker.spacer; this.iePopUp.style.position = "absolute" this.iePopUp.scrolling="no" this.iePopUp.frameBorder="0" @@ -521,6 +528,8 @@ Prado.WebUI.TDatePicker.prototype = show : function() { + this.create(); + if(!this.showing) { var pos = Position.cumulativeOffset(this.control); diff --git a/framework/Web/Javascripts/datepicker/default.css b/framework/Web/Javascripts/datepicker/default.css index e5d327e1..7e920f1b 100644 --- a/framework/Web/Javascripts/datepicker/default.css +++ b/framework/Web/Javascripts/datepicker/default.css @@ -21,6 +21,7 @@ margin-left: 1px; } + .TDatePickerImageButton:hover { border-color: #ddd; @@ -31,9 +32,9 @@ font-size: 11px; } -.TDatePicker .calendarHeader button +.TDatePicker input.button { - font-size: 12px; + font-size: 11px; width: 32px; } @@ -41,6 +42,7 @@ { padding: 4px 0; border: 1px solid white; + text-align: center; } .TDatePicker .hover { @@ -61,25 +63,36 @@ { border: 1px solid white; cursor: default; - height: 23px; + height: 22px; } + .TDatePicker th { width: 28px; } + +.TDatePicker .calendarBody +{ + text-align: center; + width: 210px; + margin: 3px 6px; +} + .TDatePicker .grid { border-spacing: 0px; - margin: 3px; } + .TDatePicker .calendarFooter { margin: 2px; border-top: 1px solid #919EA9; padding-top: 2px; } -.TDatePicker .calendarFooter button +.TDatePicker .todayButton { - font-size: 12px; + font-size: 11px; margin: 4px; + padding-left: 1em; + padding-right: 1em; } \ No newline at end of file diff --git a/framework/Web/Javascripts/datepicker/spacer.gif b/framework/Web/Javascripts/datepicker/spacer.gif new file mode 100755 index 00000000..fc256098 Binary files /dev/null and b/framework/Web/Javascripts/datepicker/spacer.gif differ diff --git a/framework/Web/Javascripts/js/colorpicker.js b/framework/Web/Javascripts/js/colorpicker.js index 5bfab96d..47949239 100644 --- a/framework/Web/Javascripts/js/colorpicker.js +++ b/framework/Web/Javascripts/js/colorpicker.js @@ -34,7 +34,7 @@ Event.observe(this.button,"click",this._buttonOnClick);Event.observe(this.input, {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=document.createElement('iframe');this.iePopUp.src=Prado.WebUI.TColorPicker.UIImages['button.gif'];this.iePopUp.style.position="absolute" this.iePopUp.scrolling="no" this.iePopUp.frameBorder="0" this.input.parentNode.appendChild(this.iePopUp);} diff --git a/framework/Web/Javascripts/js/datepicker.js b/framework/Web/Javascripts/js/datepicker.js index 6a28c061..a81bbeb4 100644 --- a/framework/Web/Javascripts/js/datepicker.js +++ b/framework/Web/Javascripts/js/datepicker.js @@ -8,16 +8,18 @@ Prado.WebUI.TDatePicker=Class.create();Object.extend(Prado.WebUI.TDatePicker,{ge {this.trigger=$(this.options.Trigger);var triggerEvent=this.options.TriggerEvent||"click";} else {this.trigger=this.control;var triggerEvent=this.options.TriggerEvent||"focus";} -Object.extend(this,options);Event.observe(this.trigger,triggerEvent,this.show.bindEvent(this));this.create();},create:function() -{var div;var table;var tbody;var tr;var td;this._calDiv=document.createElement("div");this._calDiv.className=this.ClassName;this._calDiv.style.display="none";this._calDiv.style.position="absolute" -div=document.createElement("div");div.className="calendarHeader";this._calDiv.appendChild(div);table=document.createElement("table");table.style.cellSpacing=0;div.appendChild(table);tbody=document.createElement("tbody");table.appendChild(tbody);tr=document.createElement("tr");tbody.appendChild(tr);td=document.createElement("td");var previousMonth=document.createElement("button");previousMonth.className="prevMonthButton";previousMonth.appendChild(document.createTextNode("<<"));td.appendChild(previousMonth);tr.appendChild(td);td=document.createElement("td");tr.appendChild(td);this._monthSelect=document.createElement("select");this._monthSelect.className="months";for(var i=0;i>"));td.appendChild(nextMonth);tr.appendChild(td);div=document.createElement("div");div.className="calendarBody";this._calDiv.appendChild(div);var calendarBody=div;var text;table=document.createElement("table");table.className="grid";div.appendChild(table);var thead=document.createElement("thead");table.appendChild(thead);tr=document.createElement("tr");thead.appendChild(tr);for(i=0;i<7;++i){td=document.createElement("th");text=document.createTextNode(this.ShortWeekDayNames[(i+this.FirstDayOfWeek)%7]);td.appendChild(text);td.className="weekDayHead";tr.appendChild(td);} +td.appendChild(this._yearSelect);td=document.createElement("td");var nextMonth=document.createElement("input");nextMonth.className="nextMonthButton button";nextMonth.type="button";nextMonth.value=">>";td.appendChild(nextMonth);tr.appendChild(td);div=document.createElement("div");div.className="calendarBody";this._calDiv.appendChild(div);var calendarBody=div;var text;table=document.createElement("table");table.align="center";table.className="grid";div.appendChild(table);var thead=document.createElement("thead");table.appendChild(thead);tr=document.createElement("tr");thead.appendChild(tr);for(i=0;i<7;++i){td=document.createElement("th");text=document.createTextNode(this.ShortWeekDayNames[(i+this.FirstDayOfWeek)%7]);td.appendChild(text);td.className="weekDayHead";tr.appendChild(td);} tbody=document.createElement("tbody");table.appendChild(tbody);for(week=0;week<6;++week){tr=document.createElement("tr");tbody.appendChild(tr);for(day=0;day<7;++day){td=document.createElement("td");td.className="calendarDate";text=document.createTextNode(String.fromCharCode(160));td.appendChild(text);tr.appendChild(td);var tmp=new Object();tmp.tag="DATE";tmp.value=-1;tmp.data=text;this.dateSlot[(week*7)+day]=tmp;Event.observe(td,"mouseover",this.hover.bindEvent(this));Event.observe(td,"mouseout",this.hover.bindEvent(this));}} -div=document.createElement("div");div.className="calendarFooter";this._calDiv.appendChild(div);var todayButton=document.createElement("button");todayButton.className="todayButton";var today=this.newDate();var buttonText=today.SimpleFormat(this.Format,this);todayButton.appendChild(document.createTextNode(buttonText));div.appendChild(todayButton);if(Prado.Browser().ie) -{this.iePopUp=document.createElement('iframe');this.iePopUp.src="";this.iePopUp.style.position="absolute" +div=document.createElement("div");div.className="calendarFooter";this._calDiv.appendChild(div);var todayButton=document.createElement("input");todayButton.type="button";todayButton.className="todayButton";var today=this.newDate();var buttonText=today.SimpleFormat(this.Format,this);todayButton.value=buttonText;div.appendChild(todayButton);if(Prado.Browser().ie) +{this.iePopUp=document.createElement('iframe');this.iePopUp.src=Prado.WebUI.TDatePicker.spacer;this.iePopUp.style.position="absolute" this.iePopUp.scrolling="no" this.iePopUp.frameBorder="0" document.body.appendChild(this.iePopUp);} @@ -87,7 +89,7 @@ this.onChange();},getElement:function() {var d=this.newDate(this.selectedDate);d.setMonth(month);this.setSelectedDate(d);},nextMonth:function() {this.setMonth(this.selectedDate.getMonth()+1);},prevMonth:function() {this.setMonth(this.selectedDate.getMonth()-1);},show:function() -{if(!this.showing) +{this.create();if(!this.showing) {var pos=Position.cumulativeOffset(this.control);if(this.options.InputMode=="TextBox") pos[1]+=this.control.offsetHeight;else {var dayList=Prado.WebUI.TDatePicker.getDayListControl(this.control);if(dayList) diff --git a/framework/Web/UI/WebControls/TDatePicker.php b/framework/Web/UI/WebControls/TDatePicker.php index 59a71c90..a746437b 100644 --- a/framework/Web/UI/WebControls/TDatePicker.php +++ b/framework/Web/UI/WebControls/TDatePicker.php @@ -681,6 +681,18 @@ class TDatePicker extends TTextBox else throw new TConfigurationException('datepicker_calendarstyle_invalid',$style); } + + /** + * Publish the spacer.gif for IE iframe source. + * @return string the URL for the spacer.gif. + */ + protected function publishIFrameSpacer() + { + $cs = $this->getPage()->getClientScript(); + $spacer = 'System.Web.Javascripts.datepicker.spacer'; + if(($file = Prado::getPathOfNamespace($spacer,'.gif')) != null) + return $this->publishFilePath($file); + } /** * Add the client id to the input textbox, and register the client scripts. @@ -696,18 +708,24 @@ class TDatePicker extends TTextBox /** * Registers the javascript code to initialize the date picker. - * Must use "Event.OnLoad" to initialize the date picker when the - * full page is loaded, otherwise IE will throw an error. */ protected function registerCalendarClientScript() { if($this->getShowCalendar()) { - $scripts = $this->getPage()->getClientScript(); - $scripts->registerPradoScript("datepicker"); + $cs = $this->getPage()->getClientScript(); + $cs->registerPradoScript("datepicker"); + + if(!$cs->isEndScriptRegistered('TDatePicker.spacer')) + { + $spacer = $this->publishIFrameSpacer(); + $code = "Prado.WebUI.TDatePicker.spacer = '$spacer';"; + $cs->registerEndScript('TDatePicker.spacer', $code); + } + $options = TJavaScript::encode($this->getDatePickerOptions()); - $code = "Event.OnLoad(function(){ new Prado.WebUI.TDatePicker($options); });"; - $scripts->registerEndScript("prado:".$this->getClientID(), $code); + $code = "new Prado.WebUI.TDatePicker($options);"; + $cs->registerEndScript("prado:".$this->getClientID(), $code); } } } -- cgit v1.2.3