diff options
author | Armen Kesablyan | 2012-06-11 10:25:49 -0700 |
---|---|---|
committer | Armen Kesablyan | 2012-06-11 10:25:49 -0700 |
commit | aaac232727c82361771a0804049ada8fae17a549 (patch) | |
tree | cd9110dacb9e39e98a5d8bbd7f1dad2780cbcc1a /js | |
parent | 6a27268ebf1cd5fa7bf8313eb5712fd5f6985758 (diff) | |
parent | dbb36888eda1f25387852ea79aef89d22dfd7799 (diff) | |
download | ninja-aaac232727c82361771a0804049ada8fae17a549.tar.gz |
Merge pull request #11 from ericguzman/binding
Binding
Diffstat (limited to 'js')
-rw-r--r-- | js/components/hintable.reel/hintable.js | 7 | ||||
-rw-r--r-- | js/controllers/objects-controller.js | 16 | ||||
-rw-r--r-- | js/document/templates/app/main.js | 2 | ||||
-rw-r--r-- | js/panels/binding-panel.reel/binding-panel.css | 7 | ||||
-rw-r--r-- | js/panels/binding-panel.reel/binding-panel.html | 18 | ||||
-rw-r--r-- | js/panels/binding-panel.reel/binding-panel.js | 18 | ||||
-rw-r--r-- | js/panels/binding/binding-item.reel/binding-item.js | 14 | ||||
-rw-r--r-- | js/panels/binding/edit-binding-view.reel/edit-binding-view.css | 25 | ||||
-rw-r--r-- | js/panels/binding/edit-binding-view.reel/edit-binding-view.html | 127 | ||||
-rw-r--r-- | js/panels/binding/edit-binding-view.reel/edit-binding-view.js | 196 |
10 files changed, 383 insertions, 47 deletions
diff --git a/js/components/hintable.reel/hintable.js b/js/components/hintable.reel/hintable.js index 803770db..e16c5f8a 100644 --- a/js/components/hintable.reel/hintable.js +++ b/js/components/hintable.reel/hintable.js | |||
@@ -185,12 +185,12 @@ exports.Hintable = Montage.create(Editable, { | |||
185 | handleInput : { | 185 | handleInput : { |
186 | value : function handleInput(e) { | 186 | value : function handleInput(e) { |
187 | this._super(arguments); | 187 | this._super(arguments); |
188 | 188 | ||
189 | var val = this.value, | 189 | var val = this.value, |
190 | matches, hint; | 190 | matches, hint; |
191 | //console.log('val = "' + val + '"'); | 191 | //console.log('val = "' + val + '"'); |
192 | //// Handle auto-suggest if configured | 192 | //// Handle auto-suggest if configured |
193 | if(this.hints instanceof Array) { | 193 | if(this.hints && this.hints.length) { |
194 | 194 | ||
195 | if(val.length > 0) { // content is not empty | 195 | if(val.length > 0) { // content is not empty |
196 | 196 | ||
@@ -305,7 +305,8 @@ exports.Hintable = Montage.create(Editable, { | |||
305 | 305 | ||
306 | /* --------- CONFIG ---------- */ | 306 | /* --------- CONFIG ---------- */ |
307 | hints : { | 307 | hints : { |
308 | value : ['Testing a hint.', 'Testing another hint.', 'Testing the last hint.'] | 308 | value : ['Testing a hint.', 'Testing another hint.', 'Testing the last hint.'], |
309 | distinct: true | ||
309 | }, | 310 | }, |
310 | hintClass : { | 311 | hintClass : { |
311 | value : "hintable-hint" | 312 | value : "hintable-hint" |
diff --git a/js/controllers/objects-controller.js b/js/controllers/objects-controller.js index ee203336..2ce10e82 100644 --- a/js/controllers/objects-controller.js +++ b/js/controllers/objects-controller.js | |||
@@ -69,15 +69,23 @@ var objectsController = exports.ObjectsController = Montage.create(Component, { | |||
69 | value: function(bindingArgs) { | 69 | value: function(bindingArgs) { |
70 | if(!bindingArgs) { return; } | 70 | if(!bindingArgs) { return; } |
71 | 71 | ||
72 | |||
73 | |||
72 | Object.deleteBinding(bindingArgs.sourceObject, bindingArgs.sourceObjectPropertyPath); | 74 | Object.deleteBinding(bindingArgs.sourceObject, bindingArgs.sourceObjectPropertyPath); |
73 | } | 75 | } |
74 | }, | 76 | }, |
75 | 77 | ||
76 | editBindingPropertyPath : { | 78 | editBinding : { |
77 | value: function(bindingArgs, newPropertyPath) { | 79 | value: function(bindingArgs, newProperties) { |
80 | var property; | ||
81 | |||
78 | this.removeBinding(bindingArgs); | 82 | this.removeBinding(bindingArgs); |
79 | 83 | ||
80 | bindingArgs.boundObjectPropertyPath = 'newPropertyPath'; | 84 | if(newProperties) { |
85 | for(property in newProperties) { | ||
86 | bindingArgs[property] = newProperties[property]; | ||
87 | } | ||
88 | } | ||
81 | 89 | ||
82 | this.addBinding(bindingArgs); | 90 | this.addBinding(bindingArgs); |
83 | } | 91 | } |
@@ -171,7 +179,7 @@ var objectsController = exports.ObjectsController = Montage.create(Component, { | |||
171 | return this._currentObject; | 179 | return this._currentObject; |
172 | }, | 180 | }, |
173 | set: function(value) { | 181 | set: function(value) { |
174 | if(value === this._currentObject) { return; } | 182 | //if(value === this._currentObject) { return; } |
175 | 183 | ||
176 | if(value) { | 184 | if(value) { |
177 | this.currentObjectBindings = this.getObjectBindings(value); | 185 | this.currentObjectBindings = this.getObjectBindings(value); |
diff --git a/js/document/templates/app/main.js b/js/document/templates/app/main.js index 91c46fda..e2bdc1a0 100644 --- a/js/document/templates/app/main.js +++ b/js/document/templates/app/main.js | |||
@@ -29,7 +29,7 @@ exports.Main = Montage.create(Component, { | |||
29 | var componentRequire = component[data.name]; | 29 | var componentRequire = component[data.name]; |
30 | var componentInstance = componentRequire.create(); | 30 | var componentInstance = componentRequire.create(); |
31 | 31 | ||
32 | componentInstance._montage_metadata.label = data.name; | 32 | componentInstance._montage_metadata.label = componentInstance.identifier = data.name; |
33 | componentInstance.element = element; | 33 | componentInstance.element = element; |
34 | 34 | ||
35 | componentInstance.needsDraw = true; | 35 | componentInstance.needsDraw = true; |
diff --git a/js/panels/binding-panel.reel/binding-panel.css b/js/panels/binding-panel.reel/binding-panel.css index e3dcf140..a1d5be0f 100644 --- a/js/panels/binding-panel.reel/binding-panel.css +++ b/js/panels/binding-panel.reel/binding-panel.css | |||
@@ -7,9 +7,16 @@ | |||
7 | .binding-panel { | 7 | .binding-panel { |
8 | position: relative; | 8 | position: relative; |
9 | height: 100%; | 9 | height: 100%; |
10 | display: -webkit-box; | ||
11 | overflow: hidden; | ||
12 | -webkit-box-orient: vertical; | ||
10 | } | 13 | } |
11 | 14 | ||
12 | .bindings-list { | 15 | .bindings-list { |
16 | -webkit-box-flex: 1; | ||
13 | padding: 0; | 17 | padding: 0; |
14 | margin: 0; | 18 | margin: 0; |
15 | } | 19 | } |
20 | .binding-panel-toolbar-container { | ||
21 | -webkit-box-flex: 0; | ||
22 | } | ||
diff --git a/js/panels/binding-panel.reel/binding-panel.html b/js/panels/binding-panel.reel/binding-panel.html index a926da8d..9a2834c7 100644 --- a/js/panels/binding-panel.reel/binding-panel.html +++ b/js/panels/binding-panel.reel/binding-panel.html | |||
@@ -36,6 +36,7 @@ | |||
36 | "element": {"#": "binding-item"} | 36 | "element": {"#": "binding-item"} |
37 | }, | 37 | }, |
38 | "bindings": { | 38 | "bindings": { |
39 | "bindingArgs": {"<-": "@repetition.objectAtCurrentIteration"}, | ||
39 | "sourceObjectPropertyPath": {"<-": "@repetition.objectAtCurrentIteration.sourceObjectPropertyPath"}, | 40 | "sourceObjectPropertyPath": {"<-": "@repetition.objectAtCurrentIteration.sourceObjectPropertyPath"}, |
40 | "sourceObject": {"<-": "@repetition.objectAtCurrentIteration.sourceObject"}, | 41 | "sourceObject": {"<-": "@repetition.objectAtCurrentIteration.sourceObject"}, |
41 | "boundObjectPropertyPath": {"<-": "@repetition.objectAtCurrentIteration.boundObjectPropertyPath"}, | 42 | "boundObjectPropertyPath": {"<-": "@repetition.objectAtCurrentIteration.boundObjectPropertyPath"}, |
@@ -48,8 +49,20 @@ | |||
48 | "properties": { | 49 | "properties": { |
49 | "element": {"#": "edit-binding-view" } | 50 | "element": {"#": "edit-binding-view" } |
50 | } | 51 | } |
52 | }, | ||
53 | "toolbar": { | ||
54 | "prototype": "js/components/toolbar.reel", | ||
55 | "properties": { | ||
56 | "element": {"#": "binding-panel-toolbar"}, | ||
57 | "delegate": {"@": "owner" }, | ||
58 | "buttons": [ | ||
59 | { | ||
60 | "title": "Add", | ||
61 | "identifier": "add" | ||
62 | } | ||
63 | ] | ||
64 | } | ||
51 | } | 65 | } |
52 | |||
53 | } | 66 | } |
54 | </script> | 67 | </script> |
55 | </head> | 68 | </head> |
@@ -58,6 +71,9 @@ | |||
58 | <ul data-montage-id="bindings-list" class="bindings-list"> | 71 | <ul data-montage-id="bindings-list" class="bindings-list"> |
59 | <li data-montage-id="binding-item" class="binding-item"></li> | 72 | <li data-montage-id="binding-item" class="binding-item"></li> |
60 | </ul> | 73 | </ul> |
74 | <div data-montage-id="binding-panel-toolbar-container" class="binding-panel-toolbar-container"> | ||
75 | <div data-montage-id="binding-panel-toolbar"></div> | ||
76 | </div> | ||
61 | <div data-montage-id="edit-binding-view" class="edit-binding-view"></div> | 77 | <div data-montage-id="edit-binding-view" class="edit-binding-view"></div> |
62 | </div> | 78 | </div> |
63 | </body> | 79 | </body> |
diff --git a/js/panels/binding-panel.reel/binding-panel.js b/js/panels/binding-panel.reel/binding-panel.js index c2ce556c..0641ecf5 100644 --- a/js/panels/binding-panel.reel/binding-panel.js +++ b/js/panels/binding-panel.reel/binding-panel.js | |||
@@ -6,7 +6,6 @@ exports.BindingPanel = Montage.create(Component, { | |||
6 | 6 | ||
7 | bindings : { value: null }, | 7 | bindings : { value: null }, |
8 | editView : { value: null }, | 8 | editView : { value: null }, |
9 | editingClass : { value: 'editing-binding' }, | ||
10 | _editing: { value: null }, | 9 | _editing: { value: null }, |
11 | editing: { | 10 | editing: { |
12 | get: function() { | 11 | get: function() { |
@@ -24,14 +23,27 @@ exports.BindingPanel = Montage.create(Component, { | |||
24 | 23 | ||
25 | displayEditView : { | 24 | displayEditView : { |
26 | value: function(bindingArgs) { | 25 | value: function(bindingArgs) { |
26 | this.editView.bindingArgs = bindingArgs; | ||
27 | this.editing = true; | 27 | this.editing = true; |
28 | } | 28 | } |
29 | }, | 29 | }, |
30 | 30 | ||
31 | /* ------------------------- | 31 | /* ------------------------- |
32 | Draw Cycle | 32 | Toolbar Button Actions |
33 | ------------------------- */ | 33 | ------------------------- */ |
34 | 34 | ||
35 | handleAddAction : { | ||
36 | value: function(e) { | ||
37 | var newBindingArgs = { | ||
38 | sourceObject : this.application.ninja.objectsController.currentObject | ||
39 | }; | ||
40 | |||
41 | this.displayEditView(newBindingArgs); | ||
42 | } | ||
43 | }, | <