From 303edb1dd308d3812102fbe25438e56413cd79a3 Mon Sep 17 00:00:00 2001 From: tof <> Date: Mon, 13 Oct 2008 13:40:34 +0000 Subject: Added drag and drop components --- framework/Web/Javascripts/source/packages.php | 5 +- .../source/prado/activecontrols/dragdrop.js | 24 ++ framework/Web/UI/ActiveControls/TDraggable.php | 152 ++++++++++++ framework/Web/UI/ActiveControls/TDropContainer.php | 275 +++++++++++++++++++++ 4 files changed, 454 insertions(+), 2 deletions(-) create mode 100755 framework/Web/Javascripts/source/prado/activecontrols/dragdrop.js create mode 100755 framework/Web/UI/ActiveControls/TDraggable.php create mode 100755 framework/Web/UI/ActiveControls/TDropContainer.php (limited to 'framework') diff --git a/framework/Web/Javascripts/source/packages.php b/framework/Web/Javascripts/source/packages.php index 7c0a1674..b19a5d18 100644 --- a/framework/Web/Javascripts/source/packages.php +++ b/framework/Web/Javascripts/source/packages.php @@ -47,7 +47,8 @@ $packages = array( ), 'dragdrop'=>array( - SCRIPTACULOUS_DIR.'/dragdrop.js' + SCRIPTACULOUS_DIR.'/dragdrop.js', + 'prado/activecontrols/dragdrop.js' ), 'slider'=>array( @@ -78,7 +79,7 @@ $dependencies = array( 'datepicker' => array('prado', 'datepicker'), 'colorpicker' => array('prado', 'colorpicker'), 'ajax' => array('prado', 'effects', 'ajax'), - 'dragdrop' => array('prado', 'effects', 'dragdrop'), + 'dragdrop' => array('prado', 'effects', 'ajax', 'dragdrop'), 'slider' => array('prado', 'slider'), 'keyboard' => array('prado', 'keyboard'), 'tabpanel' => array('prado', 'tabpanel'), diff --git a/framework/Web/Javascripts/source/prado/activecontrols/dragdrop.js b/framework/Web/Javascripts/source/prado/activecontrols/dragdrop.js new file mode 100755 index 00000000..0b42afd5 --- /dev/null +++ b/framework/Web/Javascripts/source/prado/activecontrols/dragdrop.js @@ -0,0 +1,24 @@ +/** + * DropContainer control + */ + +Prado.WebUI.DropContainer = Class.extend(Prado.WebUI.CallbackControl); + +Object.extend(Prado.WebUI.DropContainer.prototype, +{ + initialize: function(options) + { + this.options = options; + Object.extend (this.options, + { + onDrop: this.onDrop.bind(this) + }); + + Droppables.add (options.ID, this.options); + }, + + onDrop: function(dragElement, dropElement) + { + Prado.Callback(this.options.EventTarget, dragElement.id, null, this.options); + } +}); diff --git a/framework/Web/UI/ActiveControls/TDraggable.php b/framework/Web/UI/ActiveControls/TDraggable.php new file mode 100755 index 00000000..e4e4c4c4 --- /dev/null +++ b/framework/Web/UI/ActiveControls/TDraggable.php @@ -0,0 +1,152 @@ +setViewState('DragHandle', TPropertyValue::ensureString($value), null); + } + + /** + * Get the handle id or css class + * @return string + */ + public function getHandle () + { + return $this->getViewState('DragHandle', null); + } + + /** + * Determine if draggable element should revert to it orginal position + * upon release in an non-droppable container. + * @return boolean true to revert + */ + public function getRevert() + { + return $this->getViewState('Revert', true); + } + + /** + * Sets whether the draggable element should revert to it orginal position + * upon release in an non-droppable container. + * @param boolean true to revert + */ + public function setRevert($value) + { + $this->setViewState('Revert', TPropertyValue::ensureBoolean($value), true); + } + + /** + * 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 + */ + public function getGhosting () + { + return $this->getViewState('Ghosting', false); + } + + /** + * 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 + */ + public function setGhosting ($value) + { + $this->setViewState('Ghosting', TPropertyValue::ensureBoolean($value), false); + } + + /** + * Determine if the element should be constrainted in one direction or not + * @return CDraggableConstraint + */ + public function getConstraint() + { + return $this->getViewState('Constraint', TDraggableConstraint::None); + } + + /** + * Set wether the element should be constrainted in one direction + * @param CDraggableConstraint + */ + public function setConstraint($value) + { + $this->setViewState('Constraint', TPropertyValue::ensureEnum($value, 'TDraggableConstraint'), TDraggableConstraint::None); + } + + + /** + * 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()); + $cs=$this->getPage()->getClientScript(); + $cs->registerPradoScript('dragdrop'); + $options=TJavascript::encode($this->getPostBackOptions()); + $class=$this->getClientClassName(); + $code="new {$class}('{$this->getClientId()}', {$options}) "; + $cs->registerEndScript(sprintf('%08X', crc32($code)), $code); + } + + /** + * Gets the name of the javascript class responsible for performing postback for this control. + * This method overrides the parent implementation. + * @return string the javascript class name + */ + protected function getClientClassName () + { + return 'Draggable'; + } + + /** + * Gets the post back options for this textbox. + * @return array + */ + protected function getPostBackOptions() + { + $options['ID'] = $this->getClientID(); + + 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(); + + return $options; + } + +} + +class TDraggableConstraint extends TEnumerable +{ + const None='None'; + const Horizontal='Horizontal'; + const Vertical='Vertical'; +} +?> \ No newline at end of file diff --git a/framework/Web/UI/ActiveControls/TDropContainer.php b/framework/Web/UI/ActiveControls/TDropContainer.php new file mode 100755 index 00000000..5d090d95 --- /dev/null +++ b/framework/Web/UI/ActiveControls/TDropContainer.php @@ -0,0 +1,275 @@ +{@link setAcceptCssClass AcceptCssClass} : a coma delimited classname of elements that the drop container can accept. + * {@link setHoverCssClass HoverCssClass}: CSS classname of the container when a draggable element hovers over the container. + * + * Events: + * + * {@link OnDrop OnDrop} : raised when a TDraggable control is dropped. The dropped control is encapsulated in the event parameter + * + * @author Christophe BOULAIN (Christophe.Boulain@gmail.com) + * @copyright Copyright © 2008, PradoSoft + * @license http://www.pradosoft.com/license + * @version $Id$ + */ +class TDropContainer extends TPanel implements IActiveControl, ICallbackEventHandler +{ + private $_container=null; + + /** + * 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 TActiveControlAdapter($this)); + } + + /** + * @return TBaseActiveControl standard active control options. + */ + public function getActiveControl() + { + return $this->getAdapter()->getBaseActiveControl(); + } + + + /** + * Gets the Css class name that this container can accept. + * @return string + */ + public function getAcceptCssClass() + { + return $this->getViewState('Accepts', ''); + } + + /** + * Sets the Css class name that this container can accept. + * @param string comma delimited css class names. + */ + public function setAcceptCssClass($value) + { + $this->setViewState('Accepts', TPropertyValue::ensureArray($value), ''); + } + + /** + * Sets the Css class name used when a draggble element is hovering + * over this container. + * @param string css class name during draggable hover. + */ + public function setHoverCssClass($value) + { + $this->setViewState('HoverClass', $value, ''); + } + + /** + * Gets the Css class name used when a draggble element is hovering + * over this container. + * @return string css class name during draggable hover. + */ + public function getHoverCssClass() + { + return $this->getViewState('HoverClass', ''); + } + + + /** + * 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 dropped control is encapsulated into a {@link TDropContainerEventParameter} + * + * @param string $dropControlId + */ + public function onDrop ($dropControlId) + { + // Find the control + // Warning, this will not work if you have a '_' in your control Id ! + $control=$this->getPage(); + $namingContainers=explode(TControl::CLIENT_ID_SEPARATOR, $dropControlId); + foreach ($namingContainers as $nc) + { + $control=$control->findControl($nc); + } + $this->raiseEvent('OnDrop', $this, new TDropContainerEventParameter ($control)); + + } + + /** + * 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); + } + + /** + * Gets the post back options for this textbox. + * @return array + */ + protected function getPostBackOptions() + { + $options['ID'] = $this->getClientID(); + $options['EventTarget'] = $this->getUniqueID(); + + $options['accept'] = TJavascript::encode($this->getAcceptCssClass()); + $options['hoverclass'] = $this->getHoverCssClass(); + return $options; + } + + /** + * Gets the name of the javascript class responsible for performing postback for this control. + * This method overrides the parent implementation. + * @return string the javascript class name + */ + protected function getClientClassName() + { + return 'Prado.WebUI.DropContainer'; + } + + + /** + * 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()); + + $this->getPage()->getClientScript()->registerPradoScript('dragdrop'); + + $this->getActiveControl()->registerCallbackClientScript( + $this->getClientClassName(), $this->getPostBackOptions()); + } + + /** + * Creates child control + * Override parent implementation to create a container which will contain all + * child controls. This container will be a TActivePanel, in order to allow user + * to update its content on callback. + */ + public function createChildControls () + { + if ($this->_container===null) + { + $this->_container=Prado::CreateComponent('System.Web.UI.ActiveControls.TActivePanel'); + $this->_container->setId($this->getId().'_content'); + parent::getControls()->add($this->_container); + } + } + + /** + * Override parent implementation to return the container control collection. + * + * @return TControlCollection + */ + public function getControls() + { + $this->ensureChildControls(); + return $this->_container->getControls(); + } + + /** + * Renders and replaces the panel's content on the client-side. + * When render() is called before the OnPreRender event, such as when render() + * is called during a callback event handler, the rendering + * is defered until OnPreRender event is raised. + * @param THtmlWriter html writer + */ + public function render ($writer) + { + if($this->getHasPreRendered()) + { + parent::render($writer); + if($this->getActiveControl()->canUpdateClientSide()) + $this->getPage()->getCallbackClient()->replaceContent($this->_container,$writer); + } + else + { + $this->getPage()->getAdapter()->registerControlToRender($this->_container,$writer); + } + } + +} + +/** + * TDropContainerEventParameter class + * + * TDropContainerEventParameter encapsulate the parameter + * data for OnDrop event of TDropContainer components + * + * @author Christophe BOULAIN (Christophe.Boulain@ceram.fr) + * @copyright Copyright © 2008, PradoSoft + * @license http://www.pradosoft.com/license + * @version $Id$ + */ +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) + { + $this->_droppedControl=$control; + } + + /** + * @return TDraggable + */ + public function getDroppedControl () + { + return $this->_droppedControl; + } +} +?> \ No newline at end of file -- cgit v1.2.3