aboutsummaryrefslogtreecommitdiff
path: root/js/panels/Timeline/Collapser.js
diff options
context:
space:
mode:
Diffstat (limited to 'js/panels/Timeline/Collapser.js')
-rw-r--r--js/panels/Timeline/Collapser.js55
1 files changed, 19 insertions, 36 deletions
diff --git a/js/panels/Timeline/Collapser.js b/js/panels/Timeline/Collapser.js
index d161cdd7..32733b0a 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 */
28var Montage = require("montage/core/core").Montage, 28var 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);
@@ -198,13 +180,18 @@ var Montage = require("montage/core/core").Montage,
198 prepareForDraw: { 180 prepareForDraw: {
199 value: function() { 181 value: function() {
200 // Add a click listener to the label for expand/collapse 182 // Add a click listener to the label for expand/collapse
183 /*
201 if (this.isLabelClickable) { 184 if (this.isLabelClickable) {
202 this.clicker.identifier = "collapserLabel"; 185 this.clicker.identifier = "collapserLabel";
203 this.clicker.addEventListener("click", this, false); 186 this.clicker.addEventListener("click", this, false);
204 } 187 }
205 188 */
206 // Get the original value of the overflow property: 189 // Get the original value of the overflow property:
207 this._origOverflowValue = window.getComputedStyle(this.myContent, null).getPropertyValue("overflow"); 190 this._origOverflowValue = window.getComputedStyle(this.myContent, null).getPropertyValue("overflow");
191 console.log("collapser: this.isCollapsed " + this.isCollapsed)
192 if (this.isCollapsed === false) {
193 this.myContent.style.height = "auto";
194 }
208 195
209 /* 196 /*
210 * Removed because of expense. This disables the feature of having the 197 * Removed because of expense. This disables the feature of having the
@@ -307,11 +294,6 @@ var Montage = require("montage/core/core").Montage,
307 294
308 // Set the component to run its draw cycle. 295 // Set the component to run its draw cycle.
309 this.needsDraw = true; 296 this.needsDraw = true;
310
311 // Dispatch my labelClick event
312 if (this.labelClickEvent) {
313 this.labelClickEvent(this.bypassAnimation);
314 }
315 297
316 } 298 }
317 }, 299 },
@@ -342,9 +324,10 @@ var Montage = require("montage/core/core").Montage,
342 324
343 } 325 }
344 326
345 if (this.bypassAnimation) { 327 if (this.bypassAnimation === true) {
328 this.isAnimated = this._oldAnimated;
329 } else {
346 this.bypassAnimation = true; 330 this.bypassAnimation = true;
347 this.isAnimated = true;
348 } 331 }
349 } 332 }
350 } 333 }