Merge pull request #16 from ericguzman/binding

Objects Tray - Moved to stage object from binding view

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 @@
     top: 0;
     width: 100%;
     -webkit-transition-property: -webkit-transform;
-    -webkit-transition-duration: .55s;
+    -webkit-transition-duration: 550ms;
     -webkit-transition-timing-function: cubic-bezier(.44,.19,0,.99);
     -webkit-user-select: text;
 }
@@ -55,13 +55,16 @@
     position:relative;
     top: -1px;
     left: -1px;
+    -webkit-transition: opacity 550ms linear;
 }
 .object-fields-container {
     -webkit-box-flex: 1;
     padding-top: 1px;
     width: 1px;
 }
-
+.no-object {
+    opacity: 0;
+}
 
 .edit-binding-view ul {
     padding: 0;
@@ -116,6 +119,10 @@
     width: 80%;
 }
 
+.hintable-field .hintable-hint {
+    color: #7C7C7C;
+}
+
 .hintable-field:focus {
     border: 1px solid #313131;
 }
\ 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 @@
                 <div data-montage-id="source-object-icon" class="object-icon"></div>
             </div>
             <div class="object-fields-container">
-                <span data-montage-id="sourceObjectField" class="hintable-field">Test</span>
+                <span data-montage-id="sourceObjectField" class="hintable-field"></span>
                 <span data-montage-id="so-pp" class="hintable-field so-pp"></span>
             </div>
         </div>
@@ -165,7 +165,7 @@
                 <div data-montage-id="bound-object-icon" class="object-icon"></div>
             </div>
             <div class="object-fields-container">
-                <span data-montage-id="boundObjectField" class="hintable-field">Test</span>
+                <span data-montage-id="boundObjectField" class="hintable-field"></span>
                 <span data-montage-id="bo-pp" class="hintable-field bo-pp"></span>
             </div>
         </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, {
 
             this._sourceObject = value;
 
+            if(value) {
+                this.sourceObjectPropertyPathField.hints = this.application.ninja.objectsController.getPropertiesFromObject(value);
+            }
+
             this.needsDraw = true;
         }
     },
@@ -74,9 +78,12 @@ var editBindingView = exports.EditBindingView = Montage.create(Component, {
         get : function() { return this._boundObject; },
         set : function(value) {
             if(value === this._boundObject) { return; }
-            console.log("Bound Object being set to ", value);
             this._boundObject = value;
 
+            if(value) {
+                this.boundObjectPropertyPathField.hints = this.application.ninja.objectsController.getPropertiesFromObject(value);
+            }
+
             this.needsDraw = true;
         }
     },
@@ -85,12 +92,8 @@ var editBindingView = exports.EditBindingView = Montage.create(Component, {
     sourceObjectPropertyPath : {
         get : function() { return this._sourceObjectPropertyPath; },
         set : function(value) {
-            console.log("Source Object Property Path being set to ", value);
-
             if(value === this._sourceObjectPropertyPath) { return; }
 
-
-
             this._sourceObjectPropertyPath = value;
 
             this.needsDraw = true;
@@ -144,26 +147,27 @@ var editBindingView = exports.EditBindingView = Montage.create(Component, {
             // 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) {
+                // set up hints for hintable components
+                this.objectIdentifiers = this.getObjectIdentifiers();
+                this.boundObjectField.hints = this.objectIdentifiers;
+                this.sourceObjectField.hints = this.objectIdentifiers;
 
-            if(value.sourceObject) {
-                this.sourceObjectIdentifier = value.sourceObject.identifier || value.sourceObject._montage_metadata.label;
-                this.sourceObjectPropertyPath = value.sourceObjectPropertyPath || '';
-            }
+                if(value.sourceObject) {
+                    this.sourceObjectIdentifier = value.sourceObject.identifier || value.sourceObject._montage_metadata.label;
+                    this.sourceObjectPropertyPath = value.sourceObjectPropertyPath || '';
+                }
 
-            if(value.boundObject) {
-                this.boundObjectIdentifier = value.boundObject.identifier || '';
-                this.boundObjectPropertyPath = value.boundObjectPropertyPath || '';
-                this.isNewBinding = false;
-            } else {
-                this.isNewBinding = true;
-            }
+                if(value.boundObject) {
+                    this.boundObjectIdentifier = value.boundObject.identifier || '';
+                    this.boundObjectPropertyPath = value.boundObjectPropertyPath || '';
+                    this.isNewBinding = false;
+                } else {
+                    this.isNewBinding = true;
+                }
 
-            this.oneway = value.oneway;
+                this.oneway = value.oneway;
+            }
 
             this.needsDraw = true;
         }
@@ -187,25 +191,29 @@ var editBindingView = exports.EditBindingView = Montage.create(Component, {
 
     clearForm : {
         value: function() {
-            for(var field in this) {
-                if(this.hasOwnProperty(field)) {
-                    field.value = '';
-                }
-            }
+            var fields = ["sourceObjectField",
+                          "boundObjectField",
+                          "sourceObjectPropertyPathField",
+                          "boundObjectPropertyPathField"];
+
+            fields.forEach(function(fieldName) {
+                this[fieldName].value = "";
+            }, this);
+
+            this._bindingArgs = null;
+
             this.dirty = false;
         }
     },