From 1b49bfdc7bf5ebb78a89e93eb74dceb45c8b71cf Mon Sep 17 00:00:00 2001 From: Fabio Bas Date: Mon, 2 Dec 2013 18:22:41 +0100 Subject: WIP port of TAutoComplete to jQuery-ui --- .../Web/UI/JuiControls/TJuiControlAdapter.php | 177 +++++++++++++++++++++ 1 file changed, 177 insertions(+) create mode 100644 framework/Web/UI/JuiControls/TJuiControlAdapter.php (limited to 'framework/Web/UI') diff --git a/framework/Web/UI/JuiControls/TJuiControlAdapter.php b/framework/Web/UI/JuiControls/TJuiControlAdapter.php new file mode 100644 index 00000000..d92809d3 --- /dev/null +++ b/framework/Web/UI/JuiControls/TJuiControlAdapter.php @@ -0,0 +1,177 @@ + + * @link http://www.pradosoft.com/ + * @copyright Copyright © 2013-2013 PradoSoft + * @license http://www.pradosoft.com/license/ + * @version $Id: TJuiControl.php 3245 2013-01-07 20:23:32Z ctrlaltca $ + * @package System.Web.UI.JuiControls + */ + +Prado::using('System.Web.UI.ActiveControls.TActiveControlAdapter'); + +/** + * TJuiControlAdapter class + * + * TJuiControlAdapter is the base adapter class for controls that are + * derived from a jQuery-ui widget. + * + * @author Fabio Bas + * @version $Id: TJuiControlAdapter.php 3245 2013-01-07 20:23:32Z ctrlaltca $ + * @package System.Web.UI.JuiControls + * @since 3.3 + */ +class TJuiControlAdapter extends TActiveControlAdapter +{ + const SCRIPT_PATH = 'jquery'; + const CSS_PATH = 'css'; + const BASE_CSS_FILENAME ='jquery-ui.css'; + + /** + * @param string set the jquery-ui style + */ + public function setJuiBaseStyle($value) + { + $this->getControl()->setViewState('JuiBaseStyle', $value, 'base'); + } + + /** + * @return string current jquery-ui style + */ + public function getJuiBaseStyle() + { + return $this->getControl()->getViewState('JuiBaseStyle', 'base'); + } + + /** + * Inject jquery script and styles before render + */ + public function onPreRender($param) + { + parent::onPreRender($param); + $this->getPage()->getClientScript()->registerPradoScript('jqueryui'); + $this->publishJuiStyle(self::BASE_CSS_FILENAME); + } + + /** + * @param string jQuery asset file in the self::SCRIPT_PATH directory. + * @return string jQuery asset url. + */ + protected function getAssetUrl($file='') + { + $base = $this->getPage()->getClientScript()->getPradoScriptAssetUrl(); + return $base.'/'.self::SCRIPT_PATH.'/'.$file; + } + + /** + * Publish the jQuery-ui style Css asset file. + * @param file name + * @return string Css file url. + */ + public function publishJuiStyle($file) + { + $url = $this->getAssetUrl(self::CSS_PATH.'/'.$this->getJuiBaseStyle().'/'.$file); + $cs = $this->getPage()->getClientScript(); + if(!$cs->isStyleSheetFileRegistered($url)) + $cs->registerStyleSheetFile($url, $url); + return $url; + } + +} + +/** + * IJuiOptions interface + * + * IJuiOptions is the interface that must be implemented by controls using + * {@link TJuiControlOptions}. + * + * @author Fabio Bas + * @version $Id: TJuiControlAdapter.php 3245 2013-01-07 20:23:32Z ctrlaltca $ + * @package System.Web.UI.JuiControls + * @since 3.3 + */ +interface IJuiOptions +{ + public function getOptions(); + public function getValidOptions(); +} + +/** + * TJuiControlOptions interface + * + * TJuiControlOptions is an helper class that can collect a series of options + * for a control. The control must implement {@link IJuiOptions}. + * The options are validated againg an array of valid options provided by the control. + * Since component properties are case insensitive, the array of valid options is used + * to ensure the option name has the correct case. + * The options array can then get retrieved using {@link toArray} and applied to the jQuery-ui widget. + * + * @author Fabio Bas + * @version $Id: TJuiControlAdapter.php 3245 2013-01-07 20:23:32Z ctrlaltca $ + * @package System.Web.UI.JuiControls + * @since 3.3 + */ +class TJuiControlOptions +{ + /** + * @var TMap map of javascript options. + */ + private $_options; + + private $_control; + + public function __construct($control) + { + if(!$control instanceof IJuiOptions) + throw new THttpException(500,'juioptions_control_invalid',$control->ID); + $this->_control=$control; + } + /** + * Sets a named options with a value. Options are used to store and retrive + * named values for the javascript control. + * @param string option name. + * @param mixed new value. + * @param mixed default value. + * @return mixed options value. + */ + public function __set($name,$value) + { + if($this->_options===null) + $this->_options=array(); + foreach($this->_control->getValidOptions() as $option) + { + if($name == strtolower($option)) + { + $this->_options[$option] = $value; + return; + } + } + throw new THttpException(500,'juioptions_option_invalid',$control->ID, $name); + } + + /** + * Gets an option named value. Options are used to store and retrive + * named values for the base active controls. + * @param string option name. + * @param mixed default value. + * @return mixed options value. + */ + public function __get($name) + { + if($this->_options===null) + $this->_options=array(); + return isset($this->_options[$name]) ? $this->_options[$name] : null; + } + + /** + * @return TMap active control options + */ + public function toArray() + { + if($this->_options===null) + $this->_options=array(); + return $this->_options; + } +} -- cgit v1.2.3 From f8dc127ed15cfc9f7894e20fbdb69cac4a51ca9a Mon Sep 17 00:00:00 2001 From: Fabio Bas Date: Mon, 2 Dec 2013 18:26:11 +0100 Subject: Added an autocomplete based on jQuery-ui --- .../ActiveControls/Samples/TAutoComplete/Home.page | 15 +- .../ActiveControls/Samples/TAutoComplete/Home.php | 1 + .../source/prado/activecontrols/activecontrols3.js | 87 ++-- framework/Web/UI/ActiveControls/TAutoComplete.php | 441 --------------------- framework/Web/UI/JuiControls/TJuiAutoComplete.php | 425 ++++++++++++++++++++ jQuery-PORTING.txt | 15 +- 6 files changed, 486 insertions(+), 498 deletions(-) delete mode 100644 framework/Web/UI/ActiveControls/TAutoComplete.php create mode 100644 framework/Web/UI/JuiControls/TJuiAutoComplete.php (limited to 'framework/Web/UI') diff --git a/demos/quickstart/protected/pages/ActiveControls/Samples/TAutoComplete/Home.page b/demos/quickstart/protected/pages/ActiveControls/Samples/TAutoComplete/Home.page index 85c0e69f..81d53e13 100755 --- a/demos/quickstart/protected/pages/ActiveControls/Samples/TAutoComplete/Home.page +++ b/demos/quickstart/protected/pages/ActiveControls/Samples/TAutoComplete/Home.page @@ -2,7 +2,7 @@ + * + * + * + * + * $this->repeater1->DataSource=array('home', 'office', 'car', 'boat', 'plane'); + * $this->repeater1->dataBind(); + * + * @author Fabio Bas + * @version $Id: TJuiSelectable.php 3245 2013-01-07 20:23:32Z ctrlaltca $ + * @package System.Web.UI.JuiControls + * @since 3.3 + */ +class TJuiSelectable extends TActivePanel implements IJuiOptions +{ + /** + * Creates a new callback control, sets the adapter to + * TActiveControlAdapter. If you override this class, be sure to set the + * adapter appropriately by, for example, by calling this constructor. + */ + public function __construct() + { + parent::__construct(); + $this->setAdapter(new TJuiControlAdapter($this)); + } + + /** + * Object containing defined javascript options + * @return TJuiControlOptions + */ + public function getOptions() + { + static $options; + if($options===null) + $options=new TJuiControlOptions($this); + return $options; + } + + /** + * Array containing valid javascript options + * @return array() + */ + public function getValidOptions() + { + return array('appendTo', 'autoRefresh', 'cancel', 'delay', 'disabled', 'distance', 'filter', 'tolerance'); + } + + /** + * @return array list of callback options. + */ + protected function getPostBackOptions() + { + $options = $this->getOptions()->toArray(); + return $options; + } + + /** + * Ensure that the ID attribute is rendered and registers the javascript code + * for initializing the active control. + */ + protected function addAttributesToRender($writer) + { + parent::addAttributesToRender($writer); + $writer->addAttribute('id',$this->getClientID()); + $options=TJavascript::encode($this->getPostBackOptions()); + $cs=$this->getPage()->getClientScript(); + $code="jQuery('#".$this->getClientId()."_0').selectable(".$options.");"; + $cs->registerEndScript(sprintf('%08X', crc32($code)), $code); + } + + /** + * @var ITemplate template for repeater items + */ + private $_repeater=null; + + /** + * @param array data source for Selectables. + */ + public function setDataSource($data) + { + $this->getSelectables()->setDataSource($data); + } + + /** + * Overrides parent implementation. Callback {@link renderSelectables()} when + * page's IsCallback property is true. + */ + public function dataBind() + { + parent::dataBind(); + if($this->getPage()->getIsCallback()) + $this->renderSelectables($this->getResponse()->createHtmlWriter()); + } + + /** + * @return TRepeater suggestion list repeater + */ + public function getSelectables() + { + if($this->_repeater===null) + $this->_repeater = $this->createRepeater(); + return $this->_repeater; + } + + /** + * @return TRepeater new instance of TRepater to render the list of Selectables. + */ + protected function createRepeater() + { + $repeater = Prado::createComponent('System.Web.UI.WebControls.TRepeater'); + $repeater->setHeaderTemplate(new TJuiSelectableTemplate('
    ')); + $repeater->setFooterTemplate(new TJuiSelectableTemplate('
')); + $repeater->setItemTemplate(new TTemplate('
  • <%# $this->DataItem %>
    • ',null)); + $repeater->setEmptyTemplate(new TJuiSelectableTemplate('
      ')); + $this->getControls()->add($repeater); + return $repeater; + } +} + + +/** + * TJuiSelectableTemplate class. + * + * TJuiSelectableTemplate is the default template for TJuiSelectableTemplate + * item template. + * + * @author Wei Zhuo + * @version $Id: TJuiAutoComplete.php 3245 2013-01-07 20:23:32Z ctrlaltca $ + * @package System.Web.UI.ActiveControls + * @since 3.1 + */ +class TJuiSelectableTemplate extends TComponent implements ITemplate +{ + private $_template; + + public function __construct($template) + { + $this->_template = $template; + } + /** + * Instantiates the template. + * It creates a {@link TDataList} control. + * @param TControl parent to hold the content within the template + */ + public function instantiateIn($parent) + { + $parent->getControls()->add($this->_template); + } +} \ No newline at end of file diff --git a/framework/Web/UI/JuiControls/TJuiSortable.php b/framework/Web/UI/JuiControls/TJuiSortable.php new file mode 100644 index 00000000..bada066f --- /dev/null +++ b/framework/Web/UI/JuiControls/TJuiSortable.php @@ -0,0 +1,168 @@ + + * @link http://www.pradosoft.com/ + * @copyright Copyright © 2013-2013 PradoSoft + * @license http://www.pradosoft.com/license/ + * @version $Id: TJuiSortable.php 3245 2013-01-07 20:23:32Z ctrlaltca $ + * @package System.Web.UI.JuiControls + */ + +Prado::using('System.Web.UI.JuiControls.TJuiControlAdapter'); + +/** + * TJuiSortable class. + * + * + * + * + * + * + * + * $this->repeater1->DataSource=array('home', 'office', 'car', 'boat', 'plane'); + * $this->repeater1->dataBind(); + * + * + * @author Fabio Bas + * @version $Id: TJuiSortable.php 3245 2013-01-07 20:23:32Z ctrlaltca $ + * @package System.Web.UI.JuiControls + * @since 3.3 + */ +class TJuiSortable extends TActivePanel implements IJuiOptions +{ + /** + * Creates a new callback control, sets the adapter to + * TActiveControlAdapter. If you override this class, be sure to set the + * adapter appropriately by, for example, by calling this constructor. + */ + public function __construct() + { + parent::__construct(); + $this->setAdapter(new TJuiControlAdapter($this)); + } + + /** + * Object containing defined javascript options + * @return TJuiControlOptions + */ + public function getOptions() + { + static $options; + if($options===null) + $options=new TJuiControlOptions($this); + return $options; + } + + /** + * Array containing valid javascript options + * @return array() + */ + public function getValidOptions() + { + return array('appendTo', 'axis', 'cancel', 'connectWith', 'containment', 'cursor', 'cursorAt', 'delay', 'disabled', 'distance', 'dropOnEmpty', 'forceHelperSize', 'forcePlaceholderSize', 'grid', 'handle', 'helper', 'items', 'opacity', 'placeholder', 'revert', 'scroll', 'scrollSensitivity', 'scrollSpeed', 'tolerance', 'zIndex'); + } + + /** + * @return array list of callback options. + */ + protected function getPostBackOptions() + { + $options = $this->getOptions()->toArray(); + return $options; + } + + /** + * Ensure that the ID attribute is rendered and registers the javascript code + * for initializing the active control. + */ + protected function addAttributesToRender($writer) + { + parent::addAttributesToRender($writer); + $writer->addAttribute('id',$this->getClientID()); + $options=TJavascript::encode($this->getPostBackOptions()); + $cs=$this->getPage()->getClientScript(); + $code="jQuery('#".$this->getClientId()."_0').sortable(".$options.");"; + $cs->registerEndScript(sprintf('%08X', crc32($code)), $code); + } + + /** + * @var ITemplate template for repeater items + */ + private $_repeater=null; + + /** + * @param array data source for Selectables. + */ + public function setDataSource($data) + { + $this->getSelectables()->setDataSource($data); + } + + /** + * Overrides parent implementation. Callback {@link renderSelectables()} when + * page's IsCallback property is true. + */ + public function dataBind() + { + parent::dataBind(); + if($this->getPage()->getIsCallback()) + $this->renderSelectables($this->getResponse()->createHtmlWriter()); + } + + /** + * @return TRepeater suggestion list repeater + */ + public function getSelectables() + { + if($this->_repeater===null) + $this->_repeater = $this->createRepeater(); + return $this->_repeater; + } + + /** + * @return TRepeater new instance of TRepater to render the list of Selectables. + */ + protected function createRepeater() + { + $repeater = Prado::createComponent('System.Web.UI.WebControls.TRepeater'); + $repeater->setHeaderTemplate(new TJuiSortableTemplate('
        ')); + $repeater->setFooterTemplate(new TJuiSortableTemplate('
      ')); + $repeater->setItemTemplate(new TTemplate('
    • <%# $this->DataItem %>
      • ',null)); + $repeater->setEmptyTemplate(new TJuiSortableTemplate('
        ')); + $this->getControls()->add($repeater); + return $repeater; + } +} + + +/** + * TJuiSortableTemplate class. + * + * TJuiSortableTemplate is the default template for TJuiSortableTemplate + * item template. + * + * @author Wei Zhuo + * @version $Id: TJuiAutoComplete.php 3245 2013-01-07 20:23:32Z ctrlaltca $ + * @package System.Web.UI.ActiveControls + * @since 3.1 + */ +class TJuiSortableTemplate extends TComponent implements ITemplate +{ + private $_template; + + public function __construct($template) + { + $this->_template = $template; + } + /** + * Instantiates the template. + * It creates a {@link TDataList} control. + * @param TControl parent to hold the content within the template + */ + public function instantiateIn($parent) + { + $parent->getControls()->add($this->_template); + } +} \ No newline at end of file -- cgit v1.2.3