diff options
Diffstat (limited to 'js/panels/Timeline/Span.reel/Span.js')
-rw-r--r-- | js/panels/Timeline/Span.reel/Span.js | 46 |
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 | } |