diff options
Diffstat (limited to 'js/panels/binding/edit-binding-view.reel')
3 files changed, 78 insertions, 14 deletions
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 6e2ca31c..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 | |||
@@ -13,7 +13,10 @@ | |||
13 | position: absolute; | 13 | position: absolute; |
14 | top: 0; | 14 | top: 0; |
15 | width: 100%; | 15 | width: 100%; |
16 | -webkit-transition: -webkit-transform .55s cubic-bezier(.44,.19,0,.99); | 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 { |
@@ -37,6 +40,7 @@ | |||
37 | background-color: #444; | 40 | background-color: #444; |
38 | border: 1px solid #313131; | 41 | border: 1px solid #313131; |
39 | display: inline-block; | 42 | display: inline-block; |
43 | height: 13px; | ||
40 | margin-left: 5px; | 44 | margin-left: 5px; |
41 | padding: 1px 4px; | 45 | padding: 1px 4px; |
42 | width: 45%; | 46 | width: 45%; |
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 0c1abcee..d07f4445 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,14 +13,19 @@ | |||
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" } | ||
17 | } | 22 | } |
18 | }, | 23 | }, |
19 | "sourceObjectField": { | 24 | "sourceObjectField": { |
20 | "prototype": "js/components/hintable.reel", | 25 | "prototype": "js/components/hintable.reel", |
21 | "properties": { | 26 | "properties": { |
27 | "startOnEvent": "click", | ||
22 | "element": {"#": "sourceObjectField"} | 28 | "element": {"#": "sourceObjectField"} |
23 | |||
24 | }, | 29 | }, |
25 | "bindings": { | 30 | "bindings": { |
26 | "value": {"<-": "@owner.sourceObjectIdentifier"} | 31 | "value": {"<-": "@owner.sourceObjectIdentifier"} |
@@ -35,6 +40,7 @@ | |||
35 | "boundObjectField": { | 40 | "boundObjectField": { |
36 | "prototype": "js/components/hintable.reel", | 41 | "prototype": "js/components/hintable.reel", |
37 | "properties": { | 42 | "properties": { |
43 | "startOnEvent": "click", | ||
38 | "element": {"#": "boundObjectField"} | 44 | "element": {"#": "boundObjectField"} |
39 | }, | 45 | }, |
40 | "bindings": { | 46 | "bindings": { |
@@ -50,6 +56,7 @@ | |||
50 | "sourceObjectPropertyPathField": { | 56 | "sourceObjectPropertyPathField": { |
51 | "prototype": "js/components/hintable.reel", | 57 | "prototype": "js/components/hintable.reel", |
52 | "properties": { | 58 | "properties": { |
59 | "startOnEvent": "click", | ||
53 | "element": {"#": "so-pp"}, | 60 | "element": {"#": "so-pp"}, |
54 | "identifier": "sourceProperty" | 61 | "identifier": "sourceProperty" |
55 | }, | 62 | }, |
@@ -66,6 +73,7 @@ | |||
66 | "boundObjectPropertyPathField": { | 73 | "boundObjectPropertyPathField": { |
67 | "prototype": "js/components/hintable.reel", | 74 | "prototype": "js/components/hintable.reel", |
68 | "properties": { | 75 | "properties": { |
76 | "startOnEvent": "click", | ||
69 | "element": {"#": "bo-pp"}, | 77 | "element": {"#": "bo-pp"}, |
70 | "identifier": "boundProperty" | 78 | "identifier": "boundProperty" |
71 | }, | 79 | }, |
@@ -109,18 +117,20 @@ | |||
109 | <div data-montage-id="edit-binding" class="edit-binding-view"> | 117 | <div data-montage-id="edit-binding" class="edit-binding-view"> |
110 | 118 | ||
111 | <ul> | 119 | <ul> |
120 | <h3>Source Object</h3> | ||
112 | <li class="edit-source-object"> | 121 | <li class="edit-source-object"> |
113 | <label>Source Object:</label><span data-montage-id="sourceObjectField" class="hintable-field">Test</span> | 122 | <label>Identifier:</label><span data-montage-id="sourceObjectField" class="hintable-field">Test</span> |
114 | <br> | 123 | <br> |
115 | <label>Source Object Property Path:</label><span data-montage-id="so-pp" class="hintable-field so-pp">Test</span> | 124 | <label>Property Path:</label><span data-montage-id="so-pp" class="hintable-field so-pp">Test</span> |
116 | </li> | 125 | </li> |
117 | 126 | <h3>Bound Object</h3> | |
118 | <li class="edit-bound-object"> | 127 | <li class="edit-bound-object"> |
119 | <label>Bound Object:</label><span data-montage-id="boundObjectField" class="hintable-field">Test</span> | 128 | <label>Identifier:</label><span data-montage-id="boundObjectField" class="hintable-field">Test</span> |
120 | <br> | 129 | <br> |
121 | <label>Bound Object Property Path:</label><span data-montage-id="bo-pp" class="hintable-field bo-pp">Test</span> | 130 | <label>Property Path:</label><span data-montage-id="bo-pp" class="hintable-field bo-pp">Test</span> |
122 | </li> | 131 | </li> |
123 | 132 | ||
133 | <h3>Configuration</h3> | ||
124 | <li class="edit-general-properties"> | 134 | <li class="edit-general-properties"> |
125 | <input data-montage-id="direction-checkbox" type="checkbox" class="nj-skinned"><label>Oneway</label> | 135 | <input data-montage-id="direction-checkbox" type="checkbox" class="nj-skinned"><label>Oneway</label> |
126 | </li> | 136 | </li> |
diff --git a/js/panels/binding/edit-binding-view.reel/edit-binding-view.js b/js/panels/binding/edit-binding-view.reel/edit-binding-view.js index 1cef8f5e..c3ef7384 100644 --- a/js/panels/binding/edit-binding-view.reel/edit-binding-view.js +++ b/js/panels/binding/edit-binding-view.reel/edit-binding-view.js | |||
@@ -10,6 +10,17 @@ var Montage = require("montage/core/core").Montage, | |||
10 | 10 | ||
11 | exports.EditBindingView = Montage.create(Component, { | 11 | exports.EditBindingView = Montage.create(Component, { |
12 | 12 | ||
13 | objectIdentifiers : { | ||
14 | value: null | ||
15 | }, | ||
16 | getObjectIdentifiers : { | ||
17 | value: function() { | ||
18 | return this.application.ninja.objectsController.objects.map(function(object) { | ||
19 | return object.identifier; | ||
20 | }); | ||
21 | } | ||
22 | }, | ||
23 | |||
13 | /* ------------------- | 24 | /* ------------------- |
14 | Binding Properties | 25 | Binding Properties |
15 | ------------------- */ | 26 | ------------------- */ |
@@ -62,10 +73,25 @@ exports.EditBindingView = Montage.create(Component, { | |||
62 | 73 | ||
63 | this._bindingArgs = value; | 74 | this._bindingArgs = value; |
64 | 75 | ||
65 | this.sourceObjectIdentifier = value.sourceObject.identifier; | 76 | // clear form values |
66 | this.sourceObjectPropertyPath = value.sourceObjectPropertyPath; | 77 | this.clearForm(); |
67 | this.boundObjectIdentifier = value.boundObject.identifier; | 78 | |
68 | this.boundObjectPropertyPath = value.boundObjectPropertyPath; | 79 | // set up hints for hintable components |
80 | this.objectIdentifiers = this.getObjectIdentifiers(); | ||
81 | console.log("setting hints to ", this.objectIdentifiers); | ||
82 | this.boundObjectField.hints = this.objectIdentifiers; | ||
83 | this.sourceObjectField.hints = this.objectIdentifiers; | ||
84 | |||
85 | if(value.sourceObject) { | ||
86 | this.sourceObjectIdentifier = value.sourceObject.identifier || ''; | ||
87 | this.sourceObjectPropertyPath = value.sourceObjectPropertyPath || ''; | ||
88 | } | ||
89 | |||
90 | if(value.boundObject) { | ||
91 | this.boundObjectIdentifier = value.boundObject.identifier || ''; | ||
92 | this.boundObjectPropertyPath = value.boundObjectPropertyPath || ''; | ||
93 | } | ||
94 | |||
69 | this.oneway = value.oneway; | 95 | this.oneway = value.oneway; |
70 | 96 | ||
71 | this.needsDraw = true; | 97 | this.needsDraw = true; |
@@ -76,15 +102,39 @@ exports.EditBindingView = Montage.create(Component, { | |||
76 | Save/Close button handlers | 102 | Save/Close button handlers |
77 | ------------------- */ | 103 | ------------------- */ |
78 | 104 | ||
105 | "sourceObjectField" : {value: null, enumerable: true }, | ||
106 | "boundObjectField" : {value: null, enumerable: true }, | ||
107 | "sourceObjectPropertyPathField" : {value: null, enumerable: true }, | ||
108 | "boundObjectPropertyPathField" : {value: null, enumerable: true }, | ||
109 | "directionCheckbox" : {value: null, enumerable: true }, | ||
110 | |||
111 | clearForm : { | ||
112 | value: function() { | ||
113 | for(var field in this) { | ||
114 | if(this.hasOwnProperty(field)) { | ||
115 | field.value = ''; | ||
116 | } | ||
117 | } | ||
118 | } | ||
119 | }, | ||
120 | |||
121 | /* ------------------- | ||
122 | Save/Close button handlers | ||
123 | ------------------- */ | ||
124 |