diff options
Diffstat (limited to 'js/panels')
-rw-r--r-- | js/panels/Timeline/Collapser.js | 26 | ||||
-rw-r--r-- | js/panels/Timeline/Layer.reel/Layer.js | 138 | ||||
-rw-r--r-- | js/panels/Timeline/TimelinePanel.reel/TimelinePanel.html | 19 | ||||
-rw-r--r-- | js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js | 43 | ||||
-rw-r--r-- | js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js | 95 |
5 files changed, 288 insertions, 33 deletions
diff --git a/js/panels/Timeline/Collapser.js b/js/panels/Timeline/Collapser.js index ad490c2e..d161cdd7 100644 --- a/js/panels/Timeline/Collapser.js +++ b/js/panels/Timeline/Collapser.js | |||
@@ -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() { |
@@ -169,6 +169,28 @@ var Montage = require("montage/core/core").Montage, | |||
169 | } | 169 | } |
170 | }, | 170 | }, |
171 | 171 | ||
172 | _isToggling: { | ||
173 | serializable: true, | ||
174 | value: true | ||
175 | }, | ||
176 | isToggling: { | ||
177 | serializable: true, | ||
178 | get: function() { | ||
179 | return this._isToggling; | ||
180 | }, | ||
181 | set: function(newVal) { | ||
182 | if (newVal !== this._isToggling) { | ||
183 | this._isToggling = newVal; | ||
184 | |||
185 | if (this.bypassAnimation) { | ||
186 | this.isAnimated = false; | ||
187 | } | ||
188 | this.myContent.classList.remove(this.transitionClass); | ||
189 | this.handleCollapserLabelClick(); | ||
190 | } | ||
191 | } | ||
192 | }, | ||
193 | |||
172 | /* === END: Models === */ | 194 | /* === END: Models === */ |
173 | 195 | ||
174 | /* === BEGIN: Draw cycle === */ | 196 | /* === BEGIN: Draw cycle === */ |
@@ -321,7 +343,7 @@ var Montage = require("montage/core/core").Montage, | |||
321 | } | 343 | } |
322 | 344 | ||
323 | if (this.bypassAnimation) { | 345 | if (this.bypassAnimation) { |
324 | this.bypassAnimation = false; | 346 | this.bypassAnimation = true; |
325 | this.isAnimated = true; | 347 | this.isAnimated = true; |
326 | } | 348 | } |
327 | } | 349 | } |
diff --git a/js/panels/Timeline/Layer.reel/Layer.js b/js/panels/Timeline/Layer.reel/Layer.js index 94d1f7e9..f9bba499 100644 --- a/js/panels/Timeline/Layer.reel/Layer.js +++ b/js/panels/Timeline/Layer.reel/Layer.js | |||
@@ -306,24 +306,28 @@ var Layer = exports.Layer = Montage.create(Component, { | |||
306 | 306 | ||
307 | // Are the various collapsers collapsed or not | 307 | // Are the various collapsers collapsed or not |
308 | _isMainCollapsed : { | 308 | _isMainCollapsed : { |
309 | value: "" | 309 | serializable: true, |
310 | value: true | ||
310 | }, | 311 | }, |
311 | isMainCollapsed : { | 312 | isMainCollapsed : { |
313 | serializable: true, | ||
312 | get: function() { | 314 | get: function() { |
313 | return this._isMainCollapsed; | 315 | return this._isMainCollapsed; |
314 | }, | 316 | }, |
315 | set: function(newVal) { | 317 | set: function(newVal) { |
318 | this.log('layer.js: isMainCollapsed: ' + newVal); | ||
316 | if (newVal !== this._isMainCollapsed) { | 319 | if (newVal !== this._isMainCollapsed) { |
317 | this._isMainCollapsed = newVal; | 320 | this._isMainCollapsed = newVal; |
318 | this.needsDraw = true; | ||
319 | } | 321 | } |
320 | } | 322 | } |
321 | }, | 323 | }, |
322 | 324 | ||
323 | _isTransformCollapsed : { | 325 | _isTransformCollapsed : { |
326 | serializable: true, | ||
324 | value: true | 327 | value: true |
325 | }, | 328 | }, |
326 | isTransformCollapsed : { | 329 | isTransformCollapsed : { |
330 | serializable: true, | ||
327 | get: function() { | 331 | get: function() { |
328 | return this._isTransformCollapsed; | 332 | return this._isTransformCollapsed; |
329 | }, | 333 | }, |
@@ -336,9 +340,11 @@ var Layer = exports.Layer = Montage.create(Component, { | |||
336 | }, | 340 | }, |
337 | 341 | ||
338 | _isPositionCollapsed : { | 342 | _isPositionCollapsed : { |
343 | serializable: true, | ||
339 | value: true | 344 | value: true |
340 | }, | 345 | }, |
341 | isPositionCollapsed : { | 346 | isPositionCollapsed : { |
347 | serializable: true, | ||
342 | get: function() { | 348 | get: function() { |
343 | return this._isPositionCollapsed; | 349 | return this._isPositionCollapsed; |
344 | }, | 350 | }, |
@@ -351,9 +357,11 @@ var Layer = exports.Layer = Montage.create(Component, { | |||
351 | }, | 357 | }, |
352 | 358 | ||
353 | _isStyleCollapsed : { | 359 | _isStyleCollapsed : { |
360 | serializable: true, | ||
354 | value: true | 361 | value: true |
355 | }, | 362 | }, |
356 | isStyleCollapsed : { | 363 | isStyleCollapsed : { |
364 | serializable: true, | ||
357 | get: function() { | 365 | get: function() { |
358 | return this._isStyleCollapsed; | 366 | return this._isStyleCollapsed; |
359 | }, | 367 | }, |
@@ -364,6 +372,19 @@ var Layer = exports.Layer = Montage.create(Component, { | |||
364 | } | 372 | } |
365 | } | 373 | } |
366 | }, | 374 | }, |
375 | _animateCollapser : { | ||
376 | serializable: true, | ||
377 | value: false | ||
378 | }, | ||
379 | animateCollapser : { | ||
380 | serializable: true, | ||
381 | get: function() { | ||
382 | return this._animateCollapser; | ||
383 | }, | ||
384 | set: function(newVal) { | ||
385 | this._animateCollapser = newVal; | ||
386 | } | ||
387 | }, | ||
367 | 388 | ||
368 | 389 | ||
369 | /* END: Models */ | 390 | /* END: Models */ |
@@ -404,10 +425,19 @@ var Layer = exports.Layer = Montage.create(Component, { | |||
404 | this.mainCollapser.contentHeight = 60; | 425 | this.mainCollapser.contentHeight = 60; |
405 | this.myContent.style.height = "0px"; | 426 | this.myContent.style.height = "0px"; |
406 | this.mainCollapser.element = this.myContent; | 427 | this.mainCollapser.element = this.myContent; |
407 | //this.mainCollapser.isCollapsedAtStart = true; | ||
408 | this.mainCollapser.isCollapsed = this.isMainCollapsed; | 428 | this.mainCollapser.isCollapsed = this.isMainCollapsed; |
409 | this.mainCollapser.isAnimated = true; | 429 | this.mainCollapser.isAnimated = true; |
410 | this.element.setAttribute("data-layerid", this.layerID); | 430 | this.element.setAttribute("data-layerid", this.layerID); |
431 | // Bind the collapser's isToggling property to the isMainCollapsed property, | ||
432 | // so a change in one will affect the other. | ||
433 | Object.defineBinding(this.mainCollapser, "isToggling", { | ||
434 | boundObject: this, | ||
435 | boundObjectPropertyPath: "isMainCollapsed", | ||
436 | oneway: false | ||
437 | }); | ||
438 | this.mainCollapser.clicker.addEventListener("click", this.handleMainCollapserClick.bind(this), false); | ||
439 | |||
440 | /* | ||
411 | this.mainCollapser.labelClickEvent = function(boolBypass) { | 441 | this.mainCollapser.labelClickEvent = function(boolBypass) { |
412 | var newEvent = document.createEvent("CustomEvent"); | 442 | var newEvent = document.createEvent("CustomEvent"); |
413 | newEvent.initCustomEvent("layerEvent", false, true); | 443 | newEvent.initCustomEvent("layerEvent", false, true); |
@@ -418,15 +448,25 @@ var Layer = exports.Layer = Montage.create(Component, { | |||
418 | defaultEventManager.dispatchEvent(newEvent); | 448 | defaultEventManager.dispatchEvent(newEvent); |
419 | that.isMainCollapsed = that.mainCollapser.isCollapsed; | 449 | that.isMainCollapsed = that.mainCollapser.isCollapsed; |
420 | } | 450 | } |
451 | */ | ||
421 | //this.mainCollapser.needsDraw = true; | 452 | //this.mainCollapser.needsDraw = true; |
422 | 453 | ||
423 | this.positionCollapser.clicker = this.clickerPosition; | 454 | this.positionCollapser.clicker = this.clickerPosition; |
424 | this.positionCollapser.myContent = this.contentPosition; | 455 | this.positionCollapser.myContent = this.contentPosition; |
425 | this.positionCollapser.element = this.contentPosition; | 456 | this.positionCollapser.element = this.contentPosition; |
426 | this.positionCollapser.contentHeight = 40; | 457 | this.positionCollapser.contentHeight = 40; |
427 | // this.positionCollapser.isCollapsedAtStart = true; | ||
428 | this.positionCollapser.isCollapsed = this.isPositionCollapsed; | 458 | this.positionCollapser.isCollapsed = this.isPositionCollapsed; |
429 | this.positionCollapser.isAnimated = true; | 459 | this.positionCollapser.isAnimated = false; |
460 | // Bind the collapser's isToggling property to the isPositionCollapsed property, | ||
461 | // so a change in one will affect the other. | ||
462 | Object.defineBinding(this.positionCollapser, "isToggling", { | ||
463 | boundObject: this, | ||
464 | boundObjectPropertyPath: "isPositionCollapsed", | ||
465 | oneway: false | ||
466 | }); | ||
467 | this.positionCollapser.clicker.addEventListener("click", this.handlePositionCollapserClick.bind(this), false); | ||
468 | |||
469 | /* | ||
430 | this.positionCollapser.labelClickEvent = function(boolBypass) { | 470 | this.positionCollapser.labelClickEvent = function(boolBypass) { |
431 | var newEvent = document.createEvent("CustomEvent"); | 471 | var newEvent = document.createEvent("CustomEvent"); |
432 | newEvent.initCustomEvent("layerEvent", false, true); | 472 | newEvent.initCustomEvent("layerEvent", false, true); |
@@ -437,15 +477,26 @@ var Layer = exports.Layer = Montage.create(Component, { | |||
437 | defaultEventManager.dispatchEvent(newEvent); | 477 | defaultEventManager.dispatchEvent(newEvent); |
438 | that.isPositionCollapsed = that.positionCollapser.isCollapsed; | 478 | that.isPositionCollapsed = that.positionCollapser.isCollapsed; |
439 | } | 479 | } |
480 | */ | ||
440 | //this.positionCollapser.needsDraw = true; | 481 |