aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
-rw-r--r--js/panels/binding/edit-binding-view.reel/edit-binding-view.css6
-rw-r--r--js/panels/binding/edit-binding-view.reel/edit-binding-view.html24
-rw-r--r--js/panels/binding/edit-binding-view.reel/edit-binding-view.js62
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
11exports.EditBindingView = Montage.create(Component, { 11exports.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
79 handleCloseButtonAction : { 125 handleCloseButtonAction : {
80 value: function(e) { 126 value: function(e) {
81 this.parentComponent.editing = false;