aboutsummaryrefslogtreecommitdiff
path: root/js/panels/Timeline/Span.reel
diff options
context:
space:
mode:
authorJon Reid2012-07-09 14:53:00 -0700
committerJon Reid2012-07-09 14:53:00 -0700
commit65a9d88691a9f10130ebd853492dab0d59f4aa53 (patch)
tree0bbb855eadc71c09a1118a22f275f01b735f2ac5 /js/panels/Timeline/Span.reel
parentd2ae0619d673e66d59d7a0584fc14d420511dcdf (diff)
parentd874dda445a3baa2dd24b9554b6fc7f620dd5e89 (diff)
downloadninja-65a9d88691a9f10130ebd853492dab0d59f4aa53.tar.gz
Merge remote-tracking branch 'ninja-jduran/TimelineUber' into timeline-local
Diffstat (limited to 'js/panels/Timeline/Span.reel')
-rw-r--r--js/panels/Timeline/Span.reel/Span.js88
1 files changed, 40 insertions, 48 deletions
diff --git a/js/panels/Timeline/Span.reel/Span.js b/js/panels/Timeline/Span.reel/Span.js
index 0d013fe5..ca610907 100644
--- a/js/panels/Timeline/Span.reel/Span.js
+++ b/js/panels/Timeline/Span.reel/Span.js
@@ -37,7 +37,7 @@ var Span = exports.Span = Montage.create(Component, {
37 value: true 37 value: true
38 }, 38 },
39 39
40 // BEGIN: Models 40 /* Begin: Models */
41 _spanWidth:{ 41 _spanWidth:{
42 value:0 42 value:0
43 }, 43 },
@@ -95,15 +95,18 @@ var Span = exports.Span = Montage.create(Component, {
95 newVal = "none"; 95 newVal = "none";
96 } 96 }
97 this._easing = newVal; 97 this._easing = newVal;
98 this.parentComponent.easing = this.easing; 98 this.parentTween = this.parentComponent;
99 this.parentComponent.tweenData.easing = this.easing; 99 this.parentTween.easing = this.easing;
100 this.parentComponent.setKeyframeEase(newVal); 100 this.parentTween.tweenData.easing = this.easing;
101 this.parentTween.setKeyframeEase(newVal);
101 this.needsDraw = true; 102 this.needsDraw = true;
102 } 103 }
103 } 104 }
104 }, 105 },
106
107 /* End: Models */
105 108
106 // BEGIN: draw cycle 109 /* Begin: Draw Cycle */
107 prepareForDraw: { 110 prepareForDraw: {
108 value: function() { 111 value: function() {
109 this.init(); 112 this.init();
@@ -112,11 +115,13 @@ var Span = exports.Span = Montage.create(Component, {
112 115
113 draw:{ 116 draw:{
114 value: function(){ 117 value: function(){
118 var containerWidth ,
119 choiceWidth;
120
115 this.element.style.width = this.spanWidth + "px"; 121 this.element.style.width = this.spanWidth + "px";
116 122
117 if ((this.spanWidth <= 70) && (this.spanWidth >0)) { 123 if ((this.spanWidth <= 70) && (this.spanWidth >0)) {
118 var containerWidth = this.spanWidth -18, 124 containerWidth = this.spanWidth -18
119 choiceWidth;
120 if (containerWidth < 0) { 125 if (containerWidth < 0) {
121 containerWidth = 0; 126 containerWidth = 0;
122 } 127 }
@@ -133,23 +138,12 @@ var Span = exports.Span = Montage.create(Component, {
133 this.easing_choice.setAttribute("style", ""); 138 this.easing_choice.setAttribute("style", "");
134 } 139 }
135 140
136 // Highlight the span?
137 if (this.isHighlighted === true) { 141 if (this.isHighlighted === true) {
138 this.element.classList.add("spanHighlight"); 142 this.element.classList.add("spanHighlight");
139 } else { 143 } else {
140 this.element.classList.remove("spanHighlight"); 144 this.element.classList.remove("spanHighlight");
141 } 145 }
142 146
143 /*
144 // Hide or show the choices menu?
145 if (this.areChoicesVisible === true) {
146 this.easing_choices.style.display = "block";
147 } else {
148 this.easing_choices.style.display = "none";
149 }
150 */
151
152 // Change easing?
153 if (this.easing_choice.innerText !== this.easing) { 147 if (this.easing_choice.innerText !== this.easing) {
154 this.easing_choice.innerText = this.easing; 148 this.easing_choice.innerText = this.easing;
155 } 149 }
@@ -157,27 +151,14 @@ var Span = exports.Span = Montage.create(Component, {
157 } 151 }
158 }, 152 },
159 153
160 // BEGIN: Controllers 154 /* End: Draw Cycle */
161 init: {
162 value: function() {
163 this.easing_choice.addEventListener("click", this.handleEasingChoiceClick.bind(this), false);
164 //this.easing_choices.addEventListener("click", this.handleEasingChoicesClick.bind(this), false);
165 155
166 } 156 /* Begin : Event Handlers */
167 },
168
169 highlightSpan:{
170 value: function(){
171 // Class add/remove should only be done in draw cycle.
172 // this.element.classList.add("spanHighlight");
173 this.isHighlighted = true;
174 }
175 },
176 157
177 handleEasingChoiceClick: { 158 handleEasingChoiceClick: {
178 value: function(event) { 159 value: function(event) {
160 var objPos;
179 event.stopPropagation(); 161 event.stopPropagation();
180 //this.areChoicesVisible = true;
181 this.application.ninja.timeline.easingMenu.anchor = this.easing_choice; 162 this.application.ninja.timeline.easingMenu.anchor = this.easing_choice;
182 this.application.ninja.timeline.easingMenu.currentChoice = event.currentTarget.innerText; 163 this.application.ninja.timeline.easingMenu.currentChoice = event.currentTarget.innerText;
183 164
@@ -196,7 +177,7 @@ var Span = exports.Span = Montage.create(Component, {
196 } 177 }
197 return objReturn; 178 return objReturn;
198 } 179 }
199 var objPos = findPos(event.target); 180 objPos = findPos(event.target);
200 this.application.ninja.timeline.easingMenu.top = objPos.top +38 - (this.application.ninja.timeline.layout_tracks.scrollTop); 181 this.application.ninja.timeline.easingMenu.top = objPos.top +38 - (this.application.ninja.timeline.layout_tracks.scrollTop);
201 this.application.ninja.timeline.easingMenu.left = objPos.left+18 - (this.application.ninja.timeline.layout_tracks.scrollLeft); 182 this.application.ninja.timeline.easingMenu.left = objPos.left+18 - (this.application.ninja.timeline.layout_tracks.scrollLeft);
202 this.application.ninja.timeline.easingMenu.show(); 183 this.application.ninja.timeline.easingMenu.show();
@@ -207,29 +188,40 @@ var Span = exports.Span = Montage.create(Component, {
207 value: function(event) { 188 value: function(event) {
208 event.stopPropagation(); 189 event.stopPropagation();
209 190
210 // Remove the pointer to ourselves 191 /* Un-highlight the old choice and highlight the new choice */
211 //this.application.ninja.timeline.currentOpenSpanMenu = false;
212
213 // Un-highlight the old choice and highlight the new choice
214 this.application.ninja.timeline.easingMenu.popup.contentEl.querySelector(".easing-selected").classList.remove("easing-selected"); 192 this.application.ninja.timeline.easingMenu.popup.contentEl.querySelector(".easing-selected").classList.remove("easing-selected");
215 event.target.classList.add("easing-selected"); 193 event.target.classList.add("easing-selected");
216 194
217 // Set the easing 195 /* Set the easing */
218 this.easing = event.target.dataset.ninjaEase; 196 this.easing = event.target.dataset.ninjaEase;
219 this.parentComponent.easing = this.easing; 197 this.parentTween.easing = this.easing;
220 this.parentComponent.tweenData.easing = this.easing; 198 this.parentTween.tweenData.easing = this.easing;
221 199
222 // Unbind the event handler
223 this.application.ninja.timeline.easingMenu.popup.contentEl.removeEventListener("click"); 200 this.application.ninja.timeline.easingMenu.popup.contentEl.removeEventListener("click");
224 201 this.hideEasingMenu();
225 // Hide the menu.
226 this.hideEasingMenu();
227 } 202 }
228 }, 203 },
204
205 /* End : Event Handlers */
206
207 /* Begin: Controllers */
208 init: {
209 value: function() {
210 this.easing_choice.addEventListener("click", this.handleEasingChoiceClick.bind(this), false);
211 }
212 },
213
214 highlightSpan:{
215 value: function(){
216 this.isHighlighted = true;
217 }
218 },
219
229 hideEasingMenu: { 220 hideEasingMenu: {
230 value: function() { 221 value: function() {
231 //this.areChoicesVisible = false;
232 this.application.ninja.timeline.easingMenu.hide(); 222 this.application.ninja.timeline.easingMenu.hide();
233 } 223 }
234 } 224 }
225
226 /* End : Controllers */
235}); 227});