Enhancement on drag & drop controls.

5 files changed, 362 insertions, 37 deletions

diff --git a/framework/Web/Javascripts/source/packages.php b/framework/Web/Javascripts/source/packages.php
index b9b4c7bf..7ced14bc 100644
--- a/framework/Web/Javascripts/source/packages.php
+++ b/framework/Web/Javascripts/source/packages.php
@@ -50,6 +50,10 @@ $packages = array(
 		'prado/activecontrols/dragdrop.js'

 	),

 

+	'dragdropextra'=>array(

+		'prado/activecontrols/dragdropextra.js',

+	),

+

 	'slider'=>array(

 		'prado/controls/slider.js'

 	),

@@ -88,6 +92,7 @@ $dependencies = array(
 		'tabpanel'			=> array('prado', 'tabpanel'),

 		'activedatepicker' 	=> array('datepicker', 'ajax', 'activedatepicker'),

 		'activefileupload' 	=> array('prado', 'ajax', 'activefileupload'),

+		'dragdropextra'		=> array('prado', 'effects', 'ajax', 'dragdrop','dragdropextra'),

 );

 

 return array($packages, $dependencies);

diff --git a/framework/Web/Javascripts/source/prado/activecontrols/dragdrop.js b/framework/Web/Javascripts/source/prado/activecontrols/dragdrop.js
index fab7808f..107269f2 100755
--- a/framework/Web/Javascripts/source/prado/activecontrols/dragdrop.js
+++ b/framework/Web/Javascripts/source/prado/activecontrols/dragdrop.js
@@ -18,8 +18,23 @@ Object.extend(Prado.WebUI.DropContainer.prototype,
 		Prado.Registry.set(options.ID, this);

 	},

 	

-	onDrop: function(dragElement, dropElement)

+	onDrop: function(dragElement, dropElement, event)

 	{

-		Prado.Callback(this.options.EventTarget, dragElement.id, null, this.options);

+		var elementId=dragElement.id.replace(/clone_/,"");

+		var req = new Prado.CallbackRequest(this.options.EventTarget, this.options);

+		req.setCallbackParameter({

+			DragElementID : elementId,

+			ScreenX : event.screenX,

+			ScreenY : event.screenY,

+			OffsetX : event.offsetX,

+			OffsetY : event.offsetY,

+			ClientX : event.clientX,

+			ClientY : event.clientY,

+			AltKey : event.altKey,

+			CtrlKey : event.ctrlKey,

+			ShiftKey : event.shiftKey

+		});

+		req.dispatch();

+

 	}

 });

diff --git a/framework/Web/Javascripts/source/prado/activecontrols/dragdropextra.js b/framework/Web/Javascripts/source/prado/activecontrols/dragdropextra.js
new file mode 100644
index 00000000..1cec6f93
--- /dev/null
+++ b/framework/Web/Javascripts/source/prado/activecontrols/dragdropextra.js
@@ -0,0 +1,233 @@
+//  DragDropExtra Scriptaculous Enhancement, version 0.5
+//  (c) 2007-2008 Christopher Williams, Iterative Designs
+//
+// v0.5 release
+//      - Fixed bug where 2nd drag on an element in IE would result in funny placement of the
+//        element. [shammond42]
+// v0.4 release
+//		- Fixed issue with dragging and dropping in IE7 due to an exception being thrown and not properly reseting in FinishDrag.
+// v0.3 release
+//	  - Fixed bug found by Phillip Sauerbeck psauerbeck@gmail. Tests added based on Phillip's efforts.
+// v0.2 release
+//		- Minor bug fix for the releasing of objects after they have been dropped, prevents memory leak.
+// v0.1 release
+//		- initial release for the super ghosting capability
+//		- Drags from one scrolling list to the other (overflow:auto)
+//		- Retains the original object so that it can remain present despite being dragged
+// 
+// dragdropextra.js is freely distributable under the terms of an MIT-style license.
+// For details, see the Iterative Designs web site: http://www.iterativedesigns.com/
+// Parts of this code have been taken from the original dragdrop.js library which is 
+// copyrighted by (c) 2005-2007 Thomas Fuchs (http://script.aculo.us, 
+// http://mir.aculo.us) and (c) 2005-2007 Sammi Williams 
+// (http://www.oriontransfer.co.nz, sammi@oriontransfer.co.nz) and available under 
+// a MIT-style license.
+
+Draggable.prototype.startDrag = function(event) {
+  this.dragging = true;
+  if(!this.delta)
+    this.delta = this.currentDelta();
+  
+  if(this.options.zindex) {
+    this.originalZ = parseInt(Element.getStyle(this.element,'z-index') || 0);
+    this.element.style.zIndex = this.options.zindex;
+  }
+  
+  if(this.options.ghosting) {
+    this._clone = this.element.cloneNode(true);
+    this.element._originallyAbsolute = (this.element.getStyle('position') == 'absolute');
+    if (!this.element._originallyAbsolute)
+      Position.absolutize(this.element);
+    this.element.parentNode.insertBefore(this._clone, this.element);
+  }
+  
+	if(this.options.superghosting) {
+		Position.prepare();
+		var pointer = [Event.pointerX(event), Event.pointerY(event)];
+		body = document.getElementsByTagName("body")[0];
+		me = this.element;
+		this._clone = me.cloneNode(true);
+		if (Prototype.Browser.IE) {
+ 			// Clear event handing from the clone
+			// Solves the second drag issue in IE
+			this._clone.clearAttributes();
+			this._clone.mergeAttributes(me.cloneNode(false));
+		}
+		me.parentNode.insertBefore(this._clone, me);
+		me.id = "clone_"+me.id;
+		me.hide();
+
+		Position.absolutize(me);
+		me.parentNode.removeChild(me);
+		body.appendChild(me);
+		//Retain height and width of object only if it has been nulled out.  -v0.3 Fix
+		if (me.style.width == "0px" || me.style.height == "0px")	{
+		me.style.width=Element.getWidth(this._clone)+"px";
+		me.style.height=Element.getHeight(this._clone)+"px";
+		}
+
+		//overloading in order to reduce repeated code weight.
+		this.originalScrollTop = (Element.getHeight(this._clone)/2);
+
+		this.draw(pointer);
+		me.show();
+	}
+
+  if(this.options.scroll) {
+    if (this.options.scroll == window) {
+      var where = this._getWindowScroll(this.options.scroll);
+      this.originalScrollLeft = where.left;
+      this.originalScrollTop = where.top;
+    } else {
+      this.originalScrollLeft = this.options.scroll.scrollLeft;
+      this.originalScrollTop = this.options.scroll.scrollTop;
+    }
+  }
+  
+  Draggables.notify('onStart', this, event);
+      
+  if(this.options.starteffect) this.options.starteffect(this.element);
+}
+
+
+
+
+Draggable.prototype.draw = function(point) {
+	  var pos = Position.cumulativeOffset(this.element);
+	  if(this.options.ghosting) {
+	    var r   = Position.realOffset(this.element);
+	    pos[0] += r[0] - Position.deltaX; 
+		pos[1] += r[1] - Position.deltaY;
+	  }
+  
+	  var d = this.currentDelta();
+	  pos[0] -= d[0]; 
+	  pos[1] -= d[1];
+  
+	  if(this.options.scroll && (this.options.scroll != window && this._isScrollChild)) {
+	    pos[0] -= this.options.scroll.scrollLeft-this.originalScrollLeft;
+	    pos[1] -= this.options.scroll.scrollTop-this.originalScrollTop;
+	  }
+  
+	  var p = [0,1].map(function(i){ 
+	    return (point[i]-pos[i]-this.offset[i]) 
+	  }.bind(this));
+
+        if(this.options.snap) {
+          if(Object.isFunction(this.options.snap)) {
+            p = this.options.snap(p[0],p[1],this);
+          } else {
+          if(Object.isArray(this.options.snap)) {
+            p = p.map( function(v, i) {
+              return (v/this.options.snap[i]).round()*this.options.snap[i] }.bind(this))
+          } else {
+            p = p.map( function(v) {
+              return (v/this.options.snap).round()*this.options.snap }.bind(this))
+          }
+        }}
+
+  	if (this.options.superghosting)	{	
+		p[1] = point[1] - this.originalScrollTop;
+	}
+
+
+
+    var style = this.element.style;
+    if((!this.options.constraint) || (this.options.constraint=='horizontal'))
+      style.left = p[0] + "px";
+    if((!this.options.constraint) || (this.options.constraint=='vertical'))
+      style.top  = p[1] + "px";
+    
+    if(style.visibility=="hidden") style.visibility = ""; // fix gecko rendering
+}
+
+Draggable.prototype.initDrag = function(event) {
+  if(!Object.isUndefined(Draggable._dragging[this.element]) &&
+    Draggable._dragging[this.element]) return;
+  if(Event.isLeftClick(event)) {    
+    // abort on form elements, fixes a Firefox issue
+    var src = Event.element(event);
+    if((tag_name = src.tagName.toUpperCase()) && (
+      tag_name=='INPUT' ||
+      tag_name=='SELECT' ||
+      tag_name=='OPTION' ||
+      tag_name=='BUTTON' ||
+      tag_name=='TEXTAREA')) return;
+      
+    var pointer = [Event.pointerX(event), Event.pointerY(event)];
+    var pos     = Position.cumulativeOffset(this.element);
+    this.offset = [0,1].map( function(i) { return (pointer[i] - pos[i]) });
+    
+    Draggables.activate(this);
+    Event.stop(event);
+  }
+}
+
+Droppables.isAffected = function(point, element, drop) {
+	Position.prepare();
+	positioned_within = Position.withinIncludingScrolloffsets(drop.element, point[0], point[1])
+	return (
+      (drop.element!=element) &&
+      ((!drop._containers) ||
+        this.isContained(element, drop)) &&
+      ((!drop.accept) ||
+        (Element.classNames(element).detect( 
+          function(v) { return drop.accept.include(v) } ) )) && positioned_within );
+
+
+}
+
+Draggable.prototype.finishDrag = function(event, success) {
+  this.dragging = false;
+  
+  if(this.options.quiet){
+    Position.prepare();
+    var pointer = [Event.pointerX(event), Event.pointerY(event)];
+    Droppables.show(pointer, this.element);
+  }
+
+  if(this.options.ghosting) {
+    if (!this.element._originallyAbsolute)
+      Position.relativize(this.element);
+    delete this.element._originallyAbsolute;
+    Element.remove(this._clone);
+    this._clone = null;
+  }
+
+  var dropped = false; 
+  if(success) { 
+    dropped = Droppables.fire(event, this.element); 
+    if (!dropped) dropped = false; 
+  }
+  if(dropped && this.options.onDropped) this.options.onDropped(this.element);
+  Draggables.notify('onEnd', this, event);
+
+  var revert = this.options.revert;
+  if(revert && Object.isFunction(revert)) revert = revert(this.element);
+  
+  var d = this.currentDelta();
+  if(revert && this.options.reverteffect) {
+    if (dropped == 0 || revert != 'failure')
+      this.options.reverteffect(this.element,
+        d[1]-this.delta[1], d[0]-this.delta[0]);
+  } else {
+    this.delta = d;
+  }
+
+  if(this.options.zindex)
+    this.element.style.zIndex = this.originalZ;
+
+  if(this.options.endeffect) 
+    this.options.endeffect(this.element);
+    
+
+	if(this.options.superghosting) {
+		body = document.getElementsByTagName("body")[0];
+	  Element.remove(this.element);
+		new Draggable(this._clone, this.options);
+	}
+
+
+  Draggables.deactivate(this);
+  Droppables.reset();
+}
diff --git a/framework/Web/UI/ActiveControls/TDraggable.php b/framework/Web/UI/ActiveControls/TDraggable.php
index e4e4c4c4..4c7803a7 100755
--- a/framework/Web/UI/ActiveControls/TDraggable.php
+++ b/framework/Web/UI/ActiveControls/TDraggable.php
@@ -11,7 +11,15 @@
 /**
  * TDraggable is a control which can be dragged
  * 
- * This control will make "draggable" control.  
+ * This control will make "draggable" control.
+ * Properties :
+ *
+ * <b>{@link setGhosting Ghosting}</b> : If set to "Ghosting" or "True", the dragged element will be cloned, and the clone will be dragged.
+ * If set to "SuperGhosting", the element will be cloned, and attached to body, so it can be dragged outside of its parent.
+ * If set to "None" of "False" (default), the element itself is dragged
+ * <b>{@link setRevert Revert}</b>: Set to True if you want your dragged element to revert to its initial position if not dropped on a valid area.
+ * <b>{@link setConstraint Constraint}</b>: Set this to Horizontal or Vertical if you want to constraint your move in one direction.
+ * <b>{@link setHandle Handle}</b>:
  * 
  * @author Christophe BOULAIN (Christophe.Boulain@gmail.com)
  * @copyright Copyright &copy; 2008, PradoSoft
@@ -62,22 +70,38 @@ class TDraggable extends TPanel
 	 * Determine if the element should be cloned when dragged
 	 * If true, Clones the element and drags the clone, leaving the original in place until the clone is dropped.
 	 * Defaults to false
-	 * @return boolean true to clone the element
+	 * 	Since 3.2, Ghosting can be set to one of the value of {@link TDraggableGhostingOptions} enumeration.
+	 *  o "True" or "Ghosting" means standard pre-3.2 ghosting mechanism
+	 *  o "SuperGhosting" use the Superghosting patch by Christopher Williams, which allow elements to be dragged from an
+	 *    scrollable list
+	 *  o "False" or "None" means no Ghosting options
+	 *
+	 * @return TDraggableGhostingOption to clone the element
 	 */
 	public function getGhosting ()
 	{
-		return $this->getViewState('Ghosting', false);
+		return $this->getViewState('Ghosting', TDraggableGhostingOptions::None);
 	}
 	
 	/**
 	 * Sets wether the element should be cloned when dragged
 	 * If true, Clones the element and drags the clone, leaving the original in place until the clone is dropped.
 	 * Defaults to false
-	 * @return boolean true to clone the element
+	 *
+	 * Since 3.2, Ghosting can be set to one of the value of {@link TDraggableGhostingOptions} enumeration.
+	 *  o "True" or "Ghosting" means standard pre-3.2 ghosting mechanism
+	 *  o "SuperGhosting" use the Superghosting patch by Christopher Williams, which allow elements to be dragged from an
+	 *    scrollable list
+	 *  o "False" or "None" means no Ghosting options
+	 *
 	 */
 	public function setGhosting ($value)
 	{
-		$this->setViewState('Ghosting', TPropertyValue::ensureBoolean($value), false);
+		if (strcasecmp($value,'true')==0 || $value===true)
+			$value=TDraggableGhostingOptions::Ghosting;
+		elseif (strcasecmp($value,'false')==0 || $value===false)
+			$value=TDraggableGhostingOptions::None;
+		$this->setViewState('Ghosting', TPropertyValue::ensureEnum($value, 'TDraggableGhostingOptions'), TDraggableGhostingOptions::None);
 	}
 	
 	/**
@@ -108,7 +132,10 @@ class TDraggable extends TPanel
 		parent::addAttributesToRender($writer);
 		$writer->addAttribute('id',$this->getClientID());
 		$cs=$this->getPage()->getClientScript();
-		$cs->registerPradoScript('dragdrop');
+		if ($this->getGhosting()==TDraggableGhostingOptions::SuperGhosting)
+			$cs->registerPradoScript('dragdropextra');
+		else
+			$cs->registerPradoScript('dragdrop');
 		$options=TJavascript::encode($this->getPostBackOptions());
 		$class=$this->getClientClassName();
 		$code="new {$class}('{$this->getClientId()}', {$options}) ";
@@ -136,7 +163,15 @@ class TDraggable extends TPanel
 		if (($handle=$this->getHandle())!== null) $options['handle']=$handle;
 		$options['revert']=$this->getRevert();
 		if (($constraint=$this->getConstraint())!==TDraggableConstraint::None) $options['constraint']=strtolower($constraint);
-		$options['ghosting']=$this->getGhosting();
+		switch ($this->getGhosting()) 
+		{
+			case TDraggableGhostingOptions::SuperGhosting:
+				$options['superghosting']=true;
+				break;
+			case TDraggableGhostingOptions::Ghosting:
+				$options['ghosting']=true;
+				break;
+		}
 
 		return $options;
 	}
@@ -149,4 +184,11 @@ class TDraggableConstraint extends TEnumerable
 	const Horizontal='Horizontal';
 	const Vertical='Vertical';
 }
+
+class TDraggableGhostingOptions extends TEnumerable
+{
+	const None='None';
+	const Ghosting='Ghosting';
+	const SuperGhosting='SuperGhosting';
+}
 ?>
\ No newline at end of file
diff --git a/framework/Web/UI/ActiveControls/TDropContainer.php b/framework/Web/UI/ActiveControls/TDropContainer.php
index 75a80625..8f7792f3 100755
--- a/framework/Web/UI/ActiveControls/TDropContainer.php
+++ b/framework/Web/UI/ActiveControls/TDropContainer.php
@@ -30,7 +30,9 @@ Prado::using('System.Web.UI.ActiveControls.TActivePanel');
  * 
  * Events:
  * 
- * <b>{@link OnDrop OnDrop} : raised when a TDraggable control is dropped. The dropped control is encapsulated in the event parameter
+ * <b>{@link OnDrop OnDrop} : raised when a TDraggable control is dropped. The dropped control id is encapsulated in the event parameter,
+ * as well as mouse coordinates and key modifiers status
+ *
  * 
  * @author Christophe BOULAIN (Christophe.Boulain@gmail.com)
  * @copyright Copyright &copy; 2008, PradoSoft
@@ -115,17 +117,13 @@ class TDropContainer extends TPanel implements IActiveControl, ICallbackEventHan
 	
 	/**
 	 * Raises the onDrop event. 
-	 * The dropped control is encapsulated into a {@link TDropContainerEventParameter}
+	 * The dropp parameters are encapsulated into a {@link TDropContainerEventParameter}
 	 * 
-	 * @param string $dropControlId
+	 * @param object $dropControlId
 	 */
-	public function onDrop ($dropControlId)
+	public function onDrop ($dropParams)
 	{
-		// 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,$dropControlId);
-		$control=$this->getPage()->findControl($dropControlId);
-		$this->raiseEvent('OnDrop', $this, new TDropContainerEventParameter ($control));
+		$this->raiseEvent('OnDrop', $this, new TDropContainerEventParameter ($dropParams));
 		
 	}
 	
@@ -244,28 +242,60 @@ class TDropContainer extends TPanel implements IActiveControl, ICallbackEventHan
  */
 class TDropContainerEventParameter extends TEventParameter
 {
-	/*
-	 * the id of control which has been dropped
-	 * @var string
-	 */
-	private $_droppedControl;
-	
-	/**
-	 * constructor
-	 *
-	 * @param string the id of control which been dropped
-	 */
-	public function __construct ($control)
+	private $_dragElementId;
+	private $_screenX;
+	private $_screenY;
+	private $_offsetX;
+	private $_offsetY;
+	private $_clientX;
+	private $_clientY;
+	private $_shiftKey;
+	private $_ctrlKey;
+	private $_altKey;
+
+	public function __construct($dropParams)
 	{
-		$this->_droppedControl=$control;
+		$this->_dragElementId = $dropParams->DragElementID;
+		$this->_screenX = $dropParams->ScreenX;
+		$this->_screenY = $dropParams->ScreenY;
+		$this->_offsetX = isset($dropParams->OffsetX) ? $dropParams->OffsetX : false;
+		$this->_offsetY = isset($dropParams->OffsetY) ? $dropParams->OffsetY : false;
+		$this->_clientX = $dropParams->ClientX;
+		$this->_clientY = $dropParams->ClientY;
+		$this->_shiftKey = TPropertyValue::ensureBoolean($dropParams->ShiftKey);
+		$this->_ctrlKey = TPropertyValue::ensureBoolean($dropParams->CtrlKey);
+		$this->_altKey = TPropertyValue::ensureBoolean($dropParams->AltKey);
 	}
-	
+
+	public function getDragElementId()			{ return $this->_dragElementId; }
+	public function getScreenX()				{ return $this->_screenX; }
+	public function getScreenY()				{ return $this->_screenY; }
+	public function getOffsetX()				{ return $this->_offsetX; }
+	public function geOffsetY()					{ return $this->_offsetY; }
+	public function getClientX()				{ return $this->_clientX; }
+	public function getClientY()				{ return $this->_clientY; }
+	public function getShiftKey()				{ return $this->_shiftKey; }
+	public function getCtrlKey()				{ return $this->_ctrlKey; }
+	public function getAltKey()					{ return $this->_altKey; }
+
 	/**
-	 * @return TDraggable 
+	 * GetDroppedControl
+	 *
+	 * Compatibility method to get the dropped control
+	 * @return TControl dropped control, or null if not found
 	 */
-	public function getDroppedControl ()
-	{
-		return $this->_droppedControl;
-	}
+	 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->_dragElementId);
+			$control=$service->getRequestedPage()->findControl($dropControlId);
+		 }
+		 return $control;
+	 }
 }
 ?>
\ No newline at end of file