diff options
4 files changed, 137 insertions, 3 deletions
diff --git a/js/stage/binding-view.reel/binding-hud.reel/binding-hud.css b/js/stage/binding-view.reel/binding-hud.reel/binding-hud.css index f15f1e50..3cc4bb0a 100755 --- a/js/stage/binding-view.reel/binding-hud.reel/binding-hud.css +++ b/js/stage/binding-view.reel/binding-hud.reel/binding-hud.css | |||
@@ -66,6 +66,20 @@ | |||
66 | box-shadow: inset 0px 0px 0px 4px rgba(170, 170, 170, 0.34);/*inset 0px 0px 6px #AAA;*/ | 66 | box-shadow: inset 0px 0px 0px 4px rgba(170, 170, 170, 0.34);/*inset 0px 0px 6px #AAA;*/ |
67 | /*border-bottom-right-radius: 50%; | 67 | /*border-bottom-right-radius: 50%; |
68 | border-top-right-radius: 50%;*/ | 68 | border-top-right-radius: 50%;*/ |
69 | } | ||
70 | |||
71 | .scrollArea { | ||
72 | background-color:#666; | ||
73 | height:12px; | ||
74 | text-align: center; | ||
75 | display: none; | ||
76 | } | ||
69 | 77 | ||
78 | .scrollArea.disabled { | ||
79 | opacity: 0.5; | ||
80 | } | ||
70 | 81 | ||
82 | .hudRepetition { | ||
83 | max-height:54px; | ||
84 | overflow: hidden; | ||
71 | } \ No newline at end of file | 85 | } \ No newline at end of file |
diff --git a/js/stage/binding-view.reel/binding-hud.reel/binding-hud.html b/js/stage/binding-view.reel/binding-hud.reel/binding-hud.html index 82686c7f..56234557 100755 --- a/js/stage/binding-view.reel/binding-hud.reel/binding-hud.html +++ b/js/stage/binding-view.reel/binding-hud.reel/binding-hud.html | |||
@@ -15,7 +15,10 @@ | |||
15 | "prototype": "js/stage/binding-view.reel/binding-hud.reel", | 15 | "prototype": "js/stage/binding-view.reel/binding-hud.reel", |
16 | "properties": { | 16 | "properties": { |
17 | "element": {"#": "bindingHud"}, | 17 | "element": {"#": "bindingHud"}, |
18 | "titleElement": {"#": "title"} | 18 | "titleElement": {"#": "title"}, |
19 | "scrollUp": {"#":"scrollUp"}, | ||
20 | "scrollDown": {"#":"scrollDown"}, | ||
21 | "optionsRepeater": {"@": "repeater"} | ||
19 | } | 22 | } |
20 | }, | 23 | }, |
21 | "repeater": { | 24 | "repeater": { |
@@ -64,9 +67,11 @@ | |||
64 | <body> | 67 | <body> |
65 | <section data-montage-id="bindingHud" class="bindingHud"> | 68 | <section data-montage-id="bindingHud" class="bindingHud"> |
66 | <div data-montage-id="title" class="bindingTitle"></div> | 69 | <div data-montage-id="title" class="bindingTitle"></div> |
70 | <div data-montage-id="scrollUp" class="scrollArea scrollAreaTop disabled">Up</div> | ||
67 | <div data-montage-id="hudRepetition" class="hudRepetition"> | 71 | <div data-montage-id="hudRepetition" class="hudRepetition"> |
68 | <div data-montage-id="hudOption"></div> | 72 | <div data-montage-id="hudOption"></div> |
69 | </div> | 73 | </div> |
74 | <div data-montage-id="scrollDown" class="scrollArea scrollAreaBottom">Down</div> | ||
70 | </section> | 75 | </section> |
71 | 76 | ||
72 | </body> | 77 | </body> |
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() { |