Added drag and drop components

7 files changed, 249 insertions, 1 deletions

diff --git a/demos/quickstart/protected/pages/ActiveControls/DragDrop.page b/demos/quickstart/protected/pages/ActiveControls/DragDrop.page
new file mode 100755
index 00000000..0969ddd0
--- /dev/null
+++ b/demos/quickstart/protected/pages/ActiveControls/DragDrop.page
@@ -0,0 +1,26 @@
+<com:TContent ID="body">

+<!-- $Id$ -->

+<h1>TDropContainer</h1>

+<com:DocLink ClassPath="System.Web.UI.ActiveControls.TDropContainer" />

+

+<p class="block-content"><tt>TDropContainer</tt> represent an area where 
+<tt>TDraggable</tt> controls can be dropped.

+When a <tt>TDraggable</tt> is dropped,  a

+callback request is initiated. The <tt>OnCallback</tt> event is raised

+during a callback request and it is raised <strong>after</strong>

+the <tt>OnDropk</tt> event.

+</p>
+
+

+<h1>TDraggable</h1>
+<com:DocLink ClassPath="System.Web.UI.ActiveControls.TDraggable" />
+
+<p class="block-content"><tt>TDraggable</tt> will make its child controls 'draggable'.
+When a <tt>TDraggable</tt> is dropped,  a
+callback request is initiated. The <tt>OnCallback</tt> event is raised
+during a callback request and it is raised <strong>after</strong>
+the <tt>OnDropk</tt> event.
+</p>

+<com:RunBar PagePath="ActiveControls.Samples.DragDrop.Home" />

+

+<div class="last-modified">$Id$</div></com:TContent>
\ No newline at end of file
diff --git a/demos/quickstart/protected/pages/ActiveControls/Home.page b/demos/quickstart/protected/pages/ActiveControls/Home.page
index 5cf4ab17..3cd9b0aa 100644
--- a/demos/quickstart/protected/pages/ActiveControls/Home.page
+++ b/demos/quickstart/protected/pages/ActiveControls/Home.page
@@ -160,6 +160,12 @@ TActiveButton</a> control. See also the later part of the <a href="?page=Tutoria
 	* <a href="?page=ActiveControls.ValueTriggeredCallback">TValueTriggeredCallback</a>

 	monitors (using a timer) an attribute of an HTML element and triggers a callback request

 	when the attribute value changes.

+	</li>
+	
+	<li>
+	<a href="?page=ActiveControls.DrapDrop">TDropContainer & TDraggable</a> represents drag and drop containers. 
+		The former will make its child controls "draggable" while the latter will raise a callback when a draggable
+		control is dropped on it.
 	</li>

 

 </ul>

@@ -310,7 +316,21 @@ if Javascript was disabled on the client's browser.</p>
 	<a href="?page=ActiveControls.ValueTriggeredCallback">TValueTriggeredCallback</a>

 	</td>

 	<td>Yes</td><td>No</td>

-  </tr>

+  </tr>
+  
+  <tr><td>
+  	<a href="?page=ActiveControls.DragDrop">TDropContainer</a>
+  	</td>
+  	<td>Yes</td><td>No</td>
+  </tr>
+
+  <tr><td>
+  	<a href="?page=ActiveControls.DragDrop">TDraggable</a>
+  	</td>
+  	<td>No</td><td>No</td>
+  </tr>
+
+  

 </table>

 

 <h2 id="128036">Active Control Infrastructure Classes</h2>

diff --git a/demos/quickstart/protected/pages/ActiveControls/Samples/DragDrop/Home.page b/demos/quickstart/protected/pages/ActiveControls/Samples/DragDrop/Home.page
new file mode 100755
index 00000000..89d64110
--- /dev/null
+++ b/demos/quickstart/protected/pages/ActiveControls/Samples/DragDrop/Home.page
@@ -0,0 +1,90 @@
+<com:TContent id="body">
+<style>
+.cart {
+	border: 1px solid #E8A400;
+	background-color: white;
+	padding: 8px;
+	width: 500px;
+	height: 150px;
+}
+
+.cart-hover {
+	background-color: #E8A400;
+}
+
+.cart-items {
+	width: 30px;
+	height: 30px;
+}
+
+.products {
+	float: left;
+	width: 100px;
+	height: 100px;
+	margin-right: 10px;
+}
+
+.draggable {
+	cursor: move
+}
+
+.removable {
+}
+
+.trash {
+	width: 50px;
+	height: 50px;
+	border: 1px solid black;
+}
+
+.trash-hover {
+	background-image: url(<%~ assets/trash.png%>);
+}
+
+</style>
+<h1>Drag &amp; Drop demo !</h1>
+
+<h2>Product List :</h2>
+
+<div style="margin-bottom: 20px; height: 120px">
+
+<com:TRepeater Id="ProductList" DataKeyField="ProductId">
+	<prop:ItemTemplate>
+		<com:TDraggable CssClass="products draggable" >
+		<com:TImage ImageUrl=<%#$this->Data['ProductImageUrl']%> />
+		</com:TDraggable>
+	</prop:ItemTemplate>
+</com:TRepeater>
+</div>
+<h2>Your shopping cart :</h2>
+<com:TDropContainer CssClass="cart" Id="cart"
+	AcceptCssClass="draggable" 
+	HoverCssClass="cart-hover"
+	OnDrop="addItemToCart"
+	OnCallback="redrawCart"
+	>
+	<com:TRepeater id="ShoppingList" DataKeyField="ProductId">
+		<prop:EmptyTemplate>
+			Your shopping cart is empty, please add some items !
+		</prop:EmptyTemplate>
+		<prop:ItemTemplate>
+			<com:TDraggable CssClass="removable" 
+				Revert="true" 
+				Handle="<%=$this->itemImage->ClientId%>" 
+				Ghosting=<%#($this->Data['ProductCount'] > 1)%> 
+				>
+			<com:TImage id="itemImage" CssClass="cart-items" Style="cursor:move" ImageUrl=<%#$this->Data['ProductImageUrl']%>/>
+			<com:TLabel id="itemTitle" Text=<%#$this->Data['ProductTitle']%>/>
+			<com:TLabel id="itemCount" Text="(<%#$this->Data['ProductCount']%>)" />
+			</com:TDraggable>
+		</prop:ItemTemplate>
+	</com:TRepeater>
+</com:TDropContainer>
+<h2>Remove Items from cart by dropping them here</h2>
+<com:TDropContainer CssClass="trash" id="trash"
+	AcceptCssClass="removable"
+	OnDrop="removeItemFromCart"
+	OnCallback="redrawCart"
+	HoverCssClass="trash-hover"
+/>
+</com:TContent>
diff --git a/demos/quickstart/protected/pages/ActiveControls/Samples/DragDrop/Home.php b/demos/quickstart/protected/pages/ActiveControls/Samples/DragDrop/Home.php
new file mode 100755
index 00000000..276ee6a4
--- /dev/null
+++ b/demos/quickstart/protected/pages/ActiveControls/Samples/DragDrop/Home.php
@@ -0,0 +1,112 @@
+<?php
+
+prado::using ('System.Web.UI.ActiveControls.*');
+
+class Home extends TPage
+{
+	public function onInit ($param)
+	{
+		parent::onInit($param);
+		if (!$this->getIsPostBack() && !$this->getIsCallBack())
+		{
+			
+			$this->populateProductList();
+			$this->populateShoppingList();
+		}
+	}
+	
+	private function getProductData ()
+	{
+		return array (
+			array (
+				'ProductId' => 'Product1',
+				'ProductImageUrl' => $this->publishAsset('assets/product1.png'),
+				'ProductTitle' => 'Cup'
+			),
+			array (
+				'ProductId' => 'Product2',
+				'ProductImageUrl' => $this->publishAsset('assets/product2.png'),
+				'ProductTitle' => 'T-Shirt'
+			)
+		);
+	}
+	
+	private function getProduct ($key)
+	{
+		foreach ($this->getProductData() as $product)
+			if ($product['ProductId']==$key) return $product;
+		return null;	
+	}
+	
+	protected function populateProductList ()
+	{
+		$this->ProductList->DataSource=$this->getProductData();
+		$this->ProductList->Databind();
+	}
+	
+	protected function populateShoppingList ()
+	{
+		$this->ShoppingList->DataSource=$this->getShoppingListData();
+		$this->ShoppingList->Databind();
+		
+	}
+	
+	
+	public function getShoppingListData ()
+	{
+		return $this->getViewState('ShoppingList', array ());
+	}
+	
+	public function setShoppingListData ($value)
+	{
+		$this->setViewState('ShoppingList', TPropertyValue::ensureArray($value), array ());
+	}
+	
+	public function addItemToCart ($sender, $param)
+	{
+		$control=$param->getDroppedControl();
+		// Get the Key from the repeater item
+		$item=$control->getNamingContainer();
+		$key=$this->ProductList->getDataKeys()->itemAt($item->getItemIndex());
+		$product=$this->getProduct($key);
+		$shoppingList=$this->getShoppingListData();
+		if (isset ($shoppingList[$key]))
+		{
+			// Already an item of this type, increment counter
+			$shoppingList[$key]['ProductCount']++;
+		}
+		else
+		{
+			// Add an item to the shopping list
+			$shoppingList[$key]=$product;
+			$shoppingList[$key]['ProductCount']=1;
+		}
+		$this->setShoppingListData($shoppingList);
+		
+	}
+	
+	public function removeItemFromCart ($sender, $param)
+	{
+		$control=$param->getDroppedControl();
+		$item=$control->getNamingContainer();
+		$key=$this->ShoppingList->getDataKeys()->itemAt($item->getItemIndex());
+		$shoppingList=$this->getShoppingListData();
+		if (isset($shoppingList[$key]))
+		{
+			if ($shoppingList[$key]['ProductCount'] > 1)
+				$shoppingList[$key]['ProductCount'] --;
+			else
+				unset($shoppingList[$key]);
+		}
+		$this->setShoppingListData($shoppingList);
+		
+	}
+	
+	public function redrawCart ($sender, $param)
+	{
+		$this->populateShoppingList();
+		$this->cart->render($param->NewWriter);
+		
+	}
+}
+?>
\ No newline at end of file
diff --git a/demos/quickstart/protected/pages/ActiveControls/Samples/DragDrop/assets/product1.png b/demos/quickstart/protected/pages/ActiveControls/Samples/DragDrop/assets/product1.png
new file mode 100755
index 00000000..ae03d551
--- /dev/null
+++ b/demos/quickstart/protected/pages/ActiveControls/Samples/DragDrop/assets/product1.png
diff --git a/demos/quickstart/protected/pages/ActiveControls/Samples/DragDrop/assets/product2.png b/demos/quickstart/protected/pages/ActiveControls/Samples/DragDrop/assets/product2.png
new file mode 100755
index 00000000..25e81ad7
--- /dev/null
+++ b/demos/quickstart/protected/pages/ActiveControls/Samples/DragDrop/assets/product2.png
diff --git a/demos/quickstart/protected/pages/ActiveControls/Samples/DragDrop/assets/trash.png b/demos/quickstart/protected/pages/ActiveControls/Samples/DragDrop/assets/trash.png
new file mode 100755
index 00000000..184f7628
--- /dev/null
+++ b/demos/quickstart/protected/pages/ActiveControls/Samples/DragDrop/assets/trash.png