aboutsummaryrefslogtreecommitdiff
path: root/js/panels/Timeline/Layer.reel/Layer.js
diff options
context:
space:
mode:
Diffstat (limited to 'js/panels/Timeline/Layer.reel/Layer.js')
-rw-r--r--js/panels/Timeline/Layer.reel/Layer.js44
1 files changed, 27 insertions, 17 deletions
diff --git a/js/panels/Timeline/Layer.reel/Layer.js b/js/panels/Timeline/Layer.reel/Layer.js
index 2980842f..158eac00 100644
--- a/js/panels/Timeline/Layer.reel/Layer.js
+++ b/js/panels/Timeline/Layer.reel/Layer.js
@@ -372,17 +372,18 @@ var Layer = exports.Layer = Montage.create(Component, {
372 } 372 }
373 } 373 }
374 }, 374 },
375 _animateCollapser : { 375 _bypassAnimation : {
376 serializable: true, 376 serializable: true,
377 value: false 377 value: false
378 }, 378 },
379 animateCollapser : { 379 bypassAnimation : {
380 serializable: true, 380 serializable: true,
381 get: function() { 381 get: function() {
382 return this._animateCollapser; 382 return this._bypassAnimation;
383 }, 383 },
384 set: function(newVal) { 384 set: function(newVal) {
385 this._animateCollapser = newVal; 385 //console.log("layer.js _bypassAnimation setter " + newVal)
386 this._bypassAnimation = newVal;
386 } 387 }
387 }, 388 },
388 389
@@ -398,9 +399,9 @@ var Layer = exports.Layer = Montage.create(Component, {
398 399
399 var that = this; 400 var that = this;
400 401
401 this.positionCollapser = Collapser.create(); 402 //this.positionCollapser = Collapser.create();
402 this.transformCollapser = Collapser.create(); 403 //this.transformCollapser = Collapser.create();
403 this.styleCollapser = Collapser.create(); 404 //this.styleCollapser = Collapser.create();
404 405
405 // Make it editable! 406 // Make it editable!
406 this._layerEditable = Hintable.create(); 407 this._layerEditable = Hintable.create();
@@ -419,6 +420,7 @@ var Layer = exports.Layer = Montage.create(Component, {
419 this._layerEditable.needsDraw = true; 420 this._layerEditable.needsDraw = true;
420 421
421 // Change the markup into collapsible sections using the nifty Collapser component! 422 // Change the markup into collapsible sections using the nifty Collapser component!
423 /*
422 this.mainCollapser = Collapser.create(); 424 this.mainCollapser = Collapser.create();
423 this.mainCollapser.clicker = this.clicker; 425 this.mainCollapser.clicker = this.clicker;
424 this.mainCollapser.myContent = this.myContent; 426 this.mainCollapser.myContent = this.myContent;
@@ -435,6 +437,7 @@ var Layer = exports.Layer = Montage.create(Component, {
435 boundObjectPropertyPath: "isMainCollapsed", 437 boundObjectPropertyPath: "isMainCollapsed",
436 oneway: false 438 oneway: false
437 }); 439 });
440 */
438 this.mainCollapser.clicker.addEventListener("click", this.handleMainCollapserClick.bind(this), false); 441 this.mainCollapser.clicker.addEventListener("click", this.handleMainCollapserClick.bind(this), false);
439 442
440 /* 443 /*
@@ -450,7 +453,7 @@ var Layer = exports.Layer = Montage.create(Component, {
450 } 453 }
451 */ 454 */
452 //this.mainCollapser.needsDraw = true; 455 //this.mainCollapser.needsDraw = true;
453 456/*
454 this.positionCollapser.clicker = this.clickerPosition; 457 this.positionCollapser.clicker = this.clickerPosition;
455 this.positionCollapser.myContent = this.contentPosition; 458 this.positionCollapser.myContent = this.contentPosition;
456 this.positionCollapser.element = this.contentPosition; 459 this.positionCollapser.element = this.contentPosition;
@@ -464,6 +467,7 @@ var Layer = exports.Layer = Montage.create(Component, {
464 boundObjectPropertyPath: "isPositionCollapsed", 467 boundObjectPropertyPath: "isPositionCollapsed",
465 oneway: false 468 oneway: false
466 }); 469 });
470 */
467 this.positionCollapser.clicker.addEventListener("click", this.handlePositionCollapserClick.bind(this), false); 471 this.positionCollapser.clicker.addEventListener("click", this.handlePositionCollapserClick.bind(this), false);
468 472
469 /* 473 /*
@@ -479,7 +483,7 @@ var Layer = exports.Layer = Montage.create(Component, {
479 } 483 }
480 */ 484 */
481 //this.positionCollapser.needsDraw = true; 485 //this.positionCollapser.needsDraw = true;
482 486 /*
483 this.transformCollapser.clicker = this.clickerTransform; 487 this.transformCollapser.clicker = this.clickerTransform;
484 this.transformCollapser.myContent = this.contentTransform; 488 this.transformCollapser.myContent = this.contentTransform;
485 this.transformCollapser.element = this.contentTransform; 489 this.transformCollapser.element = this.contentTransform;
@@ -493,6 +497,7 @@ var Layer = exports.Layer = Montage.create(Component, {
493 boundObjectPropertyPath: "isTransformCollapsed", 497 boundObjectPropertyPath: "isTransformCollapsed",
494 oneway: false 498 oneway: false
495 }); 499 });
500 */
496 this.transformCollapser.clicker.addEventListener("click", this.handleTransformCollapserClick.bind(this), false); 501 this.transformCollapser.clicker.addEventListener("click", this.handleTransformCollapserClick.bind(this), false);
497 502
498 503
@@ -509,7 +514,7 @@ var Layer = exports.Layer = Montage.create(Component, {
509 } 514 }
510 */ 515 */
511 //this.transformCollapser.needsDraw = true; 516 //this.transformCollapser.needsDraw = true;
512 517 /*
513 this.styleCollapser.clicker = this.clickerStyle; 518 this.styleCollapser.clicker = this.clickerStyle;
514 this.styleCollapser.myContent = this.contentStyle; 519 this.styleCollapser.myContent = this.contentStyle;
515 this.styleCollapser.element = this.contentStyle; 520 this.styleCollapser.element = this.contentStyle;
@@ -523,6 +528,7 @@ var Layer = exports.Layer = Montage.create(Component, {
523 boundObjectPropertyPath: "isStyleCollapsed", 528 boundObjectPropertyPath: "isStyleCollapsed",
524 oneway: false 529 oneway: false
525 }); 530 });
531 */
526 this.styleCollapser.clicker.addEventListener("click", this.handleStyleCollapserClick.bind(this), false); 532 this.styleCollapser.clicker.addEventListener("click", this.handleStyleCollapserClick.bind(this), false);
527 533
528 534
@@ -555,7 +561,7 @@ var Layer = exports.Layer = Montage.create(Component, {
555 }, 561 },
556 draw: { 562 draw: {
557 value: function() { 563 value: function() {
558 564/*
559 // Coordinate the collapsers 565 // Coordinate the collapsers
560 this.log('layer.js draw') 566 this.log('layer.js draw')
561 if (this.mainCollapser.isCollapsed !== this.isMainCollapsed) { 567 if (this.mainCollapser.isCollapsed !== this.isMainCollapsed) {
@@ -575,6 +581,7 @@ var Layer = exports.Layer = Montage.create(Component, {
575 this.styleCollapser.bypassAnimation = this.animateCollapser; 581 this.styleCollapser.bypassAnimation = this.animateCollapser;
576 this.styleCollapser.toggle(); 582 this.styleCollapser.toggle();
577 } 583 }
584 */
578 if (this.isSelected) { 585 if (this.isSelected) {
579 this.element.classList.add("selected"); 586 this.element.classList.add("selected");
580 } else { 587 } else {
@@ -595,6 +602,10 @@ var Layer = exports.Layer = Montage.create(Component, {
595 // Get some selectors. 602 // Get some selectors.
596 this.label = this.element.querySelector(".label-layer"); 603 this.label = this.element.querySelector(".label-layer");
597 this.titleSelector = this.label.querySelector(".collapsible-label"); 604 this.titleSelector = this.label.querySelector(".collapsible-label");
605 this.buttonAddStyle = this.element.querySelector(".button-add");
606 this.buttonDeleteStyle = this.element.querySelector(".button-delete");
607
608 /*
598 this.clicker = this.element.querySelector(".collapsible-clicker"); 609 this.clicker = this.element.querySelector(".collapsible-clicker");
599 this.myContent = this.element.querySelector(".content-layer"); 610 this.myContent = this.element.querySelector(".content-layer");
600 this.clickerPosition = this.element.querySelector(".clicker-position"); 611 this.clickerPosition = this.element.querySelector(".clicker-position");
@@ -603,8 +614,7 @@ var Layer = exports.Layer = Montage.create(Component, {
603 this.contentTransform = this.element.querySelector(".content-transform"); 614 this.contentTransform = this.element.querySelector(".content-transform");
604 this.clickerStyle = this.element.querySelector(".clicker-style"); 615 this.clickerStyle = this.element.querySelector(".clicker-style");
605 this.contentStyle = this.element.querySelector(".content-style"); 616 this.contentStyle = this.element.querySelector(".content-style");
606 this.buttonAddStyle = this.element.querySelector(".button-add"); 617 */
607 this.buttonDeleteStyle = this.element.querySelector(".button-delete");
608 } 618 }
609 }, 619 },
610 selectLayer:{ 620 selectLayer:{
@@ -793,7 +803,7 @@ var Layer = exports.Layer = Montage.create(Component, {
793 handleMainCollapserClick : { 803 handleMainCollapserClick : {
794 value: function(event) { 804 value: function(event) {
795 this.mainCollapser.bypassAnimation = false; 805 this.mainCollapser.bypassAnimation = false;
796 this.animateCollapser = true; 806 this.bypassAnimation = false;
797 if (this.isMainCollapsed) { 807 if (this.isMainCollapsed) {
798 this.isMainCollapsed = false; 808 this.isMainCollapsed = false;
799 } else { 809 } else {
@@ -804,7 +814,7 @@ var Layer = exports.Layer = Montage.create(Component, {
804 handlePositionCollapserClick : { 814 handlePositionCollapserClick : {
805 value: function(event) { 815 value: function(event) {
806 this.positionCollapser.bypassAnimation = false; 816 this.positionCollapser.bypassAnimation = false;
807 //this.animateCollapser = true; 817 this.bypassAnimation = false;
808 if (this.isPositionCollapsed) { 818 if (this.isPositionCollapsed) {
809 this.isPositionCollapsed = false; 819 this.isPositionCollapsed = false;
810 } else { 820 } else {
@@ -815,7 +825,7 @@ var Layer = exports.Layer = Montage.create(Component, {
815 handleTransformCollapserClick : { 825 handleTransformCollapserClick : {
816 value: function(event) { 826 value: function(event) {
817 this.transformCollapser.bypassAnimation = false; 827 this.transformCollapser.bypassAnimation = false;
818 //this.animateCollapser = true; 828 this.bypassAnimation = false;
819 if (this.isTransformCollapsed) { 829 if (this.isTransformCollapsed) {
820 this.isTransformCollapsed = false; 830 this.isTransformCollapsed = false;
821 } else { 831