aboutsummaryrefslogtreecommitdiff
path: root/js/panels/Timeline/Span.reel/Span.js
diff options
context:
space:
mode:
Diffstat (limited to 'js/panels/Timeline/Span.reel/Span.js')
-rw-r--r--js/panels/Timeline/Span.reel/Span.js49
1 files changed, 49 insertions, 0 deletions
diff --git a/js/panels/Timeline/Span.reel/Span.js b/js/panels/Timeline/Span.reel/Span.js
index e5894500..1ab3455c 100644
--- a/js/panels/Timeline/Span.reel/Span.js
+++ b/js/panels/Timeline/Span.reel/Span.js
@@ -57,6 +57,22 @@ var Span = exports.Span = Montage.create(Component, {
57 } 57 }
58 } 58 }
59 }, 59 },
60
61 _easing: {
62 value: "ease-in"
63 },
64 easing: {
65 get: function() {
66 return this._easing;
67 },
68 set: function(newVal) {
69 if (newVal !== this._easing) {
70 this._easing = newVal;
71 this.parentComponent.setKeyframeEase(newVal);
72 this.needsDraw = true;
73 }
74 }
75 },
60 76
61 // BEGIN: draw cycle 77 // BEGIN: draw cycle
62 prepareForDraw: { 78 prepareForDraw: {
@@ -67,7 +83,27 @@ var Span = exports.Span = Montage.create(Component, {
67 83
68 draw:{ 84 draw:{
69 value: function(){ 85 value: function(){
86
70 this.element.style.width = this.spanWidth + "px"; 87 this.element.style.width = this.spanWidth + "px";
88
89 if ((this.spanWidth <= 70) && (this.spanWidth >0)) {
90 var containerWidth = this.spanWidth -18,
91 choiceWidth;
92 if (containerWidth < 0) {
93 containerWidth = 0;
94 }
95 choiceWidth = containerWidth -3;
96 if (choiceWidth < 0) {
97 choiceWidth = 0;
98 }
99 this.container_easing.style.width = containerWidth + "px";
100 this.easing_choice.style.width = choiceWidth + "px";
101 this.easing_choice.style.overflow = "hidden";
102 }
103 if (this.spanWidth > 70) {
104 this.container_easing.setAttribute("style", "");
105 this.easing_choice.setAttribute("style", "");
106 }
71 107
72 // Highlight the span? 108 // Highlight the span?
73 if (this.isHighlighted === true) { 109 if (this.isHighlighted === true) {
@@ -82,6 +118,12 @@ var Span = exports.Span = Montage.create(Component, {
82 } else { 118 } else {
83 this.easing_choices.style.display = "none"; 119 this.easing_choices.style.display = "none";
84 } 120 }
121
122 // Change easing?
123 if (this.easing_choice.innerText !== this.easing) {
124 this.easing_choice.innerText = this.easing;
125 }
126
85 } 127 }
86 }, 128 },
87 129
@@ -90,6 +132,7 @@ var Span = exports.Span = Montage.create(Component, {
90 value: function() { 132 value: function() {
91 this.easing_choice.addEventListener("click", this.handleEasingChoiceClick.bind(this), false); 133 this.easing_choice.addEventListener("click", this.handleEasingChoiceClick.bind(this), false);
92 this.easing_choices.addEventListener("click", this.handleEasingChoicesClick.bind(this), false); 134 this.easing_choices.addEventListener("click", this.handleEasingChoicesClick.bind(this), false);
135
93 } 136 }
94 }, 137 },
95 138
@@ -108,6 +151,12 @@ var Span = exports.Span = Montage.create(Component, {
108 }, 151 },
109 handleEasingChoicesClick: { 152 handleEasingChoicesClick: {
110 value: function(event) { 153 value: function(event) {
154
155 this.easing_choices.querySelector(".easing-selected").classList.remove("easing-selected");
156 event.target.classList.add("easing-selected");
157 this.easing = event.target.dataset.ninjaEase;
158
159 // Which element was just
111 this.areChoicesVisible = false; 160 this.areChoicesVisible = false;
112 } 161 }
113 } 162 }