diff options
-rw-r--r-- | js/controllers/objects-controller.js | 19 | ||||
-rw-r--r-- | js/panels/objects/object.reel/object.css | 2 | ||||
-rw-r--r-- | js/panels/objects/object.reel/object.html | 10 | ||||
-rw-r--r-- | js/panels/objects/object.reel/object.js | 22 | ||||
-rwxr-xr-x | js/stage/binding-view.reel/binding-hud.reel/binding-hud.js | 44 | ||||
-rwxr-xr-x | js/stage/binding-view.reel/binding-view.js | 8 | ||||
-rw-r--r-- | js/stage/objects-tray.reel/objects-tray.html | 12 | ||||
-rw-r--r-- | js/stage/objects-tray.reel/objects-tray.js | 50 |
8 files changed, 139 insertions, 28 deletions
diff --git a/js/controllers/objects-controller.js b/js/controllers/objects-controller.js index b75d2126..54ff14ba 100644 --- a/js/controllers/objects-controller.js +++ b/js/controllers/objects-controller.js | |||
@@ -4,14 +4,13 @@ | |||
4 | (c) Copyright 2011 Motorola Mobility, Inc. All Rights Reserved. | 4 | (c) Copyright 2011 Motorola Mobility, Inc. All Rights Reserved. |
5 | </copyright> */ | 5 | </copyright> */ |
6 | 6 | ||
7 | var Montage = require("montage/core/core").Montage, | 7 | var Montage = require("montage/core/core").Montage; |
8 | Component = require("montage/ui/component").Component; | ||
9 | 8 | ||
10 | var CATEGORIES = { | 9 | var CATEGORIES = { |
11 | 10 | ||
12 | }; | 11 | }; |
13 | 12 | ||
14 | var objectsController = exports.ObjectsController = Montage.create(Component, { | 13 | var objectsController = exports.ObjectsController = Montage.create(Montage, { |
15 | 14 | ||
16 | _currentDocument : { | 15 | _currentDocument : { |
17 | value : null, | 16 | value : null, |
@@ -191,6 +190,8 @@ var objectsController = exports.ObjectsController = Montage.create(Component, { | |||
191 | } | 190 | } |
192 | }, | 191 | }, |
193 | 192 | ||
193 | /* ----- Utils ----- */ | ||
194 | |||
194 | _hasPrototype : { | 195 | _hasPrototype : { |
195 | value: function(object, prototypeName) { | 196 | value: function(object, prototypeName) { |
196 | var prototypes = this.getPrototypes(object).map(function(proto) { | 197 | var prototypes = this.getPrototypes(object).map(function(proto) { |
@@ -202,6 +203,18 @@ var objectsController = exports.ObjectsController = Montage.create(Component, { | |||
202 | } | 203 | } |
203 | }, | 204 | }, |
204 | 205 | ||
206 | ///// Returns true if the element is "non-visual", i.e. is not a component, | ||
207 | ///// and has not element property | ||
208 | |||
209 | isOffStageObject : { | ||
210 | value: function(object) { | ||
211 | var isComponent = this._hasPrototype(object, "Component"), | ||
212 | hasValidElement = object.element && object.element.parentNode; | ||
213 | |||
214 | return !isComponent || !hasValidElement; | ||
215 | } | ||
216 | }, | ||
217 | |||
205 | /* ---- Bindable controller properties ---- */ | 218 | /* ---- Bindable controller properties ---- */ |
206 | 219 | ||
207 | currentObjectBindings : { | 220 | currentObjectBindings : { |
diff --git a/js/panels/objects/object.reel/object.css b/js/panels/objects/object.reel/object.css index f090ade6..79b7647c 100644 --- a/js/panels/objects/object.reel/object.css +++ b/js/panels/objects/object.reel/object.css | |||
@@ -43,7 +43,7 @@ | |||
43 | margin: 0 auto 5px; | 43 | margin: 0 auto 5px; |
44 | width: 50px; | 44 | width: 50px; |
45 | } | 45 | } |
46 | .object-label { | 46 | .object-name { |
47 | color: #fff; | 47 | color: #fff; |
48 | display: block; | 48 | display: block; |
49 | text-align: center; | 49 | text-align: center; |
diff --git a/js/panels/objects/object.reel/object.html b/js/panels/objects/object.reel/object.html index 6274f480..f9de1499 100644 --- a/js/panels/objects/object.reel/object.html +++ b/js/panels/objects/object.reel/object.html | |||
@@ -21,14 +21,10 @@ | |||
21 | "labelText": { | 21 | "labelText": { |
22 | "prototype": "montage/ui/dynamic-text.reel", | 22 | "prototype": "montage/ui/dynamic-text.reel", |
23 | "properties": { | 23 | "properties": { |
24 | "element": {"#": "label" } | 24 | "element": {"#": "name" } |
25 | }, | 25 | }, |
26 | "bindings": { | 26 | "bindings": { |
27 | "value" : { | 27 | "value" : {"<-": "@owner.name"} |
28 | "boundObject": {"@": "owner"}, | ||
29 | "boundObjectPropertyPath": "label", | ||
30 | "oneway": true | ||
31 | } | ||
32 | } | 28 | } |
33 | } | 29 | } |
34 | 30 | ||
@@ -41,7 +37,7 @@ | |||
41 | 37 | ||
42 | <li data-montage-id="object" draggable="true"> | 38 | <li data-montage-id="object" draggable="true"> |
43 | <div data-montage-id="object-icon" class="object-icon"></div> | 39 | <div data-montage-id="object-icon" class="object-icon"></div> |
44 | <span data-montage-id="label" class="object-label"></span> | 40 | <span data-montage-id="name" class="object-name"></span> |
45 | </li> | 41 | </li> |
46 | 42 | ||
47 | </body> | 43 | </body> |
diff --git a/js/panels/objects/object.reel/object.js b/js/panels/objects/object.reel/object.js index 76f1b5bf..6f8f5c92 100644 --- a/js/panels/objects/object.reel/object.js +++ b/js/panels/objects/object.reel/object.js | |||
@@ -48,8 +48,6 @@ exports.Object = Montage.create(Component, { | |||
48 | 48 | ||
49 | this._identifier = value; | 49 | this._identifier = value; |
50 | 50 | ||
51 | this.label = value; | ||
52 | |||
53 | this.needsDraw = true; | 51 | this.needsDraw = true; |
54 | } | 52 | } |
55 | 53 | ||
@@ -67,14 +65,30 @@ exports.Object = Montage.create(Component, { | |||
67 | 65 | ||
68 | this._montageMetaData = data; | 66 | this._montageMetaData = data; |
69 | 67 | ||
70 | if(!this.identifier && data.label) { | 68 | if(data.label) { |
71 | this.label = data.label; | 69 | this.name = data.label; |
72 | this.needsDraw = true; | 70 | this.needsDraw = true; |
73 | } | 71 | } |
74 | } | 72 | } |
75 | 73 | ||
76 | }, | 74 | }, |
77 | 75 | ||
76 | /* --------------------- | ||
77 | Event Handlers | ||
78 | --------------------- */ | ||
79 | |||
80 | handleClick: { | ||
81 | value: function(e) { | ||
82 | this.parentComponent.parentComponent.displayHUDForObject(this.sourceObject); | ||
83 | } | ||
84 | }, | ||
85 | |||
86 | prepareForDraw : { | ||
87 | value: function() { | ||
88 | this.iconElement.addEventListener('click', this, false); | ||
89 | } | ||
90 | }, | ||
91 | |||
78 | draw : { | 92 | draw : { |
79 | value: function() { | 93 | value: function() { |
80 | if(this.type) { | 94 | if(this.type) { |
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 0893e8d8..dd88bef7 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 | |||
@@ -52,17 +52,35 @@ exports.BindingHud = Montage.create(Component, { | |||
52 | return this._userComponent; | 52 | return this._userComponent; |
53 | }, | 53 | }, |
54 | set: function(val) { | 54 | set: function(val) { |
55 | if (typeof(val) !== "undefined") { | 55 | if(!val) { return; } |
56 | this._userComponent = val; | 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 { | ||
57 | this.title = val.identifier; | 77 | this.title = val.identifier; |
58 | this.x = val.element.offsetLeft; | 78 | this.x = val.element.offsetLeft; |
59 | this.y = val.element.offsetTop; | 79 | this.y = val.element.offsetTop; |
60 | this.properties = this.application.ninja.objectsController.getPropertiesFromObject(val, true); | ||
61 | this.application.ninja.objectsController.getObjectBindings(this.userComponent).forEach(function(obj) { | ||
62 | this.boundProperties.push(obj.sourceObjectPropertyPath); | ||
63 | }.bind(this)); | ||
64 | this.needsDraw = true; | ||
65 | } | 80 | } |
81 | |||
82 | this.needsDraw = true; | ||
83 | |||
66 | } | 84 | } |
67 | }, | 85 | }, |
68 | 86 | ||
@@ -111,6 +129,18 @@ exports.BindingHud = Montage.create(Component, { | |||
111 | } | 129 | } |
112 | }, | 130 | }, |
113 | 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, | ||