aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
-rw-r--r--js/controllers/objects-controller.js19
-rw-r--r--js/panels/objects/object.reel/object.css2
-rw-r--r--js/panels/objects/object.reel/object.html10
-rw-r--r--js/panels/objects/object.reel/object.js22
-rwxr-xr-xjs/stage/binding-view.reel/binding-hud.reel/binding-hud.js44
-rwxr-xr-xjs/stage/binding-view.reel/binding-view.js8
-rw-r--r--js/stage/objects-tray.reel/objects-tray.html12
-rw-r--r--js/stage/objects-tray.reel/objects-tray.js50
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
7var Montage = require("montage/core/core").Montage, 7var Montage = require("montage/core/core").Montage;
8 Component = require("montage/ui/component").Component;
9 8
10var CATEGORIES = { 9var CATEGORIES = {
11 10
12}; 11};
13 12
14var objectsController = exports.ObjectsController = Montage.create(Component, { 13var 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,
139 y : nodeToPage.y - parentToPage.y
140 }