diff options
Diffstat (limited to 'js/stage/binding-view.reel/binding-hud.reel/binding-hud.js')
-rwxr-xr-x | js/stage/binding-view.reel/binding-hud.reel/binding-hud.js | 114 |
1 files changed, 113 insertions, 1 deletions
diff --git a/js/stage/binding-view.reel/binding-hud.reel/binding-hud.js b/js/stage/binding-view.reel/binding-hud.reel/binding-hud.js index fddce11c..4b40d4da 100755 --- a/js/stage/binding-view.reel/binding-hud.reel/binding-hud.js +++ b/js/stage/binding-view.reel/binding-hud.reel/binding-hud.js | |||
@@ -12,6 +12,24 @@ var Montage = require("montage/core/core").Montage, | |||
12 | Component = require("montage/ui/component").Component; | 12 | Component = require("montage/ui/component").Component; |
13 | 13 | ||
14 | exports.BindingHud = Montage.create(Component, { | 14 | exports.BindingHud = Montage.create(Component, { |
15 | scrollUp: { | ||
16 | value: null | ||
17 | }, | ||
18 | scrollable: { | ||
19 | value: false | ||
20 | }, | ||
21 | scrollInterval: { | ||
22 | value: null | ||
23 | }, | ||
24 | scrollDown: { | ||
25 | value: null | ||
26 | }, | ||
27 | scrollSpace: { | ||
28 | value: 3 | ||
29 | }, | ||
30 | currentScrollDirection: { | ||
31 | value: null | ||
32 | }, | ||
15 | _bindingArgs: { | 33 | _bindingArgs: { |
16 | value: null | 34 | value: null |
17 | }, | 35 | }, |
@@ -24,6 +42,10 @@ exports.BindingHud = Montage.create(Component, { | |||
24 | value: [] | 42 | value: [] |
25 | }, | 43 | }, |
26 | 44 | ||
45 | optionsRepeater: { | ||
46 | value: null | ||
47 | }, | ||
48 | |||
27 | _userComponent: { value: null }, | 49 | _userComponent: { value: null }, |
28 | userComponent: { | 50 | userComponent: { |
29 | get: function() { | 51 | get: function() { |
@@ -141,6 +163,86 @@ exports.BindingHud = Montage.create(Component, { | |||
141 | // this.properties.push({"title":obj, "bound": objBound}); | 163 | // this.properties.push({"title":obj, "bound": objBound}); |
142 | // }.bind(this)); | 164 | // }.bind(this)); |
143 | //this.parentComponent.parentComponent.handleShowBinding(this.application.ninja.objectsController.getObjectBindings(this.userComponent)); | 165 | //this.parentComponent.parentComponent.handleShowBinding(this.application.ninja.objectsController.getObjectBindings(this.userComponent)); |
166 | if(this.scrollSpace < this.properties.length) { | ||
167 | this.scrollUp.addEventListener("mouseover", this); | ||
168 | this.scrollDown.addEventListener("mouseover", this); | ||
169 | this.scrollUp.addEventListener("mouseout", this); | ||
170 | this.scrollDown.addEventListener("mouseout", this); | ||
171 | this.scrollUp.style.display = "block"; | ||
172 | this.scrollDown.style.display = "block"; | ||
173 | } | ||
174 | } | ||
175 | }, | ||
176 | |||
177 | isOverScroller: { | ||
178 | value: function(mousePoint) { | ||
179 | if(this.scrollSpace < this.properties.length) { | ||
180 | if (this.scrollInterval === null) { | ||
181 | var newX = mousePoint.x - this.x; | ||
182 | var newY = mousePoint.y - this.y; | ||
183 | var scrollUpStartX = 5; | ||
184 | var scrollUpEndX = scrollUpStartX + this.titleElement.offsetWidth; | ||
185 | var scrollUpStartY = this.titleElement.offsetHeight; | ||
186 | var scrollUpEndY = scrollUpStartY + this.scrollUp.offsetHeight; | ||
187 | |||
188 | var scrollDownStartX = 5; | ||
189 | var scrollDownEndX = scrollUpStartX + this.titleElement.offsetWidth; | ||
190 | var scrollDownStartY = scrollUpEndY + this.optionsRepeater.element.offsetHeight; | ||
191 | //scrollDownEndy to small find out y; | ||
192 | var scrollDownEndY = scrollUpEndY + this.scrollDown.offsetHeight; | ||
193 | console.log(scrollDownStartX,scrollDownEndX, scrollDownStartY, scrollDownEndY, newX, newY ); | ||
194 | if(scrollDownStartX < newX && (scrollDownEndX) > newX) { | ||
195 | if(scrollDownStartY < newY && (scrollDownEndY) > newY) { | ||
196 | debugger; | ||
197 | } | ||
198 | } | ||
199 | } | ||
200 | } | ||
201 | } | ||
202 | }, | ||
203 | |||
204 | handleScroll: { | ||
205 | value: function(direction) { | ||
206 | if(direction === "down") { | ||
207 | this.scrollInterval = setInterval(function() { | ||
208 | self.optionsRepeater.element.scrollTop += 18; | ||
209 | }, 200); | ||
210 | } else { | ||
211 | this.scrollInterval = setInterval(function() { | ||
212 | self.optionsRepeater.element.scrollTop -= 18; | ||
213 | }, 200); | ||
214 | } | ||
215 | } | ||
216 | }, | ||
217 | |||
218 | handleMouseover: { | ||
219 | value: function(e) { | ||
220 | if(this.scrollSpace < this.properties.length) { | ||
221 | if (this.scrollInterval === null) { | ||
222 | if (e._event.target.classList.contains("scrollAreaBottom")) { | ||
223 | self = e._event.target.parentElement.controller; | ||
224 | //e._event.target.parentElement.controller.currentScrollDirection = "down"; | ||
225 | this.scrollInterval = setInterval(function() { | ||
226 | self.optionsRepeater.element.scrollTop += 3; | ||
227 | }, 50); | ||
228 | } else { | ||
229 | this.scrollInterval = setInterval(function() { | ||
230 | self.optionsRepeater.element.scrollTop -= 3; | ||
231 | }, 50); | ||
232 | } | ||
233 | } | ||
234 | } | ||
235 | this.needsDraw = true; | ||
236 | } | ||
237 | }, | ||
238 | |||
239 | |||
240 | |||
241 | handleMouseout: { | ||
242 | value: function() { | ||
243 | clearInterval(this.scrollInterval); | ||
244 | this.scrollInterval = null; | ||
245 | this.currentScrollDirection = null; | ||
144 | } | 246 | } |
145 | }, | 247 | }, |
146 | 248 | ||
@@ -149,11 +251,21 @@ exports.BindingHud = Montage.create(Component, { | |||
149 | this.titleElement.innerHTML = this.title; | 251 | this.titleElement.innerHTML = this.title; |
150 | this.element.style.top = (this.y + this._resizedY) + "px"; | 252 | this.element.style.top = (this.y + this._resizedY) + "px"; |
151 | this.element.style.left = (this.x + this._resizedX) + "px"; | 253 | this.element.style.left = (this.x + this._resizedX) + "px"; |
254 | |||
255 | // if(this.currentScrollDirection !== null) { | ||
256 | // if(this.currentScrollDirection === "up") { | ||
257 | // this.optionsRepeater.element.scrollTop -= 18; | ||
258 | // } else { | ||
259 | // this.optionsRepeater.element.scrollTop += 18; | ||
260 | // } | ||
261 | // } | ||
152 | } | 262 | } |
153 | }, | 263 | }, |
154 | didDraw: { | 264 | didDraw: { |
155 | value: function() { | 265 | value: function() { |
156 | 266 | // if (this.currentScrollDirection !== null) { | |
267 | // this.needsDraw=true; | ||
268 | // } | ||
157 | } | 269 | } |
158 | } | 270 | } |
159 | }); \ No newline at end of file | 271 | }); \ No newline at end of file |