From 1e3d5c170fd3bf18d1e153473e020b1fa5294d05 Mon Sep 17 00:00:00 2001 From: Fabio Bas Date: Wed, 4 Dec 2013 23:40:28 +0100 Subject: jQuery-ui based draggable and droppable --- framework/Web/UI/JuiControls/TJuiDraggable.php | 91 ++++++++++++ framework/Web/UI/JuiControls/TJuiDroppable.php | 188 +++++++++++++++++++++++++ jQuery-PORTING.txt | 8 ++ jQuery-WIP.txt | 12 +- 4 files changed, 295 insertions(+), 4 deletions(-) create mode 100644 framework/Web/UI/JuiControls/TJuiDraggable.php create mode 100644 framework/Web/UI/JuiControls/TJuiDroppable.php diff --git a/framework/Web/UI/JuiControls/TJuiDraggable.php b/framework/Web/UI/JuiControls/TJuiDraggable.php new file mode 100644 index 00000000..eb174eb0 --- /dev/null +++ b/framework/Web/UI/JuiControls/TJuiDraggable.php @@ -0,0 +1,91 @@ + + * @link http://www.pradosoft.com/ + * @copyright Copyright © 2013-2013 PradoSoft + * @license http://www.pradosoft.com/license/ + * @version $Id: TJuiDraggable.php 3245 2013-01-07 20:23:32Z ctrlaltca $ + * @package System.Web.UI.JuiControls + */ + +Prado::using('System.Web.UI.JuiControls.TJuiControlAdapter'); + +/** + * TJuiDraggable class. + * + * + * + * + * drag me + * + * + * + * @author Fabio Bas + * @version $Id: TJuiDraggable.php 3245 2013-01-07 20:23:32Z ctrlaltca $ + * @package System.Web.UI.JuiControls + * @since 3.3 + */ +class TJuiDraggable 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('addClasses', 'appendTo', 'axis', 'cancel', 'connectToSortable', 'containment', 'cursor', 'cursorAt', 'delay', 'disabled', 'distance', 'grid', 'handle', 'helper', 'iframeFix', 'opacity', 'refreshPositions', 'revert', 'revertDuration', 'scope', 'scroll', 'scrollSensitivity', 'scrollSpeed', 'snap', 'snapMode', 'snapTolerance', 'stack', '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()."').draggable(".$options.");"; + $cs->registerEndScript(sprintf('%08X', crc32($code)), $code); + } +} diff --git a/framework/Web/UI/JuiControls/TJuiDroppable.php b/framework/Web/UI/JuiControls/TJuiDroppable.php new file mode 100644 index 00000000..e54d4eac --- /dev/null +++ b/framework/Web/UI/JuiControls/TJuiDroppable.php @@ -0,0 +1,188 @@ + + * @link http://www.pradosoft.com/ + * @copyright Copyright © 2013-2013 PradoSoft + * @license http://www.pradosoft.com/license/ + * @version $Id: TJuiDroppable.php 3245 2013-01-07 20:23:32Z ctrlaltca $ + * @package System.Web.UI.JuiControls + */ + +Prado::using('System.Web.UI.JuiControls.TJuiControlAdapter'); +Prado::using('System.Web.UI.ActiveControls.TActivePanel'); + +/** + * TJuiDroppable class. + * + * + * + * drag me + * + * + * + * drop it over me + * + * + * + * + * public function drop1_ondrop($sender, $param) + * { + * $draggable=$param->getDroppedControl()->ID; + * $this->drop1->Controls->clear(); + * $this->drop1->Controls->add("Dropped ".$draggable." at:
Top=".$param->getOffsetTop()." Left=".$param->getOffsetLeft()); + * // it's still an active panel, after all + * $this->drop1->render($param->NewWriter); + * } + * + * + * @author Fabio Bas + * @version $Id: TJuiDroppable.php 3245 2013-01-07 20:23:32Z ctrlaltca $ + * @package System.Web.UI.JuiControls + * @since 3.3 + */ +class TJuiDroppable extends TActivePanel implements IJuiOptions, ICallbackEventHandler +{ + /** + * 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('addClasses', 'appendTo', 'axis', 'cancel', 'connectToSortable', 'containment', 'cursor', 'cursorAt', 'delay', 'disabled', 'distance', 'grid', 'handle', 'helper', 'iframeFix', 'opacity', 'refreshPositions', 'revert', 'revertDuration', 'scope', 'scroll', 'scrollSensitivity', 'scrollSpeed', 'snap', 'snapMode', 'snapTolerance', 'stack', 'zIndex'); + } + + /** + * @return array list of callback options. + */ + protected function getPostBackOptions() + { + $options = $this->getOptions()->toArray(); + $options['drop'] = new TJavaScriptLiteral("function( event, ui ) { Prado.Callback(".TJavascript::encode($this->getUniqueID()).", { 'offset' : { 'left' : ui.offset.left - $(this).offset().left, 'top' : ui.offset.top - $(this).offset().top }, 'position' : ui.position, 'draggable' : ui.draggable.get(0).id }) }"); + return $options; + } + + /** + * Raises callback event. This method is required bu {@link ICallbackEventHandler} + * interface. + * It raises the {@link onDrop OnDrop} event, then, the {@link onCallback OnCallback} event + * This method is mainly used by framework and control developers. + * @param TCallbackEventParameter the parameter associated with the callback event + */ + public function raiseCallbackEvent($param) + { + $this->onDrop($param->getCallbackParameter()); + $this->onCallback($param); + } + + /** + * Raises the onDrop event. + * The drop parameters are encapsulated into a {@link TDropContainerEventParameter} + * + * @param object $dropControlId + */ + public function onDrop ($dropParams) + { + $this->raiseEvent('OnDrop', $this, new TJuiDroppableEventParameter ($this->getResponse(), $dropParams)); + + } + + /** + * This method is invoked when a callback is requested. The method raises + * 'OnCallback' event to fire up the event handlers. If you override this + * method, be sure to call the parent implementation so that the event + * handler can be invoked. + * @param TCallbackEventParameter event parameter to be passed to the event handlers + */ + public function onCallback($param) + { + $this->raiseEvent('OnCallback', $this, $param); + } + + /** + * 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()."').droppable(".$options.");"; + $cs->registerEndScript(sprintf('%08X', crc32($code)), $code); + } +} + +/** + * TJuiDroppableEventParameter class + * + * TJuiDroppableEventParameter encapsulate the parameter + * data for OnDrop event of TJuiDroppable components + * + * @author Christophe BOULAIN (Christophe.Boulain@ceram.fr) + * @copyright Copyright © 2008, PradoSoft + * @license http://www.pradosoft.com/license + * @version $Id: TDropContainer.php 3285 2013-04-11 07:28:07Z ctrlaltca $ + * @package System.Web.UI.JuiControls + */ +class TJuiDroppableEventParameter extends TCallbackEventParameter +{ + public function getDragElementId() { return $this->getCallbackParameter()->draggable; } + public function getPositionTop() { return $this->getCallbackParameter()->position->top; } + public function getPositionLeft() { return $this->getCallbackParameter()->position->left; } + public function getOffsetTop() { return $this->getCallbackParameter()->offset->top; } + public function getOffsetLeft() { return $this->getCallbackParameter()->offset->left; } + + /** + * GetDroppedControl + * + * Compatibility method to get the dropped control + * @return TControl dropped control, or null if not found + */ + public function getDroppedControl() + { + $control=null; + $service=prado::getApplication()->getService(); + if ($service instanceof TPageService) + { + // Find the control + // Warning, this will not work if you have a '_' in your control Id ! + $dropControlId=str_replace(TControl::CLIENT_ID_SEPARATOR,TControl::ID_SEPARATOR,$this->getCallbackParameter()->draggable); + $control=$service->getRequestedPage()->findControl($dropControlId); + } + return $control; + } +} \ No newline at end of file diff --git a/jQuery-PORTING.txt b/jQuery-PORTING.txt index b78de46c..16b32769 100644 --- a/jQuery-PORTING.txt +++ b/jQuery-PORTING.txt @@ -93,3 +93,11 @@ TAutoCompleter doesn't exists anymore, use TJuiAutoComplete instead, upgrading t * only the ItemTemplate is supported for the Suggestions repeater; * in the ItemTemplate you don't need to render the
  • anymore, but only the content itself * No Multiple selection support (by now, can be added in the future) +--- +TDraggable doesn't exists anymore, use TJuiDraggable instead, upgrading the code: + * Use jQuery-ui's Draggable options. +--- +TDropContainer doesn't exists anymore, use TJuiDroppable instead, upgrading the code: + * Use jQuery-ui's Droppable options. + * The event parameter format has changed a bit. +--- diff --git a/jQuery-WIP.txt b/jQuery-WIP.txt index 7adbadd2..2507092a 100644 --- a/jQuery-WIP.txt +++ b/jQuery-WIP.txt @@ -8,12 +8,12 @@ Targets: * port Prado.Element's functions (replace, setStyle, ..) (done) * port Effects (done) * port basic active controls (done) - * create substitutes for exotic standard controls (date picker, accordion, colorpicker, slider, ..) - * port exotic active controls (autocomplete, ...) + * create substitutes for exotic standard controls (date picker, accordion, colorpicker, slider, ..) (done) + * port exotic active controls (autocomplete, ...) (wip, using jquery-ui) * get tests running (started, wip) * ensure jQuery's compatibility mode with prototype (support old third party components from users? jQuery.noConflict(); by default?) * fix debug components (TJavascriptLogger) (done, but maybe dropping it is a good idea) - * implement some Jui components (maybe substitute old components with new, jquery-ui based ones?) + * implement some Jui components (maybe substitute old components with new, jquery-ui based ones?) (wip) * port demos * document everything @@ -25,9 +25,13 @@ List, Data controls *Validators Basic callback controls +WIP +TJuiAutoComplete +TJuiDraggable,TJuiDroppable + TBD Implement Ajax queue -Port Scriptaculous-based controls (accordion, drag&drop) +Port Scriptaculous-based controls (accordion, ...) Port *ratings Port inlineeditor Add JQuery-ui-Effects: clip, explode, transfer, switchclass -- cgit v1.2.3