Possible fix for #171 (including TColorPicker). Fixed #160.

9 files changed, 78 insertions, 34 deletions

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." />

 <com:TButton Text="Submit" ValidationGroup="Group2" />

 </td>

 </tr>

@@ -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)." />

 <com:TButton Text="Submit" ValidationGroup="Group3" />

 </td>

 </tr>

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
--- /dev/null
+++ b/framework/Web/Javascripts/datepicker/spacer.gif
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<this.MonthNames.length;i++){var opt=document.createElement("option");opt.innerHTML=this.MonthNames[i];opt.value=i;if(i==this.selectedDate.getMonth()){opt.selected=true;}
+Object.extend(this,options);Event.observe(this.trigger,triggerEvent,this.show.bindEvent(this));},create:function()
+{if(typeof(this._calDiv)!="undefined")
+return;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("input");previousMonth.className="prevMonthButton button";previousMonth.type="button"
+previousMonth.value="<<";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<this.MonthNames.length;i++){var opt=document.createElement("option");opt.innerHTML=this.MonthNames[i];opt.value=i;if(i==this.selectedDate.getMonth()){opt.selected=true;}
 this._monthSelect.appendChild(opt);}
 td.appendChild(this._monthSelect);td=document.createElement("td");td.className="labelContainer";tr.appendChild(td);this._yearSelect=document.createElement("select");for(var i=this.FromYear;i<=this.UpToYear;++i){var opt=document.createElement("option");opt.innerHTML=i;opt.value=i;if(i==this.selectedDate.getFullYear()){opt.selected=false;}
 this._yearSelect.appendChild(opt);}
-td.appendChild(this._yearSelect);td=document.createElement("td");td.className="nextMonthButton";var nextMonth=document.createElement("button");nextMonth.appendChild(document.createTextNode(">>"));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);

 		}

 	}

 }