aboutsummaryrefslogtreecommitdiff
path: root/js/panels/collapse-composer.js
diff options
context:
space:
mode:
authorValerio Virgillito2012-05-22 22:36:19 -0700
committerValerio Virgillito2012-05-22 22:36:19 -0700
commit816d52e94424a84dab7ac44ab953624a245be30f (patch)
treede7c7d78929e780c2edeb2d302b9b8422c26b3ff /js/panels/collapse-composer.js
parenta341522e3603c18ab3b93defa894e3be702dd0f4 (diff)
parenta00e1f30c3da3053574c982ddfacca12e32c12b2 (diff)
downloadninja-816d52e94424a84dab7ac44ab953624a245be30f.tar.gz
Merge pull request #251 from ericguzman/CSSPanelUpdates
Css panel updates
Diffstat (limited to 'js/panels/collapse-composer.js')
-rw-r--r--js/panels/collapse-composer.js137
1 files changed, 137 insertions, 0 deletions
diff --git a/js/panels/collapse-composer.js b/js/panels/collapse-composer.js
new file mode 100644
index 00000000..0bd916c8
--- /dev/null
+++ b/js/panels/collapse-composer.js
@@ -0,0 +1,137 @@
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 this.component.element.style.height = this._expandedHeight;
91 this._step = 1;
92 this.needsFrame = true;
93 } else if (this._step === 1) {
94 this.component.element.style.webkitTransition = 'height 0.14s cubic-bezier(.44,.19,0,.99)';
95 this._step = 2;
96 this.needsFrame = true;
97 } else {
98 this.component.element.style.height = '0px';
99 this.collapsed = true;
100 this._doCollapse = false;
101 this._step = 0;
102 }
103 } else if(this._doExpand) {
104 this.component.element.style.height = this._expandedHeight;
105 this.collapsed = false;
106 this._doExpand = false;
107 }
108 }
109 },
110
111 handleWebkitTransitionEnd : {
112 value: function(e) {
113 e.stopPropagation();
114
115 ///// Remove Transition
116// this._removeTransition = true;
117 this.collapser.removeEventListener('webkitTransitionEnd', this, false);
118
119 //// If it's an expand transition, restore height to auto
120 if(!this.collapsed) {
121 this._switchToAuto = true;
122 }
123
124 this.needsDraw = true;
125
126 }
127 },
128
129 deserializedFromTemplate: {
130 value: function() {
131 if (this.component) {
132 this.component.addComposer(this);
133 }
134 }
135 }
136
137}); \ No newline at end of file