diff options
author | Nivesh Rajbhandari | 2012-03-12 16:25:28 -0700 |
---|---|---|
committer | Nivesh Rajbhandari | 2012-03-12 16:25:28 -0700 |
commit | 5fb358d9e80a364d5f300d60b7a9fe0f773741e7 (patch) | |
tree | 2c4d5292b19c91697dffb542f369ec9dcb340f77 /js/panels/Timeline/Collapser.js | |
parent | 5f9b67be3b8bdb391d021103c6bcee6be2f6cdf4 (diff) | |
parent | 69d90467865a1384725b2301901be2180c5a841f (diff) | |
download | ninja-5fb358d9e80a364d5f300d60b7a9fe0f773741e7.tar.gz |
Merge branch 'refs/heads/ninja-internal' into ToolFixes
Diffstat (limited to 'js/panels/Timeline/Collapser.js')
-rw-r--r-- | js/panels/Timeline/Collapser.js | 65 |
1 files changed, 32 insertions, 33 deletions
diff --git a/js/panels/Timeline/Collapser.js b/js/panels/Timeline/Collapser.js index 5de884a9..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, |
@@ -68,7 +68,7 @@ var Montage = require("montage/core/core").Montage, | |||
68 | }, | 68 | }, |
69 | 69 | ||
70 | _bypassAnimation : { | 70 | _bypassAnimation : { |
71 | value: false | 71 | value: true |
72 | }, | 72 | }, |
73 | bypassAnimation: { | 73 | bypassAnimation: { |
74 | get: function() { | 74 | get: function() { |
@@ -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,28 +148,28 @@ 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: { | 153 | _isToggling: { |
150 | value: false | 154 | serializable: true, |
155 | value: true | ||
151 | }, | 156 | }, |
152 | labelClickEvent: { | 157 | isToggling: { |
158 | serializable: true, | ||
153 | get: function() { | 159 | get: function() { |
154 | return this._labelClickEvent; | 160 | return this._isToggling; |
155 | }, | 161 | }, |
156 | set: function(newVal) { | 162 | set: function(newVal) { |
157 | this._labelClickEvent = newVal; | 163 | if (newVal !== this._isToggling) { |
158 | } | 164 | this._isToggling = newVal; |
159 | }, | 165 | |
160 | 166 | if (this.bypassAnimation === true) { | |
161 | // toggle: manually toggle the collapser. | 167 | this._oldAnimated = this.isAnimated; |
162 | toggle: { | 168 | this.isAnimated = false; |
163 | value: function() { | 169 | } |
164 | if (this.bypassAnimation) { | 170 | this.myContent.classList.remove(this.transitionClass); |
165 | this.isAnimated = false; | 171 | this.handleCollapserLabelClick(); |
166 | } | 172 | } |
167 | this.myContent.classList.remove(this.transitionClass); | ||
168 | this.handleCollapserLabelClick(); | ||
169 | } | 173 | } |
170 | }, | 174 | }, |
171 | 175 | ||
@@ -175,15 +179,14 @@ var Montage = require("montage/core/core").Montage, | |||
175 | 179 | ||
176 | prepareForDraw: { | 180 | prepareForDraw: { |
177 | value: function() { | 181 | value: function() { |
178 | // Add a click listener to the label for expand/collapse | ||
179 | if (this.isLabelClickable) { | ||
180 | this.clicker.identifier = "collapserLabel"; | ||
181 | this.clicker.addEventListener("click", this, false); | ||
182 | } | ||
183 | 182 | ||
184 | // Get the original value of the overflow property: | 183 | // Get the original value of the overflow property: |
185 | 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 | } | ||
186 | 188 | ||
189 | |||
187 | // If the content area is supposed to start out collapsed: | 190 | // If the content area is supposed to start out collapsed: |
188 | if (this.isCollapsed) { | 191 | if (this.isCollapsed) { |
189 | this.myContent.style.height = "0px"; | 192 | this.myContent.style.height = "0px"; |
@@ -280,11 +283,6 @@ var Montage = require("montage/core/core").Montage, | |||
280 | 283 | ||
281 | // Set the component to run its draw cycle. | 284 | // Set the component to run its draw cycle. |
282 | this.needsDraw = true; | 285 | this.needsDraw = true; |
283 | |||
284 | // Dispatch my labelClick event | ||
285 | if (this.labelClickEvent) { | ||
286 | this.labelClickEvent(this.bypassAnimation); | ||
287 | } | ||
288 | 286 | ||
289 | } | 287 | } |
290 | }, | 288 | }, |
@@ -315,9 +313,10 @@ var Montage = require("montage/core/core").Montage, | |||
315 | 313 | ||
316 | } | 314 | } |
317 | 315 | ||
318 | if (this.bypassAnimation) { | 316 | if (this.bypassAnimation === true) { |
319 | this.bypassAnimation = false; | 317 | this.isAnimated = this._oldAnimated; |
320 | this.isAnimated = true; | 318 | } else { |
319 | this.bypassAnimation = true; | ||
321 | } | 320 | } |
322 | } | 321 | } |
323 | } | 322 | } |