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(-) 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