diff options
Diffstat (limited to 'js/panels')
-rw-r--r-- | js/panels/Timeline/EasingMenu.reel/EasingMenu.js | 141 | ||||
-rw-r--r-- | js/panels/Timeline/Span.reel/Span.js | 19 | ||||
-rw-r--r-- | js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js | 4 |
3 files changed, 150 insertions, 14 deletions
diff --git a/js/panels/Timeline/EasingMenu.reel/EasingMenu.js b/js/panels/Timeline/EasingMenu.reel/EasingMenu.js index b736ea59..006efd69 100644 --- a/js/panels/Timeline/EasingMenu.reel/EasingMenu.js +++ b/js/panels/Timeline/EasingMenu.reel/EasingMenu.js | |||
@@ -13,26 +13,149 @@ var EasingMenu = exports.EasingMenu = Montage.create(Component, { | |||
13 | hasTemplate:{ | 13 | hasTemplate:{ |
14 | value: true | 14 | value: true |
15 | }, | 15 | }, |
16 | |||
17 | /* Begin: Models */ | ||
18 | |||
19 | // popup: the initialized component. | ||
20 | _popup: { | ||
21 | value: null | ||
22 | }, | ||
23 | popup: { | ||
24 | get: function() { | ||
25 | return this._popup; | ||
26 | }, | ||
27 | set: function(newVal) { | ||
28 | this._popup = newVal | ||
29 | } | ||
30 | }, | ||
31 | |||
32 | // callingComponent: pointer to the span that called for the menu | ||
33 | _callingComponent: { | ||
34 | value: null | ||
35 | }, | ||
36 | callingComponent: { | ||
37 | get: function() { | ||
38 | return this._callingComponent; | ||
39 | }, | ||
40 | set: function(newVal) { | ||
41 | this._callingComponent = newVal; | ||
42 | } | ||
43 | }, | ||
44 | |||
45 | // anchor: pointer to the anchoring element | ||
46 | _anchor: { | ||
47 | value: null | ||
48 | }, | ||
49 | anchor: { | ||
50 | get: function() { | ||
51 | return this._anchor; | ||
52 | }, | ||
53 | set: function(newVal) { | ||
54 | this._anchor = newVal; | ||
55 | } | ||
56 | }, | ||
57 | |||
58 | |||
59 | _top: { | ||
60 | value: null | ||
61 | }, | ||
62 | top: { | ||
63 | get: function() { | ||
64 | return this._top; | ||
65 | }, | ||
66 | set: function(newVal) { | ||
67 | this._top = newVal; | ||
68 | } | ||
69 | }, | ||
70 | _left: { | ||
71 | value: null | ||
72 | }, | ||
73 | left: { | ||
74 | get: function() { | ||
75 | return this._left; | ||
76 | }, | ||
77 | set: function(newVal) { | ||
78 | this._left = newVal; | ||
79 | } | ||
80 | }, | ||
81 | |||
82 | // currentChoice: The data attribute of the current choice | ||
83 | _currentChoice: { | ||
84 | value: null | ||
85 | }, | ||
86 | currentChoice: { | ||
87 | get: function() { | ||
88 | return this._currentChoice; | ||
89 | }, | ||
90 | set: function(newVal) { | ||
91 | this._currentChoice = newVal; | ||
92 | } | ||
93 | }, | ||
94 | |||
95 | /* End: Models */ | ||
96 | |||
97 | /* Begin: Draw Cycle */ | ||
98 | willDraw: { | ||
99 | value: function() { | ||
100 | this.element.addEventListener("click", this.handleEasingChoicesClick.bind(this), false); | ||
101 | } | ||
102 | }, | ||
16 | 103 | ||
17 | draw: { | 104 | draw: { |
18 | value: function() { | 105 | value: function() { |
19 | console.log("EasingMenu.draw") | 106 | // Update the selection classes. |
107 | this.element.querySelector(".easing-selected").classList.remove("easing-selected"); | ||
108 | this.element.querySelector('[data-ninja-ease="'+this.currentChoice+'"]').classList.add("easing-selected"); | ||
109 | } | ||
110 | }, | ||
111 | didDraw: { | ||
112 | value: function() { | ||
20 | } | 113 | } |
21 | }, | 114 | }, |
115 | /* End Draw Cycle */ | ||
22 | 116 | ||
117 | /* Begin: Controllers */ | ||
23 | show: { | 118 | show: { |
24 | value: function() { | 119 | value: function() { |
25 | var popup, easingMenu; | 120 | // Initialize the popup if it hasn't already been done |
26 | popup = Popup.create(); | 121 | if (this.popup == null) { |
27 | this._popup = popup; | 122 | this.popup = Popup.create(); |
123 | this.popup.modal = false; | ||
124 | this.popup.content = EasingMenu.create(); | ||
125 | } | ||
126 | |||
127 | // Show the popup | ||
128 | this.popup.anchor = this.anchor; | ||
129 | var position = {}; | ||
130 | position.top = this.top; | ||
131 | position.left = this.left; | ||
132 | this.popup.position = position; | ||
133 | this.popup.show(); | ||
28 | 134 | ||
29 | popup.modal = false; | ||
30 | 135 | ||
31 | easingMenu = EasingMenu.create(); | 136 | |
32 | popup.content = easingMenu; | 137 | |
33 | 138 | ||
34 | popup.show(); | 139 | // Redraw the content (needed to reflect probable changes in selection from the last time we showed it) |
140 | this.popup.content.needsDraw = true; | ||
35 | } | 141 | } |
142 | }, | ||
143 | handleEasingChoicesClick: { | ||
144 | value: function(event) { | ||
145 | event.stopPropagation(); | ||
146 | |||
147 | // Un-highlight the old choice and highlight the new choice | ||
148 | this.element.querySelector(".easing-selected").classList.remove("easing-selected"); | ||
149 | event.target.classList.add("easing-selected"); | ||
150 | |||
151 | // Set the easing in the span that called us | ||
152 | this.callingComponent.easing = event.target.dataset.ninjaEase; | ||
153 | |||
154 | // Hide the menu. | ||
155 | this.popup.hide(); | ||
156 | } | ||
36 | } | 157 | } |
37 | 158 | ||
159 | /* End: Controllers */ | ||
160 | |||
38 | }); | 161 | }); |
diff --git a/js/panels/Timeline/Span.reel/Span.js b/js/panels/Timeline/Span.reel/Span.js index bb8fdf03..44316469 100644 --- a/js/panels/Timeline/Span.reel/Span.js +++ b/js/panels/Timeline/Span.reel/Span.js | |||
@@ -150,31 +150,42 @@ var Span = exports.Span = Montage.create(Component, { | |||
150 | value: function(event) { | 150 | value: function(event) { |
151 | event.stopPropagation(); | 151 | event.stopPropagation(); |
152 | //this.areChoicesVisible = true; | 152 | //this.areChoicesVisible = true; |
153 | this.application.ninja.timeline.easingMenu.anchor = this.easing_choice; | ||
154 | this.application.ninja.timeline.easingMenu.currentChoice = event.currentTarget.innerText; | ||
155 | console.log(event); | ||
156 | this.application.ninja.timeline.easingMenu.top = 100; | ||
157 | this.application.ninja.timeline.easingMenu.left = 100; | ||
153 | this.application.ninja.timeline.easingMenu.show(); | 158 | this.application.ninja.timeline.easingMenu.show(); |
154 | 159 | this.application.ninja.timeline.easingMenu.callingComponent = this; | |
155 | } | 160 | } |
156 | }, | 161 | }, |
157 | handleEasingChoicesClick: { | 162 | handleEasingChoicesClick: { |
158 | value: function(event) { | 163 | value: function(event) { |
159 | event.stopPropagation(); | 164 | event.stopPropagation(); |
165 | |||
166 | console.log("span.handleEasingChoicesClick") | ||
160 | 167 | ||
161 | // Remove the pointer to ourselves | 168 | // Remove the pointer to ourselves |
162 | this.application.ninja.timeline.currentOpenSpanMenu = false; | 169 | //this.application.ninja.timeline.currentOpenSpanMenu = false; |
163 | 170 | ||
164 | // Un-highlight the old choice and highlight the new choice | 171 | // Un-highlight the old choice and highlight the new choice |
165 | this.easing_choices.querySelector(".easing-selected").classList.remove("easing-selected"); | 172 | this.application.ninja.timeline.easingMenu.popup.contentEl.querySelector(".easing-selected").classList.remove("easing-selected"); |
166 | event.target.classList.add("easing-selected"); | 173 | event.target.classList.add("easing-selected"); |
167 | 174 | ||
168 | // Set the easing | 175 | // Set the easing |
169 | this.easing = event.target.dataset.ninjaEase; | 176 | this.easing = event.target.dataset.ninjaEase; |
170 | 177 | ||
178 | // Unbind the event handler | ||
179 | this.application.ninja.timeline.easingMenu.popup.contentEl.removeEventListener("click"); | ||
180 | |||
171 | // Hide the menu. | 181 | // Hide the menu. |
172 | this.hideEasingMenu(); | 182 | this.hideEasingMenu(); |
173 | } | 183 | } |
174 | }, | 184 | }, |
175 | hideEasingMenu: { | 185 | hideEasingMenu: { |
176 | value: function() { | 186 | value: function() { |
177 | this.areChoicesVisible = false; | 187 | //this.areChoicesVisible = false; |
188 | this.application.ninja.timeline.easingMenu.hide(); | ||
178 | } | 189 | } |
179 | } |