1 files changed, 126 insertions, 0 deletions

diff --git a/js/panels/binding-panel.reel/binding-panel.js b/js/panels/binding-panel.reel/binding-panel.js
new file mode 100644
index 00000000..c040c009
--- /dev/null
+++ b/js/panels/binding-panel.reel/binding-panel.js
@@ -0,0 +1,126 @@
+var Montage         = require("montage/core/core").Montage,
+    Component       = require("montage/ui/component").Component;
+
+
+exports.BindingPanel = Montage.create(Component, {
+
+    bindings : { value: null },
+    editView : { value: null },
+
+    _dockEditView : { value: null },
+    dockEditView : {
+        get : function() { return this._dockEditView; },
+        set : function(value) {
+            if(value === this._dockEditView) { return; }
+
+            this._dockEditView = value;
+
+            this.needsDraw = true;
+        }
+    },
+
+    _editing: { value: null },
+    editing: {
+        get: function() {
+            return this._editing;
+        },
+        set: function(value) {
+            if(value === this._editing) { return; }
+            this._editing = value;
+
+            if(!value) {
+                this.dockEditView = false;
+            }
+
+            this.needsDraw = true;
+        }
+    },
+    _translateDistance : {
+        value: null
+    },
+
+    displayEditView : {
+        value: function(bindingArgs) {
+            this.editView.bindingArgs = bindingArgs;
+            this.editing = true;
+        }
+    },
+
+    /* -------------------------
+       Event handlers
+     ------------------------- */
+
+    handleWebkitTransitionEnd : {
+        value: function(e) {
+            console.log("trans end");
+
+            this.dockEditView = this.editing;
+        }
+    },
+
+    /* -------------------------
+     Toolbar Button Actions
+     ------------------------- */
+
+    handleAddAction : {
+        value: function(e) {
+            var sourceObject = this.application.ninja.objectsController.currentObject;
+
+            if(sourceObject) {
+                this.displayEditView({
+                    sourceObject: sourceObject
+                });
+            } else {
+                this.displayEditView();
+            }
+        }
+    },
+
+
+
+    templateDidLoad : {
+        value: function() {
+            Object.defineBinding(this, 'bindings', {
+                boundObject: this.application.ninja.objectsController,
+                boundObjectPropertyPath: "currentObjectBindings",
+                oneway: true
+            });
+        }
+    },
+
+    prepareForDraw : {
+        value: function() {
+
+        }
+    },
+
+    willDraw: {
+        value: function() {
+            this.editView.element.addEventListener('webkitTransitionEnd', this, false);
+
+            if(this.editing) {
+                this._translateDistance = this.element.offsetWidth;
+            }
+        }
+    },
+
+    draw : {
+        value: function() {
+            var transStr = '-webkit-transform',
+                editViewEl = this.editView.element;
+
+            if(this.dockEditView) {
+                editViewEl.classList.add('edit-view-docked');
+                editViewEl.style.removeProperty(transStr);
+            } else {
+                editViewEl.classList.remove('edit-view-docked');
+                if(this.editing) {
+                    editViewEl.style.setProperty(transStr, 'translate3d(-'+ this._translateDistance + 'px,0,0)');
+                } else {
+                    editViewEl.style.removeProperty(transStr);
+                }
+            }
+            
+        }
+    }
+});
\ No newline at end of file