diff options
Diffstat (limited to 'js/panels/Timeline/Layer.reel')
-rw-r--r-- | js/panels/Timeline/Layer.reel/Layer.html | 70 | ||||
-rw-r--r-- | js/panels/Timeline/Layer.reel/Layer.js | 338 | ||||
-rw-r--r-- | js/panels/Timeline/Layer.reel/css/Layer.css | 99 | ||||
-rw-r--r-- | js/panels/Timeline/Layer.reel/scss/Layer.scss | 50 |
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 25827f72..bec033f8 100644 --- a/js/panels/Timeline/Layer.reel/Layer.html +++ b/js/panels/Timeline/Layer.reel/Layer.html | |||
@@ -16,12 +16,15 @@ | |||
16 | "element": {"#": "layer"}, | 16 | "element": {"#": "layer"}, |
17 | "styleRepetition" : {"@":"repetition1"}, | 17 | "styleRepetition" : {"@":"repetition1"}, |
18 | "dynamicLayerName" : {"@":"dtext1"}, | 18 | "dynamicLayerName" : {"@":"dtext1"}, |
19 | "dynamicLayerTag" : {"@": "dtext2"}, | ||
19 | "slotStyle" : {"@":"slot1"}, | 20 | "slotStyle" : {"@":"slot1"}, |
20 | "mainCollapser" : {"@" : "mainCollapser"}, | 21 | "mainCollapser" : {"@" : "mainCollapser"}, |
21 | "positionCollapser" : {"@" : "positionCollapser"}, | 22 | "positionCollapser" : {"@" : "positionCollapser"}, |
22 | "transformCollapser" : {"@" : "transformCollapser"}, | 23 | "transformCollapser" : {"@" : "transformCollapser"}, |
23 | "styleCollapser" : {"@" : "styleCollapser"}, | 24 | "styleCollapser" : {"@" : "styleCollapser"}, |
24 | "clickerMain" : {"#" : "clicker-main"} | 25 | "clickerMain" : {"#" : "clicker-main"}, |
26 | "myLabel" : {"#" : "myLabel"}, | ||
27 | "dragDrop" : {"@" : "DragDrop"} | ||
25 | } | 28 | } |
26 | }, | 29 | }, |
27 | "dtext1" : { | 30 | "dtext1" : { |
@@ -37,6 +40,20 @@ | |||
37 | } | 40 | } |
38 | } | 41 | } |
39 | }, | 42 | }, |
43 | "dtext2" : { | ||
44 | "module" : "montage/ui/dynamic-text.reel", | ||
45 | "name" : "DynamicText", | ||
46 | "properties" : { | ||
47 | "element" : {"#" : "layer-tag"} | ||
48 | }, | ||
49 | "bindings" : { | ||
50 | "value" : { | ||
51 | "boundObject" : {"@": "owner"}, | ||
52 | "boundObjectPropertyPath" : "layerTag", | ||
53 | "oneway" : false | ||
54 | } | ||
55 | } | ||
56 | }, | ||
40 | "repetition1": { | 57 | "repetition1": { |
41 | "prototype": "montage/ui/repetition.reel", | 58 | "prototype": "montage/ui/repetition.reel", |
42 | "properties": { | 59 | "properties": { |
@@ -286,7 +303,7 @@ | |||
286 | "properties" : { | 303 | "properties" : { |
287 | "element" : {"#" : "content-style"}, | 304 | "element" : {"#" : "content-style"}, |
288 | "myContent" : {"#":"content-style"}, | 305 | "myContent" : {"#":"content-style"}, |
289 | "contentHeight" : 60, | 306 | "contentHeight" : 0, |
290 | "isLabelClickable" : true, | 307 | "isLabelClickable" : true, |
291 | "clicker" : {"#" : "clicker-style"}, | 308 | "clicker" : {"#" : "clicker-style"}, |
292 | "isCollapsed" : true, | 309 | "isCollapsed" : true, |
@@ -308,7 +325,8 @@ | |||
308 | <body> | 325 | <body> |
309 | 326 | ||
310 | <div data-montage-id="layer" class="container-layer"> | 327 | <div data-montage-id="layer" class="container-layer"> |
311 | <div class="label-layer"> | 328 | <div class="label-layer" data-montage-id="myLabel"> |
329 | <span data-montage-id="layer-tag" class="layer-tag"></span> | ||
312 | <span class="collapsible-label" data-montage-id="layer-label-text" spellcheck="false">Label</span> | 330 | <span class="collapsible-label" data-montage-id="layer-label-text" spellcheck="false">Label</span> |
313 | <span class="collapsible-clicker collapsible-collapsed" data-montage-id="clicker-main"></span> | 331 | <span class="collapsible-clicker collapsible-collapsed" data-montage-id="clicker-main"></span> |
314 | <div class="cssbutton button-lock"></div> | 332 | <div class="cssbutton button-lock"></div> |
@@ -320,14 +338,14 @@ | |||
320 | <span class="collapsible-clicker clicker-position collapsible-collapsed" data-montage-id="clicker-position"></span> | 338 | <span class="collapsible-clicker clicker-position collapsible-collapsed" data-montage-id="clicker-position"></span> |
321 | </div> | 339 | </div> |
322 | <div class="content-position collapsible-content collapsible-collapsed" data-montage-id="content-position"> | 340 | <div class="content-position collapsible-content collapsible-collapsed" data-montage-id="content-position"> |
323 | <div class="layout-table"> | 341 | <div class="layout-tablew"> |
324 | <div class="layout-row"> | 342 | <div class="container-row"> |
325 | <div class="layout-cell">X</div> | 343 | <div class="cell-property">Left</div> |
326 | <div class="layout-cell"><div data-montage-id="position-x"></div></div> | 344 | <div class="cell-value"><div data-montage-id="position-x"></div></div> |
327 | </div> | 345 | </div> |
328 | <div class="layout-row"> | 346 | <div class="container-row"> |
329 | <div class="layout-cell">Y</div> | 347 | <div class="cell-property">Top</div> |
330 | <div class="layout-cell"><div data-montage-id="position-y"></div></div> | 348 | <div class="cell-value"><div data-montage-id="position-y"></div></div> |
331 | </div> | 349 | </div> |
332 | </div> | 350 | </div> |
333 | </div> | 351 | </div> |
@@ -336,26 +354,26 @@ | |||
336 | <span class="clicker-transform collapsible-clicker collapsible-collapsed" data-montage-id="clicker-transform"></span> | 354 | <span class="clicker-transform collapsible-clicker collapsible-collapsed" data-montage-id="clicker-transform"></span> |
337 | </div> | 355 | </div> |
338 | <div class="content-transform collapsible-content collapsible-collapsed" data-montage-id="content-transform"> | 356 | <div class="content-transform collapsible-content collapsible-collapsed" data-montage-id="content-transform"> |
339 | <div class="layout-table"> | 357 | <div class="layout-tablew"> |
340 | <div class="layout-row"> | 358 | <div class="container-row"> |
341 | <div class="layout-cell">Scale X</div> | 359 | <div class="cell-property">Width</div> |
342 | <div class="layout-cell"><div data-montage-id="scale-x"></div></div> | 360 | <div class="cell-value"><div data-montage-id="scale-x"></div></div> |
343 | </div> | 361 | </div> |
344 | <div class="layout-row"> | 362 | <div class="container-row"> |
345 | <div class="layout-cell">Scale Y</div> | 363 | <div class="cell-property">Height</div> |
346 | <div class="layout-cell"><div data-montage-id="scale-y"></div></div> | 364 | <div class="cell-value"><div data-montage-id="scale-y"></div></div> |
347 | </div> | 365 | </div> |
348 | <div class="layout-row"> | 366 | <div class="container-row"> |
349 | <div class="layout-cell">Skew X</div> | 367 | <div class="cell-property">Skew X</div> |
350 | <div class="layout-cell"><div data-montage-id="skew-x"></div></div> | 368 | <div class="cell-value"><div data-montage-id="skew-x"></div></div> |
351 | </div> | 369 | </div> |
352 | <div class="layout-row"> | 370 | <div class="container-row"> |
353 | <div class="layout-cell">Skew Y</div> | 371 | <div class="cell-property">Skew Y</div> |
354 | <div class="layout-cell"><div data-montage-id="skew-y"></div></div> | 372 | <div class="cell-value"><div data-montage-id="skew-y"></div></div> |
355 | </div> | 373 | </div> |
356 | <div class="layout-row"> | 374 | <div class="container-row"> |
357 | <div class="layout-cell">Rotation</div> | 375 | <div class="cell-property">Rotation</div> |
358 | <div class="layout-cell"><div data-montage-id="rotation"></div></div> | 376 | <div class="cell-value"><div data-montage-id="rotation"></div></div> |
359 | </div> | 377 | </div> |
360 | </div> | 378 | </div> |
361 | 379 | ||
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; | ||
100 | } | ||