diff options
author | Nivesh Rajbhandari | 2012-06-29 11:50:17 -0700 |
---|---|---|
committer | Nivesh Rajbhandari | 2012-06-29 11:50:17 -0700 |
commit | 81d75ac08ff24dc3078d79a9133e54f592c23026 (patch) | |
tree | 4f4136503c87a72f7af67a54dad69c14469ee01e /js/stage/binding-view.reel/binding-hud.reel/binding-hud.js | |
parent | 01783536d2245b474eb1f89df673bfabb006cbdd (diff) | |
parent | ecd9e3b3b09695e3e7115c04e75add5a20c5c6fe (diff) | |
download | ninja-81d75ac08ff24dc3078d79a9133e54f592c23026.tar.gz |
Merge branch 'refs/heads/ninja-internal' into ColorGradientFix
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 | 105 |
1 files changed, 74 insertions, 31 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 9918b06d..1b0af09d 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 | |||
@@ -10,6 +10,7 @@ No rights, expressed or implied, whatsoever to this software are provided by Mot | |||
10 | */ | 10 | */ |
11 | var Montage = require("montage/core/core").Montage, | 11 | var Montage = require("montage/core/core").Montage, |
12 | Component = require("montage/ui/component").Component; | 12 | Component = require("montage/ui/component").Component; |
13 | var ElementsMediator = require("js/mediators/element-mediator").ElementMediator; | ||
13 | 14 | ||
14 | exports.BindingHud = Montage.create(Component, { | 15 | exports.BindingHud = Montage.create(Component, { |
15 | scrollUp: { | 16 | scrollUp: { |
@@ -45,11 +46,14 @@ exports.BindingHud = Montage.create(Component, { | |||
45 | optionsRepeater: { | 46 | optionsRepeater: { |
46 | value: null | 47 | value: null |
47 | }, | 48 | }, |
48 | 49 | panelData : { | |
49 | _userComponent: { value: null }, | 50 | value: null, |
50 | userComponent: { | 51 | serializable: true |
52 | }, | ||
53 | _userElement: { value: null }, | ||
54 | userElement: { | ||
51 | get: function() { | 55 | get: function() { |
52 | return this._userComponent; | 56 | return this._userElement; |
53 | }, | 57 | }, |
54 | set: function(val) { | 58 | set: function(val) { |
55 | if(!val) { return; } | 59 | if(!val) { return; } |
@@ -58,14 +62,14 @@ exports.BindingHud = Montage.create(Component, { | |||
58 | bindingView = this.parentComponent.parentComponent, | 62 | bindingView = this.parentComponent.parentComponent, |
59 | isOffStage, icon, iconOffsets; | 63 | isOffStage, icon, iconOffsets; |
60 | 64 | ||
61 | this._userComponent = val; | 65 | this._userElement = val; |
62 | this.properties = controller.getPropertiesFromObject(val, true); | 66 | this.properties = this.getPropertyList(val.controller); //controller.getPropertiesFromObject(val, true); |
63 | 67 | ||
64 | controller.getObjectBindings(this.userComponent).forEach(function(obj) { | 68 | controller.getObjectBindings(this._userElement.controller).forEach(function(obj) { |
65 | this.boundProperties.push(obj.sourceObjectPropertyPath); | 69 | this.boundProperties.push(obj.sourceObjectPropertyPath); |
66 | }, this); | 70 | }, this); |
67 | 71 | ||
68 | isOffStage = controller.isOffStageObject(val); | 72 | isOffStage = controller.isOffStageObject(val.controller); |
69 | 73 | ||
70 | if(isOffStage) { | 74 | if(isOffStage) { |
71 | icon = bindingView.getOffStageIcon(val); | 75 | icon = bindingView.getOffStageIcon(val); |
@@ -74,13 +78,52 @@ exports.BindingHud = Montage.create(Component, { | |||
74 | this.x = iconOffsets.x; | 78 | this.x = iconOffsets.x; |
75 | this.y = iconOffsets.y - 80; | 79 | this.y = iconOffsets.y - 80; |
76 | } else { | 80 | } else { |
77 | this.title = val.identifier; | 81 | this.title = this._userElement.controller.identifier; |
78 | this.x = val.element.offsetLeft; | 82 | this.x = this._userElement.offsetLeft; |
79 | this.y = val.element.offsetTop; | 83 | this.y = this._userElement.offsetTop; |
84 | // this.x = parseInt(ElementsMediator.getProperty(val, "left")); | ||
85 | // this.y = parseInt(ElementsMediator.getProperty(val, "top")); | ||
80 | } | 86 | } |
81 | |||
82 | this.needsDraw = true; | 87 | this.needsDraw = true; |
88 | } | ||
89 | }, | ||
90 | |||
91 | getPropertyList : { | ||
92 | value: function(component) { | ||
93 | var props = this.application.ninja.objectsController.getPropertiesFromObject(component, true), | ||
94 | promotedProperties = [], | ||
95 | objectName; | ||
96 | |||
97 | ///// Mapper - property to property object | ||
98 | function propertyMapper(property) { | ||
99 | return { | ||
100 | property: property, | ||
101 | promoted: promotedProperties.indexOf(property) !== -1 | ||
102 | } | ||
103 | } | ||
104 | |||
105 | if(this.userElement.controller._montage_metadata) { | ||
106 | objectName = this.userElement.controller._montage_metadata.objectName; | ||
107 | |||
108 | if(this.panelData && this.panelData[objectName + 'Pi']) { | ||
109 | |||
110 | promotedProperties = this.panelData[objectName + 'Pi'][0].Section.map(function(item) { | ||
111 | return item[0].prop; | ||
112 | }); | ||
113 | |||
114 | //// Remove promoted properties from current position in array | ||
115 | props = props.filter(function(prop) { | ||
116 | return promotedProperties.indexOf(prop) === -1; | ||
117 | }); | ||
118 | |||
119 | //// Add them at the top | ||
120 | |||
121 | props = promotedProperties.concat(props); | ||
122 | |||
123 | } | ||
124 | } | ||
83 | 125 | ||
126 | return props.map(propertyMapper); | ||
84 | } | 127 | } |
85 | }, | 128 | }, |
86 | 129 | ||
@@ -248,11 +291,11 @@ exports.BindingHud = Montage.create(Component, { | |||
248 | if(direction === "down") { | 291 | if(direction === "down") { |
249 | this.scrollInterval = setInterval(function() { | 292 | this.scrollInterval = setInterval(function() { |
250 | this.optionsRepeater.element.scrollTop += 3; | 293 | this.optionsRepeater.element.scrollTop += 3; |
251 | }.bind(this), 50); | 294 | }.bind(this), 20); |
252 | } else { | 295 | } else { |
253 | this.scrollInterval = setInterval(function() { | 296 | this.scrollInterval = setInterval(function() { |
254 | this.optionsRepeater.element.scrollTop -= 3; | 297 | this.optionsRepeater.element.scrollTop -= 3; |
255 | }.bind(this), 50); | 298 | }.bind(this), 20); |
256 | } | 299 | } |
257 | } | 300 | } |
258 | } | 301 | } |
@@ -260,22 +303,17 @@ exports.BindingHud = Montage.create(Component, { | |||
260 | 303 | ||
261 | handleMouseover: { | 304 | handleMouseover: { |
262 | value: function(e) { | 305 | value: function(e) { |
306 | |||
263 | if(this.scrollSpace < this.properties.length) { | 307 | if(this.scrollSpace < this.properties.length) { |
264 | if (this.scrollInterval === null) { | 308 | if (this.scrollInterval === null) { |
265 | if (e._event.target.classList.contains("scrollAreaBottom")) { | 309 | if (e._event.target.classList.contains("scrollAreaBottom")) { |
266 | self = e._event.target.parentElement.controller; | 310 | this.currentScrollDirection = "down"; |
267 | //e._event.target.parentElement.controller.currentScrollDirection = "down"; | ||
268 | this.scrollInterval = setInterval(function() { | ||
269 | self.optionsRepeater.element.scrollTop += 3; | ||
270 | }, 50); | ||
271 | } else { | 311 | } else { |
272 | this.scrollInterval = setInterval(function() { | 312 | this.currentScrollDirection = "up"; |
273 | self.optionsRepeater.element.scrollTop -= 3; | ||
274 | }, 50); | ||
275 | } | 313 | } |
276 | } | 314 | } |
277 | } | 315 | } |
278 | //this.needsDraw = true; | 316 | this.needsDraw = true; |
279 | } | 317 | } |
280 | }, | 318 | }, |
281 | 319 | ||
@@ -291,17 +329,22 @@ exports.BindingHud = Montage.create(Component, { | |||
291 | 329 | ||
292 | draw: { | 330 | draw: { |
293 | value: function() { | 331 | value: function() { |
332 | |||
333 | if(this.currentScrollDirection !== null) { | ||
334 | this.scrollInterval = setInterval(function() { | ||
335 | if(this.currentScrollDirection === "down") { | ||
336 | this.optionsRepeater.element.scrollTop += 3; | ||
337 | } else { | ||
338 | this.optionsRepeater.element.scrollTop -= 3; | ||
339 | } | ||
340 | }.bind(this), 20); | ||
341 | } else { | ||
342 | clearInterval(this.scrollInterval); | ||
343 | } | ||
344 | |||
294 | this.titleElement.innerHTML = this.title; | 345 | this.titleElement.innerHTML = this.title; |
295 | this.element.style.top = (this.y + this._resizedY) + "px"; | 346 | this.element.style.top = (this.y + this._resizedY) + "px"; |
296 | this.element.style.left = (this.x + this._resizedX) + "px"; | 347 | this.element.style.left = (this.x + this._resizedX) + "px"; |
297 | |||
298 | // if(this.currentScrollDirection !== null) { | ||
299 | // if(this.currentScrollDirection === "up") { | ||
300 | // this.optionsRepeater.element.scrollTop -= 18; | ||
301 | // } else { | ||
302 | // this.optionsRepeater.element.scrollTop += 18; | ||
303 | // } | ||
304 | // } | ||
305 | } | 348 | } |
306 | }, | 349 | }, |
307 | didDraw: { | 350 | didDraw: { |