diff options
Diffstat (limited to 'js/panels/Timeline')
-rw-r--r-- | js/panels/Timeline/Collapser.js | 62 | ||||
-rw-r--r-- | js/panels/Timeline/Layer.reel/Layer.html | 129 | ||||
-rw-r--r-- | js/panels/Timeline/Layer.reel/Layer.js | 172 | ||||
-rw-r--r-- | js/panels/Timeline/TimelinePanel.reel/TimelinePanel.html | 13 | ||||
-rw-r--r-- | js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js | 30 | ||||
-rw-r--r-- | js/panels/Timeline/TimelineTrack.reel/TimelineTrack.html | 136 | ||||
-rw-r--r-- | js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js | 116 |
7 files changed, 275 insertions, 383 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 | } |
diff --git a/js/panels/Timeline/Layer.reel/Layer.html b/js/panels/Timeline/Layer.reel/Layer.html index 14315f8d..79b522ee 100644 --- a/js/panels/Timeline/Layer.reel/Layer.html +++ b/js/panels/Timeline/Layer.reel/Layer.html | |||
@@ -17,7 +17,12 @@ | |||
17 | "element": {"#": "layer"}, | 17 | "element": {"#": "layer"}, |
18 | "styleRepetition" : {"@":"repetition1"}, | 18 | "styleRepetition" : {"@":"repetition1"}, |
19 | "dynamicLayerName" : {"@":"dtext1"}, | 19 | "dynamicLayerName" : {"@":"dtext1"}, |
20 | "slotStyle" : {"@":"slot1"} | 20 | "slotStyle" : {"@":"slot1"}, |
21 | "mainCollapser" : {"@" : "mainCollapser"}, | ||
22 | "positionCollapser" : {"@" : "positionCollapser"}, | ||
23 | "transformCollapser" : {"@" : "transformCollapser"}, | ||
24 | "styleCollapser" : {"@" : "styleCollapser"}, | ||
25 | "clickerMain" : {"#" : "clicker-main"} | ||
21 | } | 26 | } |
22 | }, | 27 | }, |
23 | "dtext1" : { | 28 | "dtext1" : { |
@@ -225,6 +230,90 @@ | |||
225 | "oneway": false | 230 | "oneway": false |
226 | } | 231 | } |
227 | } | 232 | } |
233 | }, | ||
234 | |||
235 | "mainCollapser" : { | ||
236 | "module" : "js/panels/timeline/Collapser.js", | ||
237 | "name" : "Collapser", | ||
238 | "properties" : { | ||
239 | "element" : {"#" : "content-main"}, | ||
240 | "myContent" : {"#" : "content-main"}, | ||
241 | "contentHeight" : 60, | ||
242 | "isLabelClickable" : true, | ||
243 | "clicker" : {"#" : "clicker-main"}, | ||
244 | "isCollapsed" : true, | ||
245 | "isAnimated" : true | ||
246 | }, | ||
247 | "bindings" : { | ||
248 | "isToggling" : { | ||
249 | "boundObject" : {"@" : "owner" }, | ||
250 | "boundObjectPropertyPath" : "isMainCollapsed", | ||
251 | "oneway" : false | ||
252 | } | ||
253 | } | ||
254 | }, | ||
255 | |||
256 | "positionCollapser" : { | ||
257 | "module" : "js/panels/timeline/Collapser.js", | ||
258 | "name" : "Collapser", | ||
259 | "properties" : { | ||