diff options
-rw-r--r-- | js/panels/Timeline/Collapser.js | 15 | ||||
-rw-r--r-- | js/panels/Timeline/Layer.reel/Layer.js | 164 | ||||
-rw-r--r-- | js/panels/Timeline/TimelinePanel.reel/TimelinePanel.html | 5 | ||||
-rw-r--r-- | js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js | 108 |
4 files changed, 6 insertions, 286 deletions
diff --git a/js/panels/Timeline/Collapser.js b/js/panels/Timeline/Collapser.js index 32733b0a..88314c8b 100644 --- a/js/panels/Timeline/Collapser.js +++ b/js/panels/Timeline/Collapser.js | |||
@@ -179,24 +179,14 @@ var Montage = require("montage/core/core").Montage, | |||
179 | 179 | ||
180 | prepareForDraw: { | 180 | prepareForDraw: { |
181 | value: function() { | 181 | value: function() { |
182 | // Add a click listener to the label for expand/collapse | 182 | |
183 | /* | ||
184 | if (this.isLabelClickable) { | ||
185 | this.clicker.identifier = "collapserLabel"; | ||
186 | this.clicker.addEventListener("click", this, false); | ||
187 | } | ||
188 | */ | ||
189 | // Get the original value of the overflow property: | 183 | // Get the original value of the overflow property: |
190 | this._origOverflowValue = window.getComputedStyle(this.myContent, null).getPropertyValue("overflow"); | 184 | this._origOverflowValue = window.getComputedStyle(this.myContent, null).getPropertyValue("overflow"); |
191 | console.log("collapser: this.isCollapsed " + this.isCollapsed) | ||
192 | if (this.isCollapsed === false) { | 185 | if (this.isCollapsed === false) { |
193 | this.myContent.style.height = "auto"; | 186 | this.myContent.style.height = "auto"; |
194 | } | 187 | } |
195 | 188 | ||
196 | /* | 189 | |
197 | * Removed because of expense. This disables the feature of having the | ||
198 | * component dynamically expand/collapse the content on init based on properties; | ||
199 | * Now default state of component must be set in CSS. | ||
200 | // If the content area is supposed to start out collapsed: | 190 | // If the content area is supposed to start out collapsed: |
201 | if (this.isCollapsed) { | 191 | if (this.isCollapsed) { |
202 | this.myContent.style.height = "0px"; | 192 | this.myContent.style.height = "0px"; |
@@ -211,7 +201,6 @@ var Montage = require("montage/core/core").Montage, | |||
211 | this.myContent.classList.remove(this.collapsedClass); | 201 | this.myContent.classList.remove(this.collapsedClass); |
212 | this.clicker.classList.remove(this.collapsedClass); | 202 | this.clicker.classList.remove(this.collapsedClass); |
213 | } | 203 | } |
214 | */ | ||
215 | } | 204 | } |
216 | }, | 205 | }, |
217 | draw: { | 206 | draw: { |
diff --git a/js/panels/Timeline/Layer.reel/Layer.js b/js/panels/Timeline/Layer.reel/Layer.js index 158eac00..81bd1867 100644 --- a/js/panels/Timeline/Layer.reel/Layer.js +++ b/js/panels/Timeline/Layer.reel/Layer.js | |||
@@ -398,11 +398,7 @@ var Layer = exports.Layer = Montage.create(Component, { | |||
398 | this.init(); | 398 | this.init(); |
399 | 399 | ||
400 | var that = this; | 400 | var that = this; |
401 | 401 | ||
402 | //this.positionCollapser = Collapser.create(); | ||
403 | //this.transformCollapser = Collapser.create(); | ||
404 | //this.styleCollapser = Collapser.create(); | ||
405 | |||
406 | // Make it editable! | 402 | // Make it editable! |
407 | this._layerEditable = Hintable.create(); | 403 | this._layerEditable = Hintable.create(); |
408 | this._layerEditable.element = this.titleSelector; | 404 | this._layerEditable.element = this.titleSelector; |
@@ -418,133 +414,12 @@ var Layer = exports.Layer = Montage.create(Component, { | |||
418 | this._layerEditable.editingClass = "editable2"; | 414 | this._layerEditable.editingClass = "editable2"; |
419 | this._layerEditable.value = this.layerName; | 415 | this._layerEditable.value = this.layerName; |
420 | this._layerEditable.needsDraw = true; | 416 | this._layerEditable.needsDraw = true; |
421 | 417 | ||
422 | // Change the markup into collapsible sections using the nifty Collapser component! | ||
423 | /* | ||
424 | this.mainCollapser = Collapser.create(); | ||
425 | this.mainCollapser.clicker = this.clicker; | ||
426 | this.mainCollapser.myContent = this.myContent; | ||
427 | this.mainCollapser.contentHeight = 60; | ||
428 | this.myContent.style.height = "0px"; | ||
429 | this.mainCollapser.element = this.myContent; | ||
430 | this.mainCollapser.isCollapsed = this.isMainCollapsed; | ||
431 | this.mainCollapser.isAnimated = true; | ||
432 | this.element.setAttribute("data-layerid", this.layerID); | ||
433 | // Bind the collapser's isToggling property to the isMainCollapsed property, | ||
434 | // so a change in one will affect the other. | ||
435 | Object.defineBinding(this.mainCollapser, "isToggling", { | ||
436 | boundObject: this, | ||
437 | boundObjectPropertyPath: "isMainCollapsed", | ||
438 | oneway: false | ||
439 | }); | ||
440 | */ | ||
441 | this.mainCollapser.clicker.addEventListener("click", this.handleMainCollapserClick.bind(this), false); | 418 | this.mainCollapser.clicker.addEventListener("click", this.handleMainCollapserClick.bind(this), false); |
442 | |||
443 | /* | ||
444 | this.mainCollapser.labelClickEvent = function(boolBypass) { | ||
445 | var newEvent = document.createEvent("CustomEvent"); | ||
446 | newEvent.initCustomEvent("layerEvent", false, true); | ||
447 | newEvent.layerEventLocale = "content-main"; | ||
448 | newEvent.layerEventType = "labelClick"; | ||
449 | newEvent.layerID = that.layerID; | ||
450 | newEvent.bypassAnimation = boolBypass; | ||
451 | defaultEventManager.dispatchEvent(newEvent); | ||
452 | that.isMainCollapsed = that.mainCollapser.isCollapsed; | ||
453 | } | ||
454 | */ | ||
455 | //this.mainCollapser.needsDraw = true; | ||
456 | /* | ||
457 | this.positionCollapser.clicker = this.clickerPosition; | ||
458 | this.positionCollapser.myContent = this.contentPosition; | ||
459 | this.positionCollapser.element = this.contentPosition; | ||
460 | this.positionCollapser.contentHeight = 40; | ||
461 | this.positionCollapser.isCollapsed = this.isPositionCollapsed; | ||
462 | this.positionCollapser.isAnimated = false; | ||
463 | // Bind the collapser's isToggling property to the isPositionCollapsed property, | ||
464 | // so a change in one will affect the other. | ||
465 | Object.defineBinding(this.positionCollapser, "isToggling", { | ||
466 | boundObject: this, | ||
467 | boundObjectPropertyPath: "isPositionCollapsed", | ||
468 | oneway: false | ||
469 | }); | ||
470 | */ | ||
471 | this.positionCollapser.clicker.addEventListener("click", this.handlePositionCollapserClick.bind(this), false); | 419 | this.positionCollapser.clicker.addEventListener("click", this.handlePositionCollapserClick.bind(this), false); |
472 | |||
473 | /* | ||
474 | this.positionCollapser.labelClickEvent = function(boolBypass) { | ||
475 | var newEvent = document.createEvent("CustomEvent"); | ||
476 | newEvent.initCustomEvent("layerEvent", false, true); | ||
477 | newEvent.layerEventLocale = "content-position"; | ||
478 | newEvent.layerEventType = "labelClick"; | ||
479 | newEvent.layerID = that.layerID; | ||
480 | newEvent.bypassAnimation = boolBypass; | ||
481 | defaultEventManager.dispatchEvent(newEvent); | ||
482 | that.isPositionCollapsed = that.positionCollapser.isCollapsed; | ||
483 | } | ||
484 | */ | ||
485 | //this.positionCollapser.needsDraw = true; | ||
486 | /* | ||
487 | this.transformCollapser.clicker = this.clickerTransform; | ||
488 | this.transformCollapser.myContent = this.contentTransform; | ||
489 | this.transformCollapser.element = this.contentTransform; | ||
490 | this.transformCollapser.contentHeight = 100; | ||
491 | this.transformCollapser.isCollapsed = this.isTransformCollapsed; | ||
492 | this.transformCollapser.isAnimated = false; | ||
493 | // Bind the collapser's isToggling property to the isTransformCollapsed property, | ||
494 | // so a change in one will affect the other. | ||
495 | Object.defineBinding(this.transformCollapser, "isToggling", { | ||
496 | boundObject: this, | ||
497 | boundObjectPropertyPath: "isTransformCollapsed", | ||
498 | oneway: false | ||
499 | }); | ||
500 | */ | ||
501 | this.transformCollapser.clicker.addEventListener("click", this.handleTransformCollapserClick.bind(this), false); | 420 | this.transformCollapser.clicker.addEventListener("click", this.handleTransformCollapserClick.bind(this), false); |
502 | |||
503 | |||
504 | /* | ||
505 | this.transformCollapser.labelClickEvent = function(boolBypass) { | ||
506 | var newEvent = document.createEvent("CustomEvent"); | ||
507 | newEvent.initCustomEvent("layerEvent", false, true); | ||
508 | newEvent.layerEventLocale = "content-transform"; | ||
509 | newEvent.layerEventType = "labelClick"; | ||
510 | newEvent.layerID = that.layerID; | ||
511 | newEvent.bypassAnimation = boolBypass; | ||
512 | defaultEventManager.dispatchEvent(newEvent); | ||
513 | that.isTransformCollapsed = that.transformCollapser.isCollapsed; | ||
514 | } | ||
515 | */ | ||
516 | //this.transformCollapser.needsDraw = true; | ||
517 | /* | ||
518 | this.styleCollapser.clicker = this.clickerStyle; | ||
519 | this.styleCollapser.myContent = this.contentStyle; | ||
520 | this.styleCollapser.element = this.contentStyle; | ||
521 | this.styleCollapser.isCollapsed = this.isStyleCollapsed; | ||
522 | this.styleCollapser.contentHeight = 0; | ||
523 | this.styleCollapser.isAnimated = false; | ||
524 | // Bind the collapser's isToggling property to the isStyleCollapsed property, | ||
525 | // so a change in one will affect the other. | ||
526 | Object.defineBinding(this.styleCollapser, "isToggling", { | ||
527 | boundObject: this, | ||
528 | boundObjectPropertyPath: "isStyleCollapsed", | ||
529 | oneway: false | ||
530 | }); | ||
531 | */ | ||
532 | this.styleCollapser.clicker.addEventListener("click", this.handleStyleCollapserClick.bind(this), false); | 421 | this.styleCollapser.clicker.addEventListener("click", this.handleStyleCollapserClick.bind(this), false); |
533 | 422 | ||
534 | |||
535 | /* | ||
536 | this.styleCollapser.labelClickEvent = function(boolBypass) { | ||
537 | var newEvent = document.createEvent("CustomEvent"); | ||
538 | newEvent.initCustomEvent("layerEvent", false, true); | ||
539 | newEvent.layerEventLocale = "content-style"; | ||
540 | newEvent.layerEventType = "labelClick"; | ||
541 | newEvent.layerID = that.layerID; | ||
542 | newEvent.bypassAnimation = boolBypass; | ||
543 | defaultEventManager.dispatchEvent(newEvent); | ||
544 | that.isStyleCollapsed = that.styleCollapser.isCollapsed; | ||
545 | } | ||
546 | */ | ||
547 | //this.styleCollapser.needsDraw = true; | ||
548 | 423 | ||
549 | // Add event listeners to add and delete style buttons | 424 | // Add event listeners to add and delete style buttons |
550 | this.buttonAddStyle.identifier = "addStyle"; | 425 | this.buttonAddStyle.identifier = "addStyle"; |
@@ -561,27 +436,6 @@ var Layer = exports.Layer = Montage.create(Component, { | |||
561 | }, | 436 | }, |
562 | draw: { | 437 | draw: { |
563 | value: function() { | 438 | value: function() { |
564 | /* | ||
565 | // Coordinate the collapsers | ||
566 | this.log('layer.js draw') | ||
567 | if (this.mainCollapser.isCollapsed !== this.isMainCollapsed) { | ||
568 | this.log('layer.js draw: this.animateCollapser ' + this.animateCollapser) | ||
569 | this.mainCollapser.bypassAnimation = this.animateCollapser; | ||