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/Layer.reel/Layer.html | 34 +++++++++++++++++++++++++++++--- js/panels/Timeline/Layer.reel/Layer.js | 8 ++++++++ 2 files changed, 39 insertions(+), 3 deletions(-) (limited to 'js/panels/Timeline/Layer.reel') 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 @@

-

+

Label

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 */ -- cgit v1.2.3