Merge pull request #11 from ericguzman/binding

Binding

10 files changed, 383 insertions, 47 deletions

diff --git a/js/components/hintable.reel/hintable.js b/js/components/hintable.reel/hintable.js
index 803770db..e16c5f8a 100644
--- a/js/components/hintable.reel/hintable.js
+++ b/js/components/hintable.reel/hintable.js
@@ -185,12 +185,12 @@ exports.Hintable = Montage.create(Editable, {
     handleInput : {
         value : function handleInput(e) {
             this._super(arguments);
-            
+
             var val = this.value,
                  matches, hint;
             //console.log('val = "' + val + '"');
             //// Handle auto-suggest if configured
-            if(this.hints instanceof Array) {
+            if(this.hints && this.hints.length) {
 
                 if(val.length > 0) { // content is not empty
                     
@@ -305,7 +305,8 @@ exports.Hintable = Montage.create(Editable, {
 
     /* --------- CONFIG ---------- */
     hints : {
-        value : ['Testing a hint.', 'Testing another hint.', 'Testing the last hint.']
+        value : ['Testing a hint.', 'Testing another hint.', 'Testing the last hint.'],
+        distinct: true
     },
     hintClass : {
         value : "hintable-hint"
diff --git a/js/controllers/objects-controller.js b/js/controllers/objects-controller.js
index ee203336..2ce10e82 100644
--- a/js/controllers/objects-controller.js
+++ b/js/controllers/objects-controller.js
@@ -69,15 +69,23 @@ var objectsController = exports.ObjectsController = Montage.create(Component, {
         value: function(bindingArgs) {
             if(!bindingArgs) { return; }
 
+
+
             Object.deleteBinding(bindingArgs.sourceObject, bindingArgs.sourceObjectPropertyPath);
         }
     },
 
-    editBindingPropertyPath : {
-        value: function(bindingArgs, newPropertyPath) {
+    editBinding : {
+        value: function(bindingArgs, newProperties) {
+            var property;
+
             this.removeBinding(bindingArgs);
 
-            bindingArgs.boundObjectPropertyPath = 'newPropertyPath';
+            if(newProperties) {
+                for(property in newProperties) {
+                    bindingArgs[property] = newProperties[property];
+                }
+            }
 
             this.addBinding(bindingArgs);
         }
@@ -171,7 +179,7 @@ var objectsController = exports.ObjectsController = Montage.create(Component, {
             return this._currentObject;
         },
         set: function(value) {
-            if(value === this._currentObject) { return; }
+            //if(value === this._currentObject) { return; }
 
             if(value) {
                 this.currentObjectBindings = this.getObjectBindings(value);
diff --git a/js/document/templates/app/main.js b/js/document/templates/app/main.js
index 91c46fda..e2bdc1a0 100644
--- a/js/document/templates/app/main.js
+++ b/js/document/templates/app/main.js
@@ -29,7 +29,7 @@ exports.Main = Montage.create(Component, {
                         var componentRequire = component[data.name];
                         var componentInstance = componentRequire.create();
 
-                        componentInstance._montage_metadata.label = data.name;
+                        componentInstance._montage_metadata.label = componentInstance.identifier = data.name;
                         componentInstance.element = element;
 
                         componentInstance.needsDraw = true;
diff --git a/js/panels/binding-panel.reel/binding-panel.css b/js/panels/binding-panel.reel/binding-panel.css
index e3dcf140..a1d5be0f 100644
--- a/js/panels/binding-panel.reel/binding-panel.css
+++ b/js/panels/binding-panel.reel/binding-panel.css
@@ -7,9 +7,16 @@
 .binding-panel {
     position: relative;
     height: 100%;
+    display: -webkit-box;
+    overflow: hidden;
+    -webkit-box-orient: vertical;
 }
 
 .bindings-list {
+    -webkit-box-flex: 1;
     padding: 0;
     margin: 0;
 }
+.binding-panel-toolbar-container {
+    -webkit-box-flex: 0;
+}
diff --git a/js/panels/binding-panel.reel/binding-panel.html b/js/panels/binding-panel.reel/binding-panel.html
index a926da8d..9a2834c7 100644
--- a/js/panels/binding-panel.reel/binding-panel.html
+++ b/js/panels/binding-panel.reel/binding-panel.html
@@ -36,6 +36,7 @@
                     "element": {"#": "binding-item"}
                 },
                 "bindings": {
+                    "bindingArgs": {"<-": "@repetition.objectAtCurrentIteration"},
                     "sourceObjectPropertyPath": {"<-": "@repetition.objectAtCurrentIteration.sourceObjectPropertyPath"},
                     "sourceObject": {"<-": "@repetition.objectAtCurrentIteration.sourceObject"},
                     "boundObjectPropertyPath": {"<-": "@repetition.objectAtCurrentIteration.boundObjectPropertyPath"},
@@ -48,8 +49,20 @@
                 "properties": {
                     "element": {"#": "edit-binding-view" }
                 }
+            },
+            "toolbar": {
+                "prototype": "js/components/toolbar.reel",
+                "properties": {
+                    "element": {"#": "binding-panel-toolbar"},
+                    "delegate": {"@": "owner" },
+                    "buttons": [
+                        {
+                            "title": "Add",
+                            "identifier": "add"
+                        }
+                    ]
+                }
             }
-
         }
                 </script>
         </head>
@@ -58,6 +71,9 @@
         <ul data-montage-id="bindings-list" class="bindings-list">
             <li data-montage-id="binding-item" class="binding-item"></li>
         </ul>
+        <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>
 </body>
diff --git a/js/panels/binding-panel.reel/binding-panel.js b/js/panels/binding-panel.reel/binding-panel.js
index c2ce556c..0641ecf5 100644
--- a/js/panels/binding-panel.reel/binding-panel.js
+++ b/js/panels/binding-panel.reel/binding-panel.js
@@ -6,7 +6,6 @@ exports.BindingPanel = Montage.create(Component, {
 
     bindings : { value: null },
     editView : { value: null },
-    editingClass : { value: 'editing-binding' },
     _editing: { value: null },
     editing: {
         get: function() {
@@ -24,14 +23,27 @@ exports.BindingPanel = Montage.create(Component, {
 
     displayEditView : {
         value: function(bindingArgs) {
+            this.editView.bindingArgs = bindingArgs;
             this.editing = true;
         }
     },
 
     /* -------------------------
-        Draw Cycle
+     Toolbar Button Actions
      ------------------------- */
 
+    handleAddAction : {
+        value: function(e) {
+            var newBindingArgs = {
+                sourceObject : this.application.ninja.objectsController.currentObject
+            };
+
+            this.displayEditView(newBindingArgs);
+        }
+    },