diff options
Diffstat (limited to 'js/panels/Timeline/Span.reel')
-rw-r--r-- | js/panels/Timeline/Span.reel/Span.html | 12 | ||||
-rw-r--r-- | js/panels/Timeline/Span.reel/Span.js | 51 | ||||
-rw-r--r-- | js/panels/Timeline/Span.reel/css/Span.css | 66 | ||||
-rw-r--r-- | js/panels/Timeline/Span.reel/scss/Span.scss | 84 |
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 | ||
7 | var Montage = require("montage/core/core").Montage; | 7 | var Montage = require("montage/core/core").Montage, |
8 | var Component = require("montage/ui/component").Component; | 8 | Component = require("montage/ui/component").Component; |
9 | 9 | ||
10 | var Span = exports.Span = Montage.create(Component, { | 10 | var 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 | } |
67 | |||
68 | /* line 69, ../scss/Span.scss */ | ||
69 | .container-easing .easing-choices { | ||
70 | position: absolute; | ||
71 | display: none; | ||