From 5247614b90c5cb104166b22ae92b8f29bd1e306f Mon Sep 17 00:00:00 2001 From: Eric Guzman Date: Wed, 14 Mar 2012 16:06:33 -0700 Subject: CSS Panel Updates - Added shorthand collapser --- js/panels/collapse-composer.js | 140 +++++++++++++++++++++ .../style-shorthand.reel/style-shorthand.css | 1 + .../style-shorthand.reel/style-shorthand.html | 13 +- .../style-shorthand.reel/style-shorthand.js | 1 - 4 files changed, 151 insertions(+), 4 deletions(-) create mode 100644 js/panels/collapse-composer.js (limited to 'js/panels') 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 @@ +/* + This file contains proprietary software owned by Motorola Mobility, Inc.
+ No rights, expressed or implied, whatsoever to this software are provided by Motorola Mobility, Inc. hereunder.
+ (c) Copyright 2011 Motorola Mobility, Inc. All Rights Reserved. + */ + +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"} + } } } 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 : { -- cgit v1.2.3