Timeline: First integration of drag and drop of layers.

author: Jon Reid 2012-03-21 15:40:33 -0700
committer: Jon Reid 2012-03-21 15:40:33 -0700
commit: 2d9cb9ca8f6beb661a3d904b5125afa8243661de (patch)
tree: 99a76e567aa910ebfee27ae58f257e7551ab5c09 /js/panels/Timeline/Layer.reel
parent: 3669eea4bde3518ce080048e9f53d2dd111fd8be (diff)
download: ninja-2d9cb9ca8f6beb661a3d904b5125afa8243661de.tar.gz
2 files changed, 39 insertions, 3 deletions
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 */
author	Jon Reid	2012-03-21 15:40:33 -0700
committer	Jon Reid	2012-03-21 15:40:33 -0700
commit	2d9cb9ca8f6beb661a3d904b5125afa8243661de (patch)
tree	99a76e567aa910ebfee27ae58f257e7551ab5c09 /js/panels/Timeline/Layer.reel
parent	3669eea4bde3518ce080048e9f53d2dd111fd8be (diff)
download	ninja-2d9cb9ca8f6beb661a3d904b5125afa8243661de.tar.gz

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 @@
22	"positionCollapser" : {"@" : "positionCollapser"},	22	"positionCollapser" : {"@" : "positionCollapser"},
23	"transformCollapser" : {"@" : "transformCollapser"},	23	"transformCollapser" : {"@" : "transformCollapser"},
24	"styleCollapser" : {"@" : "styleCollapser"},	24	"styleCollapser" : {"@" : "styleCollapser"},
25	"clickerMain" : {"#" : "clicker-main"}	25	"clickerMain" : {"#" : "clicker-main"},
		26	"myLabel" : {"#" : "myLabel"}
26	}	27	}
27	},	28	},
28	"dtext1" : {	29	"dtext1" : {
@@ -314,7 +315,34 @@
314	"oneway" : false	315	"oneway" : false
315	}	316	}
316	}	317	}
317	}	318	},
		319
		320	"DragDrop": {
		321	"module": "js/panels/Timeline/DragDrop.js",
		322	"name": "DragDropComposer",
		323	"properties": {
		324	"element": {"#": "myLabel"},
		325	"component": {"@": "owner"}
		326	},
		327	"listeners": [
		328	{
		329	"type": "dragStart",
		330	"listener": {"@": "owner"}
		331	},
		332	{
		333	"type": "dropHover",
		334	"listener": {"@": "owner"}
		335	},
		336	{
		337	"type": "dropped",
		338	"listener": {"@": "owner"}
		339	},
		340	{
		341	"type": "dropEnd",
		342	"listener": {"@": "owner"}
		343	}
		344	]
		345	}
318		346
319		347
320	}	348	}
@@ -323,7 +351,7 @@
323	<body>	351	<body>
324		352
325	<div data-montage-id="layer" class="container-layer">	353	<div data-montage-id="layer" class="container-layer">
326	<div class="label-layer">	354	<div class="label-layer" data-montage-id="myLabel">
327	<span class="collapsible-label" data-montage-id="layer-label-text" spellcheck="false">Label</span>	355	<span class="collapsible-label" data-montage-id="layer-label-text" spellcheck="false">Label</span>
328	<span class="collapsible-clicker collapsible-collapsed" data-montage-id="clicker-main"></span>	356	<span class="collapsible-clicker collapsible-collapsed" data-montage-id="clicker-main"></span>
329	<div class="cssbutton button-lock"></div>	357	<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, {
505	// Add mousedown listener to set isActive	505	// Add mousedown listener to set isActive
506	this.element.addEventListener("mousedown", this, false);	506	this.element.addEventListener("mousedown", this, false);
507	this.element.addEventListener("click", this, false);	507	this.element.addEventListener("click", this, false);
		508
		509	// Drag and drop event hanlders
		510	this.element.addEventListener("dropped", this, false);
508		511
509	}	512	}
510	},	513	},
@@ -783,6 +786,11 @@ var Layer = exports.Layer = Montage.create(Component, {
783	this.triggerOutgoingBinding();	786	this.triggerOutgoingBinding();
784	}	787	}
785	},	788	},
		789	handleDropped : {
		790	value: function(event) {
		791	console.log('wheeee! WWEWWEWWWWEEEEEEEEE')
		792	}
		793	},
786	/* End: Event handlers */	794	/* End: Event handlers */
787		795
788	/* Begin: Logging routines */	796	/* Begin: Logging routines */