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.js172
1 files changed, 13 insertions, 159 deletions
diff --git a/js/panels/Timeline/Layer.reel/Layer.js b/js/panels/Timeline/Layer.reel/Layer.js
index 2980842f..81bd1867 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
@@ -397,11 +398,7 @@ var Layer = exports.Layer = Montage.create(Component, {
397 this.init(); 398 this.init();
398 399
399 var that = this; 400 var that = this;
400 401
401 this.positionCollapser = Collapser.create();
402 this.transformCollapser = Collapser.create();
403 this.styleCollapser = Collapser.create();
404
405 // Make it editable! 402 // Make it editable!
406 this._layerEditable = Hintable.create(); 403 this._layerEditable = Hintable.create();
407 this._layerEditable.element = this.titleSelector; 404 this._layerEditable.element = this.titleSelector;
@@ -417,128 +414,12 @@ var Layer = exports.Layer = Montage.create(Component, {
417 this._layerEditable.editingClass = "editable2"; 414 this._layerEditable.editingClass = "editable2";
418 this._layerEditable.value = this.layerName; 415 this._layerEditable.value = this.layerName;
419 this._layerEditable.needsDraw = true; 416 this._layerEditable.needsDraw = true;
420
421 // Change the markup into collapsible sections using the nifty Collapser component!
422 this.mainCollapser = Collapser.create();
423 this.mainCollapser.clicker = this.clicker;
424 this.mainCollapser.myContent = this.myContent;
425 this.mainCollapser.contentHeight = 60;
426 this.myContent.style.height = "0px";
427 this.mainCollapser.element = this.myContent;
428 this.mainCollapser.isCollapsed = this.isMainCollapsed;
429 this.mainCollapser.isAnimated = true;
430 this.element.setAttribute("data-layerid", this.layerID);
431 // Bind the collapser's isToggling property to the isMainCollapsed property,
432 // so a change in one will affect the other.
433 Object.defineBinding(this.mainCollapser, "isToggling", {
434 boundObject: this,
435 boundObjectPropertyPath: "isMainCollapsed",
436 oneway: false
437 });
438 this.mainCollapser.clicker.addEventListener("click", this.handleMainCollapserClick.bind(this), false);
439
440 /*
441 this.mainCollapser.labelClickEvent = function(boolBypass) {
442 var newEvent = document.createEvent("CustomEvent");
443 newEvent.initCustomEvent("layerEvent", false, true);
444 newEvent.layerEventLocale = "content-main";
445 newEvent.layerEventType = "labelClick";
446 newEvent.layerID = that.layerID;
447 newEvent.bypassAnimation = boolBypass;
448 defaultEventManager.dispatchEvent(newEvent);
449 that.isMainCollapsed = that.mainCollapser.isCollapsed;
450 }
451 */
452 //this.mainCollapser.needsDraw = true;
453 417
454 this.positionCollapser.clicker = this.clickerPosition; 418 this.mainCollapser.clicker.addEventListener("click", this.handleMainCollapserClick.bind(this), false);
455 this.positionCollapser.myContent = this.contentPosition;
456 this.positionCollapser.element = this.contentPosition;
457 this.positionCollapser.contentHeight = 40;
458 this.positionCollapser.isCollapsed = this.isPositionCollapsed;
459 this.positionCollapser.isAnimated = false;
460 // Bind the collapser's isToggling property to the isPositionCollapsed property,
461 // so a change in one will affect the other.
462 Object.defineBinding(this.positionCollapser, "isToggling", {
463 boundObject: this,
464 boundObjectPropertyPath: "isPositionCollapsed",
465 oneway: false
466 });
467 this.positionCollapser.clicker.addEventListener("click", this.handlePositionCollapserClick.bind(this), false); 419 this.positionCollapser.clicker.addEventListener("click", this.handlePositionCollapserClick.bind(this), false);
468
469 /*
470 this.positionCollapser.labelClickEvent = function(boolBypass) {
471 var newEvent = document.createEvent("CustomEvent");
472 newEvent.initCustomEvent("layerEvent", false, true);
473 newEvent.layerEventLocale = "content-position";
474 newEvent.layerEventType = "labelClick";
475 newEvent.layerID = that.layerID;
476 newEvent.bypassAnimation = boolBypass;
477 defaultEventManager.dispatchEvent(newEvent);
478 that.isPositionCollapsed = that.positionCollapser.isCollapsed;
479 }
480 */
481 //this.positionCollapser.needsDraw = true;
482
483 this.transformCollapser.clicker = this.clickerTransform;
484 this.transformCollapser.myContent = this.contentTransform;
485 this.transformCollapser.element = this.contentTransform;
486 this.transformCollapser.contentHeight = 100;
487 this.transformCollapser.isCollapsed = this.isTransformCollapsed;
488 this.transformCollapser.isAnimated = false;
489 // Bind the collapser's isToggling property to the isTransformCollapsed property,
490 // so a change in one will affect the other.
491 Object.defineBinding(this.transformCollapser, "isToggling", {
492 boundObject: this,
493 boundObjectPropertyPath: "isTransformCollapsed",
494 oneway: false
495 });
496 this.transformCollapser.clicker.addEventListener("click", this.handleTransformCollapserClick.bind(this), false); 420 this.transformCollapser.clicker.addEventListener("click", this.handleTransformCollapserClick.bind(this), false);
497
498
499 /*
500 this.transformCollapser.labelClickEvent = function(boolBypass) {
501 var newEvent = document.createEvent("CustomEvent");
502 newEvent.initCustomEvent("layerEvent", false, true);
503 newEvent.layerEventLocale = "content-transform";
504 newEvent.layerEventType = "labelClick";
505 newEvent.layerID = that.layerID;
506 newEvent.bypassAnimation = boolBypass;
507 defaultEventManager.dispatchEvent(newEvent);
508 that.isTransformCollapsed = that.transformCollapser.isCollapsed;
509 }
510 */
511 //this.transformCollapser.needsDraw = true;
512
513 this.styleCollapser.clicker = this.clickerStyle;
514 this.styleCollapser.myContent = this.contentStyle;
515 this.styleCollapser.element = this.contentStyle;
516 this.styleCollapser.isCollapsed = this.isStyleCollapsed;
517 this.styleCollapser.contentHeight = 0;
518 this.styleCollapser.isAnimated = false;
519 // Bind the collapser's isToggling property to the isStyleCollapsed property,
520 // so a change in one will affect the other.
521 Object.defineBinding(this.styleCollapser, "isToggling", {
522 boundObject: this,
523 boundObjectPropertyPath: "isStyleCollapsed",
524 oneway: false
525 });
526 this.styleCollapser.clicker.addEventListener("click", this.handleStyleCollapserClick.bind(this), false); 421 this.styleCollapser.clicker.addEventListener("click", this.handleStyleCollapserClick.bind(this), false);
527 422
528
529 /*
530 this.styleCollapser.labelClickEvent = function(boolBypass) {
531 var newEvent = document.createEvent("CustomEvent");
532 newEvent.initCustomEvent("layerEvent", false, true);
533 newEvent.layerEventLocale = "content-style";
534 newEvent.layerEventType = "labelClick";
535 newEvent.layerID = that.layerID;
536 newEvent.bypassAnimation = boolBypass;
537 defaultEventManager.dispatchEvent(newEvent);
538 that.isStyleCollapsed = that.styleCollapser.isCollapsed;
539 }
540 */
541 //this.styleCollapser.needsDraw = true;
542 423
543 // Add event listeners to add and delete style buttons 424 // Add event listeners to add and delete style buttons
544 this.buttonAddStyle.identifier = "addStyle"; 425 this.buttonAddStyle.identifier = "addStyle";
@@ -555,26 +436,6 @@ var Layer = exports.Layer = Montage.create(Component, {
555 }, 436 },
556 draw: { 437 draw: {
557 value: function() { 438 value: function() {
558
559 // Coordinate the collapsers
560 this.log('layer.js draw')
561 if (this.mainCollapser.isCollapsed !== this.isMainCollapsed) {
562 this.log('layer.js draw: this.animateCollapser ' + this.animateCollapser)
563 this.mainCollapser.bypassAnimation = this.animateCollapser;
564 this.mainCollapser.toggle();
565 }
566 if (this.positionCollapser.isCollapsed !== this.isPositionCollapsed) {
567 this.positionCollapser.bypassAnimation = this.animateCollapser;
568 this.positionCollapser.toggle();
569 }
570 if (this.transformCollapser.isCollapsed !== this.isTransformCollapsed) {
571 this.transformCollapser.bypassAnimation = this.animateCollapser;
572 this.transformCollapser.toggle();
573 }
574 if (this.styleCollapser.isCollapsed !== this.isStyleCollapsed) {
575 this.styleCollapser.bypassAnimation = this.animateCollapser;
576 this.styleCollapser.toggle();
577 }
578 if (this.isSelected) { 439 if (this.isSelected) {
579 this.element.classList.add("selected"); 440 this.element.classList.add("selected");
580 } else { 441 } else {
@@ -595,16 +456,9 @@ var Layer = exports.Layer = Montage.create(Component, {
595 // Get some selectors. 456 // Get some selectors.
596 this.label = this.element.querySelector(".label-layer"); 457 this.label = this.element.querySelector(".label-layer");
597 this.titleSelector = this.label.querySelector(".collapsible-label");