aboutsummaryrefslogtreecommitdiff
path: root/js/panels/Timeline
diff options
context:
space:
mode:
authorJon Reid2012-06-14 14:29:37 -0700
committerJon Reid2012-06-14 14:29:37 -0700
commit53bb51a38edc6fe7cc80c43d34027590a22a1d32 (patch)
tree72cf5f580f32c5f21f573c7812a3a387917ab01e /js/panels/Timeline
parent0d226dd2aa36721feccb9ba3c67bd730f7a01201 (diff)
downloadninja-53bb51a38edc6fe7cc80c43d34027590a22a1d32.tar.gz
Timeline: New easing menu.
Diffstat (limited to 'js/panels/Timeline')
-rw-r--r--js/panels/Timeline/EasingMenu.reel/EasingMenu.js22
-rw-r--r--js/panels/Timeline/Span.reel/Span.js24
-rw-r--r--js/panels/Timeline/Span.reel/css/Span.css66
-rw-r--r--js/panels/Timeline/Span.reel/scss/Span.scss28
4 files changed, 75 insertions, 65 deletions
diff --git a/js/panels/Timeline/EasingMenu.reel/EasingMenu.js b/js/panels/Timeline/EasingMenu.reel/EasingMenu.js
index 006efd69..f0547e31 100644
--- a/js/panels/Timeline/EasingMenu.reel/EasingMenu.js
+++ b/js/panels/Timeline/EasingMenu.reel/EasingMenu.js
@@ -92,12 +92,17 @@ var EasingMenu = exports.EasingMenu = Montage.create(Component, {
92 } 92 }
93 }, 93 },
94 94
95 _isShown: {
96 value: false
97 },
98
95 /* End: Models */ 99 /* End: Models */
96 100
97 /* Begin: Draw Cycle */ 101 /* Begin: Draw Cycle */
98 willDraw: { 102 willDraw: {
99 value: function() { 103 value: function() {
100 this.element.addEventListener("click", this.handleEasingChoicesClick.bind(this), false); 104 this.element.addEventListener("click", this.handleEasingChoicesClick.bind(this), false);
105 document.addEventListener("scroll", this.handleDocumentScroll.bind(this), false);
101 } 106 }
102 }, 107 },
103 108
@@ -131,11 +136,8 @@ var EasingMenu = exports.EasingMenu = Montage.create(Component, {
131 position.left = this.left; 136 position.left = this.left;
132 this.popup.position = position; 137 this.popup.position = position;
133 this.popup.show(); 138 this.popup.show();
139 this._isShow = true;
134 140
135
136
137
138
139 // Redraw the content (needed to reflect probable changes in selection from the last time we showed it) 141 // Redraw the content (needed to reflect probable changes in selection from the last time we showed it)
140 this.popup.content.needsDraw = true; 142 this.popup.content.needsDraw = true;
141 } 143 }
@@ -152,9 +154,17 @@ var EasingMenu = exports.EasingMenu = Montage.create(Component, {
152 this.callingComponent.easing = event.target.dataset.ninjaEase; 154 this.callingComponent.easing = event.target.dataset.ninjaEase;
153 155
154 // Hide the menu. 156 // Hide the menu.
155 this.popup.hide(); 157 this.popup.hide();
158 this._isShow = false;
156 } 159 }
157 } 160 },
161 handleDocumentScroll: {
162 value: function(event) {
163 if (this._isShow = true) {
164 this.popup.hide();
165 }
166 }
167 }
158 168
159 /* End: Controllers */ 169 /* End: Controllers */
160 170
diff --git a/js/panels/Timeline/Span.reel/Span.js b/js/panels/Timeline/Span.reel/Span.js
index 44316469..7347ef51 100644
--- a/js/panels/Timeline/Span.reel/Span.js
+++ b/js/panels/Timeline/Span.reel/Span.js
@@ -152,9 +152,25 @@ var Span = exports.Span = Montage.create(Component, {
152 //this.areChoicesVisible = true; 152 //this.areChoicesVisible = true;
153 this.application.ninja.timeline.easingMenu.anchor = this.easing_choice; 153 this.application.ninja.timeline.easingMenu.anchor = this.easing_choice;
154 this.application.ninja.timeline.easingMenu.currentChoice = event.currentTarget.innerText; 154 this.application.ninja.timeline.easingMenu.currentChoice = event.currentTarget.innerText;
155 console.log(event); 155
156 this.application.ninja.timeline.easingMenu.top = 100; 156 function findPos(obj) {
157 this.application.ninja.timeline.easingMenu.left = 100; 157 var objReturn = {};
158 objReturn.top = 0;
159 objReturn.left = 0;
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);
158 this.application.ninja.timeline.easingMenu.show(); 174 this.application.ninja.timeline.easingMenu.show();
159 this.application.ninja.timeline.easingMenu.callingComponent = this; 175 this.application.ninja.timeline.easingMenu.callingComponent = this;
160 } 176 }
@@ -162,8 +178,6 @@ var Span = exports.Span = Montage.create(Component, {
162 handleEasingChoicesClick: { 178 handleEasingChoicesClick: {
163 value: function(event) { 179 value: function(event) {
164 event.stopPropagation(); 180 event.stopPropagation();
165
166 console.log("span.handleEasingChoicesClick")
167 181
168 // Remove the pointer to ourselves 182 // Remove the pointer to ourselves
169 //this.application.ninja.timeline.currentOpenSpanMenu = false; 183 //this.application.ninja.timeline.currentOpenSpanMenu = false;
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;
72 bottom: -1px;
73 left: -1px;
74 z-index: 100;
75 height: auto;
76 border: 1px solid black;
77 color: white;
78 background-color: #474747;
79 overflow: hidden;
80 list-style-type: none;
81 margin: 0px;
82 padding: 0px;
83}
84
85/* line 84, ../scss/Span.scss */
86.container-easing .easing-choices li {
87 list-style-type: none;
88 margin: 0px;
89 padding: 0px;
90 padding-top: 2px;
91 padding-bottom: 2px;
92 padding-left: 3px;
93 cursor: pointer;
94}
95
96/* line 95, ../scss/Span.scss */
97.container-easing .easing-choices li:hover,
98.container-easing .easing-choices li.easing-selected {
99 color: #242424;
100 background-color: #b2b2b2;
101}
102
103/* line 99, ../scss/Span.scss */
104.container-easing .easing-choices li.easing-selected {
105 cursor: default;
106}
diff --git a/js/panels/Timeline/Span.reel/scss/Span.scss b/js/panels/Timeline/Span.reel/scss/Span.scss
index 6afb4780..31781f87 100644
--- a/js/panels/Timeline/Span.reel/scss/Span.scss
+++ b/js/panels/Timeline/Span.reel/scss/Span.scss
@@ -35,3 +35,31 @@
35 opacity: 0.4; 35 opacity: 0.4;
36} 36}
37 37
38.container-easing-choice {
39 position: absolute;
40 top: 2px;
41 right: 8px;
42 font-size: 10px;
43 line-height: 8px;
44 border: 1px solid $color-menu-border;
45 color: $color-menu-text;