summaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authorFabio Bas <ctrlaltca@gmail.com>2013-12-04 23:40:28 +0100
committerFabio Bas <ctrlaltca@gmail.com>2013-12-04 23:40:37 +0100
commit1e3d5c170fd3bf18d1e153473e020b1fa5294d05 (patch)
tree5c0d0bb542b7be76589a16406664eb5f9317a95e
parent0d613aaf34d76fab8788e5677997d4374a3afcd1 (diff)
jQuery-ui based draggable and droppable
-rw-r--r--framework/Web/UI/JuiControls/TJuiDraggable.php91
-rw-r--r--framework/Web/UI/JuiControls/TJuiDroppable.php188
-rw-r--r--jQuery-PORTING.txt8
-rw-r--r--jQuery-WIP.txt12
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