Timeline: Re-enable adding/removing styles to layers. New methods in TimelinePanel for creating new styles on document load.

3 files changed, 57 insertions, 8 deletions

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);
 
         }
     },