From d7e39dd2ff310b9f05676b7de49756036ab03514 Mon Sep 17 00:00:00 2001 From: Eric Guzman Date: Fri, 8 Jun 2012 15:57:08 -0700 Subject: Binding Panel - Update edit view - populate binding arguments --- .../edit-binding-view.reel/edit-binding-view.css | 21 ++++-- .../edit-binding-view.reel/edit-binding-view.html | 77 +++++++++++++++------- .../edit-binding-view.reel/edit-binding-view.js | 73 +++++++++++++++++++- 3 files changed, 140 insertions(+), 31 deletions(-) (limited to 'js') 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 b0249c6c..6e2ca31c 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 @@ -9,11 +9,11 @@ color: #FFF; font-size: 11px; height: 100%; - /*left: 100%;*/ - /*position: absolute;*/ - /*top: 0;*/ + left: 100%; + position: absolute; + top: 0; width: 100%; - -webkit-transition: -webkit-transform 140ms ease-in; + -webkit-transition: -webkit-transform .55s cubic-bezier(.44,.19,0,.99); } .edit-binding-view ul { @@ -26,11 +26,18 @@ list-style-type: none; } +.edit-binding-view label { + display: inline-block; + width: 50%; +} + /* hintable fields */ -.so-pp, .bo-pp { - border: 1px solid #313131; - padding: 1px 4px; +.hintable-field { background-color: #444; + border: 1px solid #313131; + display: inline-block; margin-left: 5px; + padding: 1px 4px; + width: 45%; } \ 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 1d502a3e..0c1abcee 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 @@ -16,27 +16,36 @@ "element": {"#": "edit-binding"} } }, - "objectsList" : { - "prototype": "montage/ui/controller/array-controller", - "bindings" : { - "content": {"<-": "@owner.objectsList"} - } - }, - "sourceObjectSelect": { - "prototype": "montage/ui/select-input.reel", + "sourceObjectField": { + "prototype": "js/components/hintable.reel", "properties": { - "element": {"#": "sourceObjectSelect"}, - "contentController": {"@": "objectsList"} + "element": {"#": "sourceObjectField"} - } + }, + "bindings": { + "value": {"<-": "@owner.sourceObjectIdentifier"} + }, + "listeners" : [ + { + "type": "change", + "listener": {"@": "owner"} + } + ] }, - "boundObjectSelect": { - "prototype": "montage/ui/select-input.reel", + "boundObjectField": { + "prototype": "js/components/hintable.reel", "properties": { - "element": {"#": "boundObjectSelect"}, - "contentController": {"@": "objectsList"} - - } + "element": {"#": "boundObjectField"} + }, + "bindings": { + "value": {"<-": "@owner.boundObjectIdentifier"} + }, + "listeners" : [ + { + "type": "change", + "listener": {"@": "owner"} + } + ] }, "sourceObjectPropertyPathField": { "prototype": "js/components/hintable.reel", @@ -69,6 +78,28 @@ "listener": {"@": "owner"} } ] + }, + "directionCheckbox": { + "prototype": "montage/ui/checkbox.reel", + "properties": { + "element": {"#": "direction-checkbox"} + }, + "bindings": { + "checked": {"<-": "@owner.oneway"} + } + }, + "closeButton" : { + "prototype": "montage/ui/button.reel", + "properties": { + "element": {"#": "close-button" }, + "identifier": "closeButton" + }, + "listeners": [ + { + "type": "action", + "listener": {"@": "owner" } + } + ] } } @@ -79,25 +110,27 @@ + + \ No newline at end of file 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 700f3024..1cef8f5e 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 @@ -9,8 +9,77 @@ var Montage = require("montage/core/core").Montage, exports.EditBindingView = Montage.create(Component, { - objectsList : { - value: ["Object1", "Object2", "Object3"] + + /* ------------------- + Binding Properties + ------------------- */ + + sourceObjectIdentifier : { + value: "", + distinct: true + }, + sourceObjectPropertyPath : { + value: "", + distinct: true + }, + boundObjectIdentifier : { + value: "", + distinct: true + }, + boundObjectPropertyPath : { + value: "", + distinct: true + }, + _oneway: { + value: null + }, + oneway: { + get: function() { + return this._oneway; + }, + set: function(value) { + if(value === this._oneway) { return; } + + this._oneway = !!value; + + this.needsDraw = true; + } + }, + + /* ------------------- + Binding Args Object + ------------------- */ + + _bindingArgs : { + value: null + }, + bindingArgs :{ + get: function() { + return this._bindingArgs; + }, + set: function(value) { + if(value === this._bindingArgs) { return; } + + this._bindingArgs = value; + + this.sourceObjectIdentifier = value.sourceObject.identifier; + this.sourceObjectPropertyPath = value.sourceObjectPropertyPath; + this.boundObjectIdentifier = value.boundObject.identifier; + this.boundObjectPropertyPath = value.boundObjectPropertyPath; + this.oneway = value.oneway; + + this.needsDraw = true; + } + }, + + /* ------------------- + Save/Close button handlers + ------------------- */ + + handleCloseButtonAction : { + value: function(e) { + this.parentComponent.editing = false; + } }, prepareForDraw : { -- cgit v1.2.3