var Montage = require("montage/core/core").Montage, Component = require("montage/ui/component").Component; exports.BindingPanel = Montage.create(Component, { bindings : { value: null }, editView : { value: null }, _editing: { value: null }, editing: { get: function() { return this._editing; }, set: function(value) { if(value === this._editing) { return; } this._editing = value; this.needsDraw = true; } }, _translateDistance : { value: null }, displayEditView : { value: function(bindingArgs) { this.editView.bindingArgs = bindingArgs; this.editing = true; } }, /* ------------------------- Toolbar Button Actions ------------------------- */ handleAddAction : { value: function(e) { var newBindingArgs = { sourceObject : this.application.ninja.objectsController.currentObject }; this.displayEditView(newBindingArgs); } }, templateDidLoad : { value: function() { Object.defineBinding(this, 'bindings', { boundObject: this.application.ninja.objectsController, boundObjectPropertyPath: "currentObjectBindings", oneway: true }); } }, willDraw: { value: function() { if(this.editing) { this._translateDistance = this.element.offsetWidth; } } }, draw : { value: function() { var transStr = '-webkit-transform'; if(this.editing) { this.editView.element.style.setProperty(transStr, 'translate3d(-'+ this._translateDistance + 'px,0,0)'); this.editView.element.style.setProperty('box-shadow', '0 0 10px rgba(0,0,0,0.2)') } else { this.editView.element.style.removeProperty(transStr); this.editView.element.style.removeProperty('box-shadow'); } } } });