From 2d9cb9ca8f6beb661a3d904b5125afa8243661de Mon Sep 17 00:00:00 2001
From: Jon Reid
Date: Wed, 21 Mar 2012 15:40:33 -0700
Subject: Timeline: First integration of drag and drop of layers.

---
 js/panels/Timeline/DragDrop.js                     | 136 +++++++++++++++++++++
 js/panels/Timeline/Layer.reel/Layer.html           |  34 +++++-
 js/panels/Timeline/Layer.reel/Layer.js             |   8 ++
 .../Timeline/TimelineTrack.reel/TimelineTrack.js   |  22 +---
 4 files changed, 178 insertions(+), 22 deletions(-)
 create mode 100644 js/panels/Timeline/DragDrop.js

(limited to 'js')

diff --git a/js/panels/Timeline/DragDrop.js b/js/panels/Timeline/DragDrop.js
new file mode 100644
index 00000000..55ee3ab4
--- /dev/null
+++ b/js/panels/Timeline/DragDrop.js
@@ -0,0 +1,136 @@
+/* <copyright>
+This file contains proprietary software owned by Motorola Mobility, Inc.<br/>
+No rights, expressed or implied, whatsoever to this software are provided by Motorola Mobility, Inc. hereunder.<br/>
+(c) Copyright 2011 Motorola Mobility, Inc.  All Rights Reserved.
+</copyright> */
+
+var Montage = require("montage/core/core").Montage;
+var Composer = require("montage/ui/composer/composer").Composer;
+
+exports.DragDropComposer = Montage.create(Composer, {
+
+    draggable: {
+        value: true
+    },
+
+    droppable: {
+        value: true
+    },
+
+    identifier: {
+        value: "generic"
+    },
+
+    _dragover: {
+        value: false
+    },
+
+    load: {
+        value: function() {
+            //TODO: to make this work even better check to see if this is a component or not
+            //right now it does not support data-montage id's
+            this.element.addEventListener("mouseover", this, true);
+            this.element.addEventListener("mouseout", this, true);
+            this.component.element.addEventListener("dragenter", this, true);
+            this.component.element.addEventListener("dragleave", this, true);
+            this.component.element.addEventListener("dragend", this, true);
+            this.component.element.addEventListener("drop", this, true);
+            this.component.element.addEventListener("dragover", this, true);
+            this.component.element.addEventListener("dragstart", this, true);
+        }
+    },
+
+    unload: {
+        value: function() {
+            this.element.removeEventListener("mouseover", this, true);
+            this.element.removeEventListener("mouseout", this, true);
+            this.component.element.removeEventListener("dragenter", this, true);
+            this.component.element.removeEventListener("dragleave", this, true);
+            this.component.element.removeEventListener("dragend", this, true);
+            this.component.element.removeEventListener("drop", this, true);
+            this.component.element.removeEventListener("dragover", this, true);
+            this.component.element.removeEventListener("dragstart", this, true);
+        }
+    },
+
+    captureMouseover: {
+        value: function(e) {
+            if(this.draggable) {
+                this.component.element.draggable = true;
+            }
+        }
+    },
+
+    captureMouseout: {
+        value: function(e) {
+            this.component.element.draggable = false;
+        }
+    },
+
+    /* ------ Drag Drop Events ------- */
+
+    // This Function will determine what is being moved
+    captureDragstart: {
+        value:function(e) {
+            e.dataTransfer.effectAllowed = 'move';
+            e.dataTransfer.setData('Text', this.identifier);
+            this.component.element.classList.add("dragging");
+            this.component.application.ninja.componentBeingDragged = this.component;
+        }
+    },
+
+    captureDragenter: {
+        value: function(e) {
+
+        }
+    },
+
+    captureDragover: {
+        value:function(e) {
+            e.preventDefault();
+            e.stopImmediatePropagation();
+            if (!this._dragover) {
+                this._dragover = true;
+                this.component.element.classList.add("dragOver");
+            }
+        }
+    },
+
+    captureDragleave: {
+        value: function(e) {
+            if (this._dragover) {
+                this._dragover = false;
+                this.component.element.classList.remove("dragOver");
+            }
+        }
+    },
+
+    captureDrop: {
+        value:function(e) {
+            e.stopPropagation(); // Stops some browsers from redirecting.
+            e.preventDefault();
+            if (this._dragover) {
+                this._dragover = false;
+                this.component.element.classList.remove("dragOver");
+                if (this.identifier === e.dataTransfer.getData("Text")) {
+                    if(this.component.application.ninja.componentBeingDragged !== this.component) {
+                        dropEvent = document.createEvent("CustomEvent");
+                        dropEvent.initCustomEvent("dropped", true, false, null);
+                        dropEvent.draggedComponent = this.component.application.ninja.componentBeingDragged;
+                        dropEvent.droppedComponent = this.component;
+                        this.component.dispatchEvent(dropEvent);
+                    }
+                }
+                this.component.application.ninja.componentBeingDragged = null;
+            }
+
+        }
+    },
+
+    captureDragend: {
+        value:function(e) {
+            this.component.element.classList.remove("dragging");
+        }
+    }
+
+});
\ No newline at end of file
diff --git a/js/panels/Timeline/Layer.reel/Layer.html b/js/panels/Timeline/Layer.reel/Layer.html
index c8e31fad..ef98bdd5 100644
--- a/js/panels/Timeline/Layer.reel/Layer.html
+++ b/js/panels/Timeline/Layer.reel/Layer.html
@@ -22,7 +22,8 @@
 						"positionCollapser" : {"@" : "positionCollapser"},
 						"transformCollapser" : {"@" : "transformCollapser"},
 						"styleCollapser" : {"@" : "styleCollapser"},
-						"clickerMain" : {"#" : "clicker-main"}
+						"clickerMain" : {"#" : "clicker-main"},
+						"myLabel" : {"#" : "myLabel"}
                     }
                 },
 	            "dtext1" : {
@@ -314,7 +315,34 @@
 							"oneway" : false
 						}
 					}
-				}
+				},
+
+	            "DragDrop": {
+	                "module": "js/panels/Timeline/DragDrop.js",
+	                "name": "DragDropComposer",
+	                "properties": {
+	                    "element": {"#": "myLabel"},
+	                    "component": {"@": "owner"}
+	                },
+	                "listeners": [
+	                    {
+	                        "type": "dragStart",
+	                        "listener": {"@": "owner"}
+	                    },
+	                    {
+	                        "type": "dropHover",
+	                        "listener": {"@": "owner"}
+	                    },
+	                    {
+	                        "type": "dropped",
+	                        "listener": {"@": "owner"}
+	                    },
+	                    {
+	                        "type": "dropEnd",
+	                        "listener": {"@": "owner"}
+	                    }
+	                ]
+	            }
 				
 				
             }
@@ -323,7 +351,7 @@
 	<body>
     
 		<div data-montage-id="layer" class="container-layer">
-			<div class="label-layer">
+			<div class="label-layer" data-montage-id="myLabel">
 				<span class="collapsible-label" data-montage-id="layer-label-text" spellcheck="false">Label</span>
 				<span class="collapsible-clicker collapsible-collapsed" data-montage-id="clicker-main"></span>
 				<div class="cssbutton button-lock"></div>
diff --git a/js/panels/Timeline/Layer.reel/Layer.js b/js/panels/Timeline/Layer.reel/Layer.js
index fcdbcd22..bddfcd3e 100644
--- a/js/panels/Timeline/Layer.reel/Layer.js
+++ b/js/panels/Timeline/Layer.reel/Layer.js
@@ -505,6 +505,9 @@ var Layer = exports.Layer = Montage.create(Component, {
             // Add mousedown listener to set isActive
             this.element.addEventListener("mousedown", this, false);
             this.element.addEventListener("click", this, false);
+            
+			// Drag and drop event hanlders
+			this.element.addEventListener("dropped", this, false);
 
         }
     },
@@ -783,6 +786,11 @@ var Layer = exports.Layer = Montage.create(Component, {
 			this.triggerOutgoingBinding();
 		}
 	},
+	handleDropped : {
+		value: function(event) {
+			console.log('wheeee!  WWEWWEWWWWEEEEEEEEE')
+		}
+	},
 	/* End: Event handlers */
 	
 	/* Begin: Logging routines */
diff --git a/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js b/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js
index 011d991e..40af9af6 100644
--- a/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js
+++ b/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js
@@ -655,27 +655,11 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, {
             if (layerEvent.layerID !== this.trackID) {
                 return;
             }
-            if (layerEvent.layerEventType === "labelClick") {
-                if (layerEvent.layerEventLocale === "content-main") {
-                    this._mainCollapser.bypassAnimation = layerEvent.bypassAnimation;
-                    this._mainCollapser.toggle();
-                } else if (layerEvent.layerEventLocale === "content-position") {
-                    this._positionCollapser.bypassAnimation = layerEvent.bypassAnimation;
-                    this._positionCollapser.handleCollapserLabelClick();
-                } else if (layerEvent.layerEventLocale === "content-transform") {
-                    this._transformCollapser.bypassAnimation = layerEvent.bypassAnimation;
-                    this._transformCollapser.handleCollapserLabelClick();
-                } else if (layerEvent.layerEventLocale === "content-style") {
-                    this._styleCollapser.bypassAnimation = layerEvent.bypassAnimation;
-                    this._styleCollapser.handleCollapserLabelClick();
-                }
-            } else if (layerEvent.layerEventType === "newStyle") {
+            if (layerEvent.layerEventType === "newStyle") {
+            	// TODO: Add a real track of tweens.  Probably need a method for that.
             	this.arrStyleTracks.push("1");
-            	if (this._styleCollapser.isCollapsed === true) {
-	                //this._styleCollapser.bypassAnimation = layerEvent.bypassAnimation;
-	                //this._styleCollapser.handleCollapserLabelClick();
-            	}
             } else if (layerEvent.layerEventType === "deleteStyle") {
+            	// TODO: Delete the right track.  Index can be passed in event object, use that for splice().
             	this.arrStyleTracks.pop();
             }
         }
-- 
cgit v1.2.3