diff options
Diffstat (limited to 'js/panels')
-rw-r--r-- | js/panels/Timeline/EasingMenu.reel/EasingMenu.js | 22 | ||||
-rw-r--r-- | js/panels/Timeline/Span.reel/Span.js | 24 | ||||
-rw-r--r-- | js/panels/Timeline/Span.reel/css/Span.css | 66 | ||||
-rw-r--r-- | js/panels/Timeline/Span.reel/scss/Span.scss | 28 |
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; | ||
46 | background-color: $color-menu-bg; | ||
47 | } | ||
48 | .container-easing-choice, | ||
49 | .container-easing-choice .easing-choice, | ||
50 | .container-easing-choices .easing-choices { | ||
51 | font-size: 10px; | ||
52 | width: 70px; | ||