aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authorEric Guzman2012-03-14 16:06:33 -0700
committerEric Guzman2012-03-14 16:06:33 -0700
commit5247614b90c5cb104166b22ae92b8f29bd1e306f (patch)
treeea4fb475d04573d8fbf4cc2aa4d23b101eacf9f6
parent562e6d71d8bbe149f856b126e4c4246fc2d843ef (diff)
downloadninja-5247614b90c5cb104166b22ae92b8f29bd1e306f.tar.gz
CSS Panel Updates - Added shorthand collapser
-rw-r--r--js/panels/collapse-composer.js140
-rw-r--r--js/panels/css-panel/style-shorthand.reel/style-shorthand.css1
-rw-r--r--js/panels/css-panel/style-shorthand.reel/style-shorthand.html13
-rw-r--r--js/panels/css-panel/style-shorthand.reel/style-shorthand.js1
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 @@
1/* <copyright>
2 This file contains proprietary software owned by Motorola Mobility, Inc.<br/>
3 No rights, expressed or implied, whatsoever to this software are provided by Motorola Mobility, Inc. hereunder.<br/>
4 (c) Copyright 2011 Motorola Mobility, Inc. All Rights Reserved.
5 </copyright> */
6
7var Montage = require("montage/core/core").Montage;
8var Composer = require("montage/ui/composer/composer").Composer;
9
10exports.CollapseComposer = Montage.create(Composer, {
11
12 collapsed : {
13 value: false
14 },
15
16 _expandedHeight : {
17 value: null
18 },
19
20 _doCollapse : {
21 value: false,
22 distinct: true
23 },
24
25 _doExpand : {
26 value: false,
27 distinct: true
28 },
29
30 _step : {
31 value: 0,
32 distinct: true
33 },
34
35 load: {
36 value: function() {
37 //this.element.addEventListener("mousedown", this, true);
38 this.element.addEventListener("click", this, false);
39 }
40 },
41
42 unload: {
43 value: function() {
44 //this.element.removeEventListener("mousedown", this, true);
45 this.element.removeEventListener("click", this, true);
46 }
47 },
48
49 handleClick : {
50 value: function(e) {
51 e.preventDefault();
52 this.toggleCollapse();
53 }
54 },
55
56 toggleCollapse : {
57 value: function() {
58 if(this.collapsed) {
59 this.initExpand();
60 } else {
61 this.initCollapse();
62 }
63
64 this.collapsed = !this.collapsed;
65 }
66 },
67
68 initCollapse : {
69 value: function() {
70 //this.component.element.style.display = 'none';
71 console.log("init collapse");
72 this._expandedHeight = window.getComputedStyle(this.component.element).height;
73 this.needsFrame = this._doCollapse = true;
74 }
75 },
76
77 initExpand : {
78 value: function() {
79 //this.component.element.style.display = '';
80 console.log("init collapse");
81
82 this.needsFrame = this._doExpand = true;
83 }
84 },
85
86 frame : {
87 value: function() {
88 if(this._doCollapse) {
89 if (this._step === 0) {
90 console.log("step 0");
91 this.component.element.style.height = this._expandedHeight;
92 this._step = 1;
93 this.needsFrame = true;
94 } else if (this._step === 1) {
95 console.log("step 1");
96 this.component.element.style.webkitTransition = 'height 0.14s cubic-bezier(.44,.19,0,.99)';
97 this._step = 2;
98 this.needsFrame = true;
99 } else {
100 console.log("step 2");
101 this.component.element.style.height = '0px';
102 this.collapsed = true;
103 this._doCollapse = false;
104 this._step = 0;
105 }
106 } else if(this._doExpand) {
107 this.component.element.style.height = this._expandedHeight;
108 this.collapsed = false;
109 this._doExpand = false;
110 }
111 }
112 },
113
114 handleWebkitTransitionEnd : {
115 value: function(e) {
116 e.stopPropagation();
117
118 ///// Remove Transition
119// this._removeTransition = true;
120 this.collapser.removeEventListener('webkitTransitionEnd', this, false);
121
122 //// If it's an expand transition, restore height to auto
123 if(!this.collapsed) {
124 this._switchToAuto = true;
125 }
126
127 this.needsDraw = true;
128
129 }
130 },
131
132 deserializedFromTemplate: {
133 value: function() {
134 if (this.component) {
135 this.component.addComposer(this);
136 }
137 }
138 }
139
140}); \ 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 @@
14 padding-left: 20px; 14 padding-left: 20px;
15 margin-top: 0; 15 margin-top: 0;
16 margin-bottom: 0; 16 margin-bottom: 0;
17 overflow: hidden;
17} 18}
18.style-shorthand-branch > div { 19.style-shorthand-branch > div {
19 background-color: #fafafa; 20 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
17 "element" : {"#" : "branch"}, 17 "element" : {"#" : "branch"},
18 "label" : { "@" : "textComponent" }, 18 "label" : { "@" : "textComponent" },
19 "branchList": {"#" : "branchList"}, 19 "branchList": {"#" : "branchList"},
20 "styleListDisclosure": {"#": "style-list-disclosure"},
21 "arrayController": {"@": "arrayController" }, 20 "arrayController": {"@": "arrayController" },
22 "repetition": {"@": "repetition"}, 21 "repetition": {"@": "repetition"},
23 "leafComponent": {"@": "leaf"}, 22 "leafComponent": {"@": "leaf"},
24 "branchComponent": {"@": "branch"}, 23 "branchComponent": {"@": "branch"},
25 "branchCollapser": {"#": "collapser"} 24 "branchCollapser": {"#": "collapser" }
26
27 } 25 }
28 }, 26 },
29 27
@@ -149,6 +147,15 @@ No rights, expressed or implied, whatsoever to this software are provided by Mot
149 "oneway": true 147 "oneway": true
150 } 148 }
151 } 149 }
150 },
151
152 "collapser" : {
153 "module": "js/panels/collapse-composer",
154 "name": "CollapseComposer",
155 "properties" : {
156 "element": {"#":"collapser"},
157 "component": {"@": "repetition"}
158 }
152 } 159 }
153 } 160 }
154 </script> 161 </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, {
29 this.arrayController.delegate = this.treeView.contentController; 29 this.arrayController.delegate = this.treeView.contentController;
30 30
31 this.branchCollapser.removeAttribute('id'); 31 this.branchCollapser.removeAttribute('id');
32 this.branchCollapser.addEventListener('click', this, false);
33 } 32 }
34 }, 33 },
35 willDraw : { 34 willDraw : {