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 | 313 |
1 files changed, 313 insertions, 0 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 new file mode 100755 index 00000000..52bc7236 --- /dev/null +++ b/js/stage/binding-view.reel/binding-hud.reel/binding-hud.js | |||
@@ -0,0 +1,313 @@ | |||
1 | /* <copyright> | ||
2 | This file contains proprietary software owned by Motorola Mobility, Inc.<br/> | ||
3 | No rights, expressed or implied, whatsoever to this software are provided by Motorola Mobility, Inc. hereunder.<br/> | ||
4 | (c) Copyright 2011 Motorola Mobility, Inc. All Rights Reserved. | ||
5 | </copyright> */ | ||
6 | |||
7 | /** | ||
8 | @requires montage/core/core | ||
9 | @requires montage/ui/component | ||
10 | */ | ||
11 | var Montage = require("montage/core/core").Montage, | ||
12 | Component = require("montage/ui/component").Component; | ||
13 | |||
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 | }, | ||
33 | _bindingArgs: { | ||
34 | value: null | ||
35 | }, | ||
36 | |||
37 | titleElement: { | ||
38 | value: null | ||
39 | }, | ||
40 | |||
41 | boundProperties: { | ||
42 | value: [] | ||
43 | }, | ||
44 | |||
45 | optionsRepeater: { | ||
46 | value: null | ||
47 | }, | ||
48 | |||
49 | _userComponent: { value: null }, | ||
50 | userComponent: { | ||
51 | get: function() { | ||
52 | return this._userComponent; | ||
53 | }, | ||
54 | set: function(val) { | ||
55 | if(!val) { return; } | ||
56 | |||
57 | var controller = this.application.ninja.objectsController, | ||
58 | bindingView = this.parentComponent.parentComponent, | ||
59 | isOffStage, icon, iconOffsets; | ||
60 | |||
61 | this._userComponent = val; | ||
62 | this.properties = controller.getPropertiesFromObject(val, true); | ||
63 | |||
64 | controller.getObjectBindings(this.userComponent).forEach(function(obj) { | ||
65 | this.boundProperties.push(obj.sourceObjectPropertyPath); | ||
66 | }, this); | ||
67 | |||
68 | isOffStage = controller.isOffStageObject(val); | ||
69 | |||
70 | if(isOffStage) { | ||
71 | icon = bindingView.getOffStageIcon(val); | ||
72 | iconOffsets = this.getElementOffsetToParent(icon.element, bindingView.element); | ||
73 | this.title = icon.name; | ||
74 | this.x = iconOffsets.x; | ||
75 | this.y = iconOffsets.y - 80; | ||
76 | } else { | ||
77 | this.title = val.identifier; | ||
78 | this.x = val.element.offsetLeft; | ||
79 | this.y = val.element.offsetTop; | ||
80 | } | ||
81 | |||
82 | this.needsDraw = true; | ||
83 | |||
84 | } | ||
85 | }, | ||
86 | |||
87 | properties: { value: [] }, | ||
88 | |||
89 | _isResizing: { | ||
90 | value: null | ||
91 | }, | ||
92 | |||
93 | _resizedX : { | ||
94 | value: 0 | ||
95 | }, | ||
96 | |||
97 | _resizedY: { | ||
98 | value: 0 | ||
99 | }, | ||
100 | |||
101 | handleResizeStart: { | ||
102 | value:function(e) { | ||
103 | this.isResizing = true; | ||
104 | this.x = parseInt(this.x); | ||
105 | this.y = parseInt(this.y); | ||
106 | this.needsDraw = true; | ||
107 | this.parentComponent.parentComponent.needsDraw = true; | ||
108 | } | ||
109 | }, | ||
110 | |||
111 | handleResizeMove: { | ||
112 | value:function(e) { | ||
113 | this._resizedY = e._event.dY; | ||
114 | this._resizedX = e._event.dX; | ||
115 | this.needsDraw = true; | ||
116 | this.parentComponent.parentComponent.needsDraw = true; | ||
117 | } | ||
118 | }, | ||
119 | |||
120 | handleResizeEnd: { | ||
121 | value: function(e) { | ||
122 | this.x += this._resizedX; | ||
123 | this.y += this._resizedY; | ||
124 | this._resizedX = 0; | ||
125 | this._resizedY = 0; | ||
126 | this.isResizing = false; | ||
127 | this.needsDraw = true; | ||
128 | this.parentComponent.parentComponent.needsDraw = true; | ||
129 | } | ||
130 | }, | ||
131 | |||
132 | getElementOffsetToParent : { | ||
133 | value: function(element, parent) { | ||
134 | var nodeToPage = webkitConvertPointFromNodeToPage(element, new WebKitPoint(0, 0)), | ||
135 | parentToPage = webkitConvertPointFromNodeToPage(parent, new WebKitPoint(0, 0)); | ||
136 | |||
137 | return { | ||
138 | x : nodeToPage.x - parentToPage.x, | ||
139 | y : nodeToPage.y - parentToPage.y | ||
140 | } | ||
141 | } | ||
142 | }, | ||
143 | |||
144 | _x: { | ||
145 | value: 20 | ||
146 | }, | ||
147 | |||
148 | _y: { | ||
149 | value: 100 | ||
150 | }, | ||
151 | |||
152 | x: { | ||
153 | get: function() { | ||
154 | return this._x; | ||
155 | }, | ||
156 | set: function(val) { | ||
157 | this._x = val; | ||
158 | this.needsDraw = true; | ||
159 | } | ||
160 | }, | ||
161 | |||
162 | y: { | ||
163 | get: function() { | ||
164 | return this._y; | ||
165 | }, | ||
166 | set: function(val) { | ||
167 | this._y = val; | ||
168 | this.needsDraw = true; | ||
169 | } | ||
170 | }, | ||
171 | |||
172 | _title: { | ||
173 | value: "default" | ||
174 | }, | ||
175 | |||
176 | title: { | ||
177 | get: function() { | ||
178 | return this._title; | ||
179 | }, | ||
180 | set: function(val) { | ||
181 | this._title = val; | ||
182 | } | ||
183 | }, | ||
184 | |||
185 | prepareForDraw: { | ||
186 | value: function() { | ||
187 | // var arrProperties = this.application.ninja.objectsController.getEnumerableProperties(this._bindingArgs.sourceObject, true); | ||
188 | // arrProperties.forEach(function(obj) { | ||
189 | // var objBound = false; | ||
190 | // if(this._bindingArgs._boundObjectPropertyPath === obj) { | ||
191 | // objBound = true; | ||
192 | // } | ||
193 | // this.properties.push({"title":obj, "bound": objBound}); | ||
194 | // }.bind(this)); | ||
195 | //this.parentComponent.parentComponent.handleShowBinding(this.application.ninja.objectsController.getObjectBindings(this.userComponent)); | ||
196 | if(this.scrollSpace < this.properties.length) { | ||
197 | this.scrollUp.addEventListener("mouseover", this); | ||
198 | this.scrollDown.addEventListener("mouseover", this); | ||
199 | this.scrollUp.addEventListener("mouseout", this); | ||
200 | this.scrollDown.addEventListener("mouseout", this); | ||
201 | this.scrollUp.style.display = "block"; | ||
202 | this.scrollDown.style.display = "block"; | ||
203 | } | ||
204 | } | ||
205 | }, | ||
206 | |||
207 | isOverScroller: { | ||
208 | value: function(e) { | ||
209 | if(this.scrollSpace < this.properties.length) { | ||
210 | var isOverScroller = false; | ||
211 | var mousePoint = webkitConvertPointFromPageToNode(this.element, new WebKitPoint(e.pageX, e.pageY)); | ||
212 | |||
213 | var scrollUpStartX = 5; | ||
214 | var scrollUpEndX = scrollUpStartX + this.titleElement.offsetWidth; | ||
215 | var scrollUpStartY = this.titleElement.offsetHeight + 5; | ||
216 | var scrollUpEndY = scrollUpStartY + this.scrollUp.offsetHeight; | ||
217 | if(scrollUpStartX < mousePoint.x && (scrollUpEndX) > mousePoint.x) { | ||