diff options
Diffstat (limited to 'framework/Web/UI/ActiveControls/TCallbackClientScript.php')
| -rw-r--r-- | framework/Web/UI/ActiveControls/TCallbackClientScript.php | 441 |
1 files changed, 280 insertions, 161 deletions
diff --git a/framework/Web/UI/ActiveControls/TCallbackClientScript.php b/framework/Web/UI/ActiveControls/TCallbackClientScript.php index 40051f76..96c8d38e 100644 --- a/framework/Web/UI/ActiveControls/TCallbackClientScript.php +++ b/framework/Web/UI/ActiveControls/TCallbackClientScript.php @@ -17,7 +17,7 @@ * executed on the client-side (i.e. the browser client that is viewing * the page) during a callback response. * - * The avaiable methods includes setting/clicking input elements, changing Css + * The available methods includes setting/clicking input elements, changing Css * styles, hiding/showing elements, and adding visual effects to elements on the * page. The client-side methods can be access through the CallbackClient * property available in TPage. @@ -27,7 +27,33 @@ * $this->getPage()->getCallbackClient()->hide($myTextBox); * </code> * - * @author Wei Zhuo <weizhuo[at]gamil[dot]com> + * To call a specific jQuery method on an element, use the {@link jQuery} method: + * <code> + * // simple example: focus a textbox + * $this->getCallbackClient()->jQuery($myTextBox, 'focus'); + * + * // complex example: resize a textbox using an animation + * $this->getCallbackClient()->jQuery($myTextBox, 'animate', array( + * array( 'width' => '+=100', + * 'height' => '+=50' + * ), + * array('duration' => 1000) + * )); + * </code> + * + * To call a jQueryUI effect on an element, use the {@link juiEffect} method: + * <code> + * // simple example: focus a textbox + * $this->getCallbackClient()->juiEffect($myTextBox, 'highlight'); + * </code> + * + * In order to use the jQueryUI effects, the jqueryui script must be registered: + * <code> + * $this->getPage()->getClientScript()->registerPradoScript('jqueryui'); + * </code> + * + * @author Wei Zhuo <weizhuo[at]gmail[dot]com> + * @author Fabio Bas <ctrlaltca[at]gmail[dot]com> * @version $Id: TCallbackClientScript.php 3245 2013-01-07 20:23:32Z ctrlaltca $ * @package System.Web.UI.ActiveControls * @since 3.1 @@ -61,27 +87,48 @@ class TCallbackClientScript extends TApplicationComponent * @param string javascript function name * @param array list of arguments for the function */ - public function callClientFunction($function, $params=null) + public function callClientFunction($function, $params=array()) { if(!is_array($params)) $params = array($params); if(count($params) > 0) { - if($params[0] instanceof TControl) + if ($params[0] instanceof ISurroundable) + $params[0] = $params[0]->getSurroundingTagID(); + elseif($params[0] instanceof TControl) $params[0] = $params[0]->getClientID(); } $this->_actions->add(array($function => $params)); } /** + * Executes a jQuery client-side method over an element. + * @param string control or element id + * @param string jQuery method name + * @param array list of arguments for the function + */ + public function jQuery($element, $method, $params=array()) + { + if ($element instanceof ISurroundable) + $element = $element->getSurroundingTagID(); + elseif($element instanceof TControl) + $element = $element->getClientID(); + + if(!is_array($params)) + $params = array($params); + + $this->_actions->add(array('Prado.Element.j' => array($element, $method, $params))); + } + + /** * Client script to set the value of a particular input element. * @param TControl control element to set the new value * @param string new value */ public function setValue($input, $text) { - $this->callClientFunction('Prado.Element.setValue', array($input, $text)); + $this->jQuery($input, 'val', $text); } /** @@ -106,6 +153,11 @@ class TCallbackClientScript extends TApplicationComponent 'Value', 'Index', 'Clear', 'Indices', 'Values', 'All', 'Invert'); $type = ($type===null) ? $this->getSelectionControlType($control) : $type; $total = $this->getSelectionControlIsListType($control) ? $control->getItemCount() : 1; + + // pass the ID to avoid getting the surrounding elements (ISurroundable) + if($control instanceof TControl) + $control = $control->getClientID(); + $this->callClientFunction('Prado.Element.select', array($control, $type.$method, $value, $total)); } @@ -132,7 +184,7 @@ class TCallbackClientScript extends TApplicationComponent */ public function click($control) { - $this->callClientFunction('Prado.Element.click', $control); + $this->jQuery($control, 'trigger', 'click'); } /** @@ -152,8 +204,7 @@ class TCallbackClientScript extends TApplicationComponent */ public function raiseClientEvent($control, $eventName) { - $this->callClientFunction('Event.fireEvent', - array($control, strtolower($eventName))); + $this->jQuery($control, 'trigger', $eventName); } /** @@ -164,9 +215,9 @@ class TCallbackClientScript extends TApplicationComponent */ public function setAttribute($control, $name, $value) { - // Attributes should be applied on Surrounding tag, except for 'disabled' attribute + // Attributes should be applied on Surrounding tag, except for 'disabled' attribute if ($control instanceof ISurroundable && strtolower($name)!=='disabled') - $control=$control->getSurroundingTagID(); + $control=$control->getSurroundingTagID(); $this->callClientFunction('Prado.Element.setAttribute',array($control, $name, $value)); } @@ -206,9 +257,7 @@ class TCallbackClientScript extends TApplicationComponent */ public function show($element) { - if ($element instanceof ISurroundable) - $element=$element->getSurroundingTagID(); - $this->callClientFunction('Element.show', $element); + $this->jQuery($element, 'show'); } /** @@ -217,22 +266,33 @@ class TCallbackClientScript extends TApplicationComponent */ public function hide($element) { - if ($element instanceof ISurroundable) - $element=$element->getSurroundingTagID(); - $this->callClientFunction('Element.hide', $element); + $this->jQuery($element, 'hide'); } /** * Toggles the visibility of the element. * @param TControl control element or element id - * @param string visual effect, such as, 'appear' or 'slide' or 'blind'. + * @param string visual effect, such as, 'fade' or 'slide'. * @param array additional options. */ public function toggle($element, $effect=null, $options=array()) { - if ($element instanceof ISurroundable) - $element=$element->getSurroundingTagID(); - $this->callClientFunction('Element.toggle', array($element,$effect,$options)); + switch(strtolower($effect)) + { + case 'fade': + $method='fadeToggle'; + break; + case 'slide': + $method='slideToggle'; + break; + default: + $method='toggle'; + // avoid fancy effect by default + if(!array_key_exists('duration', $options)) + $options['duration']=0; + break; + } + $this->jQuery($element, $method, $options); } /** @@ -241,14 +301,7 @@ class TCallbackClientScript extends TApplicationComponent */ public function remove($element) { - if ($element instanceof ISurroundable) - $element=$element->getSurroundingTagID(); - $this->callClientFunction('Element.remove', $element); - } - - public function addPostDataLoader($name) - { - $this->callClientFunction('Prado.CallbackRequest.addPostLoaders', $name); + $this->jQuery($element, 'remove'); } /** @@ -259,9 +312,7 @@ class TCallbackClientScript extends TApplicationComponent */ public function update($element, $content) { - if ($element instanceof ISurroundable) - $element=$element->getSurroundingTagID(); - $this->replace($element, $content, 'Element.update'); + $this->jQuery($element, 'html', $content); } /** @@ -271,9 +322,7 @@ class TCallbackClientScript extends TApplicationComponent */ public function addCssClass($element, $cssClass) { - if ($element instanceof ISurroundable) - $element=$element->getSurroundingTagID(); - $this->callClientFunction('Element.addClassName', array($element, $cssClass)); + $this->jQuery($element, 'addClass', $cssClass); } /** @@ -283,31 +332,19 @@ class TCallbackClientScript extends TApplicationComponent */ public function removeCssClass($element, $cssClass) { - if ($element instanceof ISurroundable) - $element=$element->getSurroundingTagID(); - $this->callClientFunction('Element.removeClassName', array($element, $cssClass)); + $this->jQuery($element, 'removeClass', $cssClass); } /** - * Sets the CssClass of an element. - * @param TControl control element or element id - * @param string new CssClass name for the element. - */ - /*public function setCssClass($element, $cssClass) - { - $this->callClientFunction('Prado.Element.CssClass.set', array($element, $cssClass)); - }*/ - - /** * Scroll the top of the browser viewing area to the location of the * element. + * * @param TControl control element or element id + * @param array additional options: 'duration' in ms, 'offset' from the top in pixels */ - public function scrollTo($element) + public function scrollTo($element, $options=array()) { - if ($element instanceof ISurroundable) - $element=$element->getSurroundingTagID(); - $this->callClientFunction('Element.scrollTo', $element); + $this->callClientFunction('Prado.Element.scrollTo', array($element, $options)); } /** @@ -316,7 +353,7 @@ class TCallbackClientScript extends TApplicationComponent */ public function focus($element) { - $this->callClientFunction('Prado.Element.focus', $element); + $this->jQuery($element, 'trigger', 'focus'); } /** @@ -327,9 +364,7 @@ class TCallbackClientScript extends TApplicationComponent */ public function setStyle($element, $styles) { - if ($element instanceof ISurroundable) - $element=$element->getSurroundingTagID(); - $this->callClientFunction('Prado.Element.setStyle', array($element, $styles)); + $this->jQuery($element, 'css', array($styles)); } /** @@ -339,9 +374,7 @@ class TCallbackClientScript extends TApplicationComponent */ public function appendContent($element, $content) { - if ($element instanceof ISurroundable) - $element=$element->getSurroundingTagID(); - $this->replace($element, $content, 'Prado.Element.Insert.append'); + $this->jQuery($element, 'append', $content); } /** @@ -351,9 +384,7 @@ class TCallbackClientScript extends TApplicationComponent */ public function prependContent($element, $content) { - if ($element instanceof ISurroundable) - $element=$element->getSurroundingTagID(); - $this->replace($element, $content, 'Prado.Element.Insert.prepend'); + $this->jQuery($element, 'prepend', $content); } /** @@ -363,9 +394,7 @@ class TCallbackClientScript extends TApplicationComponent */ public function insertContentAfter($element, $content) { - if ($element instanceof ISurroundable) - $element=$element->getSurroundingTagID(); - $this->replace($element, $content, 'Prado.Element.Insert.after'); + $this->jQuery($element, 'after', $content); } /** @@ -375,9 +404,7 @@ class TCallbackClientScript extends TApplicationComponent */ public function insertContentBefore($element, $content) { - if ($element instanceof ISurroundable) - $element=$element->getSurroundingTagID(); - $this->replace($element, $content, 'Prado.Element.Insert.before'); + $this->jQuery($element, 'before', $content); } /** @@ -387,15 +414,13 @@ class TCallbackClientScript extends TApplicationComponent * will be used for replacement. * @param TControl control element or HTML element id. * @param string HTML fragement or the control to be rendered - * @param string replacement method, default is to replace the outter - * html content. * @param string provide a custom boundary. * @see insertAbout * @see insertBelow * @see insertBefore * @see insertAfter */ - protected function replace($element, $content, $method="Element.replace", $boundary=null) + protected function replace($element, $content, $boundary=null) { if($content instanceof TControl) { @@ -408,8 +433,7 @@ class TCallbackClientScript extends TApplicationComponent $content = null; } - $this->callClientFunction('Prado.Element.replace', - array($element, $method, $content, $boundary)); + $this->callClientFunction('Prado.Element.replace', array($element, $content, $boundary)); } /** @@ -419,8 +443,6 @@ class TCallbackClientScript extends TApplicationComponent */ public function replaceContent($element,$content) { - if ($element instanceof ISurroundable) - $element=$element->getSurroundingTagID(); $this->replace($element, $content); } @@ -430,7 +452,16 @@ class TCallbackClientScript extends TApplicationComponent */ public function evaluateScript($writer) { - $this->replace(null, $writer, 'Prado.Element.evaluateScript'); + if($writer instanceof THtmlWriter) + { + $boundary = $this->getResponseContentBoundary($writer); + $content = null; + } else { + $boundary = null; + $content = $writer; + } + + $this->callClientFunction('Prado.Element.evaluateScript', array($content, $boundary)); } /** @@ -445,7 +476,7 @@ class TCallbackClientScript extends TApplicationComponent { $boundary = $this->getRenderedContentBoundary($content); } - else if($content instanceof THtmlWriter) + elseif($content instanceof THtmlWriter) { $boundary = $this->getResponseContentBoundary($content); } @@ -483,223 +514,311 @@ class TCallbackClientScript extends TApplicationComponent return null; } + /* VISUAL EFFECTS */ + /** * Add a visual effect the element. * @param string visual effect function name. * @param TControl control element or element id * @param array visual effect key-value pair options. */ - public function visualEffect($type, $element, $options=null) + public function visualEffect($type, $element, $options=array()) { - if ($element instanceof ISurroundable) - $element=$element->getSurroundingTagID(); - $this->callClientFunction($type, array($element, $options)); + $this->jQuery($element, $type, $options); } + /* BASIC EFFECTS (JQUERY CORE) */ + /** * Visual Effect: Gradually make the element appear. + * This effect doesn't need jQueryUI. + * @param TControl control element or element id + * @param array visual effect key-value pair options. + */ + public function fadeIn($element, $options=array()) + { + $this->visualEffect('fadeIn', $element, $options); + } + + /** + * Visual Effect: Gradually fade the element. + * This effect doesn't need jQueryUI. + * @param TControl control element or element id + * @param array visual effect key-value pair options. + */ + public function fadeOut($element, $options=array()) + { + $this->visualEffect('fadeOut', $element, $options); + } + + /** + * Set the opacity on a html element or control. + * This effect doesn't need jQueryUI. + * @param TControl control element or element id + * @param float opacity value between 1 and 0 + */ + public function fadeTo($element, $value, $duration=500) + { + $value = TPropertyValue::ensureFloat($value); + $this->visualEffect('fadeTo', $element, array($duration, $value)); + } + + /** + * Visual Effect: Slide down. + * This effect doesn't need jQueryUI. * @param TControl control element or element id * @param array visual effect key-value pair options. */ - public function appear($element, $options=null) + public function slideDown($element, $options=array()) { - if ($element instanceof ISurroundable) - $element=$element->getSurroundingTagID(); - $this->visualEffect('Effect.Appear', $element, $options); + $this->visualEffect('slideDown', $element, $options); } /** - * Visual Effect: Blind down. + * Visual Effect: Slide up. + * This effect doesn't need jQueryUI. * @param TControl control element or element id * @param array visual effect key-value pair options. */ - public function blindDown($element, $options=null) + public function slideUp($element, $options=array()) { - if ($element instanceof ISurroundable) - $element=$element->getSurroundingTagID(); - $this->visualEffect('Effect.BlindDown', $element, $options); + $this->visualEffect('slideUp', $element, $options); } + /* OLD METHODS, DEPRECATED, BACKWARDS-COMPATIBILITY */ + /** - * Visual Effect: Blind up. + * Alias of fadeIn() + * @deprecated since 3.4 * @param TControl control element or element id * @param array visual effect key-value pair options. */ - public function blindUp($element, $options=null) + public function appear($element, $options=array()) { - if ($element instanceof ISurroundable) - $element=$element->getSurroundingTagID(); - $this->visualEffect('Effect.BlindUp', $element, $options); + $this->fadeIn($element, $options); + } + /** + * Alias of fadeOut() + * @deprecated since 3.4 + * @param TControl control element or element id + * @param array visual effect key-value pair options. + */ + public function fade($element, $options=array()) + { + $this->fadeOut($element, $options); } /** - * Visual Effect: Drop out. + * Alias of fadeTo() + * @deprecated since 3.4 + * @param TControl control element or element id + * @param float opacity value between 1 and 0 + */ + public function setOpacity($element, $value) + { + $this->fadeTo($element, $value); + } + + /* JQUERY UI EFFECTS */ + + /** + * Add a jQuery-ui effect the element. + * This method needs jQueryUI. + * @param string visual effect function name. + * @param TControl control element or element id + * @param array effect options. + */ + public function juiEffect($element, $effect, $options=array()) + { + $options['effect']=$effect; + $this->jQuery($element, 'effect', array($options)); + } + + /** + * Visual Effect: Blind. + * This effect needs jQueryUI. * @param TControl control element or element id * @param array visual effect key-value pair options. */ - public function dropOut($element, $options=null) + public function blind($element, $options=array()) { - if ($element instanceof ISurroundable) - $element=$element->getSurroundingTagID(); - $this->visualEffect('Effect.DropOut', $element, $options); + $this->juiEffect($element, 'blind', $options); } /** - * Visual Effect: Gradually fade the element. + * Visual Effect: Drop out. + * This effect needs jQueryUI. * @param TControl control element or element id * @param array visual effect key-value pair options. */ - public function fade($element, $options=null) + public function drop($element, $options=array()) { - if ($element instanceof ISurroundable) - $element=$element->getSurroundingTagID(); - $this->visualEffect('Effect.Fade', $element, $options); + $this->juiEffect($element, 'drop', $options); } /** * Visual Effect: Fold. + * This effect needs jQueryUI. * @param TControl control element or element id * @param array visual effect key-value pair options. */ - public function fold($element, $options = null) + public function fold($element, $options=array()) { - if ($element instanceof ISurroundable) - $element=$element->getSurroundingTagID(); - $this->visualEffect('Effect.Fold', $element, $options); + $this->juiEffect($element, 'fold', $options); } /** * Visual Effect: Gradually make an element grow to a predetermined size. + * This effect needs jQueryUI. * @param TControl control element or element id * @param array visual effect key-value pair options. */ - public function grow($element, $options=null) + public function size($element, $options=array()) { - if ($element instanceof ISurroundable) - $element=$element->getSurroundingTagID(); - $this->visualEffect('Effect.Grow', $element, $options); + $this->juiEffect($element, 'size', $options); } /** * Visual Effect: Gradually grow and fade the element. + * This effect needs jQueryUI. * @param TControl control element or element id * @param array visual effect key-value pair options. */ - public function puff($element, $options=null) + public function puff($element, $options=array()) { - if ($element instanceof ISurroundable) - $element=$element->getSurroundingTagID(); - $this->visualEffect('Effect.Puff', $element, $options); + $this->juiEffect($element, 'puff', $options); } /** * Visual Effect: Pulsate. + * This effect needs jQueryUI. * @param TControl control element or element id * @param array visual effect key-value pair options. */ - public function pulsate($element, $options=null) + public function pulsate($element, $options=array()) { - if ($element instanceof ISurroundable) - $element=$element->getSurroundingTagID(); - $this->visualEffect('Effect.Pulsate', $element, $options); + $this->juiEffect($element, 'pulsate', $options); } /** * Visual Effect: Shake the element. + * This effect needs jQueryUI. * @param TControl control element or element id * @param array visual effect key-value pair options. */ - public function shake($element, $options=null) + public function shake($element, $options=array()) { - if ($element instanceof ISurroundable) - $element=$element->getSurroundingTagID(); - $this->visualEffect('Effect.Shake', $element, $options); + $this->juiEffect($element, 'shake', $options); } /** - * Visual Effect: Shrink the element. + * Visual Effect: Scale the element. + * This effect needs jQueryUI. * @param TControl control element or element id * @param array visual effect key-value pair options. */ - public function shrink($element, $options=null) + public function scale($element, $options=array()) { - if ($element instanceof ISurroundable) - $element=$element->getSurroundingTagID(); - $this->visualEffect('Effect.Shrink', $element, $options); + $this->juiEffect($element, 'scale', $options); } /** - * Visual Effect: Slide down. + * Visual Effect: High light the element for about 2 seconds. + * This effect needs jQueryUI. * @param TControl control element or element id * @param array visual effect key-value pair options. */ - public function slideDown($element, $options=null) + public function highlight($element, $options=array()) { - if ($element instanceof ISurroundable) - $element=$element->getSurroundingTagID(); - $this->visualEffect('Effect.SlideDown', $element, $options); + $this->juiEffect($element, 'highlight', $options); } + /* jui - OLD METHODS, DEPRECATED, BACKWARDS-COMPATIBILITY */ + /** - * Visual Effect: Side up. + * Alias of blind(), presets the direction to 'down' + * @deprecated since 3.4 * @param TControl control element or element id * @param array visual effect key-value pair options. */ - public function slideUp($element, $options=null) + public function blindDown($element, $options=array()) { - if ($element instanceof ISurroundable) - $element=$element->getSurroundingTagID(); - $this->visualEffect('Effect.SlideUp', $element, $options); + $options['direction']='down'; + $this->blind($element, $options); } /** - * Visual Effect: Squish the element. + * Alias of blind(), presets the direction to 'up' + * @deprecated since 3.4 * @param TControl control element or element id * @param array visual effect key-value pair options. */ - public function squish($element, $options=null) + public function blindUp($element, $options=array()) { - if ($element instanceof ISurroundable) - $element=$element->getSurroundingTagID(); - $this->visualEffect('Effect.Squish', $element, $options); + $options['direction']='up'; + $this->blind($element, $options); } /** - * Visual Effect: Switch Off effect. + * Alias of drop() + * @deprecated since 3.4 * @param TControl control element or element id * @param array visual effect key-value pair options. */ - public function switchOff($element, $options=null) + public function dropOut($element, $options=array()) { - if ($element instanceof ISurroundable) - $element=$element->getSurroundingTagID(); - $this->visualEffect('Effect.SwitchOff', $element, $options); + $this->drop($element, $options); } /** - * Visual Effect: High light the element for about 2 seconds. + * Alias of size() + * @deprecated since 3.4 * @param TControl control element or element id * @param array visual effect key-value pair options. */ - public function highlight($element, $options=null) + public function grow($element, $options=array()) { - if ($element instanceof ISurroundable) - $element=$element->getSurroundingTagID(); - $this->visualEffect('Prado.Effect.Highlight', $element, $options); + $this->size($element, $options); } /** - * Set the opacity on a html element or control. + * Alias of scale() + * @deprecated since 3.4 * @param TControl control element or element id - * @param float opacity value between 1 and 0 + * @param array visual effect key-value pair options. */ - public function setOpacity($element, $value) + public function shrink($element, $options=array()) { - if ($element instanceof ISurroundable) - $element=$element->getSurroundingTagID(); - $value = TPropertyValue::ensureFloat($value); - $this->callClientFunction('Element.setOpacity', array($element,$value)); + $options['percent']=0; + $this->scale($element, $options); } + + /** + * Alias of scale() + * @deprecated since 3.4 + * @param TControl control element or element id + * @param array visual effect key-value pair options. + */ + public function squish($element, $options=array()) + { + $options['origin']=array('top', 'left'); + $options['percent']=0; + $this->scale($element, $options); + } + + /** + * Alias of scale() + * @deprecated since 3.4 + * @param TControl control element or element id + * @param array visual effect key-value pair options. + */ + public function switchOff($element, $options=array()) + { + $options['direction']='vertical'; + $options['percent']=0; + $this->scale($element, $options); + } + } |