Binding Panel - Minor Editing Panel changes

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 @@
     position: absolute;
     top: 0;
     width: 100%;
-    -webkit-transition: -webkit-transform .55s cubic-bezier(.44,.19,0,.99);
+    -webkit-transition-property: -webkit-transform, box-shadow;
+    -webkit-transition-duration: .55s, .2s;
+    -webkit-transition-timing-function: cubic-bezier(.44,.19,0,.99);
+    -webkit-user-select: text;
 }
 
 .edit-binding-view ul {
@@ -37,6 +40,7 @@
     background-color: #444;
     border: 1px solid #313131;
     display: inline-block;
+    height: 13px;
     margin-left: 5px;
     padding: 1px 4px;
     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 @@
             "owner": {
                 "prototype": "js/panels/binding/edit-binding-view.reel",
                 "properties": {
-                    "element": {"#": "edit-binding"}
+                    "element": {"#": "edit-binding"},
+                    "sourceObjectField" : {"@": "sourceObjectField" },
+                    "boundObjectField"  : {"@": "boundObjectField" },
+                    "sourceObjectPropertyPathField" : {"@": "sourceObjectPropertyPathField" },
+                    "boundObjectPropertyPathField"  : {"@": "boundObjectPropertyPathField" },
+                    "directionCheckbox"  : {"@": "directionCheckbox" }
                 }
             },
             "sourceObjectField": {
                 "prototype": "js/components/hintable.reel",
                 "properties": {
+                    "startOnEvent": "click",
                     "element": {"#": "sourceObjectField"}
-
                 },
                 "bindings": {
                     "value": {"<-": "@owner.sourceObjectIdentifier"}
@@ -35,6 +40,7 @@
             "boundObjectField": {
                 "prototype": "js/components/hintable.reel",
                 "properties": {
+                    "startOnEvent": "click",
                     "element": {"#": "boundObjectField"}
                 },
                 "bindings": {
@@ -50,6 +56,7 @@
             "sourceObjectPropertyPathField": {
                 "prototype": "js/components/hintable.reel",
                 "properties": {
+                    "startOnEvent": "click",
                     "element": {"#": "so-pp"},
                     "identifier": "sourceProperty"
                 },
@@ -66,6 +73,7 @@
             "boundObjectPropertyPathField": {
                 "prototype": "js/components/hintable.reel",
                 "properties": {
+                    "startOnEvent": "click",
                     "element": {"#": "bo-pp"},
                     "identifier": "boundProperty"
                 },
@@ -109,18 +117,20 @@
 <div data-montage-id="edit-binding" class="edit-binding-view">
 
     <ul>
+        <h3>Source Object</h3>
         <li class="edit-source-object">
-            <label>Source Object:</label><span data-montage-id="sourceObjectField" class="hintable-field">Test</span>
+            <label>Identifier:</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="hintable-field so-pp">Test</span>
+            <label>Property Path:</label><span data-montage-id="so-pp" class="hintable-field so-pp">Test</span>
         </li>
-
+        <h3>Bound Object</h3>
         <li class="edit-bound-object">
-            <label>Bound Object:</label><span data-montage-id="boundObjectField" class="hintable-field">Test</span>
+            <label>Identifier:</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="hintable-field bo-pp">Test</span>
+            <label>Property Path:</label><span data-montage-id="bo-pp" class="hintable-field bo-pp">Test</span>
         </li>
 
+        <h3>Configuration</h3>
         <li class="edit-general-properties">
             <input data-montage-id="direction-checkbox" type="checkbox" class="nj-skinned"><label>Oneway</label>
         </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,
 
 exports.EditBindingView = Montage.create(Component, {
 
+    objectIdentifiers : {
+        value: null
+    },
+    getObjectIdentifiers : {
+        value: function() {
+            return this.application.ninja.objectsController.objects.map(function(object) {
+                return object.identifier;
+            });
+        }
+    },
+
     /* -------------------
        Binding Properties
      ------------------- */
@@ -62,10 +73,25 @@ exports.EditBindingView = Montage.create(Component, {
 
             this._bindingArgs = value;
 
-            this.sourceObjectIdentifier = value.sourceObject.identifier;
-            this.sourceObjectPropertyPath = value.sourceObjectPropertyPath;
-            this.boundObjectIdentifier = value.boundObject.identifier;
-            this.boundObjectPropertyPath = value.boundObjectPropertyPath;
+            // clear form values
+            this.clearForm();
+
+            // set up hints for hintable components
+            this.objectIdentifiers = this.getObjectIdentifiers();
+            console.log("setting hints to ", this.objectIdentifiers);
+            this.boundObjectField.hints = this.objectIdentifiers;
+            this.sourceObjectField.hints = this.objectIdentifiers;
+
+            if(value.sourceObject) {
+                this.sourceObjectIdentifier = value.sourceObject.identifier || '';
+                this.sourceObjectPropertyPath = value.sourceObjectPropertyPath || '';
+            }
+
+            if(value.boundObject) {
+                this.boundObjectIdentifier = value.boundObject.identifier || '';
+                this.boundObjectPropertyPath = value.boundObjectPropertyPath || '';
+            }
+
             this.oneway = value.oneway;
 
             this.needsDraw = true;
@@ -76,15 +102,39 @@ exports.EditBindingView = Montage.create(Component, {
      Save/Close button handlers
      ------------------- */
 
+    "sourceObjectField"             : {value: null, enumerable: true },
+    "boundObjectField"              : {value: null, enumerable: true },
+    "sourceObjectPropertyPathField" : {value: null, enumerable: true },
+    "boundObjectPropertyPathField"  : {value: null, enumerable: true },
+    "directionCheckbox"             : {value: null, enumerable: true },
+
+    clearForm : {
+        value: function() {
+            for(var field in this) {
+                if(this.hasOwnProperty(field)) {
+                    field.value = '';
+                }
+            }
+        }
+    },
+
+    /* -------------------
+     Save/Close button handlers
+     ------------------- */