diff options
Diffstat (limited to 'js/panels')
-rw-r--r-- | js/panels/Timeline/Collapser.js | 55 | ||||
-rw-r--r-- | js/panels/Timeline/Layer.reel/Layer.html | 129 | ||||
-rw-r--r-- | js/panels/Timeline/Layer.reel/Layer.js | 44 | ||||
-rw-r--r-- | js/panels/Timeline/TimelinePanel.reel/TimelinePanel.html | 8 | ||||
-rw-r--r-- | js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js | 63 | ||||
-rw-r--r-- | js/panels/Timeline/TimelineTrack.reel/TimelineTrack.html | 136 | ||||
-rw-r--r-- | js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js | 32 |
7 files changed, 319 insertions, 148 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 | */ |
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); |
@@ -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 | } |
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" : { | ||
260 | "element" : {"#" : "content-position"}, | ||
261 | "myContent" : {"#":"content-position"}, | ||
262 | "contentHeight" : 60, | ||
263 | "isLabelClickable" : true, | ||
264 | "clicker" : {"#" : "clicker-position"}, | ||
265 | "isCollapsed" : true, | ||
266 | "isAnimated" : true | ||
267 | }, | ||
268 | "bindings" : { | ||
269 | "isToggling" : { | ||
270 | "boundObject" : {"@" : "owner" }, | ||
271 | "boundObjectPropertyPath" : "isPositionCollapsed", | ||
272 | "oneway" : false | ||
273 |