aboutsummaryrefslogtreecommitdiff
path: root/js/panels/Timeline
diff options
context:
space:
mode:
Diffstat (limited to 'js/panels/Timeline')
-rw-r--r--js/panels/Timeline/EasingMenu.reel/EasingMenu.js141
-rw-r--r--js/panels/Timeline/Span.reel/Span.js19
-rw-r--r--js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js4
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 } 190 }
180}); 191});
diff --git a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js
index a8a4d4a8..666b2816 100644