Timeline: Serialization of all Collapser components

7 files changed, 303 insertions, 131 deletions

diff --git a/js/panels/Timeline/Collapser.js b/js/panels/Timeline/Collapser.js
index d161cdd7..32733b0a 100644
--- a/js/panels/Timeline/Collapser.js
+++ b/js/panels/Timeline/Collapser.js
@@ -22,7 +22,7 @@
  *                      the transition will not work. Subsequent collapses (and expansions) will transition as expected.
  *              isLabelClickable: Boolean that indicates whether or not the clicker should have listener events. Defaults to true; set to 
  *                      false for collapsers that will only be operated remotely.
- *              toggle(): Manually toggle the expand/collapse of the content.
+ *              isToggling: Set this anually toggle the expand/collapse of the content.
  *              
  */
 var Montage = require("montage/core/core").Montage,
@@ -76,8 +76,12 @@ var Montage = require("montage/core/core").Montage,
                 },
                 set: function(newVal) {
                         this._bypassAnimation= newVal;
+                        //console.log('bypassAnimation setter ' + newVal)
                 }
         },
+         _oldAnimated : {
+                value: false
+         },
         
         // transitionClass: The CSS class to apply to the content during collapse to provide CSS transition.
         // Note that this CSS class must be defined in your style sheet with the desired transitions.
@@ -104,7 +108,7 @@ var Montage = require("montage/core/core").Montage,
                 set: function(newVal) {
                         if (newVal !== this._isCollapsed) {
                                 this._isCollapsed = newVal;
-                                this.needsDraw = true;
+                                //this.needsDraw = true;
                         }
                         
                 }
@@ -144,31 +148,8 @@ var Montage = require("montage/core/core").Montage,
                         this._isLabelClickable = newVal;
                 }
         },
-        
-        // labelClickEvent: an event to fire when the label is clicked.
-        _labelClickEvent: {
-                value: false
-        },
-        labelClickEvent: {
-                get: function() {
-                        return this._labelClickEvent;
-                },
-                set: function(newVal) {
-                        this._labelClickEvent = newVal;
-                }
-        },
-        
-        // toggle: manually toggle the collapser.
-        toggle: {
-                value: function() {
-                        if (this.bypassAnimation) {
-                                this.isAnimated = false;
-                        }
-                        this.myContent.classList.remove(this.transitionClass);
-                        this.handleCollapserLabelClick();
-                }
-        },
-        
+
+        // isToggling: Bindable property. Set this (to anything) to trigger a toggle.
         _isToggling: {
                 serializable: true,
                 value: true
@@ -182,7 +163,8 @@ var Montage = require("montage/core/core").Montage,
                         if (newVal !== this._isToggling) {
                                 this._isToggling = newVal;
                                 
-                                if (this.bypassAnimation) {
+                                if (this.bypassAnimation === true) {
+                                        this._oldAnimated = this.isAnimated;
                                         this.isAnimated = false;
                                 }
                                 this.myContent.classList.remove(this.transitionClass);
@@ -198,13 +180,18 @@ var Montage = require("montage/core/core").Montage,
         prepareForDraw: {
                 value: function() {
                         // Add a click listener to the label for expand/collapse
+                        /*
                         if (this.isLabelClickable) {
                                 this.clicker.identifier = "collapserLabel";
                                 this.clicker.addEventListener("click", this, false);
                         }
-
+                        */
                         // Get the original value of the overflow property:
                         this._origOverflowValue = window.getComputedStyle(this.myContent, null).getPropertyValue("overflow");
+                        console.log("collapser: this.isCollapsed " + this.isCollapsed)
+                        if (this.isCollapsed === false) {
+                                this.myContent.style.height = "auto";
+                        }
                         
                         /*
                          * Removed because of expense. This disables the feature of having the
@@ -307,11 +294,6 @@ var Montage = require("montage/core/core").Montage,
                         
                         // Set the component to run its draw cycle.
                         this.needsDraw = true;
-                        
-                        // Dispatch my labelClick event
-                        if (this.labelClickEvent) {
-                                this.labelClickEvent(this.bypassAnimation);
-                        }
 
                 }
         },
@@ -342,9 +324,10 @@ var Montage = require("montage/core/core").Montage,
                                 
                         }
                         
-                        if (this.bypassAnimation) {
+                        if (this.bypassAnimation === true) {
+                                this.isAnimated = this._oldAnimated;
+                        } else {
                                 this.bypassAnimation = true;
-                                this.isAnimated = true;
                         }
                 }
         }
diff --git a/js/panels/Timeline/Layer.reel/Layer.html b/js/panels/Timeline/Layer.reel/Layer.html
index 14315f8d..79b522ee 100644
--- a/js/panels/Timeline/Layer.reel/Layer.html
+++ b/js/panels/Timeline/Layer.reel/Layer.html
@@ -17,7 +17,12 @@
                         "element": {"#": "layer"},
                                                 "styleRepetition" : {"@":"repetition1"},
                                                 "dynamicLayerName" : {"@":"dtext1"},
-                                                "slotStyle" : {"@":"slot1"}
+                                                "slotStyle" : {"@":"slot1"},
+                                                "mainCollapser" : {"@" : "mainCollapser"},
+                                                "positionCollapser" : {"@" : "positionCollapser"},
+                                                "transformCollapser" : {"@" : "transformCollapser"},
+                                                "styleCollapser" : {"@" : "styleCollapser"},
+                                                "clickerMain" : {"#" : "clicker-main"}
                     }
                 },
                     "dtext1" : {
@@ -225,6 +230,90 @@
                                 "oneway": false
                             }
                         }
+                                },
+                                        
+                                "mainCollapser" : {
+                                        "module" : "js/panels/timeline/Collapser.js",
+                                        "name" : "Collapser",
+                                        "properties" : {
+                                                "element" : {"#" : "content-main"},
+                                                "myContent" : {"#" : "content-main"},
+                                                "contentHeight" : 60,
+                                                "isLabelClickable" : true,
+                                                "clicker" : {"#" : "clicker-main"},
+                                                "isCollapsed" : true,
+                                                "isAnimated" : true     
+                                        },
+                                        "bindings" : {
+                                                "isToggling" : {
+                                                        "boundObject" : {"@" : "owner" },
+                                                        "boundObjectPropertyPath" : "isMainCollapsed",
+                                                        "oneway" : false
+                                                }
+                                        }
+                                },
+                                        
+                                "positionCollapser" : {
+                                        "module" : "js/panels/timeline/Collapser.js",
+                                        "name" : "Collapser",
+                                        "properties" : {
+                                                "element" : {"#" : "content-position"},
+                                                "myContent" : {"#":"content-position"},
+                                                "contentHeight" : 60,
+                                                "isLabelClickable" : true,
+                                                "clicker" : {"#" : "clicker-position"},
+                                                "isCollapsed" : true,
+                                                "isAnimated" : true     
+                                        },
+                                        "bindings" : {
+                                                "isToggling" : {
+                                                        "boundObject" : {"@" : "owner" },