Timeline: Merge arrlayers and arrtracks into one object.

Redefine collapser to use property binding instead of events.

5 files changed, 288 insertions, 33 deletions

diff --git a/js/panels/Timeline/Collapser.js b/js/panels/Timeline/Collapser.js
index ad490c2e..d161cdd7 100644
--- a/js/panels/Timeline/Collapser.js
+++ b/js/panels/Timeline/Collapser.js
@@ -68,7 +68,7 @@ var Montage = require("montage/core/core").Montage,
         },
         
         _bypassAnimation : {
-                value: false
+                value: true
         },
         bypassAnimation: {
                 get: function() {
@@ -169,6 +169,28 @@ var Montage = require("montage/core/core").Montage,
                 }
         },
         
+        _isToggling: {
+                serializable: true,
+                value: true
+        },
+        isToggling: {
+                serializable: true,
+                get: function() {
+                        return this._isToggling;
+                },
+                set: function(newVal) {
+                        if (newVal !== this._isToggling) {
+                                this._isToggling = newVal;
+                                
+                                if (this.bypassAnimation) {
+                                        this.isAnimated = false;
+                                }
+                                this.myContent.classList.remove(this.transitionClass);
+                                this.handleCollapserLabelClick();
+                        }
+                }
+        },
+        
         /* === END: Models === */
         
         /* === BEGIN: Draw cycle === */
@@ -321,7 +343,7 @@ var Montage = require("montage/core/core").Montage,
                         }
                         
                         if (this.bypassAnimation) {
-                                this.bypassAnimation = false;
+                                this.bypassAnimation = true;
                                 this.isAnimated = true;
                         }
                 }
diff --git a/js/panels/Timeline/Layer.reel/Layer.js b/js/panels/Timeline/Layer.reel/Layer.js
index 94d1f7e9..f9bba499 100644
--- a/js/panels/Timeline/Layer.reel/Layer.js
+++ b/js/panels/Timeline/Layer.reel/Layer.js
@@ -306,24 +306,28 @@ var Layer = exports.Layer = Montage.create(Component, {
     
     // Are the various collapsers collapsed or not
     _isMainCollapsed : {
-        value: ""
+        serializable: true,
+        value: true
     },
     isMainCollapsed : {
+        serializable: true,
         get: function() {
                 return this._isMainCollapsed;
         },
         set: function(newVal) {
+                this.log('layer.js: isMainCollapsed: ' + newVal);
                 if (newVal !== this._isMainCollapsed) {
                         this._isMainCollapsed = newVal;
-                        this.needsDraw = true;
                 }
         }
     },
     
     _isTransformCollapsed : {
+        serializable: true,
         value: true
     },
     isTransformCollapsed : {
+        serializable: true,
         get: function() {
                 return this._isTransformCollapsed;
         },
@@ -336,9 +340,11 @@ var Layer = exports.Layer = Montage.create(Component, {
     },
     
     _isPositionCollapsed : {
+        serializable: true,
         value: true
     },
     isPositionCollapsed : {
+        serializable: true,
         get: function() {
                 return this._isPositionCollapsed;
         },
@@ -351,9 +357,11 @@ var Layer = exports.Layer = Montage.create(Component, {
     },
     
     _isStyleCollapsed : {
+        serializable: true,
         value: true
     },
     isStyleCollapsed : {
+        serializable: true,
         get: function() {
                 return this._isStyleCollapsed;
         },
@@ -364,6 +372,19 @@ var Layer = exports.Layer = Montage.create(Component, {
                 }
         }
     },
+    _animateCollapser : {
+        serializable: true,
+        value: false
+    },
+    animateCollapser : {
+        serializable: true,
+        get: function() {
+                return this._animateCollapser;
+        },
+        set: function(newVal) {
+                this._animateCollapser = newVal;
+        }
+    },
     
 
         /* END: Models */
@@ -404,10 +425,19 @@ var Layer = exports.Layer = Montage.create(Component, {
                 this.mainCollapser.contentHeight = 60;
                 this.myContent.style.height = "0px";
             this.mainCollapser.element = this.myContent;
-            //this.mainCollapser.isCollapsedAtStart = true;
             this.mainCollapser.isCollapsed = this.isMainCollapsed;
             this.mainCollapser.isAnimated = true;
             this.element.setAttribute("data-layerid", this.layerID);
+            // Bind the collapser's isToggling property to the isMainCollapsed property,
+            // so a change in one will affect the other.
+            Object.defineBinding(this.mainCollapser, "isToggling", {
+                                boundObject: this,
+                    boundObjectPropertyPath: "isMainCollapsed",
+                    oneway: false
+                        });
+            this.mainCollapser.clicker.addEventListener("click", this.handleMainCollapserClick.bind(this), false);
+            
+            /*
             this.mainCollapser.labelClickEvent = function(boolBypass) {
                                 var newEvent = document.createEvent("CustomEvent");
                                 newEvent.initCustomEvent("layerEvent", false, true);
@@ -418,15 +448,25 @@ var Layer = exports.Layer = Montage.create(Component, {
                                 defaultEventManager.dispatchEvent(newEvent);
                                 that.isMainCollapsed = that.mainCollapser.isCollapsed;
             }
+            */
                 //this.mainCollapser.needsDraw = true;
 
             this.positionCollapser.clicker = this.clickerPosition;
             this.positionCollapser.myContent = this.contentPosition;
             this.positionCollapser.element = this.contentPosition;
             this.positionCollapser.contentHeight = 40;
-            // this.positionCollapser.isCollapsedAtStart = true;
             this.positionCollapser.isCollapsed = this.isPositionCollapsed;
-            this.positionCollapser.isAnimated = true;
+            this.positionCollapser.isAnimated = false;
+            // Bind the collapser's isToggling property to the isPositionCollapsed property,
+            // so a change in one will affect the other.
+            Object.defineBinding(this.positionCollapser, "isToggling", {
+                                boundObject: this,
+                    boundObjectPropertyPath: "isPositionCollapsed",
+                    oneway: false
+                        });
+            this.positionCollapser.clicker.addEventListener("click", this.handlePositionCollapserClick.bind(this), false);
+            
+            /*
             this.positionCollapser.labelClickEvent = function(boolBypass) {
                                 var newEvent = document.createEvent("CustomEvent");
                                 newEvent.initCustomEvent("layerEvent", false, true);
@@ -437,15 +477,26 @@ var Layer = exports.Layer = Montage.create(Component, {
                                 defaultEventManager.dispatchEvent(newEvent);
                                 that.isPositionCollapsed = that.positionCollapser.isCollapsed;