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.html70
-rw-r--r--js/panels/Timeline/Layer.reel/Layer.js338
-rw-r--r--js/panels/Timeline/Layer.reel/css/Layer.css99
-rw-r--r--js/panels/Timeline/Layer.reel/scss/Layer.scss50
4 files changed, 405 insertions, 152 deletions
diff --git a/js/panels/Timeline/Layer.reel/Layer.html b/js/panels/Timeline/Layer.reel/Layer.html
index 79b522ee..915e8b89 100644
--- a/js/panels/Timeline/Layer.reel/Layer.html
+++ b/js/panels/Timeline/Layer.reel/Layer.html
@@ -17,12 +17,15 @@
17 "element": {"#": "layer"}, 17 "element": {"#": "layer"},
18 "styleRepetition" : {"@":"repetition1"}, 18 "styleRepetition" : {"@":"repetition1"},
19 "dynamicLayerName" : {"@":"dtext1"}, 19 "dynamicLayerName" : {"@":"dtext1"},
20 "dynamicLayerTag" : {"@": "dtext2"},
20 "slotStyle" : {"@":"slot1"}, 21 "slotStyle" : {"@":"slot1"},
21 "mainCollapser" : {"@" : "mainCollapser"}, 22 "mainCollapser" : {"@" : "mainCollapser"},
22 "positionCollapser" : {"@" : "positionCollapser"}, 23 "positionCollapser" : {"@" : "positionCollapser"},
23 "transformCollapser" : {"@" : "transformCollapser"}, 24 "transformCollapser" : {"@" : "transformCollapser"},
24 "styleCollapser" : {"@" : "styleCollapser"}, 25 "styleCollapser" : {"@" : "styleCollapser"},
25 "clickerMain" : {"#" : "clicker-main"} 26 "clickerMain" : {"#" : "clicker-main"},
27 "myLabel" : {"#" : "myLabel"},
28 "dragDrop" : {"@" : "DragDrop"}
26 } 29 }
27 }, 30 },
28 "dtext1" : { 31 "dtext1" : {
@@ -39,6 +42,20 @@
39 } 42 }
40 } 43 }
41 }, 44 },
45 "dtext2" : {
46 "module" : "montage/ui/dynamic-text.reel",
47 "name" : "DynamicText",
48 "properties" : {
49 "element" : {"#" : "layer-tag"}
50 },
51 "bindings" : {
52 "value" : {
53 "boundObject" : {"@": "owner"},
54 "boundObjectPropertyPath" : "layerTag",
55 "oneway" : false
56 }
57 }
58 },
42 "repetition1": { 59 "repetition1": {
43 "module": "montage/ui/repetition.reel", 60 "module": "montage/ui/repetition.reel",
44 "name": "Repetition", 61 "name": "Repetition",
@@ -301,7 +318,7 @@
301 "properties" : { 318 "properties" : {
302 "element" : {"#" : "content-style"}, 319 "element" : {"#" : "content-style"},
303 "myContent" : {"#":"content-style"}, 320 "myContent" : {"#":"content-style"},
304 "contentHeight" : 60, 321 "contentHeight" : 0,
305 "isLabelClickable" : true, 322 "isLabelClickable" : true,
306 "clicker" : {"#" : "clicker-style"}, 323 "clicker" : {"#" : "clicker-style"},
307 "isCollapsed" : true, 324 "isCollapsed" : true,
@@ -323,7 +340,8 @@
323 <body> 340 <body>
324 341
325 <div data-montage-id="layer" class="container-layer"> 342 <div data-montage-id="layer" class="container-layer">
326 <div class="label-layer"> 343 <div class="label-layer" data-montage-id="myLabel">
344 <span data-montage-id="layer-tag" class="layer-tag"></span>
327 <span class="collapsible-label" data-montage-id="layer-label-text" spellcheck="false">Label</span> 345 <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> 346 <span class="collapsible-clicker collapsible-collapsed" data-montage-id="clicker-main"></span>
329 <div class="cssbutton button-lock"></div> 347 <div class="cssbutton button-lock"></div>
@@ -335,14 +353,14 @@
335 <span class="collapsible-clicker clicker-position collapsible-collapsed" data-montage-id="clicker-position"></span> 353 <span class="collapsible-clicker clicker-position collapsible-collapsed" data-montage-id="clicker-position"></span>
336 </div> 354 </div>
337 <div class="content-position collapsible-content collapsible-collapsed" data-montage-id="content-position"> 355 <div class="content-position collapsible-content collapsible-collapsed" data-montage-id="content-position">
338 <div class="layout-table"> 356 <div class="layout-tablew">
339 <div class="layout-row"> 357 <div class="container-row">
340 <div class="layout-cell">X</div> 358 <div class="cell-property">Left</div>
341 <div class="layout-cell"><div data-montage-id="position-x"></div></div> 359 <div class="cell-value"><div data-montage-id="position-x"></div></div>
342 </div> 360 </div>
343 <div class="layout-row"> 361 <div class="container-row">
344 <div class="layout-cell">Y</div> 362 <div class="cell-property">Top</div>
345 <div class="layout-cell"><div data-montage-id="position-y"></div></div> 363 <div class="cell-value"><div data-montage-id="position-y"></div></div>
346 </div> 364 </div>
347 </div> 365 </div>
348 </div> 366 </div>
@@ -351,26 +369,26 @@
351 <span class="clicker-transform collapsible-clicker collapsible-collapsed" data-montage-id="clicker-transform"></span> 369 <span class="clicker-transform collapsible-clicker collapsible-collapsed" data-montage-id="clicker-transform"></span>
352 </div> 370 </div>
353 <div class="content-transform collapsible-content collapsible-collapsed" data-montage-id="content-transform"> 371 <div class="content-transform collapsible-content collapsible-collapsed" data-montage-id="content-transform">
354 <div class="layout-table"> 372 <div class="layout-tablew">
355 <div class="layout-row"> 373 <div class="container-row">
356 <div class="layout-cell">Scale X</div> 374 <div class="cell-property">Width</div>
357 <div class="layout-cell"><div data-montage-id="scale-x"></div></div> 375 <div class="cell-value"><div data-montage-id="scale-x"></div></div>
358 </div> 376 </div>
359 <div class="layout-row"> 377 <div class="container-row">
360 <div class="layout-cell">Scale Y</div> 378 <div class="cell-property">Height</div>
361 <div class="layout-cell"><div data-montage-id="scale-y"></div></div> 379 <div class="cell-value"><div data-montage-id="scale-y"></div></div>
362 </div> 380 </div>
363 <div class="layout-row"> 381 <div class="container-row">
364 <div class="layout-cell">Skew X</div> 382 <div class="cell-property">Skew X</div>
365 <div class="layout-cell"><div data-montage-id="skew-x"></div></div> 383 <div class="cell-value"><div data-montage-id="skew-x"></div></div>
366 </div> 384 </div>
367 <div class="layout-row"> 385 <div class="container-row">
368 <div class="layout-cell">Skew Y</div> 386 <div class="cell-property">Skew Y</div>
369 <div class="layout-cell"><div data-montage-id="skew-y"></div></div> 387 <div class="cell-value"><div data-montage-id="skew-y"></div></div>
370 </div> 388 </div>
371 <div class="layout-row"> 389 <div class="container-row">
372 <div class="layout-cell">Rotation</div> 390 <div class="cell-property">Rotation</div>
373 <div class="layout-cell"><div data-montage-id="rotation"></div></div> 391 <div class="cell-value"><div data-montage-id="rotation"></div></div>
374 </div> 392 </div>
375 </div> 393 </div>
376 394
diff --git a/js/panels/Timeline/Layer.reel/Layer.js b/js/panels/Timeline/Layer.reel/Layer.js
index 5206ae16..f2e20d41 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,8 +96,49 @@ 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;