aboutsummaryrefslogtreecommitdiff
path: root/js
diff options
context:
space:
mode:
authorJon Reid2012-03-19 16:53:29 -0700
committerJon Reid2012-03-19 16:53:29 -0700
commitaa2d8afb323e71ea562c74564609604e0480fde4 (patch)
treefd2565b9128344814b43e5a4559ad1ff0da7b3df /js
parent595a569cf459e7e7cbe19e546c23322b56e44341 (diff)
downloadninja-aa2d8afb323e71ea562c74564609604e0480fde4.tar.gz
Timeline: Re-enable adding/removing styles to layers. New methods in TimelinePanel for creating new styles on document load.
Diffstat (limited to 'js')
-rw-r--r--js/panels/Timeline/Layer.reel/Layer.js12
-rw-r--r--js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js51
-rw-r--r--js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js2
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, {
499 499
500 500
501 // Add event listeners to add and delete style buttons 501 // Add event listeners to add and delete style buttons
502 this.buttonAddStyle.identifier = "addStyle"; 502 this.buttonAddStyle.addEventListener("click", this.handleAddStyleClick.bind(this), false);
503 this.buttonAddStyle.addEventListener("click", this, false); 503 this.buttonDeleteStyle.addEventListener("click", this.handleDeleteStyleClick.bind(this), false);
504
505 this.buttonDeleteStyle.identifier = "deleteStyle";
506 this.buttonDeleteStyle.addEventListener("click", this, false);
507 504
508 // Add mousedown listener to set isActive 505 // Add mousedown listener to set isActive
509 this.element.addEventListener("mousedown", this, false); 506 this.element.addEventListener("mousedown", this, false);
@@ -604,7 +601,7 @@ var Layer = exports.Layer = Montage.create(Component, {
604 // Set up the event info and dispatch the event 601 // Set up the event info and dispatch the event
605 602
606 newEvent.styleSelection = mySelection; 603 newEvent.styleSelection = mySelection;
607 //defaultEventManager.dispatchEvent(newEvent); 604 defaultEventManager.dispatchEvent(newEvent);
608 605
609 } 606 }
610 }, 607 },
@@ -624,7 +621,7 @@ var Layer = exports.Layer = Montage.create(Component, {
624 newEvent.layerID = this.layerID; 621 newEvent.layerID = this.layerID;
625 newEvent.styleID = this.arrLayerStyles[selectedIndex].styleID; 622 newEvent.styleID = this.arrLayerStyles[selectedIndex].styleID;
626 newEvent.styleSelection = selectedIndex; 623 newEvent.styleSelection = selectedIndex;
627 //defaultEventManager.dispatchEvent(newEvent); 624 defaultEventManager.dispatchEvent(newEvent);
628 625
629 // Delete the style from the view 626 // Delete the style from the view
630 this.arrLayerStyles.splice(selectedIndex, 1); 627 this.arrLayerStyles.splice(selectedIndex, 1);
@@ -717,6 +714,7 @@ var Layer = exports.Layer = Montage.create(Component, {
717 value: function(event) { 714 value: function(event) {
718 this.layerData.isActive = true; 715 this.layerData.isActive = true;
719 var ptrParent = nj.queryParentSelector(event.target, ".content-style"); 716 var ptrParent = nj.queryParentSelector(event.target, ".content-style");
717 console.log('handleMousedown called')
720 if (ptrParent !== false) { 718 if (ptrParent !== false) {
721 this.selectStyle(this.getActiveStyleIndex()); 719 this.selectStyle(this.getActiveStyleIndex());
722 } 720 }
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, {
289 createLayerTemplate:{ 289 createLayerTemplate:{
290 value:function () { 290 value:function () {
291 var returnObj = {}; 291 var returnObj = {};
292
292 returnObj.layerData = {}; 293 returnObj.layerData = {};
293 returnObj.layerData.layerName = null; 294 returnObj.layerData.layerName = null;
294 returnObj.layerData.layerID = null; 295 returnObj.layerData.layerID = null;
@@ -297,6 +298,7 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
297 returnObj.layerData.isTransformCollapsed = true; 298 returnObj.layerData.isTransformCollapsed = true;
298 returnObj.layerData.isStyleCollapsed = true; 299 returnObj.layerData.isStyleCollapsed = true;
299 returnObj.layerData.arrLayerStyles = []; 300 returnObj.layerData.arrLayerStyles = [];
301 returnObj.layerData.arrLayerStyles = [];
300 returnObj.layerData.elementsList = []; 302 returnObj.layerData.elementsList = [];
301 returnObj.layerData.deleted = false; 303 returnObj.layerData.deleted = false;
302 returnObj.layerData.isSelected = false; 304 returnObj.layerData.isSelected = false;
@@ -312,6 +314,51 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
312 return returnObj; 314 return returnObj;
313 } 315 }
314 }, 316 },
317
318 // Create an array of style objects for an element, for use
319 // in creating a new layer
320 createLayerStyles : {
321 value: function(ptrElement) {
322 // TODO: Create logic to loop through
323 // CSS properties on element and build
324 // array of layer styles for return.
325 // Right now this method just returns an array of one bogus style.
326
327 var returnArray = [],
328 newStyle = {},
329 styleID = "1@0"; // format: layerID + "@" + style counter
330
331 newStyle.styleID = styleID;
332 newStyle.whichView = "propval";
333 newStyle.editorProperty = "top";
334 newStyle.editorValue = 0;
335 newStyle.ruleTweener = false;
336 newStyle.isSelected = false;
337
338 returnArray.push(newStyle);
339
340 return returnArray;
341
342 }
343 },
344
345 // Create an array of style track objects for an element, for use
346 // in creating a new layer
347 createStyleTracks : {
348 value: function(ptrElement) {
349 // TODO: Create logic to loop through
350 // CSS properties on element and build
351 // array of layer styles for return.
352 // Right now this method just returns an array of one bogus style.
353
354 var returnArray = [];
355
356 returnArray.push("1");
357
358 return returnArray;
359
360 }
361 },
315 362
316 // Bind all document-specific events (pass in true to unbind) 363 // Bind all document-specific events (pass in true to unbind)
317 _bindDocumentEvents:{ 364 _bindDocumentEvents:{
@@ -677,6 +724,10 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
677 thingToPush.layerData.layerID = this.currentLayerNumber; 724 thingToPush.layerData.layerID = this.currentLayerNumber;
678 thingToPush.parentElementUUID = this.hashKey; 725 thingToPush.parentElementUUID = this.hashKey;
679 thingToPush.parentElement = this.application.ninja.currentSelectedContainer; 726 thingToPush.parentElement = this.application.ninja.currentSelectedContainer;
727
728 // Are there styles to add?
729 thingToPush.layerData.arrLayerStyles = this.createLayerStyles();
730 thingToPush.layerData.arrStyleTracks = this.createStyleTracks();
680 731
681 if (this._openDoc) { 732 if (this._openDoc) {
682 ele.uuid = nj.generateRandom(); 733 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, {
645 this.arrTransformTracks = [0, 1, 2, 3, 4]; 645 this.arrTransformTracks = [0, 1, 2, 3, 4];
646 646
647 // Register event handler for layer events. 647 // Register event handler for layer events.
648 //defaultEventManager.addEventListener("layerEvent", this, false); 648 defaultEventManager.addEventListener("layerEvent", this, false);
649 649
650 } 650 }
651 }, 651 },