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.js46
1 files changed, 12 insertions, 34 deletions
diff --git a/js/panels/Timeline/Span.reel/Span.js b/js/panels/Timeline/Span.reel/Span.js
index 3c491a53..f588a0eb 100644
--- a/js/panels/Timeline/Span.reel/Span.js
+++ b/js/panels/Timeline/Span.reel/Span.js
@@ -71,9 +71,10 @@ var Span = exports.Span = Montage.create(Component, {
71 newVal = "none"; 71 newVal = "none";
72 } 72 }
73 this._easing = newVal; 73 this._easing = newVal;
74 this.parentComponent.easing = this.easing; 74 this.parentTween = this.parentComponent;
75 this.parentComponent.tweenData.easing = this.easing; 75 this.parentTween.easing = this.easing;
76 this.parentComponent.setKeyframeEase(newVal); 76 this.parentTween.tweenData.easing = this.easing;
77 this.parentTween.setKeyframeEase(newVal);
77 this.needsDraw = true; 78 this.needsDraw = true;
78 } 79 }
79 } 80 }
@@ -88,11 +89,11 @@ var Span = exports.Span = Montage.create(Component, {
88 89
89 draw:{ 90 draw:{
90 value: function(){ 91 value: function(){
92 var containerWidth , choiceWidth;
91 this.element.style.width = this.spanWidth + "px"; 93 this.element.style.width = this.spanWidth + "px";
92 94
93 if ((this.spanWidth <= 70) && (this.spanWidth >0)) { 95 if ((this.spanWidth <= 70) && (this.spanWidth >0)) {
94 var containerWidth = this.spanWidth -18, 96 containerWidth = this.spanWidth -18
95 choiceWidth;
96 if (containerWidth < 0) { 97 if (containerWidth < 0) {
97 containerWidth = 0; 98 containerWidth = 0;
98 } 99 }
@@ -109,23 +110,12 @@ var Span = exports.Span = Montage.create(Component, {
109 this.easing_choice.setAttribute("style", ""); 110 this.easing_choice.setAttribute("style", "");
110 } 111 }
111 112
112 // Highlight the span?
113 if (this.isHighlighted === true) { 113 if (this.isHighlighted === true) {
114 this.element.classList.add("spanHighlight"); 114 this.element.classList.add("spanHighlight");
115 } else { 115 } else {
116 this.element.classList.remove("spanHighlight"); 116 this.element.classList.remove("spanHighlight");
117 } 117 }
118 118
119 /*
120 // Hide or show the choices menu?
121 if (this.areChoicesVisible === true) {
122 this.easing_choices.style.display = "block";
123 } else {
124 this.easing_choices.style.display = "none";
125 }
126 */
127
128 // Change easing?
129 if (this.easing_choice.innerText !== this.easing) { 119 if (this.easing_choice.innerText !== this.easing) {
130 this.easing_choice.innerText = this.easing; 120 this.easing_choice.innerText = this.easing;
131 } 121 }
@@ -137,23 +127,19 @@ var Span = exports.Span = Montage.create(Component, {
137 init: { 127 init: {
138 value: function() { 128 value: function() {
139 this.easing_choice.addEventListener("click", this.handleEasingChoiceClick.bind(this), false); 129 this.easing_choice.addEventListener("click", this.handleEasingChoiceClick.bind(this), false);
140 //this.easing_choices.addEventListener("click", this.handleEasingChoicesClick.bind(this), false);
141
142 } 130 }
143 }, 131 },
144 132
145 highlightSpan:{ 133 highlightSpan:{
146 value: function(){ 134 value: function(){
147 // Class add/remove should only be done in draw cycle.
148 // this.element.classList.add("spanHighlight");
149 this.isHighlighted = true; 135 this.isHighlighted = true;
150 } 136 }
151 }, 137 },
152 138
153 handleEasingChoiceClick: { 139 handleEasingChoiceClick: {
154 value: function(event) { 140 value: function(event) {
141 var objPos;
155 event.stopPropagation(); 142 event.stopPropagation();
156 //this.areChoicesVisible = true;
157 this.application.ninja.timeline.easingMenu.anchor = this.easing_choice; 143 this.application.ninja.timeline.easingMenu.anchor = this.easing_choice;
158 this.application.ninja.timeline.easingMenu.currentChoice = event.currentTarget.innerText; 144 this.application.ninja.timeline.easingMenu.currentChoice = event.currentTarget.innerText;
159 145
@@ -172,7 +158,7 @@ var Span = exports.Span = Montage.create(Component, {
172 } 158 }
173 return objReturn; 159 return objReturn;
174 } 160 }
175 var objPos = findPos(event.target); 161 objPos = findPos(event.target);
176 this.application.ninja.timeline.easingMenu.top = objPos.top +38 - (this.application.ninja.timeline.layout_tracks.scrollTop); 162 this.application.ninja.timeline.easingMenu.top = objPos.top +38 - (this.application.ninja.timeline.layout_tracks.scrollTop);
177 this.application.ninja.timeline.easingMenu.left = objPos.left+18 - (this.application.ninja.timeline.layout_tracks.scrollLeft); 163 this.application.ninja.timeline.easingMenu.left = objPos.left+18 - (this.application.ninja.timeline.layout_tracks.scrollLeft);
178 this.application.ninja.timeline.easingMenu.show(); 164 this.application.ninja.timeline.easingMenu.show();
@@ -182,29 +168,21 @@ var Span = exports.Span = Montage.create(Component, {
182 handleEasingChoicesClick: { 168 handleEasingChoicesClick: {
183 value: function(event) { 169 value: function(event) {
184 event.stopPropagation(); 170 event.stopPropagation();
185
186 // Remove the pointer to ourselves
187 //this.application.ninja.timeline.currentOpenSpanMenu = false;
188 171
189 // Un-highlight the old choice and highlight the new choice
190 this.application.ninja.timeline.easingMenu.popup.contentEl.querySelector(".easing-selected").classList.remove("easing-selected"); 172 this.application.ninja.timeline.easingMenu.popup.contentEl.querySelector(".easing-selected").classList.remove("easing-selected");
191 event.target.classList.add("easing-selected"); 173 event.target.classList.add("easing-selected");
192 174
193 // Set the easing 175 // Set the easing
194 this.easing = event.target.dataset.ninjaEase; 176 this.easing = event.target.dataset.ninjaEase;
195 this.parentComponent.easing = this.easing; 177 this.parentTween.easing = this.easing;
196 this.parentComponent.tweenData.easing = this.easing; 178 this.parentTween.tweenData.easing = this.easing;
197 179
198 // Unbind the event handler
199 this.application.ninja.timeline.easingMenu.popup.contentEl.removeEventListener("click"); 180 this.application.ninja.timeline.easingMenu.popup.contentEl.removeEventListener("click");
200 181 this.hideEasingMenu();
201 // Hide the menu.
202 this.hideEasingMenu();
203 } 182 }
204 }, 183 },
205 hideEasingMenu: { 184 hideEasingMenu: {
206 value: function() { 185 value: function() {
207 //this.areChoicesVisible = false;
208 this.application.ninja.timeline.easingMenu.hide(); 186 this.application.ninja.timeline.easingMenu.hide();
209 } 187 }
210 } 188 }