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