CSS Panel Updates - Added shorthand collapser

4 files changed, 151 insertions, 4 deletions

diff --git a/js/panels/collapse-composer.js b/js/panels/collapse-composer.js
new file mode 100644
index 00000000..d2f477ad
--- /dev/null
+++ b/js/panels/collapse-composer.js
@@ -0,0 +1,140 @@
+/* <copyright>
+ This file contains proprietary software owned by Motorola Mobility, Inc.<br/>
+ No rights, expressed or implied, whatsoever to this software are provided by Motorola Mobility, Inc. hereunder.<br/>
+ (c) Copyright 2011 Motorola Mobility, Inc.  All Rights Reserved.
+ </copyright> */
+
+var Montage = require("montage/core/core").Montage;
+var Composer = require("montage/ui/composer/composer").Composer;
+
+exports.CollapseComposer = Montage.create(Composer, {
+
+    collapsed : {
+        value: false
+    },
+
+    _expandedHeight : {
+        value: null
+    },
+
+    _doCollapse : {
+        value: false,
+        distinct: true
+    },
+
+    _doExpand : {
+        value: false,
+        distinct: true
+    },
+
+    _step : {
+        value: 0,
+        distinct: true
+    },
+
+    load: {
+        value: function() {
+            //this.element.addEventListener("mousedown", this, true);
+            this.element.addEventListener("click", this, false);
+        }
+    },
+
+    unload: {
+        value: function() {
+            //this.element.removeEventListener("mousedown", this, true);
+            this.element.removeEventListener("click", this, true);
+        }
+    },
+
+    handleClick : {
+        value: function(e) {
+            e.preventDefault();
+            this.toggleCollapse();
+        }
+    },
+
+    toggleCollapse : {
+        value: function() {
+            if(this.collapsed) {
+                this.initExpand();
+            } else {
+                this.initCollapse();
+            }
+
+            this.collapsed = !this.collapsed;
+        }
+    },
+
+    initCollapse : {
+        value: function() {
+            //this.component.element.style.display = 'none';
+            console.log("init collapse");
+            this._expandedHeight = window.getComputedStyle(this.component.element).height;
+            this.needsFrame = this._doCollapse = true;
+        }
+    },
+
+    initExpand : {
+        value: function() {
+            //this.component.element.style.display = '';
+            console.log("init collapse");
+
+            this.needsFrame = this._doExpand = true;
+        }
+    },
+
+    frame : {
+        value: function() {
+            if(this._doCollapse) {
+                if (this._step === 0) {
+                    console.log("step 0");
+                    this.component.element.style.height = this._expandedHeight;
+                    this._step = 1;
+                    this.needsFrame = true;
+                } else if (this._step === 1) {
+                    console.log("step 1");
+                    this.component.element.style.webkitTransition = 'height 0.14s cubic-bezier(.44,.19,0,.99)';
+                    this._step = 2;
+                    this.needsFrame = true;
+                } else {
+                    console.log("step 2");
+                    this.component.element.style.height = '0px';
+                    this.collapsed = true;
+                    this._doCollapse = false;
+                    this._step = 0;
+                }
+            } else if(this._doExpand) {
+                this.component.element.style.height = this._expandedHeight;
+                this.collapsed = false;
+                this._doExpand = false;
+            }
+        }
+    },
+
+    handleWebkitTransitionEnd : {
+        value: function(e) {
+            e.stopPropagation();
+
+            ///// Remove Transition
+//            this._removeTransition = true;
+            this.collapser.removeEventListener('webkitTransitionEnd', this, false);
+
+            //// If it's an expand transition, restore height to auto
+            if(!this.collapsed) {
+                this._switchToAuto = true;
+            }
+
+            this.needsDraw = true;
+
+        }
+    },
+
+    deserializedFromTemplate: {
+        value: function() {
+            if (this.component) {
+                this.component.addComposer(this);
+            }
+        }
+    }
+
+});
\ No newline at end of file
diff --git a/js/panels/css-panel/style-shorthand.reel/style-shorthand.css b/js/panels/css-panel/style-shorthand.reel/style-shorthand.css
index e746146a..d138dfef 100644
--- a/js/panels/css-panel/style-shorthand.reel/style-shorthand.css
+++ b/js/panels/css-panel/style-shorthand.reel/style-shorthand.css
@@ -14,6 +14,7 @@
     padding-left: 20px;
     margin-top: 0;
     margin-bottom: 0;
+    overflow: hidden;
 }
 .style-shorthand-branch > div {
     background-color: #fafafa;
diff --git a/js/panels/css-panel/style-shorthand.reel/style-shorthand.html b/js/panels/css-panel/style-shorthand.reel/style-shorthand.html
index 63aa64f8..243d9cc7 100644
--- a/js/panels/css-panel/style-shorthand.reel/style-shorthand.html
+++ b/js/panels/css-panel/style-shorthand.reel/style-shorthand.html
@@ -17,13 +17,11 @@ No rights, expressed or implied, whatsoever to this software are provided by Mot
                 "element" : {"#" : "branch"},
                 "label" : { "@" : "textComponent" },
                 "branchList": {"#" : "branchList"},
-                "styleListDisclosure": {"#": "style-list-disclosure"},
                 "arrayController": {"@": "arrayController" },
                 "repetition": {"@": "repetition"},
                 "leafComponent": {"@": "leaf"},
                 "branchComponent": {"@": "branch"},
-                "branchCollapser": {"#": "collapser"}
-
+                "branchCollapser": {"#": "collapser" }
             }
         },
 
@@ -149,6 +147,15 @@ No rights, expressed or implied, whatsoever to this software are provided by Mot
                     "oneway": true
                 }
             }
+        },
+
+        "collapser" : {
+            "module": "js/panels/collapse-composer",
+            "name": "CollapseComposer",
+            "properties" : {
+                "element": {"#":"collapser"},
+                "component": {"@": "repetition"}
+            }
         }
     }
     </script>
diff --git a/js/panels/css-panel/style-shorthand.reel/style-shorthand.js b/js/panels/css-panel/style-shorthand.reel/style-shorthand.js
index e64d64c7..028699a1 100644
--- a/js/panels/css-panel/style-shorthand.reel/style-shorthand.js
+++ b/js/panels/css-panel/style-shorthand.reel/style-shorthand.js
@@ -29,7 +29,6 @@ var styleShorthand = exports.StyleShorthand= Montage.create(TreeNode, {
             this.arrayController.delegate = this.treeView.contentController;
 
             this.branchCollapser.removeAttribute('id');
-            this.branchCollapser.addEventListener('click', this, false);
         }
     },
     willDraw : {