Merge pull request #16 from ericguzman/binding

Objects Tray - Moved to stage object from binding view

5 files changed, 65 insertions, 47 deletions

diff --git a/js/panels/binding-panel.reel/binding-panel.html b/js/panels/binding-panel.reel/binding-panel.html
index 9a2834c7..fc80cd6e 100644
--- a/js/panels/binding-panel.reel/binding-panel.html
+++ b/js/panels/binding-panel.reel/binding-panel.html
@@ -74,7 +74,7 @@
         <div data-montage-id="binding-panel-toolbar-container" class="binding-panel-toolbar-container">
             <div data-montage-id="binding-panel-toolbar"></div>
         </div>
-        <div data-montage-id="edit-binding-view" class="edit-binding-view"></div>
+        <div data-montage-id="edit-binding-view"></div>
     </div>
 </body>
 </html>
\ No newline at end of file
diff --git a/js/panels/binding-panel.reel/binding-panel.js b/js/panels/binding-panel.reel/binding-panel.js
index 45fa4005..c040c009 100644
--- a/js/panels/binding-panel.reel/binding-panel.js
+++ b/js/panels/binding-panel.reel/binding-panel.js
@@ -64,11 +64,15 @@ exports.BindingPanel = Montage.create(Component, {
 
     handleAddAction : {
         value: function(e) {
-            var newBindingArgs = {
-                sourceObject : this.application.ninja.objectsController.currentObject
-            };
+            var sourceObject = this.application.ninja.objectsController.currentObject;
 
-            this.displayEditView(newBindingArgs);
+            if(sourceObject) {
+                this.displayEditView({
+                    sourceObject: sourceObject
+                });
+            } else {
+                this.displayEditView();
+            }
         }
     },
 
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;
+                if(value.boundObject) {
+                    this.boundObjectIdentifier = value.boundObject.identifier || '';
+                    this.boundObjectPropertyPath = value.boundObjectPropertyPath || '';
+                    this.isNewBinding = false;