jQuery-ui based draggable and droppable

4 files changed, 295 insertions, 4 deletions

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 @@
+<?php
+/**
+ * TJuiDraggable class file.
+ *
+ * @author Fabio Bas <ctrlaltca[at]gmail[dot]com>
+ * @link http://www.pradosoft.com/
+ * @copyright Copyright &copy; 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.
+ *
+ *
+ * <code>
+ * <com:TJuiDraggable
+ *	ID="drag1"
+ *	Style="border: 1px solid red; width:100px;height:100px"
+ *	Options.Axis="y"
+ * >
+ * drag me
+ * </com:TJuiDraggable>
+ * </code>
+ *
+ * @author Fabio Bas <ctrlaltca[at]gmail[dot]com>
+ * @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 @@
+<?php
+/**
+ * TJuiDroppable class file.
+ *
+ * @author Fabio Bas <ctrlaltca[at]gmail[dot]com>
+ * @link http://www.pradosoft.com/
+ * @copyright Copyright &copy; 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.
+ *
+ * <code>
+ * <com:TJuiDraggable
+ * 	ID="drag1"
+ * 	Style="border: 1px solid red; width:100px;height:100px;background-color: #fff"
+ * >
+ * drag me
+ * </com:TJuiDraggable>
+ * 
+ * <com:TJuiDroppable
+ * 	ID="drop1"
+ * 	Style="border: 1px solid blue; width:600px;height:600px; background-color: lime"
+ * 	OnDrop="drop1_ondrop"
+ * >
+ * drop it over me
+ * </com:TJuiDroppable>
+ * </code>
+ *
+ * <code>
+ *	public function drop1_ondrop($sender, $param)
+ *	{
+ *		$draggable=$param->getDroppedControl()->ID;
+ *		$this->drop1->Controls->clear();
+ *		$this->drop1->Controls->add("Dropped ".$draggable." at: <br/>Top=".$param->getOffsetTop()." Left=".$param->getOffsetLeft());
+ *		// it's still an active panel, after all
+ *		$this->drop1->render($param->NewWriter);
+ *	}
+ * </code>
+ *
+ * @author Fabio Bas <ctrlaltca[at]gmail[dot]com>
+ * @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 <b>OnDrop</b> event of TJuiDroppable components
+ * 
+ * @author Christophe BOULAIN (Christophe.Boulain@ceram.fr)
+ * @copyright Copyright &copy; 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 <li/> 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