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.html12
-rw-r--r--js/panels/Timeline/Span.reel/Span.js51
-rw-r--r--js/panels/Timeline/Span.reel/css/Span.css66
-rw-r--r--js/panels/Timeline/Span.reel/scss/Span.scss84
4 files changed, 74 insertions, 139 deletions
diff --git a/js/panels/Timeline/Span.reel/Span.html b/js/panels/Timeline/Span.reel/Span.html
index a1f3afeb..6e643daa 100644
--- a/js/panels/Timeline/Span.reel/Span.html
+++ b/js/panels/Timeline/Span.reel/Span.html
@@ -15,8 +15,7 @@
15 "properties": { 15 "properties": {
16 "element": {"#": "spanspace"}, 16 "element": {"#": "spanspace"},
17 "container_easing" : {"#" : "container_easing"}, 17 "container_easing" : {"#" : "container_easing"},
18 "easing_choice" : {"#": "easing_choice"}, 18 "easing_choice" : {"#": "easing_choice"}
19 "easing_choices" : {"#" : "easing_choices"}
20 } 19 }
21 } 20 }
22 21
@@ -27,17 +26,10 @@
27 26
28 <div data-montage-id="spanspace" class="tween_span"> 27 <div data-montage-id="spanspace" class="tween_span">
29 <div class="tween_span_bar"></div> 28 <div class="tween_span_bar"></div>
30 <div data-montage-id="container_easing" class="container-easing"> 29 <div data-montage-id="container_easing" class="container-easing-choice">
31 <div data-montage-id="easing_choice" class="easing-choice"> 30 <div data-montage-id="easing_choice" class="easing-choice">
32 ease-out 31 ease-out
33 </div> 32 </div>
34 <ul data-montage-id="easing_choices" class="easing-choices">
35 <li data-ninja-ease="ease">ease</li>
36 <li data-ninja-ease="ease-out" class="easing-selected">ease-out</li>
37 <li data-ninja-ease="ease-in">ease-in</li>
38 <li data-ninja-ease="ease-in-out">ease-in-out</li>
39 <li data-ninja-ease="linear">linear</li>
40 </ul>
41 </div> 33 </div>
42 </div> 34 </div>
43 35
diff --git a/js/panels/Timeline/Span.reel/Span.js b/js/panels/Timeline/Span.reel/Span.js
index 8d4c25ae..7347ef51 100644
--- a/js/panels/Timeline/Span.reel/Span.js
+++ b/js/panels/Timeline/Span.reel/Span.js
@@ -4,8 +4,8 @@
4 (c) Copyright 2011 Motorola Mobility, Inc. All Rights Reserved. 4 (c) Copyright 2011 Motorola Mobility, Inc. All Rights Reserved.
5 </copyright> */ 5 </copyright> */
6 6
7var Montage = require("montage/core/core").Montage; 7var Montage = require("montage/core/core").Montage,
8var Component = require("montage/ui/component").Component; 8 Component = require("montage/ui/component").Component;
9 9
10var Span = exports.Span = Montage.create(Component, { 10var Span = exports.Span = Montage.create(Component, {
11 11
@@ -112,12 +112,14 @@ var Span = exports.Span = Montage.create(Component, {
112 this.element.classList.remove("spanHighlight"); 112 this.element.classList.remove("spanHighlight");
113 } 113 }
114 114
115 /*
115 // Hide or show the choices menu? 116 // Hide or show the choices menu?
116 if (this.areChoicesVisible === true) { 117 if (this.areChoicesVisible === true) {
117 this.easing_choices.style.display = "block"; 118 this.easing_choices.style.display = "block";
118 } else { 119 } else {
119 this.easing_choices.style.display = "none"; 120 this.easing_choices.style.display = "none";
120 } 121 }
122 */
121 123
122 // Change easing? 124 // Change easing?
123 if (this.easing_choice.innerText !== this.easing) { 125 if (this.easing_choice.innerText !== this.easing) {
@@ -131,7 +133,7 @@ var Span = exports.Span = Montage.create(Component, {
131 init: { 133 init: {
132 value: function() { 134 value: function() {
133 this.easing_choice.addEventListener("click", this.handleEasingChoiceClick.bind(this), false); 135 this.easing_choice.addEventListener("click", this.handleEasingChoiceClick.bind(this), false);
134 this.easing_choices.addEventListener("click", this.handleEasingChoicesClick.bind(this), false); 136 //this.easing_choices.addEventListener("click", this.handleEasingChoicesClick.bind(this), false);
135 137
136 } 138 }
137 }, 139 },
@@ -147,15 +149,30 @@ var Span = exports.Span = Montage.create(Component, {
147 handleEasingChoiceClick: { 149 handleEasingChoiceClick: {
148 value: function(event) { 150 value: function(event) {
149 event.stopPropagation(); 151 event.stopPropagation();
150 this.areChoicesVisible = true; 152 //this.areChoicesVisible = true;
151 153 this.application.ninja.timeline.easingMenu.anchor = this.easing_choice;
152 // Possibly another menu is already open. If so, we need to close it. 154 this.application.ninja.timeline.easingMenu.currentChoice = event.currentTarget.innerText;
153 if (this.application.ninja.timeline.currentOpenSpanMenu !== false) { 155
154 this.application.ninja.timeline.currentOpenSpanMenu.hideEasingMenu(); 156 function findPos(obj) {
155 } 157 var objReturn = {};
156 158 objReturn.top = 0;
157 // Now store a pointer to ourselves for possible future use. 159 objReturn.left = 0;
158 this.application.ninja.timeline.currentOpenSpanMenu = this; 160
161 if (obj.offsetParent) {
162
163 do {
164 objReturn.left += obj.offsetLeft;
165 objReturn.top += obj.offsetTop;
166
167 } while (obj = obj.offsetParent);
168 }
169 return objReturn;
170 }
171 var objPos = findPos(event.target);
172 this.application.ninja.timeline.easingMenu.top = objPos.top +38 - (this.application.ninja.timeline.layout_tracks.scrollTop);
173 this.application.ninja.timeline.easingMenu.left = objPos.left+18 - (this.application.ninja.timeline.layout_tracks.scrollLeft);
174 this.application.ninja.timeline.easingMenu.show();
175 this.application.ninja.timeline.easingMenu.callingComponent = this;
159 } 176 }
160 }, 177 },
161 handleEasingChoicesClick: { 178 handleEasingChoicesClick: {
@@ -163,22 +180,26 @@ var Span = exports.Span = Montage.create(Component, {
163 event.stopPropagation(); 180 event.stopPropagation();
164 181
165 // Remove the pointer to ourselves 182 // Remove the pointer to ourselves
166 this.application.ninja.timeline.currentOpenSpanMenu = false; 183 //this.application.ninja.timeline.currentOpenSpanMenu = false;
167 184
168 // Un-highlight the old choice and highlight the new choice 185 // Un-highlight the old choice and highlight the new choice
169 this.easing_choices.querySelector(".easing-selected").classList.remove("easing-selected"); 186 this.application.ninja.timeline.easingMenu.popup.contentEl.querySelector(".easing-selected").classList.remove("easing-selected");
170 event.target.classList.add("easing-selected"); 187 event.target.classList.add("easing-selected");
171 188
172 // Set the easing 189 // Set the easing
173 this.easing = event.target.dataset.ninjaEase; 190 this.easing = event.target.dataset.ninjaEase;
174 191
192 // Unbind the event handler
193 this.application.ninja.timeline.easingMenu.popup.contentEl.removeEventListener("click");
194
175 // Hide the menu. 195 // Hide the menu.
176 this.hideEasingMenu(); 196 this.hideEasingMenu();
177 } 197 }
178 }, 198 },
179 hideEasingMenu: { 199 hideEasingMenu: {
180 value: function() { 200 value: function() {
181 this.areChoicesVisible = false; 201 //this.areChoicesVisible = false;
202 this.application.ninja.timeline.easingMenu.hide();
182 } 203 }
183 } 204 }
184}); 205});
diff --git a/js/panels/Timeline/Span.reel/css/Span.css b/js/panels/Timeline/Span.reel/css/Span.css
index e5cb4263..040379ea 100644
--- a/js/panels/Timeline/Span.reel/css/Span.css
+++ b/js/panels/Timeline/Span.reel/css/Span.css
@@ -27,11 +27,8 @@
27 opacity: 0.4; 27 opacity: 0.4;
28} 28}
29 29
30/* 30/* line 38, ../scss/Span.scss */
31 * Easing picker 31.container-easing-choice {
32 */
33/* line 42, ../scss/Span.scss */
34.container-easing {
35 position: absolute; 32 position: absolute;
36 top: 2px; 33 top: 2px;
37 right: 8px; 34 right: 8px;
@@ -42,65 +39,26 @@
42 background-color: #474747; 39 background-color: #474747;
43} 40}
44 41
45/* line 54, ../scss/Span.scss */ 42/* line 50, ../scss/Span.scss */
46.container-easing, 43.container-easing-choice,
47.container-easing .easing-choice, 44.container-easing-choice .easing-choice,
48.container-easing .easing-choices { 45.container-easing-choices .easing-choices {
46 font-size: 10px;
49 width: 70px; 47 width: 70px;
50 white-space: nowrap; 48 white-space: nowrap;
51} 49}
52 50
53/* line 59, ../scss/Span.scss */ 51/* line 56, ../scss/Span.scss */
54.container-easing, 52.container-easing-choice,
55.container-easing .easing-choice { 53.container-easing-choice .easing-choice {
56 height: 10px; 54 height: 10px;
57} 55}
58 56
59/* line 62, ../scss/Span.scss */ 57/* line 59, ../scss/Span.scss */
60.container-easing .easing-choice { 58.container-easing-choice .easing-choice {
61 position: absolute; 59 position: absolute;
62 top: 0px; 60 top: 0px;
63 left: 3px; 61 left: 3px;
64 width: 67px; 62 width: 67px;
65 cursor: pointer; 63 cursor: pointer;
66} 64}