aboutsummaryrefslogtreecommitdiff
path: root/js/panels/binding/edit-binding-view.reel
diff options
context:
space:
mode:
Diffstat (limited to 'js/panels/binding/edit-binding-view.reel')
-rw-r--r--js/panels/binding/edit-binding-view.reel/edit-binding-view.css25
-rw-r--r--js/panels/binding/edit-binding-view.reel/edit-binding-view.html127
-rw-r--r--js/panels/binding/edit-binding-view.reel/edit-binding-view.js196
3 files changed, 313 insertions, 35 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 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" : {
103 "prototype": "montage/ui/button.reel",
104 "properties": {
105 "element": {"#": "cancel-button" },
106 "identifier": "cancelButton"
107 },
108 "listeners": [
109 {
110 "type": "action",
111 "listener": {"@": "owner" }
112 }
113 ]
114 },
115 "deleteButton" : {
116 "prototype": "montage/ui/button.reel",
117 "properties": {
118 "element": {"#": "delete-button" },
119 "identifier": "deleteButton"
120 },
121 "listeners": [
122 {
123 "type": "action",
124 "listener": {"@": "owner" }
125 }
126 ]
127 },
128 "saveButton" : {
129 "prototype": "montage/ui/button.reel",
130 "properties": {
131 "element": {"#": "save-button" },
132 "identifier": "saveButton"
133 },
134 "bindings" : {
135 "enabled": {"<<->": "@owner.dirty"}
136 },
137 "listeners": [
138 {
139 "type": "action",
140 "listener": {"@": "owner" }
141 }
142 ]
72 } 143 }
73 144
74 } 145 }
@@ -78,26 +149,32 @@
78<div data-montage-id="edit-binding" class="edit-binding-view"> 149<div data-montage-id="edit-binding" class="edit-binding-view">
79 150
80 <ul> 151 <ul>
152 <h3>Source Object</h3>
81 <li class="edit-source-object"> 153 <li class="edit-source-object">
82 <label>Source Object:</label><select data-montage-id="sourceObjectSelect" class="nj-skinn