diff options
author | Ananya Sen | 2012-07-23 17:01:14 -0700 |
---|---|---|
committer | Ananya Sen | 2012-07-23 17:01:14 -0700 |
commit | 48d9ed19573a07c68da305d14ca6ab3a04d31d64 (patch) | |
tree | b4bf6c48c7fdade2cf531d84cac3359489d38405 /js/panels/Timeline/Span.reel | |
parent | c07a7a9d11bc8299fa9686544b18840cc8e640c2 (diff) | |
parent | afc7ad4f240fdf7890a79c2d4d7f8eb2e7c30a34 (diff) | |
download | ninja-48d9ed19573a07c68da305d14ca6ab3a04d31d64.tar.gz |
Merge branch 'refs/heads/Jose-Document' into Document
Diffstat (limited to 'js/panels/Timeline/Span.reel')
-rw-r--r-- | js/panels/Timeline/Span.reel/Span.js | 192 |
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; | ||