aboutsummaryrefslogtreecommitdiff
path: root/js/panels/Timeline
diff options
context:
space:
mode:
authorKruti Shah2012-06-12 13:09:11 -0700
committerKruti Shah2012-06-12 13:09:11 -0700
commitd648c842905c7c53e0f89b943982493d2b79f56e (patch)
treeeb5585f92061975215f6d19305a8d1b76262e2fc /js/panels/Timeline
parentbedb38e14887b29eae3cdf1c8d435259c920257c (diff)
parentcf3b96822665751dae7a64644db3cb3960733c3d (diff)
downloadninja-d648c842905c7c53e0f89b943982493d2b79f56e.tar.gz
Merge branch 'refs/heads/TimelineUberjd' into TimelineUber
Conflicts: js/controllers/elements/element-controller.js js/document/_toDelete/html-document.js js/panels/Timeline/Layer.reel/Layer.js Signed-off-by: Kruti Shah <kruti.shah@motorola.com>
Diffstat (limited to 'js/panels/Timeline')
-rw-r--r--js/panels/Timeline/Collapser.js34
-rw-r--r--js/panels/Timeline/Layer.reel/Layer.js132
-rw-r--r--js/panels/Timeline/Layer.reel/scss/Layer.scss6
-rw-r--r--js/panels/Timeline/PropertyTrack.reel/PropertyTrack.js95
-rw-r--r--js/panels/Timeline/Span.reel/Span.js27
-rw-r--r--js/panels/Timeline/Style.reel/Style.js2
-rw-r--r--js/panels/Timeline/Style.reel/css/Style.css12
-rw-r--r--js/panels/Timeline/Style.reel/scss/Style.scss8
-rw-r--r--js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js195
-rw-r--r--js/panels/Timeline/TimelineTrack.reel/TimelineTrack.html6
-rw-r--r--js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js103
11 files changed, 461 insertions, 159 deletions
diff --git a/js/panels/Timeline/Collapser.js b/js/panels/Timeline/Collapser.js
index 9c8d4434..42bbbb86 100644
--- a/js/panels/Timeline/Collapser.js
+++ b/js/panels/Timeline/Collapser.js
@@ -41,6 +41,7 @@ var Montage = require("montage/core/core").Montage,
41 value: 0 41 value: 0
42 }, 42 },
43 contentHeight: { 43 contentHeight: {
44 serializable: true,
44 get: function() { 45 get: function() {
45 return this._contentHeight; 46 return this._contentHeight;
46 }, 47 },
@@ -59,6 +60,7 @@ var Montage = require("montage/core/core").Montage,
59 value: false 60 value: false
60 }, 61 },
61 isAnimated: { 62 isAnimated: {
63 serializable: true,
62 get: function() { 64 get: function() {
63 return this._isAnimated; 65 return this._isAnimated;
64 }, 66 },
@@ -71,6 +73,7 @@ var Montage = require("montage/core/core").Montage,
71 value: true 73 value: true
72 }, 74 },
73 bypassAnimation: { 75 bypassAnimation: {
76 serializable: true,
74 get: function() { 77 get: function() {
75 return this._bypassAnimation; 78 return this._bypassAnimation;
76 }, 79 },
@@ -102,6 +105,7 @@ var Montage = require("montage/core/core").Montage,
102 value: "" 105 value: ""
103 }, 106 },
104 isCollapsed : { 107 isCollapsed : {
108 serializable: true,
105 get: function() { 109 get: function() {
106 return this._isCollapsed; 110 return this._isCollapsed;
107 }, 111 },
@@ -110,7 +114,6 @@ var Montage = require("montage/core/core").Montage,
110 this._isCollapsed = newVal; 114 this._isCollapsed = newVal;
111 //this.needsDraw = true; 115 //this.needsDraw = true;
112 } 116 }
113
114 } 117 }
115 }, 118 },
116 119
@@ -141,6 +144,7 @@ var Montage = require("montage/core/core").Montage,
141 value: true 144 value: true
142 }, 145 },
143 isLabelClickable : { 146 isLabelClickable : {
147 serializable: true,
144 get: function() { 148 get: function() {
145 return this._isLabelClickable; 149 return this._isLabelClickable;
146 }, 150 },
@@ -149,6 +153,34 @@ var Montage = require("montage/core/core").Montage,
149 } 153 }
150 }, 154 },
151 155
156 _myContent:{
157 value:null
158 },
159
160 myContent:{
161 serializable:true,
162 get:function () {
163 return this._myContent;
164 },
165 set:function (newVal) {
166 this._myContent = newVal;
167 }
168 },
169
170 _clicker:{
171 value:null
172 },
173
174 clicker:{
175 serializable:true,
176 get:function () {
177 return this._clicker;
178 },
179 set:function (newVal) {
180 this._clicker = newVal;
181 }
182 },
183
152 // isToggling: Bindable property. Set this (to anything) to trigger a toggle. 184 // isToggling: Bindable property. Set this (to anything) to trigger a toggle.
153 _isToggling: { 185 _isToggling: {
154 value: true 186 value: true
diff --git a/js/panels/Timeline/Layer.reel/Layer.js b/js/panels/Timeline/Layer.reel/Layer.js
index 629b118c..4773489c 100644
--- a/js/panels/Timeline/Layer.reel/Layer.js
+++ b/js/panels/Timeline/Layer.reel/Layer.js
@@ -86,10 +86,12 @@ var Layer = exports.Layer = Montage.create(Component, {
86 if (newVal !== this._selectedStyleIndex) { 86 if (newVal !== this._selectedStyleIndex) {
87 this._selectedStyleIndex = newVal; 87 this._selectedStyleIndex = newVal;
88 this.layerData.selectedStyleIndex = newVal; 88 this.layerData.selectedStyleIndex = newVal;
89 this.needsDraw = true;
90 } 89 }
91 } 90 }
92 }, 91 },
92 _storedStyleIndex : {
93 value: false
94 },
93 95
94 /* Layer models: the name, ID, and selected and animation booleans for the layer */ 96 /* Layer models: the name, ID, and selected and animation booleans for the layer */
95 _layerName:{ 97 _layerName:{
@@ -276,6 +278,10 @@ var Layer = exports.Layer = Montage.create(Component, {
276 if (value === false) { 278 if (value === false) {
277 // If changing from true to false, we need to deselect any associated styles 279 // If changing from true to false, we need to deselect any associated styles
278 this.selectStyle(false); 280 this.selectStyle(false);
281 } else {
282 if (this._storedStyleIndex !== false) {
283 this.selectStyle(this._storedStyleIndex);
284 }
279 } 285 }
280 this._isSelected = value; 286 this._isSelected = value;
281 this.layerData.isSelected = value; 287 this.layerData.isSelected = value;
@@ -342,6 +348,19 @@ var Layer = exports.Layer = Montage.create(Component, {
342 _layerEditable : { 348 _layerEditable : {
343 value: false 349 value: false
344 }, 350 },
351
352 _dynamicLayerName:{
353 value:true
354 },
355 dynamicLayerName:{
356 serializable:true,
357 get:function () {
358 return this._dynamicLayerName;
359 },
360 set:function (newVal) {
361 this._dynamicLayerName = newVal;
362 }
363 },
345 364
346 // Are the various collapsers collapsed or not 365 // Are the various collapsers collapsed or not
347 _isMainCollapsed : { 366 _isMainCollapsed : {
@@ -565,7 +584,7 @@ var Layer = exports.Layer = Montage.create(Component, {
565 } 584 }
566 // Enable or disable the delete style button as appropriate 585 // Enable or disable the delete style button as appropriate
567 if (this.isSelected) { 586 if (this.isSelected) {
568 if (this.selectedStyleIndex !== "false") { 587 if (this.selectedStyleIndex !== false) {
569 this.selectStyle(this.selectedStyleIndex); 588 this.selectStyle(this.selectedStyleIndex);
570 this.buttonDeleteStyle.classList.remove("disabled"); 589 this.buttonDeleteStyle.classList.remove("disabled");
571 } 590 }
@@ -620,7 +639,7 @@ var Layer = exports.Layer = Montage.create(Component, {
620 } 639 }
621 }, 640 },
622 addStyle : { 641 addStyle : {
623 value: function(styleProperty) { 642 value: function(styleProperty, existingRule) {
624 // Add a new style rule. It should be added above the currently selected rule, 643 // Add a new style rule. It should be added above the currently selected rule,
625 // Or at the end, if no rule is selected. 644 // Or at the end, if no rule is selected.
626 645
@@ -649,13 +668,16 @@ var Layer = exports.Layer = Montage.create(Component, {
649 newStyle.editorProperty = styleProperty; 668 newStyle.editorProperty = styleProperty;
650 newEvent.layerEventType = "restoreStyle"; 669 newEvent.layerEventType = "restoreStyle";
651 newEvent.trackEditorProperty = styleProperty; 670 newEvent.trackEditorProperty = styleProperty;
652 newEvent.trackEditorProperty = styleProperty; 671 if(existingRule){
672 newEvent.existingRule = existingRule;
673 }
653 } 674 }
654 newStyle.editorValue = ""; 675 newStyle.editorValue = "";
655 newStyle.ruleTweener = false; 676 newStyle.ruleTweener = false;
656 newStyle.isSelected = false; 677 newStyle.isSelected = false;
657 newStyle.colorelement = ""; 678 newStyle.colorelement = "";
658 this.arrLayerStyles.push(newStyle); 679 this.arrLayerStyles.push(newStyle);
680 this.selectStyle(this.arrLayerStyles.length -1);
659 681
660 // Set up the event info and dispatch the event 682 // Set up the event info and dispatch the event
661 this.styleCounter += 1; 683 this.styleCounter += 1;
@@ -666,56 +688,64 @@ var Layer = exports.Layer = Montage.create(Component, {
666 688
667 deleteStyle : { 689 deleteStyle : {
668 value: function() {</