From aa2d8afb323e71ea562c74564609604e0480fde4 Mon Sep 17 00:00:00 2001 From: Jon Reid Date: Mon, 19 Mar 2012 16:53:29 -0700 Subject: Timeline: Re-enable adding/removing styles to layers. New methods in TimelinePanel for creating new styles on document load. --- js/panels/Timeline/Layer.reel/Layer.js | 12 +++-- .../Timeline/TimelinePanel.reel/TimelinePanel.js | 51 ++++++++++++++++++++++ .../Timeline/TimelineTrack.reel/TimelineTrack.js | 2 +- 3 files changed, 57 insertions(+), 8 deletions(-) (limited to 'js') diff --git a/js/panels/Timeline/Layer.reel/Layer.js b/js/panels/Timeline/Layer.reel/Layer.js index 238ddae9..830d179e 100644 --- a/js/panels/Timeline/Layer.reel/Layer.js +++ b/js/panels/Timeline/Layer.reel/Layer.js @@ -499,11 +499,8 @@ var Layer = exports.Layer = Montage.create(Component, { // Add event listeners to add and delete style buttons - this.buttonAddStyle.identifier = "addStyle"; - this.buttonAddStyle.addEventListener("click", this, false); - - this.buttonDeleteStyle.identifier = "deleteStyle"; - this.buttonDeleteStyle.addEventListener("click", this, false); + this.buttonAddStyle.addEventListener("click", this.handleAddStyleClick.bind(this), false); + this.buttonDeleteStyle.addEventListener("click", this.handleDeleteStyleClick.bind(this), false); // Add mousedown listener to set isActive this.element.addEventListener("mousedown", this, false); @@ -604,7 +601,7 @@ var Layer = exports.Layer = Montage.create(Component, { // Set up the event info and dispatch the event newEvent.styleSelection = mySelection; - //defaultEventManager.dispatchEvent(newEvent); + defaultEventManager.dispatchEvent(newEvent); } }, @@ -624,7 +621,7 @@ var Layer = exports.Layer = Montage.create(Component, { newEvent.layerID = this.layerID; newEvent.styleID = this.arrLayerStyles[selectedIndex].styleID; newEvent.styleSelection = selectedIndex; - //defaultEventManager.dispatchEvent(newEvent); + defaultEventManager.dispatchEvent(newEvent); // Delete the style from the view this.arrLayerStyles.splice(selectedIndex, 1); @@ -717,6 +714,7 @@ var Layer = exports.Layer = Montage.create(Component, { value: function(event) { this.layerData.isActive = true; var ptrParent = nj.queryParentSelector(event.target, ".content-style"); + console.log('handleMousedown called') if (ptrParent !== false) { this.selectStyle(this.getActiveStyleIndex()); } diff --git a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js index fd297fd3..df018ee3 100644 --- a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js +++ b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js @@ -289,6 +289,7 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { createLayerTemplate:{ value:function () { var returnObj = {}; + returnObj.layerData = {}; returnObj.layerData.layerName = null; returnObj.layerData.layerID = null; @@ -297,6 +298,7 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { returnObj.layerData.isTransformCollapsed = true; returnObj.layerData.isStyleCollapsed = true; returnObj.layerData.arrLayerStyles = []; + returnObj.layerData.arrLayerStyles = []; returnObj.layerData.elementsList = []; returnObj.layerData.deleted = false; returnObj.layerData.isSelected = false; @@ -312,6 +314,51 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { return returnObj; } }, + + // Create an array of style objects for an element, for use + // in creating a new layer + createLayerStyles : { + value: function(ptrElement) { + // TODO: Create logic to loop through + // CSS properties on element and build + // array of layer styles for return. + // Right now this method just returns an array of one bogus style. + + var returnArray = [], + newStyle = {}, + styleID = "1@0"; // format: layerID + "@" + style counter + + newStyle.styleID = styleID; + newStyle.whichView = "propval"; + newStyle.editorProperty = "top"; + newStyle.editorValue = 0; + newStyle.ruleTweener = false; + newStyle.isSelected = false; + + returnArray.push(newStyle); + + return returnArray; + + } + }, + + // Create an array of style track objects for an element, for use + // in creating a new layer + createStyleTracks : { + value: function(ptrElement) { + // TODO: Create logic to loop through + // CSS properties on element and build + // array of layer styles for return. + // Right now this method just returns an array of one bogus style. + + var returnArray = []; + + returnArray.push("1"); + + return returnArray; + + } + }, // Bind all document-specific events (pass in true to unbind) _bindDocumentEvents:{ @@ -677,6 +724,10 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { thingToPush.layerData.layerID = this.currentLayerNumber; thingToPush.parentElementUUID = this.hashKey; thingToPush.parentElement = this.application.ninja.currentSelectedContainer; + + // Are there styles to add? + thingToPush.layerData.arrLayerStyles = this.createLayerStyles(); + thingToPush.layerData.arrStyleTracks = this.createStyleTracks(); if (this._openDoc) { ele.uuid = nj.generateRandom(); diff --git a/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js b/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js index 601788ad..e9a2115a 100644 --- a/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js +++ b/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js @@ -645,7 +645,7 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { this.arrTransformTracks = [0, 1, 2, 3, 4]; // Register event handler for layer events. - //defaultEventManager.addEventListener("layerEvent", this, false); + defaultEventManager.addEventListener("layerEvent", this, false); } }, -- cgit v1.2.3 From 0e24b9dc875cefb1010a9e2b507c19b77e4d9811 Mon Sep 17 00:00:00 2001 From: Jon Reid Date: Tue, 20 Mar 2012 17:37:11 -0700 Subject: Timeline: fix layer and style select problems. --- js/panels/Timeline/Layer.reel/Layer.html | 2 +- js/panels/Timeline/Layer.reel/Layer.js | 1 - js/panels/Timeline/TimelinePanel.reel/TimelinePanel.html | 2 +- js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js | 6 ++++++ js/panels/Timeline/TimelineTrack.reel/TimelineTrack.html | 2 +- 5 files changed, 9 insertions(+), 4 deletions(-) (limited to 'js') diff --git a/js/panels/Timeline/Layer.reel/Layer.html b/js/panels/Timeline/Layer.reel/Layer.html index 79b522ee..c8e31fad 100644 --- a/js/panels/Timeline/Layer.reel/Layer.html +++ b/js/panels/Timeline/Layer.reel/Layer.html @@ -301,7 +301,7 @@ "properties" : { "element" : {"#" : "content-style"}, "myContent" : {"#":"content-style"}, - "contentHeight" : 60, + "contentHeight" : 0, "isLabelClickable" : true, "clicker" : {"#" : "clicker-style"}, "isCollapsed" : true, diff --git a/js/panels/Timeline/Layer.reel/Layer.js b/js/panels/Timeline/Layer.reel/Layer.js index 830d179e..9334a0b4 100644 --- a/js/panels/Timeline/Layer.reel/Layer.js +++ b/js/panels/Timeline/Layer.reel/Layer.js @@ -714,7 +714,6 @@ var Layer = exports.Layer = Montage.create(Component, { value: function(event) { this.layerData.isActive = true; var ptrParent = nj.queryParentSelector(event.target, ".content-style"); - console.log('handleMousedown called') if (ptrParent !== false) { this.selectStyle(this.getActiveStyleIndex()); } diff --git a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.html b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.html index 6e7d410c..2e0bf7dd 100644 --- a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.html +++ b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.html @@ -19,7 +19,7 @@ "element": {"#": "timeline_panel"}, "user_layers": {"#": "user_layers"}, "track_container": {"#": "right_inside"}, - "timeline_leftpane" : {"#" : "timeline_leftpane"}, + "timeline_leftpane" : {"#" : "leftpane_inside"}, "layer_tracks": {"#": "layer_tracks"}, "master_track": {"#": "master_track"}, "time_markers" : {"#": "timeline_markers"}, diff --git a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js index df018ee3..67eae45c 100644 --- a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js +++ b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js @@ -913,6 +913,12 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { } else { this.arrLayers[i].layerData.isSelected = false; } + + if (this.arrLayers[i].layerData.triggerBinding === true) { + this.arrLayers[i].layerData.triggerBinding = false; + } else { + this.arrLayers[i].layerData.triggerBinding = true; + } } this.layerRepetition.selectedIndexes = [layerIndex]; diff --git a/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.html b/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.html index 7e9b8a21..2d508b3c 100644 --- a/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.html +++ b/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.html @@ -200,7 +200,7 @@ "properties" : { "element" : {"#" : "content-styles"}, "myContent" : {"#":"content-styles"}, - "contentHeight" : 40, + "contentHeight" : 0, "isLabelClickable" : false, "clicker" : {"#" : "label-styles"}, "isCollapsed" : true, -- cgit v1.2.3 From 9d7cd4d067b988a65cdea3059769617487028a22 Mon Sep 17 00:00:00 2001 From: Jon Reid Date: Wed, 21 Mar 2012 10:47:48 -0700 Subject: Fix: Change click handler to mousedown for better responsiveness in layer selection UI. --- js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) (limited to 'js') diff --git a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js index 67eae45c..03d06d98 100644 --- a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js +++ b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js @@ -389,7 +389,7 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { value:function () { this.layout_tracks = this.element.querySelector(".layout-tracks"); this.layout_markers = this.element.querySelector(".layout_markers"); - this.timeline_leftpane.addEventListener("click", this.timelineLeftPaneClick.bind(this), false); + this.timeline_leftpane.addEventListener("mousedown", this.timelineLeftPaneMousedown.bind(this), false); this.layout_tracks.addEventListener("scroll", this.updateLayerScroll.bind(this), false); this.user_layers.addEventListener("scroll", this.updateLayerScroll.bind(this), false); this.end_hottext.addEventListener("changing", this.updateTrackContainerWidth.bind(this), false); @@ -495,6 +495,7 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { // Clear the repetitions if (this.arrLayers.length > 0) { this.arrLayers = []; + this.arrLayers.length = 0; } } }, @@ -616,7 +617,7 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { } }, - timelineLeftPaneClick:{ + timelineLeftPaneMousedown:{ value:function (event) { var ptrParent = nj.queryParentSelector(event.target, ".container-layer"); if (ptrParent !== false) { -- cgit v1.2.3 From 3669eea4bde3518ce080048e9f53d2dd111fd8be Mon Sep 17 00:00:00 2001 From: Jon Reid Date: Wed, 21 Mar 2012 11:37:48 -0700 Subject: Timeline: Bug fix: style collapsers not staying in synch. Also, removed console.log calls in hintable component. --- js/components/editable.reel/editable.js | 8 ++++---- js/components/hintable.reel/hintable.js | 12 ++++++------ js/panels/Timeline/Layer.reel/Layer.js | 3 +++ js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js | 16 +++++++++++----- js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js | 4 ++-- 5 files changed, 26 insertions(+), 17 deletions(-) (limited to 'js') diff --git a/js/components/editable.reel/editable.js b/js/components/editable.reel/editable.js index 9c8946c4..7a31e7fd 100644 --- a/js/components/editable.reel/editable.js +++ b/js/components/editable.reel/editable.js @@ -120,7 +120,7 @@ exports.Editable = Montage.create(Component, { } if(this.stopOnBlur) { - console.log('adding mousedown event listener'); + //console.log('adding mousedown event listener'); ///// Simulate blur on editable node by listening to the doc document.addEventListener('mouseup', this, false); } @@ -189,7 +189,7 @@ exports.Editable = Montage.create(Component, { handleKeydown : { value : function(e) { var k = e.keyCode; - console.log('keyCode: ' + k); + //console.log('keyCode: ' + k); } }, ///// Text input has changed values @@ -204,7 +204,7 @@ exports.Editable = Montage.create(Component, { }, handleMouseup : { value : function(e) { - console.log('handle mouse down'); + //console.log('handle mouse down'); ///// Listen for simulated blur event if(this.stopOnBlur && e._event.target !== this._element) { this.blur(); @@ -213,7 +213,7 @@ exports.Editable = Montage.create(Component, { }, handleEvent : { value : function(e) { - console.log("event type : " + e._event.type); + //console.log("event type : " + e._event.type); ///// If configured, start on specified event if(e._event.type === this.startOnEvent) { this.start(); diff --git a/js/components/hintable.reel/hintable.js b/js/components/hintable.reel/hintable.js index 5ed46b3c..cbfe2d9b 100644 --- a/js/components/hintable.reel/hintable.js +++ b/js/components/hintable.reel/hintable.js @@ -90,10 +90,10 @@ exports.Hintable = Montage.create(Editable, { hintNext : { value : function(e) { if(e) { e.preventDefault(); } - console.log('next1'); + //console.log('next1'); if(this._matchIndex < this.matches.length - 1) { - console.log('next'); + //console.log('next'); ++this._matchIndex; this.hint = this._getHintDifference(); } @@ -102,9 +102,9 @@ exports.Hintable = Montage.create(Editable, { hintPrev : { value : function(e) { if(e) { e.preventDefault(); } - console.log('prev1'); + //console.log('prev1'); if(this._matchIndex !== 0) { - console.log('prev'); + //console.log('prev'); --this._matchIndex; this.hint = this._getHintDifference(); } @@ -135,7 +135,7 @@ exports.Hintable = Montage.create(Editable, { /// revert to old value this.value = (this._preEditValue); this._sendEvent('revert'); - console.log('reverting'); + //console.log('reverting'); } } @@ -180,7 +180,7 @@ exports.Hintable = Montage.create(Editable, { var val = this.value, matches, hint; - console.log('val = "' + val + '"'); + //console.log('val = "' + val + '"'); //// Handle auto-suggest if configured if(this.hints instanceof Array) { diff --git a/js/panels/Timeline/Layer.reel/Layer.js b/js/panels/Timeline/Layer.reel/Layer.js index 9334a0b4..fcdbcd22 100644 --- a/js/panels/Timeline/Layer.reel/Layer.js +++ b/js/panels/Timeline/Layer.reel/Layer.js @@ -571,6 +571,8 @@ var Layer = exports.Layer = Montage.create(Component, { newEvent = document.createEvent("CustomEvent"); this.isStyleCollapsed = false; + this.layerData.isStyleCollapsed = false; + this.triggerOutgoingBinding(); newEvent.initCustomEvent("layerEvent", false, true); newEvent.layerEventLocale = "styles"; @@ -603,6 +605,7 @@ var Layer = exports.Layer = Montage.create(Component, { newEvent.styleSelection = mySelection; defaultEventManager.dispatchEvent(newEvent); + } }, deleteStyle : { diff --git a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js index 03d06d98..0ba49c44 100644 --- a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js +++ b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js @@ -915,11 +915,7 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { this.arrLayers[i].layerData.isSelected = false; } - if (this.arrLayers[i].layerData.triggerBinding === true) { - this.arrLayers[i].layerData.triggerBinding = false; - } else { - this.arrLayers[i].layerData.triggerBinding = true; - } + this.triggerLayerBinding(i); } this.layerRepetition.selectedIndexes = [layerIndex]; @@ -1077,6 +1073,16 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { } } }, + // Trigger the layer/track data binding + triggerLayerBinding : { + value: function(intIndex) { + if (this.arrLayers[intIndex].layerData.triggerBinding === true) { + this.arrLayers[intIndex].layerData.triggerBinding = false; + } else { + this.arrLayers[intIndex].layerData.triggerBinding = true; + } + } + }, /* === END: Controllers === */ /* === BEGIN: Logging routines === */ diff --git a/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js b/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js index e9a2115a..011d991e 100644 --- a/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js +++ b/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js @@ -672,8 +672,8 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { } else if (layerEvent.layerEventType === "newStyle") { this.arrStyleTracks.push("1"); if (this._styleCollapser.isCollapsed === true) { - this._styleCollapser.bypassAnimation = layerEvent.bypassAnimation; - this._styleCollapser.handleCollapserLabelClick(); + //this._styleCollapser.bypassAnimation = layerEvent.bypassAnimation; + //this._styleCollapser.handleCollapserLabelClick(); } } else if (layerEvent.layerEventType === "deleteStyle") { this.arrStyleTracks.pop(); -- cgit v1.2.3 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 @@ +/* +This file contains proprietary software owned by Motorola Mobility, Inc.
+No rights, expressed or implied, whatsoever to this software are provided by Motorola Mobility, Inc. hereunder.
+(c) Copyright 2011 Motorola Mobility, Inc. All Rights Reserved. + */ + +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 @@
-
+
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 */ 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