Binding Panel - Update edit view - populate binding arguments

3 files changed, 140 insertions, 31 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..6e2ca31c 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,11 @@
     color: #FFF;
     font-size: 11px;
     height: 100%;
-    /*left: 100%;*/
-    /*position: absolute;*/
-    /*top: 0;*/
+    left: 100%;
+    position: absolute;
+    top: 0;
     width: 100%;
-    -webkit-transition: -webkit-transform 140ms ease-in;
+    -webkit-transition: -webkit-transform .55s cubic-bezier(.44,.19,0,.99);
 }
 
 .edit-binding-view ul {
@@ -26,11 +26,18 @@
     list-style-type: none;
 }
 
+.edit-binding-view label {
+    display: inline-block;
+    width: 50%;
+}
+
 /* hintable fields */
 
-.so-pp, .bo-pp {
-    border: 1px solid #313131;
-    padding: 1px 4px;
+.hintable-field {
     background-color: #444;
+    border: 1px solid #313131;
+    display: inline-block;
     margin-left: 5px;
+    padding: 1px 4px;
+    width: 45%;
 }
\ 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..0c1abcee 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
@@ -16,27 +16,36 @@
                     "element": {"#": "edit-binding"}
                 }
             },
-            "objectsList" : {
-                "prototype": "montage/ui/controller/array-controller",
-                "bindings" : {
-                    "content": {"<-": "@owner.objectsList"}
-                }
-            },
-            "sourceObjectSelect": {
-                "prototype": "montage/ui/select-input.reel",
+            "sourceObjectField": {
+                "prototype": "js/components/hintable.reel",
                 "properties": {
-                    "element": {"#": "sourceObjectSelect"},
-                    "contentController": {"@": "objectsList"}
+                    "element": {"#": "sourceObjectField"}
 
-                }
+                },
+                "bindings": {
+                    "value": {"<-": "@owner.sourceObjectIdentifier"}
+                },
+                "listeners" : [
+                    {
+                        "type": "change",
+                        "listener": {"@": "owner"}
+                    }
+                ]
             },
-            "boundObjectSelect": {
-                "prototype": "montage/ui/select-input.reel",
+            "boundObjectField": {
+                "prototype": "js/components/hintable.reel",
                 "properties": {
-                    "element": {"#": "boundObjectSelect"},
-                    "contentController": {"@": "objectsList"}
-
-                }
+                    "element": {"#": "boundObjectField"}
+                },
+                "bindings": {
+                    "value": {"<-": "@owner.boundObjectIdentifier"}
+                },
+                "listeners" : [
+                    {
+                        "type": "change",
+                        "listener": {"@": "owner"}
+                    }
+                ]
             },
             "sourceObjectPropertyPathField": {
                 "prototype": "js/components/hintable.reel",
@@ -69,6 +78,28 @@
                         "listener": {"@": "owner"}
                     }
                 ]
+            },
+            "directionCheckbox": {
+                "prototype": "montage/ui/checkbox.reel",
+                "properties": {
+                    "element": {"#": "direction-checkbox"}
+                },
+                "bindings": {
+                    "checked": {"<-": "@owner.oneway"}
+                }
+            },
+            "closeButton" : {
+                "prototype": "montage/ui/button.reel",
+                "properties": {
+                    "element": {"#": "close-button" },
+                    "identifier": "closeButton"
+                },
+                "listeners": [
+                    {
+                        "type": "action",
+                        "listener": {"@": "owner" }
+                    }
+                ]
             }
 
         }
@@ -79,25 +110,27 @@
 
     <ul>
         <li class="edit-source-object">
-            <label>Source Object:</label><select data-montage-id="sourceObjectSelect"  class="nj-skinned"></select>
+            <label>Source Object:</label><span data-montage-id="sourceObjectField" class="hintable-field">Test</span>
             <br>
-            <label>Source Object Property Path:</label><span data-montage-id="so-pp" class="so-pp">Test</span>
+            <label>Source Object Property Path:</label><span data-montage-id="so-pp" class="hintable-field so-pp">Test</span>
         </li>
 
         <li class="edit-bound-object">
-            <label>Bound Object:</label><select data-montage-id="boundObjectSelect"  class="nj-skinned"></select>
+            <label>Bound Object:</label><span data-montage-id="boundObjectField" class="hintable-field">Test</span>
             <br>
-            <label>Bound Object Property Path:</label><span data-montage-id="bo-pp" class="bo-pp">Test</span>
+            <label>Bound Object Property Path:</label><span data-montage-id="bo-pp" class="hintable-field bo-pp">Test</span>
         </li>
 
         <li class="edit-general-properties">
-            <input data-montage-id="oneway-checkbox" type="checkbox" class="nj-skinned"><label>Oneway</label>
+            <input data-montage-id="direction-checkbox" type="checkbox" class="nj-skinned"><label>Oneway</label>
         </li>
         <li>
             <label>Converter</label><span>Test</span>
         </li>
     </ul>
 
+    <button data-montage-id="close-button" class="nj-skinned">Close</button>
+
 </div>
 </body>
 </html>
\ No newline at end of file
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 700f3024..1cef8f5e 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
@@ -9,8 +9,77 @@ var Montage = require("montage/core/core").Montage,
 
 
 exports.EditBindingView = Montage.create(Component, {
-    objectsList : {
-        value: ["Object1", "Object2", "Object3"]
+
+    /* -------------------
+       Binding Properties
+     ------------------- */
+
+    sourceObjectIdentifier : {
+        value: "",
+        distinct: true
+    },
+    sourceObjectPropertyPath : {
+        value: "",
+        distinct: true
+    },
+    boundObjectIdentifier : {
+        value: "",