diff options
Diffstat (limited to 'js/panels/binding/edit-binding-view.reel')
3 files changed, 56 insertions, 42 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 01feb5cc..0ca82179 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 | |||
@@ -14,7 +14,7 @@ | |||
14 | top: 0; | 14 | top: 0; |
15 | width: 100%; | 15 | width: 100%; |
16 | -webkit-transition-property: -webkit-transform; | 16 | -webkit-transition-property: -webkit-transform; |
17 | -webkit-transition-duration: .55s; | 17 | -webkit-transition-duration: 550ms; |
18 | -webkit-transition-timing-function: cubic-bezier(.44,.19,0,.99); | 18 | -webkit-transition-timing-function: cubic-bezier(.44,.19,0,.99); |
19 | -webkit-user-select: text; | 19 | -webkit-user-select: text; |
20 | } | 20 | } |
@@ -55,13 +55,16 @@ | |||
55 | position:relative; | 55 | position:relative; |
56 | top: -1px; | 56 | top: -1px; |
57 | left: -1px; | 57 | left: -1px; |
58 | -webkit-transition: opacity 550ms linear; | ||
58 | } | 59 | } |
59 | .object-fields-container { | 60 | .object-fields-container { |
60 | -webkit-box-flex: 1; | 61 | -webkit-box-flex: 1; |
61 | padding-top: 1px; | 62 | padding-top: 1px; |
62 | width: 1px; | 63 | width: 1px; |
63 | } | 64 | } |
64 | 65 | .no-object { | |
66 | opacity: 0; | ||
67 | } | ||
65 | 68 | ||
66 | .edit-binding-view ul { | 69 | .edit-binding-view ul { |
67 | padding: 0; | 70 | padding: 0; |
@@ -116,6 +119,10 @@ | |||
116 | width: 80%; | 119 | width: 80%; |
117 | } | 120 | } |
118 | 121 | ||
122 | .hintable-field .hintable-hint { | ||
123 | color: #7C7C7C; | ||
124 | } | ||
125 | |||
119 | .hintable-field:focus { | 126 | .hintable-field:focus { |
120 | border: 1px solid #313131; | 127 | border: 1px solid #313131; |
121 | } \ No newline at end of file | 128 | } \ 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 91a5426f..d5409883 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 | |||
@@ -155,7 +155,7 @@ | |||
155 | <div data-montage-id="source-object-icon" class="object-icon"></div> | 155 | <div data-montage-id="source-object-icon" class="object-icon"></div> |
156 | </div> | 156 | </div> |
157 | <div class="object-fields-container"> | 157 | <div class="object-fields-container"> |
158 | <span data-montage-id="sourceObjectField" class="hintable-field">Test</span> | 158 | <span data-montage-id="sourceObjectField" class="hintable-field"></span> |
159 | <span data-montage-id="so-pp" class="hintable-field so-pp"></span> | 159 | <span data-montage-id="so-pp" class="hintable-field so-pp"></span> |
160 | </div> | 160 | </div> |
161 | </div> | 161 | </div> |
@@ -165,7 +165,7 @@ | |||
165 | <div data-montage-id="bound-object-icon" class="object-icon"></div> | 165 | <div data-montage-id="bound-object-icon" class="object-icon"></div> |
166 | </div> | 166 | </div> |
167 | <div class="object-fields-container"> | 167 | <div class="object-fields-container"> |
168 | <span data-montage-id="boundObjectField" class="hintable-field">Test</span> | 168 | <span data-montage-id="boundObjectField" class="hintable-field"></span> |
169 | <span data-montage-id="bo-pp" class="hintable-field bo-pp"></span> | 169 | <span data-montage-id="bo-pp" class="hintable-field bo-pp"></span> |
170 | </div> | 170 | </div> |
171 | </div> | 171 | </div> |
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 62a47aaf..46fe9681 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 | |||
@@ -65,6 +65,10 @@ var editBindingView = exports.EditBindingView = Montage.create(Component, { | |||
65 | 65 | ||
66 | this._sourceObject = value; | 66 | this._sourceObject = value; |
67 | 67 | ||
68 | if(value) { | ||
69 | this.sourceObjectPropertyPathField.hints = this.application.ninja.objectsController.getPropertiesFromObject(value); | ||
70 | } | ||
71 | |||
68 | this.needsDraw = true; | 72 | this.needsDraw = true; |
69 | } | 73 | } |
70 | }, | 74 | }, |
@@ -74,9 +78,12 @@ var editBindingView = exports.EditBindingView = Montage.create(Component, { | |||
74 | get : function() { return this._boundObject; }, | 78 | get : function() { return this._boundObject; }, |
75 | set : function(value) { | 79 | set : function(value) { |
76 | if(value === this._boundObject) { return; } | 80 | if(value === this._boundObject) { return; } |
77 | console.log("Bound Object being set to ", value); | ||
78 | this._boundObject = value; | 81 | this._boundObject = value; |
79 | 82 | ||
83 | if(value) { | ||
84 | this.boundObjectPropertyPathField.hints = this.application.ninja.objectsController.getPropertiesFromObject(value); | ||
85 | } | ||
86 | |||
80 | this.needsDraw = true; | 87 | this.needsDraw = true; |
81 | } | 88 | } |
82 | }, | 89 | }, |
@@ -85,12 +92,8 @@ var editBindingView = exports.EditBindingView = Montage.create(Component, { | |||
85 | sourceObjectPropertyPath : { | 92 | sourceObjectPropertyPath : { |
86 | get : function() { return this._sourceObjectPropertyPath; }, | 93 | get : function() { return this._sourceObjectPropertyPath; }, |
87 | set : function(value) { | 94 | set : function(value) { |
88 | console.log("Source Object Property Path being set to ", value); | ||
89 | |||
90 | if(value === this._sourceObjectPropertyPath) { return; } | 95 | if(value === this._sourceObjectPropertyPath) { return; } |
91 | 96 | ||
92 | |||
93 | |||
94 | this._sourceObjectPropertyPath = value; | 97 | this._sourceObjectPropertyPath = value; |
95 | 98 | ||
96 | this.needsDraw = true; | 99 | this.needsDraw = true; |
@@ -144,26 +147,27 @@ var editBindingView = exports.EditBindingView = Montage.create(Component, { | |||
144 | // clear form values | 147 | // clear form values |
145 | this.clearForm(); | 148 | this.clearForm(); |
146 | 149 | ||
147 | // set up hints for hintable components | 150 | if(value) { |
148 | this.objectIdentifiers = this.getObjectIdentifiers(); | 151 | // set up hints for hintable components |
149 | console.log("setting hints to ", this.objectIdentifiers); | 152 | this.objectIdentifiers = this.getObjectIdentifiers(); |
150 | this.boundObjectField.hints = this.objectIdentifiers; | 153 | this.boundObjectField.hints = this.objectIdentifiers; |
151 | this.sourceObjectField.hints = this.objectIdentifiers; | 154 | this.sourceObjectField.hints = this.objectIdentifiers; |
152 | 155 | ||
153 | if(value.sourceObject) { | 156 | if(value.sourceObject) { |
154 | this.sourceObjectIdentifier = value.sourceObject.identifier || value.sourceObject._montage_metadata.label; | 157 | this.sourceObjectIdentifier = value.sourceObject.identifier || value.sourceObject._montage_metadata.label; |
155 | this.sourceObjectPropertyPath = value.sourceObjectPropertyPath || ''; | 158 | this.sourceObjectPropertyPath = value.sourceObjectPropertyPath || ''; |
156 | } | 159 | } |
157 | 160 | ||
158 | if(value.boundObject) { | 161 | if(value.boundObject) { |
159 | this.boundObjectIdentifier = value.boundObject.identifier || ''; | 162 | this.boundObjectIdentifier = value.boundObject.identifier || ''; |
160 | this.boundObjectPropertyPath = value.boundObjectPropertyPath || ''; | 163 | this.boundObjectPropertyPath = value.boundObjectPropertyPath || ''; |
161 | this.isNewBinding = false; | 164 | this.isNewBinding = false; |
162 | } else { | 165 | } else { |
163 | this.isNewBinding = true; | 166 | this.isNewBinding = true; |
164 | } | 167 | } |
165 | 168 | ||
166 | this.oneway = value.oneway; | 169 | this.oneway = value.oneway; |
170 | } | ||
167 | 171 | ||
168 | this.needsDraw = true; | 172 | this.needsDraw = true; |
169 | } | 173 | } |
@@ -187,25 +191,29 @@ var editBindingView = exports.EditBindingView = Montage.create(Component, { | |||
187 | 191 | ||
188 | clearForm : { | 192 | clearForm : { |
189 | value: function() { | 193 | value: function() { |
190 | for(var field in this) { | 194 | var fields = ["sourceObjectField", |
191 | if(this.hasOwnProperty(field)) { | 195 | "boundObjectField", |
192 | field.value = ''; | 196 | "sourceObjectPropertyPathField", |
193 | } | 197 | "boundObjectPropertyPathField"]; |
194 | } | 198 | |
199 | fields.forEach(function(fieldName) { | ||
200 | this[fieldName].value = ""; | ||
201 | }, this); | ||
202 | |||
203 | this._bindingArgs = null; | ||
204 | |||
195 | this.dirty = false; | 205 | this.dirty = false; |
196 | } | 206 | } |
197 | }, | 207 | }, |
198 | 208 | ||
199 | saveForm : { | 209 | saveForm : { |
200 | value: function() { | 210 | value: function() { |
201 | debugger; | ||