diff options
| -rw-r--r-- | .gitattributes | 1 | ||||
| -rw-r--r-- | HISTORY | 1 | ||||
| -rw-r--r-- | framework/Web/Javascripts/source/packages.php | 5 | ||||
| -rwxr-xr-x | framework/Web/Javascripts/source/prado/activecontrols/dragdrop.js | 19 | ||||
| -rw-r--r-- | framework/Web/Javascripts/source/prado/activecontrols/dragdropextra.js | 233 | ||||
| -rwxr-xr-x | framework/Web/UI/ActiveControls/TDraggable.php | 56 | ||||
| -rwxr-xr-x | framework/Web/UI/ActiveControls/TDropContainer.php | 86 |
7 files changed, 364 insertions, 37 deletions
diff --git a/.gitattributes b/.gitattributes index c3670138..ed6774d4 100644 --- a/.gitattributes +++ b/.gitattributes @@ -2607,6 +2607,7 @@ framework/Web/Javascripts/source/prado/activecontrols/activecontrols3.js -text framework/Web/Javascripts/source/prado/activecontrols/activedatepicker.js -text framework/Web/Javascripts/source/prado/activecontrols/ajax3.js -text framework/Web/Javascripts/source/prado/activecontrols/dragdrop.js -text +framework/Web/Javascripts/source/prado/activecontrols/dragdropextra.js -text framework/Web/Javascripts/source/prado/activecontrols/inlineeditor.js -text framework/Web/Javascripts/source/prado/activecontrols/json.js -text framework/Web/Javascripts/source/prado/activefileupload/ActiveFileUploadBlank.html -text @@ -6,6 +6,7 @@ NEW: Port Yii's Models and Behaviors (Daniel + Robin) NEW: Add TActiveDataList (Marcosanobre, Robin) NEW: Add TActiveRepeater (LCS Team, Christophe) NEW: Add TActiveDatagrid (LCS Team, Christophe) +ENH: Issue#173 - Add "dragdropextra" (superghosting) patch, mouse coordinates and key status to drag & drop controls (Christophe, DevWorx) Version 3.1.6 to be released BUG: Issue#98 - Missing file in quickstart demo (Chrisotphe) 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 © 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 © 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 |