aboutsummaryrefslogtreecommitdiff
path: root/js
diff options
context:
space:
mode:
Diffstat (limited to 'js')
-rw-r--r--js/panels/Timeline/Layer.reel/Layer.js71
-rw-r--r--js/panels/Timeline/Layer.reel/css/Layer.css50
-rw-r--r--js/panels/Timeline/Layer.reel/scss/Layer.scss9
-rw-r--r--js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js137
-rw-r--r--js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js2
5 files changed, 168 insertions, 101 deletions
diff --git a/js/panels/Timeline/Layer.reel/Layer.js b/js/panels/Timeline/Layer.reel/Layer.js
index c69f28b0..bba113c0 100644
--- a/js/panels/Timeline/Layer.reel/Layer.js
+++ b/js/panels/Timeline/Layer.reel/Layer.js
@@ -67,10 +67,7 @@ var Layer = exports.Layer = Montage.create(Component, {
67 67
68 /* Layer models: the name, ID, and selected and animation booleans for the layer */ 68 /* Layer models: the name, ID, and selected and animation booleans for the layer */
69 _layerName:{ 69 _layerName:{
70 serializable: true, 70 value: "Default Layer Name"
71 value:null,
72 writable:true,
73 enumerable:true
74 }, 71 },
75 72
76 layerName:{ 73 layerName:{
@@ -79,20 +76,22 @@ var Layer = exports.Layer = Montage.create(Component, {
79 return this._layerName; 76 return this._layerName;
80 }, 77 },
81 set:function(newVal){ 78 set:function(newVal){
82 if (newVal !== this._layerName) { 79 console.log('Layer.layerName.set ', newVal);
80
83 this._layerEditable.value = newVal; 81 this._layerEditable.value = newVal;
84 this._layerName = newVal; 82 this._layerName = newVal;
85 this.layerData.layerName = newVal; 83 this.layerData.layerName = newVal;
86 this.log('layerName setter: ' + newVal) 84 if (typeof(this.dynamicLayerName) !== "undefined") {
87 } 85 this.dynamicLayerName.value = newVal;
86 }
87
88 console.log('layerName setter: ' + newVal)
89
88 90
89 } 91 }
90 }, 92 },
91 _layerID:{ 93 _layerID:{
92 value:null, 94 value: "Default Layer ID"
93 writable:true,
94 serializable: true,
95 enumerable:true
96 }, 95 },
97 96
98 layerID:{ 97 layerID:{
@@ -385,7 +384,7 @@ var Layer = exports.Layer = Montage.create(Component, {
385 return this._bypassAnimation; 384 return this._bypassAnimation;
386 }, 385 },
387 set: function(newVal) { 386 set: function(newVal) {
388 if (newVal !== this._bypassAnimation) { 387 if ((newVal !== this._bypassAnimation) && (typeof(this.layerData) !== "undefined")) {
389 this._bypassAnimation = newVal; 388 this._bypassAnimation = newVal;
390 this.layerData.bypassAnimation = newVal; 389 this.layerData.bypassAnimation = newVal;
391 } 390 }
@@ -410,16 +409,25 @@ var Layer = exports.Layer = Montage.create(Component, {
410 set:function(val){ 409 set:function(val){
411 this._layerData = val; 410 this._layerData = val;
412 if(this._layerData){ 411 if(this._layerData){
413 this.setData(); 412 this.setData(true);
414 } 413 }
415 } 414 }
416 }, 415 },
417 416
418 setData:{ 417 setData:{
419 value:function(){ 418 value:function(boolNeedsDraw){
420 if (typeof(this.layerData) === "undefined") { 419 if (typeof(this._layerData) === "undefined") {
420 return;
421 }
422
423 if (typeof(this._layerData.layerName) === "undefined") {
421 return; 424 return;
422 } 425 }
426
427 if (typeof(boolNeedsDraw) === "undefined") {
428 boolNeedsDraw = false;
429 }
430
423 this.layerName = this.layerData.layerName; 431 this.layerName = this.layerData.layerName;
424 this.layerID = this.layerData.layerID; 432 this.layerID = this.layerData.layerID;
425 this.arrLayerStyles = this.layerData.arrLayerStyles; 433 this.arrLayerStyles = this.layerData.arrLayerStyles;
@@ -438,7 +446,7 @@ var Layer = exports.Layer = Montage.create(Component, {
438 this.dtextScaleY = this.layerData.dtextScaleY; 446 this.dtextScaleY = this.layerData.dtextScaleY;
439 this.dtextRotate = this.layerData.dtextRotate; 447 this.dtextRotate = this.layerData.dtextRotate;
440 this._isFirstDraw = this.layerData._isFirstDraw; 448 this._isFirstDraw = this.layerData._isFirstDraw;
441 this.needsDraw = true; 449 this.needsDraw = boolNeedsDraw;
442 } 450 }
443 }, 451 },
444 452
@@ -455,7 +463,7 @@ var Layer = exports.Layer = Montage.create(Component, {
455 set: function(newVal) { 463 set: function(newVal) {
456 if (newVal !== this._bindingPoint) { 464 if (newVal !== this._bindingPoint) {
457 this._bindingPoint = newVal; 465 this._bindingPoint = newVal;
458 this.setData(); 466 this.setData(true);
459 } 467 }
460 } 468 }
461 }, 469 },
@@ -478,23 +486,15 @@ var Layer = exports.Layer = Montage.create(Component, {
478 // Initialize myself 486 // Initialize myself
479 this.init(); 487 this.init();
480 488
481 var that = this;
482
483 // Make it editable! 489 // Make it editable!
484 this._layerEditable = Hintable.create(); 490 this._layerEditable = Hintable.create();
485 this._layerEditable.element = this.titleSelector; 491 this._layerEditable.element = this.titleSelector;
486 this.titleSelector.identifier = "selectorEditable"; 492 this._layerEditable.addEventListener("blur", this.handleSelectorEditableBlur.bind(this), false);
487 this.titleSelector.addEventListener("click", this, false); 493 this._layerEditable.addEventListener("change", this.handleSelectorEditableChange.bind(this), false);
488 this._layerEditable.addEventListener("blur", function(event) { 494
489 that.handleSelectorEditableBlur(event);
490 }, false);
491 this._layerEditable.addEventListener("change", function(event) {
492 that.dynamicLayerName.value = that._layerEditable.value;
493 that.needsDraw = true;
494 }, false);
495 this._layerEditable.editingClass = "editable2"; 495 this._layerEditable.editingClass = "editable2";
496 this._layerEditable.value = this.layerName; 496 this._layerEditable.value = this.layerName;
497 this._layerEditable.needsDraw = true; 497 //this._layerEditable.needsDraw = true;
498 498
499 this.mainCollapser.clicker.addEventListener("click", this.handleMainCollapserClick.bind(this), false); 499 this.mainCollapser.clicker.addEventListener("click", this.handleMainCollapserClick.bind(this), false);
500 this.positionCollapser.clicker.addEventListener("click", this.handlePositionCollapserClick.bind(this), false); 500 this.positionCollapser.clicker.addEventListener("click", this.handlePositionCollapserClick.bind(this), false);
@@ -510,7 +510,7 @@ var Layer = exports.Layer = Montage.create(Component, {
510 this.element.addEventListener("mousedown", this, false); 510 this.element.addEventListener("mousedown", this, false);
511 this.element.addEventListener("click", this, false); 511 this.element.addEventListener("click", this, false);
512 512
513 // Drag and drop event hanlders 513 // Drag and drop event handlers
514 this.element.addEventListener("mouseover", this.handleMouseover.bind(this), false); 514 this.element.addEventListener("mouseover", this.handleMouseover.bind(this), false);
515 this.element.addEventListener("mouseout", this.handleMouseout.bind(this), false); 515 this.element.addEventListener("mouseout", this.handleMouseout.bind(this), false);
516 this.element.addEventListener("dragover", this.handleDragover.bind(this), false); 516 this.element.addEventListener("dragover", this.handleDragover.bind(this), false);
@@ -712,10 +712,6 @@ var Layer = exports.Layer = Montage.create(Component, {
712 this.deleteStyle(); 712 this.deleteStyle();
713 } 713 }
714 }, 714 },
715 handleSelectorEditableClick: {
716 value: function(event) {
717 }
718 },
719 handleSelectorEditableBlur : { 715 handleSelectorEditableBlur : {
720 value: function(event) { 716 value: function(event) {
721 this.titleSelector.scrollLeft = 0; 717 this.titleSelector.scrollLeft = 0;
@@ -723,7 +719,12 @@ var Layer = exports.Layer = Montage.create(Component, {
723 }, 719 },
724 handleSelectorEditableChange: { 720 handleSelectorEditableChange: {
725 value: function(event) { 721 value: function(event) {
726 this.layerName = this.dynamicLayerName.value; 722 var newVal = "ONTD";
723 if (this._layerEditable.value !== "") {
724 newVal = this._layerEditable.value;
725 }
726 this.dynamicLayerName.value = newVal;
727 this.layerName = newVal;
727 this.needsDraw = true; 728 this.needsDraw = true;
728 } 729 }
729 }, 730 },
diff --git a/js/panels/Timeline/Layer.reel/css/Layer.css b/js/panels/Timeline/Layer.reel/css/Layer.css
index 8e36c2db..1aae8d67 100644
--- a/js/panels/Timeline/Layer.reel/css/Layer.css
+++ b/js/panels/Timeline/Layer.reel/css/Layer.css
@@ -139,7 +139,12 @@
139 font-size: 11px; 139 font-size: 11px;
140} 140}
141 141
142/* line 130, ../scss/Layer.scss */ 142/* line 132, ../scss/Layer.scss */
143.label-layer .collapsible-label br {
144 display: none;
145}
146
147/* line 136, ../scss/Layer.scss */
143.collapsible-clicker { 148.collapsible-clicker {
144 position: absolute; 149 position: absolute;
145 width: 10px; 150 width: 10px;
@@ -152,23 +157,23 @@
152 background-repeat: no-repeat; 157 background-repeat: no-repeat;
153} 158}
154 159
155/* line 141, ../scss/Layer.scss */ 160/* line 147, ../scss/Layer.scss */
156.collapsible-clicker.collapsible-collapsed { 161.collapsible-clicker.collapsible-collapsed {
157 background-image: url(../images/icon-collapsed.png); 162 background-image: url(../images/icon-collapsed.png);
158}