[qo-modules-dev] [9] move work on Drag and drop

[subversion@xxxxxxxxxxxxx]

Revision: 9
Author:   ytorres
Date:     2008-11-09 22:04:23 +0100 (Sun, 09 Nov 2008)

Log Message:
-----------
move work on Drag and drop

Modified Paths:
--------------
    yannick/img/folder.png
    yannick/php/get-state.php
    yannick/shortcuts.js


Modified: yannick/img/folder.png
===================================================================
(Binary files differ)

Modified: yannick/php/get-state.php
===================================================================
--- yannick/php/get-state.php	2008-11-08 16:03:45 UTC (rev 8)
+++ yannick/php/get-state.php	2008-11-09 21:04:23 UTC (rev 9)
@@ -1,4 +1,5 @@
 <?php
+
 $stateFile = "../desktop/.shortcutState";
 
 $state = Array("success" => true);

Modified: yannick/shortcuts.js
===================================================================
--- yannick/shortcuts.js	2008-11-08 16:03:45 UTC (rev 8)
+++ yannick/shortcuts.js	2008-11-09 21:04:23 UTC (rev 9)
@@ -14,7 +14,7 @@
     tpl: new Ext.XTemplate(
 	    '<tpl for=".">',
 	    '<div class="thumb-wrap" id="shortcuts_{id}">',
-		'<div class="thumb"><img src="{url}" title="{name}"></div>',
+		'<div class="thumb"><img src="{url}"></div>',
 		'<span class="x-editable">{shortName}</span></div>',
 	    '</tpl>',
 	    '<div class="x-clear"></div>'
@@ -77,29 +77,111 @@
     DDInit : function() {
 
       var nodes = this.getNodes();
+      var lastFolder = null;
+
       Ext.each(nodes, function(node) {
 
-	var dd = Ext.get(node.id).initDD('pp');
+	//var dd = Ext.get(node.id).initDD('pp');
 	var record = this.store.getAt(this.indexOf(node));
 	var originName = record.data['originName'];
 
-	dd.endDrag = function(e) {
-	
-	  Ext.Ajax.request({
-	    scope: this,
-	    url: 'php/set-state.php',
-	    params: {
-	      posX: e.getPageX(),
-	      posY: e.getPageY(),
-	      name: originName
-	    },
-	    success: function(response, options) {
-	    }
-	  });
-	
+	var viewID = this.id;
+	var view = this;
+
+	var type = record.data['type'];
+
+	var dd1 = Ext.get(node.id);
+	dd1.dd = new Ext.dd.DDProxy(node.id, 'shortcuts');
+
+	// Call when we start to drag
+        dd1.dd.startDrag = function(x, y) {
+
+		var dragEl = Ext.get(this.getDragEl());
+		var clickEl = Ext.get(this.getEl());
+
+		// Constrain to the view. Can't drag out of the view.
+		this.constrainTo(viewID);
+
+		// Hide the clicked element and copy the dom into the drag element
+		clickEl.setStyle('visibility', 'hidden');
+		dragEl.dom.innerHTML = clickEl.dom.innerHTML;
+
+        };
+
+	// Drag over a valid node target
+	dd1.dd.onDragOver = function(e, targetId) {
+
+		var record = view.getRecord(view.getNode(targetId));
+
+		if( record.data['type'] == 'folder' && targetId != this.id ) {
+			// We switch to open folder
+			Ext.DomQuery.selectNode("div[@id='"+targetId+"'] > div > img").src = 'img/folder_open.png';
+			lastFolder = record;
+		}
 	};
 
+	dd1.dd.onDragOut = function(e, targetId) {
 
+		var record = view.getRecord(view.getNode(targetId));
+
+		if( record.data['type'] == 'folder' ) {
+			// We switch to normal folder
+			Ext.DomQuery.selectNode("div[@id='"+targetId+"'] > div > img").src = 'img/folder.png';
+			lastFolder = null;
+		}
+	};
+
+	dd1.dd.endDrag = function(e) {
+
+		var dragEl = Ext.get(this.getDragEl());
+		var clickEl = Ext.get(this.getEl());
+		
+		// We render visible at the new position
+		clickEl.setStyle('visibility', 'visible');
+		clickEl.moveTo(dragEl.getX(), dragEl.getY());
+		
+		if( lastFolder ) {
+
+		  // We move this file to this folder
+
+		  Ext.Ajax.request({
+		    scope: this,
+		    url: 'php/move-to.php',
+		    params: {
+		      moveTo: lastFolder.data['originName'],
+		      name: originName
+		    },
+		    success: function(response, options) {
+		    
+		      // We replace the folder icon to the target Folder
+		      Ext.DomQuery.selectNode("div[@id='shortcuts_"+lastFolder.data['id']+"'] > div > img").src = 'img/folder.png';
+		    
+		      // We remove the dom and this record from this store
+		      clickEl.setStyle('visibility', 'hidden');
+		      view.store.remove(record);
+		      lastFolder = null;
+		      
+		    }
+		  });
+
+		} else {
+
+		  // Save the state
+		  Ext.Ajax.request({
+		    scope: this,
+		    url: 'php/set-state.php',
+		    params: {
+		      posX: dragEl.getX(),
+		      posY: dragEl.getY(),
+		      name: originName
+		    },
+		    success: function(response, options) {
+		    }
+		  });
+
+		}
+	};
+
       }, this);
     },
     
@@ -245,4 +327,4 @@
 });
 
 // register xtype to allow for lazy initialization
-Ext.reg('shortcutsView', Ext.ux.shortcutsView);
\ No newline at end of file
+Ext.reg('shortcutsView', Ext.ux.shortcutsView);