diff options
Diffstat (limited to 'js/panels/Timeline/Layer.reel/Layer.js')
-rw-r--r-- | js/panels/Timeline/Layer.reel/Layer.js | 44 |
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 |