diff options
Diffstat (limited to 'js/panels/binding')
4 files changed, 326 insertions, 36 deletions
diff --git a/js/panels/binding/binding-item.reel/binding-item.js b/js/panels/binding/binding-item.reel/binding-item.js index 55230fc3..a1017020 100644 --- a/js/panels/binding/binding-item.reel/binding-item.js +++ b/js/panels/binding/binding-item.reel/binding-item.js | |||
@@ -12,6 +12,10 @@ exports.BindingItem = Montage.create(Component, { | |||
12 | sourceObjectLabel : { value: null }, | 12 | sourceObjectLabel : { value: null }, |
13 | boundObjectLabel : { value: null }, | 13 | boundObjectLabel : { value: null }, |
14 | 14 | ||
15 | bindingArgs : { | ||
16 | value: null | ||
17 | }, | ||
18 | |||
15 | _sourceObject : { value: null }, | 19 | _sourceObject : { value: null }, |
16 | sourceObject : { | 20 | sourceObject : { |
17 | get: function() { | 21 | get: function() { |
@@ -73,7 +77,9 @@ exports.BindingItem = Montage.create(Component, { | |||
73 | }, | 77 | }, |
74 | set: function(value) { | 78 | set: function(value) { |
75 | if(value === this._oneway) { return; } | 79 | if(value === this._oneway) { return; } |
80 | |||
76 | this._oneway = value; | 81 | this._oneway = value; |
82 | |||
77 | this.needsDraw = true; | 83 | this.needsDraw = true; |
78 | } | 84 | } |
79 | }, | 85 | }, |
@@ -82,13 +88,19 @@ exports.BindingItem = Montage.create(Component, { | |||
82 | 88 | ||
83 | handleDirectionToggleButtonAction : { | 89 | handleDirectionToggleButtonAction : { |
84 | value: function(e) { | 90 | value: function(e) { |
91 | var controller = this.application.ninja.objectsController; | ||
92 | |||
85 | this.oneway = !this.oneway; | 93 | this.oneway = !this.oneway; |
94 | controller.editBinding(this.bindingArgs, { | ||
95 | oneway: !this.bindingArgs.oneway | ||
96 | }); | ||
97 | controller.currentItem = controller.currentItem; | ||
86 | } | 98 | } |
87 | }, | 99 | }, |
88 | 100 | ||
89 | handleEditButtonAction : { | 101 | handleEditButtonAction : { |
90 | value: function(e) { | 102 | value: function(e) { |
91 | this.parentComponent.parentComponent.displayEditView(); | 103 | this.parentComponent.parentComponent.displayEditView(this.bindingArgs); |
92 | } | 104 | } |
93 | }, | 105 | }, |
94 | 106 | ||
diff --git a/js/panels/binding/edit-binding-view.reel/edit-binding-view.css b/js/panels/binding/edit-binding-view.reel/edit-binding-view.css index b0249c6c..aa539cd6 100644 --- a/js/panels/binding/edit-binding-view.reel/edit-binding-view.css +++ b/js/panels/binding/edit-binding-view.reel/edit-binding-view.css | |||
@@ -9,11 +9,14 @@ | |||
9 | color: #FFF; | 9 | color: #FFF; |
10 | font-size: 11px; | 10 | font-size: 11px; |
11 | height: 100%; | 11 | height: 100%; |
12 | /*left: 100%;*/ | 12 | left: 100%; |
13 | /*position: absolute;*/ | 13 | position: absolute; |
14 | /*top: 0;*/ | 14 | top: 0; |
15 | width: 100%; | 15 | width: 100%; |
16 | -webkit-transition: -webkit-transform 140ms ease-in; | 16 | -webkit-transition-property: -webkit-transform, box-shadow; |
17 | -webkit-transition-duration: .55s, .2s; | ||
18 | -webkit-transition-timing-function: cubic-bezier(.44,.19,0,.99); | ||
19 | -webkit-user-select: text; | ||
17 | } | 20 | } |
18 | 21 | ||
19 | .edit-binding-view ul { | 22 | .edit-binding-view ul { |
@@ -26,11 +29,19 @@ | |||
26 | list-style-type: none; | 29 | list-style-type: none; |
27 | } | 30 | } |
28 | 31 | ||
32 | .edit-binding-view label { | ||
33 | display: inline-block; | ||
34 | width: 50%; | ||
35 | } | ||
36 | |||
29 | /* hintable fields */ | 37 | /* hintable fields */ |
30 | 38 | ||
31 | .so-pp, .bo-pp { | 39 | .hintable-field { |
32 | border: 1px solid #313131; | ||
33 | padding: 1px 4px; | ||
34 | background-color: #444; | 40 | background-color: #444; |
41 | border: 1px solid #313131; | ||
42 | display: inline-block; | ||
43 | height: 13px; | ||
35 | margin-left: 5px; | 44 | margin-left: 5px; |
45 | padding: 1px 4px; | ||
46 | width: 45%; | ||
36 | } \ No newline at end of file | 47 | } \ No newline at end of file |
diff --git a/js/panels/binding/edit-binding-view.reel/edit-binding-view.html b/js/panels/binding/edit-binding-view.reel/edit-binding-view.html index 1d502a3e..604d4871 100644 --- a/js/panels/binding/edit-binding-view.reel/edit-binding-view.html +++ b/js/panels/binding/edit-binding-view.reel/edit-binding-view.html | |||
@@ -13,34 +13,53 @@ | |||
13 | "owner": { | 13 | "owner": { |
14 | "prototype": "js/panels/binding/edit-binding-view.reel", | 14 | "prototype": "js/panels/binding/edit-binding-view.reel", |
15 | "properties": { | 15 | "properties": { |
16 | "element": {"#": "edit-binding"} | 16 | "element": {"#": "edit-binding"}, |
17 | "sourceObjectField" : {"@": "sourceObjectField" }, | ||
18 | "boundObjectField" : {"@": "boundObjectField" }, | ||
19 | "sourceObjectPropertyPathField" : {"@": "sourceObjectPropertyPathField" }, | ||
20 | "boundObjectPropertyPathField" : {"@": "boundObjectPropertyPathField" }, | ||
21 | "directionCheckbox" : {"@": "directionCheckbox" }, | ||
22 | "saveButton":{ "@": "saveButton" }, | ||
23 | "cancelButton":{ "@": "cancelButton" }, | ||
24 | "deleteButton":{ "@": "deleteButton" } | ||
17 | } | 25 | } |
18 | }, | 26 | }, |
19 | "objectsList" : { | 27 | "sourceObjectField": { |
20 | "prototype": "montage/ui/controller/array-controller", | 28 | "prototype": "js/components/hintable.reel", |
21 | "bindings" : { | ||
22 | "content": {"<-": "@owner.objectsList"} | ||
23 | } | ||
24 | }, | ||
25 | "sourceObjectSelect": { | ||
26 | "prototype": "montage/ui/select-input.reel", | ||
27 | "properties": { | 29 | "properties": { |
28 | "element": {"#": "sourceObjectSelect"}, | 30 | "startOnEvent": "click", |
29 | "contentController": {"@": "objectsList"} | 31 | "element": {"#": "sourceObjectField"} |
30 | 32 | }, | |
31 | } | 33 | "bindings": { |
34 | "value": {"<-": "@owner.sourceObjectIdentifier"} | ||
35 | }, | ||
36 | "listeners" : [ | ||
37 | { | ||
38 | "type": "change", | ||
39 | "listener": {"@": "owner"} | ||
40 | } | ||
41 | ] | ||
32 | }, | 42 | }, |
33 | "boundObjectSelect": { | 43 | "boundObjectField": { |
34 | "prototype": "montage/ui/select-input.reel", | 44 | "prototype": "js/components/hintable.reel", |
35 | "properties": { | 45 | "properties": { |
36 | "element": {"#": "boundObjectSelect"}, | 46 | "startOnEvent": "click", |
37 | "contentController": {"@": "objectsList"} | 47 | "element": {"#": "boundObjectField"} |
38 | 48 | }, | |
39 | } | 49 | "bindings": { |
50 | "value": {"<-": "@owner.boundObjectIdentifier"} | ||
51 | }, | ||
52 | "listeners" : [ | ||
53 | { | ||
54 | "type": "change", | ||
55 | "listener": {"@": "owner"} | ||
56 | } | ||
57 | ] | ||
40 | }, | 58 | }, |
41 | "sourceObjectPropertyPathField": { | 59 | "sourceObjectPropertyPathField": { |
42 | "prototype": "js/components/hintable.reel", | 60 | "prototype": "js/components/hintable.reel", |
43 | "properties": { | 61 | "properties": { |
62 | "startOnEvent": "click", | ||
44 | "element": {"#": "so-pp"}, | 63 | "element": {"#": "so-pp"}, |
45 | "identifier": "sourceProperty" | 64 | "identifier": "sourceProperty" |
46 | }, | 65 | }, |
@@ -57,6 +76,7 @@ | |||
57 | "boundObjectPropertyPathField": { | 76 | "boundObjectPropertyPathField": { |
58 | "prototype": "js/components/hintable.reel", | 77 | "prototype": "js/components/hintable.reel", |
59 | "properties": { | 78 | "properties": { |
79 | "startOnEvent": "click", | ||
60 | "element": {"#": "bo-pp"}, | 80 | "element": {"#": "bo-pp"}, |
61 | "identifier": "boundProperty" | 81 | "identifier": "boundProperty" |
62 | }, | 82 | }, |
@@ -69,6 +89,57 @@ | |||
69 | "listener": {"@": "owner"} | 89 | "listener": {"@": "owner"} |
70 | } | 90 | } |
71 | ] | 91 | ] |
92 | }, | ||
93 | "directionCheckbox": { | ||
94 | "prototype": "montage/ui/checkbox.reel", | ||
95 | "properties": { | ||
96 | "element": {"#": "direction-checkbox"} | ||
97 | }, | ||
98 | "bindings": { | ||
99 | "checked": {"<-": "@owner.oneway"} | ||
100 | } | ||
101 | }, | ||
102 | "cancelButton" : { | ||