aboutsummaryrefslogtreecommitdiff
path: root/js/panels/Timeline/Layer.reel
diff options
context:
space:
mode:
Diffstat (limited to 'js/panels/Timeline/Layer.reel')
-rw-r--r--js/panels/Timeline/Layer.reel/Layer.html8
-rw-r--r--js/panels/Timeline/Layer.reel/Layer.js205
-rw-r--r--js/panels/Timeline/Layer.reel/css/Layer.css50
-rw-r--r--js/panels/Timeline/Layer.reel/scss/Layer.scss9
4 files changed, 199 insertions, 73 deletions
diff --git a/js/panels/Timeline/Layer.reel/Layer.html b/js/panels/Timeline/Layer.reel/Layer.html
index 79b522ee..454c2742 100644
--- a/js/panels/Timeline/Layer.reel/Layer.html
+++ b/js/panels/Timeline/Layer.reel/Layer.html
@@ -22,7 +22,9 @@
22 "positionCollapser" : {"@" : "positionCollapser"}, 22 "positionCollapser" : {"@" : "positionCollapser"},
23 "transformCollapser" : {"@" : "transformCollapser"}, 23 "transformCollapser" : {"@" : "transformCollapser"},
24 "styleCollapser" : {"@" : "styleCollapser"}, 24 "styleCollapser" : {"@" : "styleCollapser"},
25 "clickerMain" : {"#" : "clicker-main"} 25 "clickerMain" : {"#" : "clicker-main"},
26 "myLabel" : {"#" : "myLabel"},
27 "dragDrop" : {"@" : "DragDrop"}
26 } 28 }
27 }, 29 },
28 "dtext1" : { 30 "dtext1" : {
@@ -301,7 +303,7 @@
301 "properties" : { 303 "properties" : {
302 "element" : {"#" : "content-style"}, 304 "element" : {"#" : "content-style"},
303 "myContent" : {"#":"content-style"}, 305 "myContent" : {"#":"content-style"},
304 "contentHeight" : 60, 306 "contentHeight" : 0,
305 "isLabelClickable" : true, 307 "isLabelClickable" : true,
306 "clicker" : {"#" : "clicker-style"}, 308 "clicker" : {"#" : "clicker-style"},
307 "isCollapsed" : true, 309 "isCollapsed" : true,
@@ -323,7 +325,7 @@
323 <body> 325 <body>
324 326
325 <div data-montage-id="layer" class="container-layer"> 327 <div data-montage-id="layer" class="container-layer">
326 <div class="label-layer"> 328 <div class="label-layer" data-montage-id="myLabel">
327 <span class="collapsible-label" data-montage-id="layer-label-text" spellcheck="false">Label</span> 329 <span class="collapsible-label" data-montage-id="layer-label-text" spellcheck="false">Label</span>
328 <span class="collapsible-clicker collapsible-collapsed" data-montage-id="clicker-main"></span> 330 <span class="collapsible-clicker collapsible-collapsed" data-montage-id="clicker-main"></span>
329 <div class="cssbutton button-lock"></div> 331 <div class="cssbutton button-lock"></div>
diff --git a/js/panels/Timeline/Layer.reel/Layer.js b/js/panels/Timeline/Layer.reel/Layer.js
index 5206ae16..2f0310a9 100644
--- a/js/panels/Timeline/Layer.reel/Layer.js
+++ b/js/panels/Timeline/Layer.reel/Layer.js
@@ -67,10 +67,7 @@ var Layer = exports.Layer = Montage.create(Component, {
67 67
68 /* Layer models: the name, ID, and selected and animation booleans for the layer */ 68 /* Layer models: the name, ID, and selected and animation booleans for the layer */
69 _layerName:{ 69 _layerName:{
70 serializable: true, 70 value: "Default Layer Name"
71 value:null,
72 writable:true,
73 enumerable:true
74 }, 71 },
75 72
76 layerName:{ 73 layerName:{
@@ -79,20 +76,17 @@ var Layer = exports.Layer = Montage.create(Component, {
79 return this._layerName; 76 return this._layerName;
80 }, 77 },
81 set:function(newVal){ 78 set:function(newVal){
82 if (newVal !== this._layerName) { 79
83 this._layerEditable.value = newVal; 80 this._layerEditable.value = newVal;
84 this._layerName = newVal; 81 this._layerName = newVal;
85 this.layerData.layerName = newVal; 82 this.layerData.layerName = newVal;
86 this.log('layerName setter: ' + newVal) 83 if (typeof(this.dynamicLayerName) !== "undefined") {
87 } 84 this.dynamicLayerName.value = newVal;
88 85 }
89 } 86 }
90 }, 87 },
91 _layerID:{ 88 _layerID:{
92 value:null, 89 value: "Default Layer ID"
93 writable:true,
94 serializable: true,
95 enumerable:true
96 }, 90 },
97 91
98 layerID:{ 92 layerID:{
@@ -102,6 +96,7 @@ var Layer = exports.Layer = Montage.create(Component, {
102 }, 96 },
103 set:function(value){ 97 set:function(value){
104 this._layerID = value; 98 this._layerID = value;
99 this.layerData.layerID = value;
105 } 100 }
106 }, 101 },
107 102
@@ -119,7 +114,7 @@ var Layer = exports.Layer = Montage.create(Component, {
119 set:function(value){ 114 set:function(value){
120 if (this._dtextPositionX !== value) { 115 if (this._dtextPositionX !== value) {
121 this._dtextPositionX = value; 116 this._dtextPositionX = value;
122 //this.needsDraw = true; 117 this.layerData.dtextPositionX = value;
123 } 118 }
124 119
125 } 120 }
@@ -138,7 +133,7 @@ var Layer = exports.Layer = Montage.create(Component, {
138 set:function(value){ 133 set:function(value){
139 if (this._dtextPositionY !== value) { 134 if (this._dtextPositionY !== value) {
140 this._dtextPositionY = value; 135 this._dtextPositionY = value;
141 //this.needsDraw = true; 136 this.layerData.dtextPositionY = value;
142 } 137 }
143 138
144 } 139 }
@@ -157,7 +152,7 @@ var Layer = exports.Layer = Montage.create(Component, {
157 set:function(value){ 152 set:function(value){
158 if (this._dtextScaleX !== value) { 153 if (this._dtextScaleX !== value) {
159 this._dtextScaleX = value; 154 this._dtextScaleX = value;
160 //this.needsDraw = true; 155 this.layerData.dtextScaleX = value;
161 } 156 }
162 157
163 } 158 }
@@ -176,7 +171,7 @@ var Layer = exports.Layer = Montage.create(Component, {
176 set:function(value){ 171 set:function(value){
177 if (this._dtextScaleY !== value) { 172 if (this._dtextScaleY !== value) {
178 this._dtextScaleY = value; 173 this._dtextScaleY = value;
179 //this.needsDraw = true; 174 this.layerData.dtextScaleY = value;
180 } 175 }
181 176
182 } 177 }
@@ -195,7 +190,7 @@ var Layer = exports.Layer = Montage.create(Component, {
195 set:function(value){ 190 set:function(value){
196 if (this._dtextSkewX !== value) { 191 if (this._dtextSkewX !== value) {
197 this._dtextSkewX = value; 192 this._dtextSkewX = value;
198 //this.needsDraw = true; 193 this.layerData.dtextSkewX = value;
199 } 194 }
200 195
201 } 196 }
@@ -214,7 +209,7 @@ var Layer = exports.Layer = Montage.create(Component, {
214 set:function(value){ 209 set:function(value){
215 if (this._dtextSkewY !== value) { 210 if (this._dtextSkewY !== value) {
216 this._dtextSkewY = value; 211 this._dtextSkewY = value;
217 //this.needsDraw = true; 212 this.layerData.dtextSkewY = value;
218 } 213 }
219 214
220 } 215 }
@@ -233,7 +228,7 @@ var Layer = exports.Layer = Montage.create(Component, {
233 set:function(value){ 228 set:function(value){
234 if (this._dtextRotate !== value) { 229 if (this._dtextRotate !== value) {
235 this._dtextRotate = value; 230 this._dtextRotate = value;
236 //this.needsDraw = true; 231 this.layerData.dtextRotate = value;
237 } 232 }
238 233
239 } 234 }
@@ -278,6 +273,7 @@ var Layer = exports.Layer = Montage.create(Component, {
278 }, 273 },
279 set: function(newVal) { 274 set: function(newVal) {
280 this._isActive = newVal; 275 this._isActive = newVal;
276 this.layerData.isActive = newVal;
281 } 277 }
282 }, 278 },
283 279
@@ -294,6 +290,7 @@ var Layer = exports.Layer = Montage.create(Component, {
294 }, 290 },
295 set:function(value){ 291 set:function(value){
296 this._isAnimated = value; 292 this._isAnimated = value;
293 this.layerData.isAnimated = newVal;
297 } 294 }
298 }, 295 },
299 _justAdded: { 296 _justAdded: {
@@ -314,9 +311,10 @@ var Layer = exports.Layer = Montage.create(Component, {
314 return this._isMainCollapsed; 311 return this._isMainCollapsed;
315 }, 312 },
316 set: function(newVal) { 313 set: function(newVal) {
317 this.log('layer.js: isMainCollapsed: ' + newVal);
318 if (newVal !== this._isMainCollapsed) { 314 if (newVal !== this._isMainCollapsed) {
315 this.log('layer.js: isMainCollapsed: ' + newVal);
319 this._isMainCollapsed = newVal; 316 this._isMainCollapsed = newVal;
317 this.layerData.isMainCollapsed = newVal;
320 } 318 }
321 } 319 }
322 }, 320 },
@@ -333,7 +331,7 @@ var Layer = exports.Layer = Montage.create(Component, {
333 set: function(newVal) {