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.html46
-rw-r--r--js/panels/Timeline/Layer.reel/Layer.js58
-rw-r--r--js/panels/Timeline/Layer.reel/css/Layer.css72
-rw-r--r--js/panels/Timeline/Layer.reel/scss/Layer.scss27
4 files changed, 123 insertions, 80 deletions
diff --git a/js/panels/Timeline/Layer.reel/Layer.html b/js/panels/Timeline/Layer.reel/Layer.html
index 454c2742..eb9ff3a9 100644
--- a/js/panels/Timeline/Layer.reel/Layer.html
+++ b/js/panels/Timeline/Layer.reel/Layer.html
@@ -337,14 +337,14 @@
337 <span class="collapsible-clicker clicker-position collapsible-collapsed" data-montage-id="clicker-position"></span> 337 <span class="collapsible-clicker clicker-position collapsible-collapsed" data-montage-id="clicker-position"></span>
338 </div> 338 </div>
339 <div class="content-position collapsible-content collapsible-collapsed" data-montage-id="content-position"> 339 <div class="content-position collapsible-content collapsible-collapsed" data-montage-id="content-position">
340 <div class="layout-table"> 340 <div class="layout-tablew">
341 <div class="layout-row"> 341 <div class="container-row">
342 <div class="layout-cell">X</div> 342 <div class="cell-property">X</div>
343 <div class="layout-cell"><div data-montage-id="position-x"></div></div> 343 <div class="cell-value"><div data-montage-id="position-x"></div></div>
344 </div> 344 </div>
345 <div class="layout-row"> 345 <div class="container-row">
346 <div class="layout-cell">Y</div> 346 <div class="cell-property">Y</div>
347 <div class="layout-cell"><div data-montage-id="position-y"></div></div> 347 <div class="cell-value"><div data-montage-id="position-y"></div></div>
348 </div> 348 </div>
349 </div> 349 </div>
350 </div> 350 </div>
@@ -353,26 +353,26 @@
353 <span class="clicker-transform collapsible-clicker collapsible-collapsed" data-montage-id="clicker-transform"></span> 353 <span class="clicker-transform collapsible-clicker collapsible-collapsed" data-montage-id="clicker-transform"></span>
354 </div> 354 </div>
355 <div class="content-transform collapsible-content collapsible-collapsed" data-montage-id="content-transform"> 355 <div class="content-transform collapsible-content collapsible-collapsed" data-montage-id="content-transform">
356 <div class="layout-table"> 356 <div class="layout-tablew">
357 <div class="layout-row"> 357 <div class="container-row">
358 <div class="layout-cell">Scale X</div> 358 <div class="cell-property">Scale X</div>
359 <div class="layout-cell"><div data-montage-id="scale-x"></div></div> 359 <div class="cell-value"><div data-montage-id="scale-x"></div></div>
360 </div> 360 </div>
361 <div class="layout-row"> 361 <div class="container-row">
362 <div class="layout-cell">Scale Y</div> 362 <div class="cell-property">Scale Y</div>
363 <div class="layout-cell"><div data-montage-id="scale-y"></div></div> 363 <div class="cell-value"><div data-montage-id="scale-y"></div></div>
364 </div> 364 </div>
365 <div class="layout-row"> 365 <div class="container-row">
366 <div class="layout-cell">Skew X</div> 366 <div class="cell-property">Skew X</div>
367 <div class="layout-cell"><div data-montage-id="skew-x"></div></div> 367 <div class="cell-value"><div data-montage-id="skew-x"></div></div>
368 </div> 368 </div>
369 <div class="layout-row"> 369 <div class="container-row">
370 <div class="layout-cell">Skew Y</div> 370 <div class="cell-property">Skew Y</div>
371 <div class="layout-cell"><div data-montage-id="skew-y"></div></div> 371 <div class="cell-value"><div data-montage-id="skew-y"></div></div>
372 </div> 372 </div>
373 <div class="layout-row"> 373 <div class="container-row">
374 <div class="layout-cell">Rotation</div> 374 <div class="cell-property">Rotation</div>
375 <div class="layout-cell"><div data-montage-id="rotation"></div></div> 375 <div class="cell-value"><div data-montage-id="rotation"></div></div>
376 </div> 376 </div>
377 </div> 377 </div>
378 378
diff --git a/js/panels/Timeline/Layer.reel/Layer.js b/js/panels/Timeline/Layer.reel/Layer.js
index 2f0310a9..3bcc1401 100644
--- a/js/panels/Timeline/Layer.reel/Layer.js
+++ b/js/panels/Timeline/Layer.reel/Layer.js
@@ -311,11 +311,9 @@ var Layer = exports.Layer = Montage.create(Component, {
311 return this._isMainCollapsed; 311 return this._isMainCollapsed;
312 }, 312 },
313 set: function(newVal) { 313 set: function(newVal) {
314 if (newVal !== this._isMainCollapsed) { 314 this._isMainCollapsed = newVal;
315 this.log('layer.js: isMainCollapsed: ' + newVal); 315 this.layerData.isMainCollapsed = newVal;
316 this._isMainCollapsed = newVal; 316
317 this.layerData.isMainCollapsed = newVal;
318 }
319 } 317 }
320 }, 318 },
321 319
@@ -329,10 +327,8 @@ var Layer = exports.Layer = Montage.create(Component, {
329 return this._isTransformCollapsed; 327 return this._isTransformCollapsed;
330 }, 328 },
331 set: function(newVal) { 329 set: function(newVal) {
332 if (newVal !== this._isTransformCollapsed) { 330 this._isTransformCollapsed = newVal;
333 this._isTransformCollapsed = newVal; 331 this.layerData.isTransformCollapsed = newVal;
334 this.layerData.isTransformCollapsed = newVal;
335 }
336 } 332 }
337 }, 333 },
338 334
@@ -346,10 +342,8 @@ var Layer = exports.Layer = Montage.create(Component, {
346 return this._isPositionCollapsed; 342 return this._isPositionCollapsed;
347 }, 343 },
348 set: function(newVal) { 344 set: function(newVal) {
349 if (newVal !== this._isPositionCollapsed) { 345 this._isPositionCollapsed = newVal;
350 this._isPositionCollapsed = newVal; 346 this.layerData.isPositionCollapsed = newVal;
351 this.layerData.isPositionCollapsed = newVal;
352 }
353 } 347 }
354 }, 348 },
355 349
@@ -363,10 +357,8 @@ var Layer = exports.Layer = Montage.create(Component, {
363 return this._isStyleCollapsed; 357 return this._isStyleCollapsed;
364 }, 358 },
365 set: function(newVal) { 359 set: function(newVal) {
366 if (newVal !== this._isStyleCollapsed) { 360 this._isStyleCollapsed = newVal;
367 this._isStyleCollapsed = newVal; 361 this.layerData.isStyleCollapsed = newVal;
368 this.layerData.isStyleCollapsed = newVal;
369 }
370 } 362 }
371 }, 363 },
372 _bypassAnimation : { 364 _bypassAnimation : {
@@ -379,7 +371,7 @@ var Layer = exports.Layer = Montage.create(Component, {
379 return this._bypassAnimation; 371 return this._bypassAnimation;
380 }, 372 },
381 set: function(newVal) { 373 set: function(newVal) {
382 if ((newVal !== this._bypassAnimation) && (typeof(this.layerData) !== "undefined")) { 374 if (typeof(this.layerData) !== "undefined") {
383 this._bypassAnimation = newVal; 375 this._bypassAnimation = newVal;
384 this.layerData.bypassAnimation = newVal; 376 this.layerData.bypassAnimation = newVal;
385 } 377 }
@@ -480,31 +472,23 @@ var Layer = exports.Layer = Montage.create(Component, {
480 472
481 // Initialize myself 473 // Initialize myself
482 this.init(); 474 this.init();
483 var that = this; 475
484 // Make it editable! 476 // Make it editable!
485 this._layerEditable = Hintable.create(); 477 this._layerEditable = Hintable.create();
486 this._layerEditable.element = this.titleSelector; 478 this._layerEditable.element = this.titleSelector;
487 this.titleSelector.identifier = "selectorEditable"; 479 this.titleSelector.identifier = "selectorEditable";
488 this.titleSelector.addEventListener("click", this, false); 480 this.titleSelector.addEventListener("click", this, false);
489 this._layerEditable.addEventListener("blur", function(event) { 481 this._layerEditable.addEventListener("blur", this.handleSelectorEditableBlur.bind(this), false);
490 that.handleSelectorEditableBlur(event); 482 this._layerEditable.addEventListener("change", this.handleLayerNameChange.bind(this), false);
491 }, false);
492 this._layerEditable.addEventListener("change", function(event) {
493 that.dynamicLayerName.value = that._layerEditable.value;
494 this.application.ninja.timeline.currentLayerSelected.layerData.elementsList[0].dataset.storedLayerName = that.dynamicLayerName.value;
495 that.needsDraw = true;
496 this.application.ninja.documentController.activeDocument.needsSave = true;
497 }, false);
498 this._layerEditable.editingClass = "editable2"; 483 this._layerEditable.editingClass = "editable2";
499 this._layerEditable.value = this.layerName; 484 this._layerEditable.value = this.layerName;
500 //this._layerEditable.needsDraw = true; 485
501 486 // Collapser event handlers.
502 this.mainCollapser.clicker.addEventListener("click", this.handleMainCollapserClick.bind(this), false); 487 this.mainCollapser.clicker.addEventListener("click", this.handleMainCollapserClick.bind(this), false);
503 this.positionCollapser.clicker.addEventListener("click", this.handlePositionCollapserClick.bind(this), false); 488 this.positionCollapser.clicker.addEventListener("click", this.handlePositionCollapserClick.bind(this), false);
504 this.transformCollapser.clicker.addEventListener("click", this.handleTransformCollapserClick.bind(this), false); 489 this.transformCollapser.clicker.addEventListener("click", this.handleTransformCollapserClick.bind(this), false);
505 this.styleCollapser.clicker.addEventListener("click", this.handleStyleCollapserClick.bind(this), false); 490 this.styleCollapser.clicker.addEventListener("click", this.handleStyleCollapserClick.bind(this), false);
506 491
507
508 // Add event listeners to add and delete style buttons 492 // Add event listeners to add and delete style buttons
509 this.buttonAddStyle.addEventListener("click", this.handleAddStyleClick.bind(this), false); 493 this.buttonAddStyle.addEventListener("click", this.handleAddStyleClick.bind(this), false);
510 this.buttonDeleteStyle.addEventListener("click", this.handleDeleteStyleClick.bind(this), false); 494 this.buttonDeleteStyle.addEventListener("click", this.handleDeleteStyleClick.bind(this), false);
@@ -514,8 +498,8 @@ var Layer = exports.Layer = Montage.create(Component, {
514 this.element.addEventListener("click", this, false); 498 this.element.addEventListener("click", this, false);
515 499
516 // Drag and drop event handlers 500 // Drag and drop event handlers
517 this.element.addEventListener("mouseover", this.handleMouseover.bind(this), false);