aboutsummaryrefslogtreecommitdiff
path: root/js/panels/Timeline/Span.reel
diff options
context:
space:
mode:
Diffstat (limited to 'js/panels/Timeline/Span.reel')
-rw-r--r--js/panels/Timeline/Span.reel/Span.js192
1 files changed, 92 insertions, 100 deletions
diff --git a/js/panels/Timeline/Span.reel/Span.js b/js/panels/Timeline/Span.reel/Span.js
index 53b016ec..e3a0c542 100644
--- a/js/panels/Timeline/Span.reel/Span.js
+++ b/js/panels/Timeline/Span.reel/Span.js
@@ -38,7 +38,7 @@ var Span = exports.Span = Montage.create(Component, {
38 value: true 38 value: true
39 }, 39 },
40 40
41 // BEGIN: Models 41 /* Begin: Models */
42 _spanWidth:{ 42 _spanWidth:{
43 value:0 43 value:0
44 }, 44 },
@@ -87,70 +87,64 @@ var Span = exports.Span = Montage.create(Component, {
87 value: "none" 87 value: "none"
88 }, 88 },
89 easing: { 89 easing: {
90 get: function() { 90 get: function() {
91 return this._easing; 91 return this._easing;
92 }, 92 },
93 set: function(newVal) { 93 set: function(newVal) {
94 if (newVal !== this._easing) { 94 if (newVal !== this._easing) {
95 if (typeof(newVal) === "undefined") { 95 if (typeof(newVal) === "undefined") {
96 newVal = "none"; 96 newVal = "none";
97 } 97 }
98 this._easing = newVal; 98 this._easing = newVal;
99 this.parentComponent.easing = this.easing; 99 this.parentTween = this.parentComponent;
100 this.parentComponent.tweenData.easing = this.easing; 100 this.parentTween.easing = this.easing;
101 this.parentComponent.setKeyframeEase(newVal); 101 this.parentTween.tweenData.easing = this.easing;
102 this.needsDraw = true; 102 this.parentTween.setKeyframeEase(newVal);
103 } 103 this.needsDraw = true;
104 } 104 }
105 }, 105 }
106
107 // BEGIN: draw cycle
108 prepareForDraw: {
109 value: function() {
110 this.init();
111 }
112 }, 106 },
113 107
108 /* End: Models */
109
110 /* Begin: Draw Cycle */
111 prepareForDraw: {
112 value: function() {
113 this.init();
114 }
115 },
116
114 draw:{ 117 draw:{
115 value: function(){ 118 value: function(){
119 var containerWidth ,
120 choiceWidth;
121
116 this.element.style.width = this.spanWidth + "px"; 122 this.element.style.width = this.spanWidth + "px";
117 123
118 if ((this.spanWidth <= 70) && (this.spanWidth >0)) { 124 if ((this.spanWidth <= 70) && (this.spanWidth >0)) {
119 var containerWidth = this.spanWidth -18, 125 containerWidth = this.spanWidth -18
120 choiceWidth; 126 if (containerWidth < 0) {
121 if (containerWidth < 0) { 127 containerWidth = 0;
122 containerWidth = 0; 128 }
123 } 129 choiceWidth = containerWidth -3;
124 choiceWidth = containerWidth -3; 130 if (choiceWidth < 0) {
125 if (choiceWidth < 0) { 131 choiceWidth = 0;
126 choiceWidth = 0; 132 }
127 } 133 this.container_easing.style.width = containerWidth + "px";
128 this.container_easing.style.width = containerWidth + "px"; 134 this.easing_choice.style.width = choiceWidth + "px";
129 this.easing_choice.style.width = choiceWidth + "px"; 135 this.easing_choice.style.overflow = "hidden";
130 this.easing_choice.style.overflow = "hidden";
131 } 136 }
132 if (this.spanWidth > 70) { 137 if (this.spanWidth > 70) {
133 this.container_easing.setAttribute("style", ""); 138 this.container_easing.setAttribute("style", "");
134 this.easing_choice.setAttribute("style", ""); 139 this.easing_choice.setAttribute("style", "");
135 } 140 }
136 141
137 // Highlight the span?
138 if (this.isHighlighted === true) { 142 if (this.isHighlighted === true) {
139 this.element.classList.add("spanHighlight"); 143 this.element.classList.add("spanHighlight");
140 } else { 144 } else {
141 this.element.classList.remove("spanHighlight"); 145 this.element.classList.remove("spanHighlight");
142 } 146 }
143 147
144 /*
145 // Hide or show the choices menu?
146 if (this.areChoicesVisible === true) {
147 this.easing_choices.style.display = "block";
148 } else {
149 this.easing_choices.style.display = "none";
150 }
151 */
152
153 // Change easing?
154 if (this.easing_choice.innerText !== this.easing) { 148 if (this.easing_choice.innerText !== this.easing) {
155 this.easing_choice.innerText = this.easing; 149 this.easing_choice.innerText = this.easing;
156 } 150 }
@@ -158,29 +152,16 @@ var Span = exports.Span = Montage.create(Component, {
158 } 152 }
159 }, 153 },
160 154
161 // BEGIN: Controllers 155 /* End: Draw Cycle */
162 init: {
163 value: function() {
164 this.easing_choice.addEventListener("click", this.handleEasingChoiceClick.bind(this), false);
165 //this.easing_choices.addEventListener("click", this.handleEasingChoicesClick.bind(this), false);
166
167 }
168 },
169
170 highlightSpan:{
171 value: function(){
172 // Class add/remove should only be done in draw cycle.
173 // this.element.classList.add("spanHighlight");
174 this.isHighlighted = true;
175 }
176 },
177 156
157 /* Begin : Event Handlers */
158
178 handleEasingChoiceClick: { 159 handleEasingChoiceClick: {
179 value: function(event) { 160 value: function(event) {
180 event.stopPropagation(); 161 var objPos;
181 //this.areChoicesVisible = true; 162 event.stopPropagation();
182 this.application.ninja.timeline.easingMenu.anchor = this.easing_choice; 163 this.application.ninja.timeline.easingMenu.anchor = this.easing_choice;
183 this.application.ninja.timeline.easingMenu.currentChoice = event.currentTarget.innerText; 164 this.application.ninja.timeline.easingMenu.currentChoice = event.currentTarget.innerText;
184 165
185 function findPos(obj) { 166 function findPos(obj) {
186 var objReturn = {}; 167 var objReturn = {};
@@ -189,48 +170,59 @@ var Span = exports.Span = Montage.create(Component, {
189 170
190 if (obj.offsetParent) { 171 if (obj.offsetParent) {
191 172
192 do { 173 do {
193 objReturn.left += obj.offsetLeft; 174 objReturn.left += obj.offsetLeft;
194 objReturn.top += obj.offsetTop; 175 objReturn.top += obj.offsetTop;
195 176
196 } while (obj = obj.offsetParent); 177 } while (obj = obj.offsetParent);
197 } 178 }
198 return objReturn; 179 return objReturn;
199 } 180 }
200 var objPos = findPos(event.target); 181 objPos = findPos(event.target);
201 this.application.ninja.timeline.easingMenu.top = objPos.top +38 - (this.application.ninja.timeline.layout_tracks.scrollTop); 182 this.application.ninja.timeline.easingMenu.top = objPos.top +38 - (this.application.ninja.timeline.layout_tracks.scrollTop);
202 this.application.ninja.timeline.easingMenu.left = objPos.left+18 - (this.application.ninja.timeline.layout_tracks.scrollLeft); 183 this.application.ninja.timeline.easingMenu.left = objPos.left+18 - (this.application.ninja.timeline.layout_tracks.scrollLeft);
203 this.application.ninja.timeline.easingMenu.show(); 184 this.application.ninja.timeline.easingMenu.show();
204 this.application.ninja.timeline.easingMenu.callingComponent = this; 185 this.application.ninja.timeline.easingMenu.callingComponent = this;
205 } 186 }
206 }, 187 },
207 handleEasingChoicesClick: { 188 handleEasingChoicesClick: {
208 value: function(event) { 189 value: function(event) {
209 event.stopPropagation(); 190 event.stopPropagation();
210 191
211 // Remove the pointer to ourselves 192 /* Un-highlight the old choice and highlight the new choice */
212 //this.application.ninja.timeline.currentOpenSpanMenu = false; 193 this.application.ninja.timeline.easingMenu.popup.contentEl.querySelector(".easing-selected").classList.remove("easing-selected");
213 194 event.target.classList.add("easing-selected");
214 // Un-highlight the old choice and highlight the new choice 195
215 this.application.ninja.timeline.easingMenu.popup.contentEl.querySelector(".easing-selected").classList.remove("easing-selected"); 196 /* Set the easing */
216 event.target.classList.add("easing-selected"); 197 this.easing = event.target.dataset.ninjaEase;
198 this.parentTween.easing = this.easing;
199 this.parentTween.tweenData.easing = this.easing;
200
201 this.application.ninja.timeline.easingMenu.popup.contentEl.removeEventListener("click");
202 this.hideEasingMenu();
203 }
204 },
217 205
218 // Set the easing 206 /* End : Event Handlers */
219 this.easing = event.target.dataset.ninjaEase;
220 this.parentComponent.easing = this.easing;
221 this.parentComponent.tweenData.easing = this.easing;
222 207
223 // Unbind the event handler 208 /* Begin: Controllers */
224 this.application.ninja.timeline.easingMenu.popup.contentEl.removeEventListener("click"); 209 init: {
210 value: function() {
211