diff options
author | Armen Kesablyan | 2012-06-05 12:55:44 -0700 |
---|---|---|
committer | Armen Kesablyan | 2012-06-05 12:55:44 -0700 |
commit | 5ecbbe908a5527dc42d461c8ddfd33b4c7e0ba4f (patch) | |
tree | 76d796ac65f603746a5618849fd891f835677ad5 | |
parent | cd089f6692934a68bda7c303928a7c78dd13ac07 (diff) | |
parent | 9db979373f80162d463e23d400e97f37c75267d1 (diff) | |
download | ninja-5ecbbe908a5527dc42d461c8ddfd33b4c7e0ba4f.tar.gz |
Merge branch 'binding' of https://github.com/dhg637/ninja-internal into binding
9 files changed, 263 insertions, 11 deletions
diff --git a/js/controllers/objects-controller.js b/js/controllers/objects-controller.js index 2c9f2d66..32f24d5c 100644 --- a/js/controllers/objects-controller.js +++ b/js/controllers/objects-controller.js | |||
@@ -113,12 +113,38 @@ var objectsController = exports.ObjectsController = Montage.create(Component, { | |||
113 | 113 | ||
114 | /* ---- Bindable Properties ---- */ | 114 | /* ---- Bindable Properties ---- */ |
115 | 115 | ||
116 | getEnumerableProperties : { | 116 | getPropertyList : { |
117 | value: function(object, excludeUnderscoreProperties) { | 117 | value: function(object, excludeUnderscoreProperties) { |
118 | var object_i = object, | ||
119 | prototypes = [object_i]; | ||
120 | |||
121 | ///// Collect prototypes | ||
122 | while(Object.getPrototypeOf(object_i)) { | ||
123 | object_i = Object.getPrototypeOf(object_i); | ||
124 | prototypes.push(object_i); | ||
125 | } | ||
126 | |||
127 | return prototypes.map(function(proto) { | ||
128 | var metadata = proto._montage_metadata, | ||
129 | objectName = (metadata) ? metadata.objectName : "Object"; | ||
130 | |||
131 | return { | ||
132 | category : objectName, | ||
133 | properties : this.getPropertiesFromObject(proto) | ||
134 | }; | ||
135 | }, this); | ||
136 | |||
137 | } | ||
138 | }, | ||
139 | |||
140 | getPropertiesFromObject : { | ||
141 | value: function (object, excludeUnderscoreProperties) { | ||
118 | var properties = []; | 142 | var properties = []; |
119 | 143 | ||
120 | for(var key in object) { | 144 | for(var key in object) { |
121 | properties.push(key); | 145 | if(object.hasOwnProperty(key)) { |
146 | properties.push(key); | ||
147 | } | ||
122 | } | 148 | } |
123 | 149 | ||
124 | if(excludeUnderscoreProperties) { | 150 | if(excludeUnderscoreProperties) { |
@@ -146,7 +172,12 @@ var objectsController = exports.ObjectsController = Montage.create(Component, { | |||
146 | set: function(value) { | 172 | set: function(value) { |
147 | if(value === this._currentObject) { return; } | 173 | if(value === this._currentObject) { return; } |
148 | 174 | ||
149 | this.currentObjectBindings = this.getObjectBindings(value); | 175 | if(value) { |
176 | this.currentObjectBindings = this.getObjectBindings(value); | ||
177 | console.log("Property list", this.getPropertyList(value, true)); | ||
178 | } else { | ||
179 | this.currentObjectBindings = []; | ||
180 | } | ||
150 | 181 | ||
151 | this._currentObject = value; | 182 | this._currentObject = value; |
152 | } | 183 | } |
diff --git a/js/panels/binding-panel.reel/binding-panel.css b/js/panels/binding-panel.reel/binding-panel.css index f29b66c1..e3dcf140 100644 --- a/js/panels/binding-panel.reel/binding-panel.css +++ b/js/panels/binding-panel.reel/binding-panel.css | |||
@@ -4,6 +4,10 @@ | |||
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 | .binding-panel { | ||
8 | position: relative; | ||
9 | height: 100%; | ||
10 | } | ||
7 | 11 | ||
8 | .bindings-list { | 12 | .bindings-list { |
9 | padding: 0; | 13 | padding: 0; |
diff --git a/js/panels/binding-panel.reel/binding-panel.html b/js/panels/binding-panel.reel/binding-panel.html index 2850b67c..a926da8d 100644 --- a/js/panels/binding-panel.reel/binding-panel.html +++ b/js/panels/binding-panel.reel/binding-panel.html | |||
@@ -13,7 +13,8 @@ | |||
13 | "owner": { | 13 | "owner": { |
14 | "prototype": "js/panels/binding-panel.reel", | 14 | "prototype": "js/panels/binding-panel.reel", |
15 | "properties": { | 15 | "properties": { |
16 | "element": {"#": "binding"} | 16 | "element": {"#": "binding"}, |
17 | "editView": {"@": "editBinding"} | ||
17 | } | 18 | } |
18 | }, | 19 | }, |
19 | "arrayController": { | 20 | "arrayController": { |
@@ -41,16 +42,23 @@ | |||
41 | "boundObject": {"<-": "@repetition.objectAtCurrentIteration.boundObject"}, | 42 | "boundObject": {"<-": "@repetition.objectAtCurrentIteration.boundObject"}, |
42 | "oneway": {"<-": "@repetition.objectAtCurrentIteration.oneway"} | 43 | "oneway": {"<-": "@repetition.objectAtCurrentIteration.oneway"} |
43 | } | 44 | } |
45 | }, | ||
46 | "editBinding": { | ||
47 | "prototype": "js/panels/binding/edit-binding-view.reel", | ||
48 | "properties": { | ||
49 | "element": {"#": "edit-binding-view" } | ||
50 | } | ||
44 | } | 51 | } |
45 | 52 | ||
46 | } | 53 | } |
47 | </script> | 54 | </script> |
48 | </head> | 55 | </head> |
49 | <body> | 56 | <body> |
50 | <div data-montage-id="binding"> | 57 | <div data-montage-id="binding" class="binding-panel"> |
51 | <ul data-montage-id="bindings-list" class="bindings-list"> | 58 | <ul data-montage-id="bindings-list" class="bindings-list"> |
52 | <li data-montage-id="binding-item" class="binding-item"></li> | 59 | <li data-montage-id="binding-item" class="binding-item"></li> |
53 | </ul> | 60 | </ul> |
61 | <div data-montage-id="edit-binding-view" class="edit-binding-view"></div> | ||
54 | </div> | 62 | </div> |
55 | </body> | 63 | </body> |
56 | </html> \ No newline at end of file | 64 | </html> \ No newline at end of file |
diff --git a/js/panels/binding-panel.reel/binding-panel.js b/js/panels/binding-panel.reel/binding-panel.js index 9fdec416..c2ce556c 100644 --- a/js/panels/binding-panel.reel/binding-panel.js +++ b/js/panels/binding-panel.reel/binding-panel.js | |||
@@ -4,10 +4,34 @@ var Montage = require("montage/core/core").Montage, | |||
4 | 4 | ||
5 | exports.BindingPanel = Montage.create(Component, { | 5 | exports.BindingPanel = Montage.create(Component, { |
6 | 6 | ||
7 | bindings : { | 7 | bindings : { value: null }, |
8 | editView : { value: null }, | ||
9 | editingClass : { value: 'editing-binding' }, | ||
10 | _editing: { value: null }, | ||
11 | editing: { | ||
12 | get: function() { | ||
13 | return this._editing; | ||
14 | }, | ||
15 | set: function(value) { | ||
16 | if(value === this._editing) { return; } | ||
17 | this._editing = value; | ||
18 | this.needsDraw = true; | ||
19 | } | ||
20 | }, | ||
21 | _translateDistance : { | ||
8 | value: null | 22 | value: null |
9 | }, | 23 | }, |
10 | 24 | ||
25 | displayEditView : { | ||
26 | value: function(bindingArgs) { | ||
27 | this.editing = true; | ||
28 | } | ||
29 | }, | ||
30 | |||
31 | /* ------------------------- | ||
32 | Draw Cycle | ||
33 | ------------------------- */ | ||
34 | |||
11 | templateDidLoad : { | 35 | templateDidLoad : { |
12 | value: function() { | 36 | value: function() { |
13 | Object.defineBinding(this, 'bindings', { | 37 | Object.defineBinding(this, 'bindings', { |
@@ -18,9 +42,23 @@ exports.BindingPanel = Montage.create(Component, { | |||
18 | } | 42 | } |
19 | }, | 43 | }, |
20 | 44 | ||
21 | prepareForDraw: { | 45 | willDraw: { |
22 | value: function() { | 46 | value: function() { |
23 | console.log("test- objects"); | 47 | if(this.editing) { |
48 | this._translateDistance = this.element.offsetWidth; | ||
49 | } | ||
50 | } | ||
51 | }, | ||
52 | |||
53 | draw : { | ||
54 | value: function() { | ||
55 | var transStr = '-webkit-transform'; | ||
56 | |||
57 | if(this.editing) { | ||
58 | this.editView.element.style.setProperty(transStr, 'translate3d(-'+ this._translateDistance + 'px,0,0)'); | ||
59 | } else { | ||
60 | this.editView.element.style.removeProperty(transStr); | ||
61 | } | ||
24 | } | 62 | } |
25 | } | 63 | } |
26 | }); \ No newline at end of file | 64 | }); \ No newline at end of file |
diff --git a/js/panels/binding/binding-item.reel/binding-item.html b/js/panels/binding/binding-item.reel/binding-item.html index 79644a7a..95a349f8 100644 --- a/js/panels/binding/binding-item.reel/binding-item.html +++ b/js/panels/binding/binding-item.reel/binding-item.html | |||
@@ -14,6 +14,7 @@ | |||
14 | "prototype": "js/panels/binding/binding-item.reel", | 14 | "prototype": "js/panels/binding/binding-item.reel", |
15 | "properties": { | 15 | "properties": { |
16 | "element": {"#": "binding-item"}, | 16 | "element": {"#": "binding-item"}, |
17 | "editButton": {"@": "editButton" }, | ||
17 | "directionToggleButton": {"@": "directionToggleButton" } | 18 | "directionToggleButton": {"@": "directionToggleButton" } |
18 | } | 19 | } |
19 | }, | 20 | }, |
diff --git a/js/panels/binding/binding-item.reel/binding-item.js b/js/panels/binding/binding-item.reel/binding-item.js index 0fc06ea8..55230fc3 100644 --- a/js/panels/binding/binding-item.reel/binding-item.js +++ b/js/panels/binding/binding-item.reel/binding-item.js | |||
@@ -20,8 +20,10 @@ exports.BindingItem = Montage.create(Component, { | |||
20 | set: function(value) { |