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