diff options
author | Jose Antonio Marquez | 2012-03-08 16:25:26 -0800 |
---|---|---|
committer | Jose Antonio Marquez | 2012-03-08 16:25:26 -0800 |
commit | 3bcdfaa322ac53609b66ecedbace1872048fd310 (patch) | |
tree | 5202930aadf0b5da7bb4d79a9f4498b49a13ec3c /js/panels/Timeline/Collapser.js | |
parent | b752f7fced5dfb5d16b6f32fadb48bc7e7fdbc28 (diff) | |
parent | 3a9c7a57a227a36ec47c6635fc6a0bd4c4b7f9c3 (diff) | |
download | ninja-3bcdfaa322ac53609b66ecedbace1872048fd310.tar.gz |
Merge branch 'refs/heads/Ninja-Internal' into FileIO
Conflicts:
js/document/html-document.js
js/helper-classes/3D/draw-utils.js
Diffstat (limited to 'js/panels/Timeline/Collapser.js')
-rw-r--r-- | js/panels/Timeline/Collapser.js | 62 |
1 files changed, 17 insertions, 45 deletions
diff --git a/js/panels/Timeline/Collapser.js b/js/panels/Timeline/Collapser.js index d161cdd7..88314c8b 100644 --- a/js/panels/Timeline/Collapser.js +++ b/js/panels/Timeline/Collapser.js | |||
@@ -22,7 +22,7 @@ | |||
22 | * the transition will not work. Subsequent collapses (and expansions) will transition as expected. | 22 | * the transition will not work. Subsequent collapses (and expansions) will transition as expected. |
23 | * isLabelClickable: Boolean that indicates whether or not the clicker should have listener events. Defaults to true; set to | 23 | * isLabelClickable: Boolean that indicates whether or not the clicker should have listener events. Defaults to true; set to |
24 | * false for collapsers that will only be operated remotely. | 24 | * false for collapsers that will only be operated remotely. |
25 | * toggle(): Manually toggle the expand/collapse of the content. | 25 | * isToggling: Set this anually toggle the expand/collapse of the content. |
26 | * | 26 | * |
27 | */ | 27 | */ |
28 | var Montage = require("montage/core/core").Montage, | 28 | var Montage = require("montage/core/core").Montage, |
@@ -76,8 +76,12 @@ var Montage = require("montage/core/core").Montage, | |||
76 | }, | 76 | }, |
77 | set: function(newVal) { | 77 | set: function(newVal) { |
78 | this._bypassAnimation= newVal; | 78 | this._bypassAnimation= newVal; |
79 | //console.log('bypassAnimation setter ' + newVal) | ||
79 | } | 80 | } |
80 | }, | 81 | }, |
82 | _oldAnimated : { | ||
83 | value: false | ||
84 | }, | ||
81 | 85 | ||
82 | // transitionClass: The CSS class to apply to the content during collapse to provide CSS transition. | 86 | // transitionClass: The CSS class to apply to the content during collapse to provide CSS transition. |
83 | // Note that this CSS class must be defined in your style sheet with the desired transitions. | 87 | // 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, | |||
104 | set: function(newVal) { | 108 | set: function(newVal) { |
105 | if (newVal !== this._isCollapsed) { | 109 | if (newVal !== this._isCollapsed) { |
106 | this._isCollapsed = newVal; | 110 | this._isCollapsed = newVal; |
107 | this.needsDraw = true; | 111 | //this.needsDraw = true; |
108 | } | 112 | } |
109 | 113 | ||
110 | } | 114 | } |
@@ -144,31 +148,8 @@ var Montage = require("montage/core/core").Montage, | |||
144 | this._isLabelClickable = newVal; | 148 | this._isLabelClickable = newVal; |
145 | } | 149 | } |
146 | }, | 150 | }, |
147 | 151 | ||
148 | // labelClickEvent: an event to fire when the label is clicked. | 152 | // isToggling: Bindable property. Set this (to anything) to trigger a toggle. |
149 | _labelClickEvent: { | ||
150 | value: false | ||
151 | }, | ||
152 | labelClickEvent: { | ||
153 | get: function() { | ||
154 | return this._labelClickEvent; | ||
155 | }, | ||
156 | set: function(newVal) { | ||
157 | this._labelClickEvent = newVal; | ||
158 | } | ||
159 | }, | ||
160 | |||
161 | // toggle: manually toggle the collapser. | ||
162 | toggle: { | ||
163 | value: function() { | ||
164 | if (this.bypassAnimation) { | ||
165 | this.isAnimated = false; | ||
166 | } | ||
167 | this.myContent.classList.remove(this.transitionClass); | ||
168 | this.handleCollapserLabelClick(); | ||
169 | } | ||
170 | }, | ||
171 | |||
172 | _isToggling: { | 153 | _isToggling: { |
173 | serializable: true, | 154 | serializable: true, |
174 | value: true | 155 | value: true |
@@ -182,7 +163,8 @@ var Montage = require("montage/core/core").Montage, | |||
182 | if (newVal !== this._isToggling) { | 163 | if (newVal !== this._isToggling) { |
183 | this._isToggling = newVal; | 164 | this._isToggling = newVal; |
184 | 165 | ||
185 | if (this.bypassAnimation) { | 166 | if (this.bypassAnimation === true) { |
167 | this._oldAnimated = this.isAnimated; | ||
186 | this.isAnimated = false; | 168 | this.isAnimated = false; |
187 | } | 169 | } |
188 | this.myContent.classList.remove(this.transitionClass); | 170 | this.myContent.classList.remove(this.transitionClass); |
@@ -197,19 +179,14 @@ var Montage = require("montage/core/core").Montage, | |||
197 | 179 | ||
198 | prepareForDraw: { | 180 | prepareForDraw: { |
199 | value: function() { | 181 | value: function() { |
200 | // Add a click listener to the label for expand/collapse | ||
201 | if (this.isLabelClickable) { | ||
202 | this.clicker.identifier = "collapserLabel"; | ||
203 | this.clicker.addEventListener("click", this, false); | ||
204 | } | ||
205 | 182 | ||
206 | // Get the original value of the overflow property: | 183 | // Get the original value of the overflow property: |
207 | this._origOverflowValue = window.getComputedStyle(this.myContent, null).getPropertyValue("overflow"); | 184 | this._origOverflowValue = window.getComputedStyle(this.myContent, null).getPropertyValue("overflow"); |
185 | if (this.isCollapsed === false) { | ||
186 | this.myContent.style.height = "auto"; | ||
187 | } | ||
208 | 188 | ||
209 | /* | 189 | |
210 | * Removed because of expense. This disables the feature of having the | ||
211 | * component dynamically expand/collapse the content on init based on properties; | ||
212 | * Now default state of component must be set in CSS. | ||
213 | // If the content area is supposed to start out collapsed: | 190 | // If the content area is supposed to start out collapsed: |
214 | if (this.isCollapsed) { | 191 | if (this.isCollapsed) { |
215 | this.myContent.style.height = "0px"; | 192 | this.myContent.style.height = "0px"; |
@@ -224,7 +201,6 @@ var Montage = require("montage/core/core").Montage, | |||
224 | this.myContent.classList.remove(this.collapsedClass); | 201 | this.myContent.classList.remove(this.collapsedClass); |
225 | this.clicker.classList.remove(this.collapsedClass); | 202 | this.clicker.classList.remove(this.collapsedClass); |
226 | } | 203 | } |
227 | */ | ||
228 | } | 204 | } |
229 | }, | 205 | }, |
230 | draw: { | 206 | draw: { |
@@ -307,11 +283,6 @@ var Montage = require("montage/core/core").Montage, | |||
307 | 283 | ||
308 | // Set the component to run its draw cycle. | 284 | // Set the component to run its draw cycle. |
309 | this.needsDraw = true; | 285 | this.needsDraw = true; |
310 | |||
311 | // Dispatch my labelClick event | ||
312 | if (this.labelClickEvent) { | ||
313 | this.labelClickEvent(this.bypassAnimation); | ||
314 | } | ||
315 | 286 | ||
316 | } | 287 | } |
317 | }, | 288 | }, |
@@ -342,9 +313,10 @@ var Montage = require("montage/core/core").Montage, | |||
342 | 313 | ||
343 | } | 314 | } |
344 | 315 | ||
345 | if (this.bypassAnimation) { | 316 | if (this.bypassAnimation === true) { |
317 | this.isAnimated = this._oldAnimated; | ||
318 | } else { | ||
346 | this.bypassAnimation = true; | 319 | this.bypassAnimation = true; |
347 | this.isAnimated = true; | ||
348 | } | 320 | } |
349 | } | 321 | } |
350 | } | 322 | } |