aboutsummaryrefslogtreecommitdiff
path: root/js/panels/Timeline
diff options
context:
space:
mode:
Diffstat (limited to 'js/panels/Timeline')
-rw-r--r--js/panels/Timeline/Collapser.js15
-rw-r--r--js/panels/Timeline/Layer.reel/Layer.js164
-rw-r--r--js/panels/Timeline/TimelinePanel.reel/TimelinePanel.html5
-rw-r--r--js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js108
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) {