Add effects to validation summary.

5 files changed, 284 insertions, 55 deletions

diff --git a/framework/Web/Javascripts/js/validator.js b/framework/Web/Javascripts/js/validator.js
index 5e23df50..4519357c 100644
--- a/framework/Web/Javascripts/js/validator.js
+++ b/framework/Web/Javascripts/js/validator.js
@@ -156,41 +156,45 @@ Prado.WebUI.TValidationSummary.prototype =
 group : null,
 options : {},
 visible : false,
-summary : null,
+messages : null,
 initialize : function(options)
 {
 this.options = options;
 this.group = options.ValidationGroup;
-this.summary = $(options.ID);
-this.visible = this.summary.style.visibility != "hidden"
-this.visible = this.visible && this.summary.style.display != "none";
+this.messages = $(options.ID);
+this.visible = this.messages.style.visibility != "hidden"
+this.visible = this.visible && this.messages.style.display != "none";
 Prado.Validation.addSummary(options.FormID, this);
 },
 updateSummary : function(validators, update)
 {
 if(validators.length <= 0)
-return this.hideSummary(update);
+{
+if(update || this.options.Refresh != false)
+{
+return this.hideSummary(validators);
+}
+return;
+}
 var refresh = update || this.visible == false || this.options.Refresh != false;
 if(this.options.ShowSummary != false && refresh)
 {
-this.displayHTMLMessages(this.getMessages(validators));
-this.visible = true;
+this.updateHTMLMessages(this.getMessages(validators));
+this.showSummary(validators);
 }
 if(this.options.ScrollToSummary != false)
-window.scrollTo(this.summary.offsetLeft-20, this.summary.offsetTop-20);
+window.scrollTo(this.messages.offsetLeft-20, this.messages.offsetTop-20);
 if(this.options.ShowMessageBox == true && refresh)
 {
 this.alertMessages(this.getMessages(validators));
 this.visible = true;
 }
 },
-displayHTMLMessages : function(messages)
+updateHTMLMessages : function(messages)
 {
-this.summary.show();
-this.summary.style.visibility = "visible";
-while(this.summary.childNodes.length > 0)
-this.summary.removeChild(this.summary.lastChild);
-new Insertion.Bottom(this.summary, this.formatSummary(messages));
+while(this.messages.childNodes.length > 0)
+this.messages.removeChild(this.messages.lastChild);
+new Insertion.Bottom(this.messages, this.formatSummary(messages));
 },
 alertMessages : function(messages)
 {
@@ -208,15 +212,28 @@ messages.push(message);
 })
 return messages;
 },
-hideSummary : function(refresh)
+hideSummary : function(validators)
+{if(typeof(this.options.OnHideSummary) == "function")
 {
-if(refresh || this.options.Refresh != false)
+this.messages.style.visibility="visible";
+this.options.OnHideSummary(this,validators)
+}
+else
 {
+this.messages.style.visibility="hidden";
 if(this.options.Display == "None" || this.options.Display == "Dynamic")
-this.summary.hide();
-this.summary.style.visibility="hidden";
-this.visible = false;
+this.messages.hide();
 }
+this.visible = false;
+},
+showSummary : function(validators)
+{
+this.messages.style.visibility="visible";
+if(typeof(this.options.OnShowSummary) == "function")
+this.options.OnShowSummary(this,validators);
+else
+this.messages.show();
+this.visible = true;
 },
 formats : function(type)
 {
@@ -330,6 +347,7 @@ if(this.isValid)
 if(typeof(this.options.OnSuccess) == "function")
 {
 this.visible = true;
+this.message.style.visibility = "visible";
 this.updateControlCssClass(this.control, this.isValid);
 this.options.OnSuccess(this, invoker);
 }
@@ -341,6 +359,7 @@ else
 if(typeof(this.options.OnError) == "function")
 {
 this.visible = true;
+this.message.style.visibility = "visible";
 this.updateControlCssClass(this.control, this.isValid);
 this.options.OnError(this, invoker);
 }
diff --git a/framework/Web/Javascripts/prado/validation3.js b/framework/Web/Javascripts/prado/validation3.js
index 3ed31744..d5da977f 100644
--- a/framework/Web/Javascripts/prado/validation3.js
+++ b/framework/Web/Javascripts/prado/validation3.js
@@ -336,7 +336,7 @@ Prado.WebUI.TValidationSummary.prototype =
 	group : null,	

 	options : {},

 	visible : false,

-	summary : null,

+	messages : null,

 	

 	/**

 	 * <code>

@@ -356,9 +356,9 @@ Prado.WebUI.TValidationSummary.prototype =
 	{

 		this.options = options;

 		this.group = options.ValidationGroup;

-		this.summary = $(options.ID);

-		this.visible = this.summary.style.visibility != "hidden"

-		this.visible = this.visible && this.summary.style.display != "none";

+		this.messages = $(options.ID);

+		this.visible = this.messages.style.visibility != "hidden"

+		this.visible = this.visible && this.messages.style.display != "none";

 		Prado.Validation.addSummary(options.FormID, this);

 	},

 	

@@ -370,19 +370,25 @@ Prado.WebUI.TValidationSummary.prototype =
 	 */

 	updateSummary : function(validators, update)

 	{

-		if(validators.length <= 0)	

-			return this.hideSummary(update);

+		if(validators.length <= 0)

+		{

+			if(update || this.options.Refresh != false)

+			{

+				return this.hideSummary(validators);

+			}

+			return;

+		}

 

 		var refresh = update || this.visible == false || this.options.Refresh != false;

 				

 		if(this.options.ShowSummary != false && refresh)

 		{

-			this.displayHTMLMessages(this.getMessages(validators));

-			this.visible = true;

+			this.updateHTMLMessages(this.getMessages(validators));

+			this.showSummary(validators);

 		}

 		

 		if(this.options.ScrollToSummary != false)

-			window.scrollTo(this.summary.offsetLeft-20, this.summary.offsetTop-20);

+			window.scrollTo(this.messages.offsetLeft-20, this.messages.offsetTop-20);

 		

 		if(this.options.ShowMessageBox == true && refresh)

 		{

@@ -394,13 +400,11 @@ Prado.WebUI.TValidationSummary.prototype =
 	/**

 	 * Display the validator error messages as inline HTML.

 	 */

-	displayHTMLMessages : function(messages)

+	updateHTMLMessages : function(messages)

 	{

-		this.summary.show();

-		this.summary.style.visibility = "visible";

-		while(this.summary.childNodes.length > 0)

-			this.summary.removeChild(this.summary.lastChild);

-		new Insertion.Bottom(this.summary, this.formatSummary(messages));	

+		while(this.messages.childNodes.length > 0)

+			this.messages.removeChild(this.messages.lastChild);

+		new Insertion.Bottom(this.messages, this.formatSummary(messages));	

 	},

 	

 	/**

@@ -428,18 +432,34 @@ Prado.WebUI.TValidationSummary.prototype =
 	},	

 	

 	/**

-	 * Hides the validation summary if options['Refresh'] is not false.

-	 * @param boolean true to always hide the summary

+	 * Hides the validation summary.

 	 */

-	hideSummary : function(refresh)

-	{

-		if(refresh || this.options.Refresh != false)

+	hideSummary : function(validators)

+	{	if(typeof(this.options.OnHideSummary) == "function")

 		{

+			this.messages.style.visibility="visible";

+			this.options.OnHideSummary(this,validators)

+		}

+		else

+		{

+			this.messages.style.visibility="hidden";

 			if(this.options.Display == "None" || this.options.Display == "Dynamic")

-				this.summary.hide();

-			this.summary.style.visibility="hidden";

-			this.visible = false;

-		}		

+				this.messages.hide();

+		}

+		this.visible = false;

+	},

+	

+	/**

+	 * Shows the validation summary.

+	 */

+	showSummary : function(validators)

+	{

+		this.messages.style.visibility="visible";

+		if(typeof(this.options.OnShowSummary) == "function")

+			this.options.OnShowSummary(this,validators);

+		else

+			this.messages.show();

+		this.visible = true;

 	},

 	

 	/**

@@ -638,6 +658,7 @@ Prado.WebUI.TBaseValidator.prototype =
 			if(typeof(this.options.OnSuccess) == "function")

 			{

 				this.visible = true;

+				this.message.style.visibility = "visible";

 				this.updateControlCssClass(this.control, this.isValid);	

 				this.options.OnSuccess(this, invoker);

 			}

@@ -648,7 +669,8 @@ Prado.WebUI.TBaseValidator.prototype =
 		{

 			if(typeof(this.options.OnError) == "function")

 			{

-				this.visible = true;				

+				this.visible = true;		

+				this.message.style.visibility = "visible";		

 				this.updateControlCssClass(this.control, this.isValid);

 				this.options.OnError(this, invoker);

 			}

diff --git a/framework/Web/UI/WebControls/TBaseValidator.php b/framework/Web/UI/WebControls/TBaseValidator.php
index 4ca4c1f6..01d1b978 100644
--- a/framework/Web/UI/WebControls/TBaseValidator.php
+++ b/framework/Web/UI/WebControls/TBaseValidator.php
@@ -43,7 +43,7 @@
  *
  * You can also customized the client-side behaviour by adding javascript
  * code to the subproperties of the {@link getClientValidation ClientValidation}
- * property.
+ * property. See quickstart documentation for further details.
  *
  * You can also place a {@link TValidationSummary} control on a page to display error messages
  * from the validators together. In this case, only the {@link setErrorMessage ErrorMessage}
@@ -79,7 +79,9 @@ abstract class TBaseValidator extends TLabel implements IValidator
 	 * @var boolean whether the validator has been registered with the page
 	 */
 	private $_registered=false;
-	
+	/**
+	 * @var TValidatorClientScript validator client-script options.
+	 */
 	private $_clientScript;
 
 	/**
@@ -186,7 +188,7 @@ abstract class TBaseValidator extends TLabel implements IValidator
 	 */
 	protected function createClientScript()
 	{
-		return new TValidatorClientScript($this->getPage()->getClientScript());
+		return new TValidatorClientScript;
 	}
 
 	/**
@@ -491,7 +493,21 @@ abstract class TBaseValidator extends TLabel implements IValidator
 /**
  * TValidatorClientScript class.
  * 
- * @todo Add doc to quickstart and classes.
+ * Client-side validator events can be modified through the {@link
+ * TBaseValidator::getClientValidation ClientValidation} property of a
+ * validator. The subproperties of ClientValidation are those of the
+ * TValidatorClientScript properties. The client-side validator supports the
+ * following events.
+ * 
+ * The <tt>OnValidate</tt> event is raise before the validator validation
+ * functions are called.
+ * 
+ * The <tt>OnSuccess</tt> event is raised after the validator has successfully
+ * validate the control.
+ * 
+ * The <tt>OnError</tt> event is raised after the validator fails validation.
+ * 
+ * See the quickstart documentation for further details.
  * 
  * @author Wei Zhuo <weizhuo[at]gmail[dot]com>
  * @version $Revision: $  $Date: $
@@ -500,51 +516,88 @@ abstract class TBaseValidator extends TLabel implements IValidator
  */
 class TValidatorClientScript extends TComponent
 {
+	/**
+	 * @var TMap client-side validator event javascript code.
+	 */
 	private $_options;
-	private $_manager;
-	private $_effectsEnabled = false;
 	
-	public function __construct($manager)
+	/**
+	 * Constructor.
+	 */
+	public function __construct()
 	{
 		$this->_options = new TMap;
-		$this->_manager = $manager;
 	}
 	
+	/**
+	 * @return string javascript code for client-side OnValidate event.
+	 */
 	public function getOnValidate()
 	{
 		return $this->_options->itemAt['OnValidate'];	
 	}
 	
+	/**
+	 * Client-side OnValidate validator event is raise before the validators
+	 * validation functions are called. 
+	 * @param string javascript code for client-side OnValidate event.
+	 */
 	public function setOnValidate($javascript)
 	{
 		$this->_options->add('OnValidate', $this->ensureFunction($javascript));
 	}
 	
+	/**
+	 * Client-side OnSuccess event is raise after validation is successfull.
+	 * This will override the default client-side validator behaviour.
+	 * @param string javascript code for client-side OnSuccess event.
+	 */
 	public function setOnSuccess($javascript)
 	{
 		$this->_options->add('OnSuccess', $this->ensureFunction($javascript));
 	}
 	
+	/**
+	 * @return string javascript code for client-side OnSuccess event.
+	 */
 	public function getOnSuccess()
 	{
 		return $this->_options->itemAt('OnSuccess');
 	}
 	
+	/**
+	 * Client-side OnError event is raised after validation failure.
+	 * This will override the default client-side validator behaviour.
+	 * @param string javascript code for client-side OnError event.
+	 */
 	public function setOnError($javascript)
 	{
 		$this->_options->add('OnError', $this->ensureFunction($javascript));
 	}
 	
+	/**
+	 * @return string javascript code for client-side OnError event.
+	 */
 	public function getOnError()
 	{
 		return $this->_options->itemAt('OnError');
 	}
 	
+	/**
+	 * @return array list of client-side event code.
+	 */
 	public function getOptions()
 	{
 		return $this->_options->toArray();
 	}
 	
+	/**
+	 * Ensure the string is a valid javascript function. If the string begins
+	 * with "javascript:" valid javascript function is assumed, otherwise the
+	 * code block is enclosed with "function(validator, invoker){ }" block.
+	 * @param string javascript code.
+	 * @return string javascript function code.
+	 */
 	private function ensureFunction($javascript)
 	{
 		if(TJavascript::isFunction($javascript))
diff --git a/framework/Web/UI/WebControls/TValidationSummary.php b/framework/Web/UI/WebControls/TValidationSummary.php
index 2bc3f62c..aa46142b 100644
--- a/framework/Web/UI/WebControls/TValidationSummary.php
+++ b/framework/Web/UI/WebControls/TValidationSummary.php
@@ -37,6 +37,11 @@
 class TValidationSummary extends TWebControl

 {

 	/**

+	 * @var TValidatorClientScript validator client-script options.

+	 */

+	private $_clientScript;

+	

+	/**

 	 * Constructor.

 	 * This method sets the foreground color to red.

 	 */

@@ -242,10 +247,33 @@ class TValidationSummary extends TWebControl
 		$options['Refresh'] = $this->getAutoUpdate();

 		$options['ValidationGroup'] =  $this->getValidationGroup();

 		$options['Display'] = $this->getDisplay();

+		

+		if(!is_null($this->_clientScript))

+			$options = array_merge($options,$this->_clientScript->getOptions());

+					

 		return $options;

 	}

 

 	/**

+	 * @return TValidationSummaryClientScript client-side validation summary

+	 * event options.

+	 */

+	public function getClientValidation()

+	{

+		if(is_null($this->_clientScript))

+			$this->_clientScript = $this->createClientScript();

+		return $this->_clientScript;

+	}

+	

+	/**

+	 * @return TValidationSummaryClientScript javascript validation summary

+	 * event options.

+	 */

+	protected function createClientScript()

+	{

+		return new TValidationSummaryClientScript;

+	}

+	/**

 	 * Get the list of validation error messages.

 	 * @return array list of validator error messages.

 	 */

@@ -343,4 +371,105 @@ class TValidationSummary extends TWebControl
 	}

 }

 

+/**

+ * TValidationSummaryClientScript class.

+ * 

+ * Client-side validation summary events such as {@link setOnHideSummary

+ * OnHideSummary} and {@link setOnShowSummary OnShowSummary} can be modified

+ * through the {@link TBaseValidator:: getClientValidation ClientValidation}

+ * property of a validation summary. 

+ * 

+ * The <tt>OnHideSummary</tt> event is raise when the validation summary

+ * requests to hide the messages.

+ * 

+ * The <tt>OnShowSummary</tt> event is raised when the validation summary

+ * requests to show the messages.

+ * 

+ * See the quickstart documentation for further details.

+ * 

+ * @author Wei Zhuo <weizhuo[at]gmail[dot]com>

+ * @version $Revision: $  $Date: $

+ * @package System.Web.UI.WebControls

+ * @since 3.0

+ */

+class TValidationSummaryClientScript extends TComponent

+{

+	/**

+	 * @var TMap client-side validation summary event javascript code.

+	 */

+	private $_options;

+	

+	/**

+	 * Constructor.

+	 */

+	public function __construct()

+	{

+		$this->_options = new TMap;

+	}

+

+	/**

+	 * @return string javascript code for client-side OnHideSummary event.

+	 */

+	public function getOnHideSummary()

+	{

+		return $this->_options->itemAt['OnHideSummary'];	

+	}

+	

+	/**

+	 * Client-side OnHideSummary validation summary event is raise when all the

+	 * validators are valid. This will override the default client-side

+	 * validation summary behaviour.

+	 * @param string javascript code for client-side OnHideSummary event.

+	 */

+	public function setOnHideSummary($javascript)

+	{

+		$this->_options->add('OnHideSummary', $this->ensureFunction($javascript));

+	}

+	

+	/**

+	 * Client-side OnShowSummary event is raise when one or more validators are

+	 * not valid. This will override the default client-side validation summary

+	 * behaviour.

+	 * @param string javascript code for client-side OnShowSummary event.

+	 */

+	public function setOnShowSummary($javascript)

+	{

+		$this->_options->add('OnShowSummary', $this->ensureFunction($javascript));

+	}

+	

+	/**

+	 * @return string javascript code for client-side OnShowSummary event.

+	 */

+	public function getOnShowSummary()

+	{

+		return $this->_options->itemAt('OnShowSummary');

+	}

+	

+	/**

+	 * @return array list of client-side event code.

+	 */

+	public function getOptions()

+	{

+		return $this->_options->toArray();

+	}

+	

+	/**

+	 * Ensure the string is a valid javascript function. If the string begins

+	 * with "javascript:" valid javascript function is assumed, otherwise the

+	 * code block is enclosed with "function(summary, validators){ }" block.

+	 * @param string javascript code.

+	 * @return string javascript function code.

+	 */

+	private function ensureFunction($javascript)

+	{

+		if(TJavascript::isFunction($javascript))

+			return $javascript;

+		else

+		{

+			$code = "function(summary, validators){ {$javascript} }";

+			return TJavascript::quoteFunction($code);

+		}

+	}	

+}

+

 ?>
\ No newline at end of file
diff --git a/tests/FunctionalTests/features/protected/pages/ValidatorEffects.page b/tests/FunctionalTests/features/protected/pages/ValidatorEffects.page
index 47d99969..22a034cf 100644
--- a/tests/FunctionalTests/features/protected/pages/ValidatorEffects.page
+++ b/tests/FunctionalTests/features/protected/pages/ValidatorEffects.page
@@ -4,7 +4,7 @@
 <fieldset id="quickRegistration">

 	<legend>Create New Account</legend>

 

-<com:TClientScript UsingPradoScripts="effects" />

+<com:TClientScript UsingPradoScripts="effects,logger" />

 

 <div class="username">

 	Username: 

@@ -81,8 +81,14 @@
 	<com:TValidationSummary 

 		ID="summary2"

 		ValidationGroup="signin"

-		AutoUpdate="false"

-		HeaderText="<p>You could not login because</p>" />

+		Display="Dynamic"

+		ClientValidation.OnHideSummary="Effect.Squish(summary.messages)"

+		HeaderText="<p>You could not login because</p>">

+	<prop:ClientValidation.OnShowSummary>

+		Effect.Appear(summary.messages)

+		Effect.Shake(summary.messages)

+	</prop:ClientValidation.OnShowSummary>	

+	</com:TValidationSummary>

 </div>

 

 </fieldset>