From a5387d3cc74350dd06ecab2c8524d63d7540e57f Mon Sep 17 00:00:00 2001 From: Eric Guzman Date: Mon, 4 Jun 2012 16:37:09 -0700 Subject: Binding Panel - Add edit view --- .../edit-binding-view.reel/edit-binding-view.css | 36 +++++++ .../edit-binding-view.reel/edit-binding-view.html | 103 +++++++++++++++++++++ .../edit-binding-view.reel/edit-binding-view.js | 21 +++++ 3 files changed, 160 insertions(+) create mode 100644 js/panels/binding/edit-binding-view.reel/edit-binding-view.css create mode 100644 js/panels/binding/edit-binding-view.reel/edit-binding-view.html create mode 100644 js/panels/binding/edit-binding-view.reel/edit-binding-view.js (limited to 'js/panels/binding/edit-binding-view.reel') 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 new file mode 100644 index 00000000..b0249c6c --- /dev/null +++ b/js/panels/binding/edit-binding-view.reel/edit-binding-view.css @@ -0,0 +1,36 @@ +/* + This file contains proprietary software owned by Motorola Mobility, Inc.
+ No rights, expressed or implied, whatsoever to this software are provided by Motorola Mobility, Inc. hereunder.
+ (c) Copyright 2011 Motorola Mobility, Inc. All Rights Reserved. + */ + +.edit-binding-view { + background: #474747; + color: #FFF; + font-size: 11px; + height: 100%; + /*left: 100%;*/ + /*position: absolute;*/ + /*top: 0;*/ + width: 100%; + -webkit-transition: -webkit-transform 140ms ease-in; +} + +.edit-binding-view ul { + padding: 0; + margin: 0; +} + +.edit-binding-view li { + padding: 3px; + list-style-type: none; +} + +/* hintable fields */ + +.so-pp, .bo-pp { + border: 1px solid #313131; + padding: 1px 4px; + background-color: #444; + margin-left: 5px; +} \ 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 new file mode 100644 index 00000000..1d502a3e --- /dev/null +++ b/js/panels/binding/edit-binding-view.reel/edit-binding-view.html @@ -0,0 +1,103 @@ + + + + + + + + + +
+ + + +
+ + \ 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 new file mode 100644 index 00000000..700f3024 --- /dev/null +++ b/js/panels/binding/edit-binding-view.reel/edit-binding-view.js @@ -0,0 +1,21 @@ +/* + This file contains proprietary software owned by Motorola Mobility, Inc.
+ No rights, expressed or implied, whatsoever to this software are provided by Motorola Mobility, Inc. hereunder.
+ (c) Copyright 2011 Motorola Mobility, Inc. All Rights Reserved. + */ + +var Montage = require("montage/core/core").Montage, + Component = require("montage/ui/component").Component; + + +exports.EditBindingView = Montage.create(Component, { + objectsList : { + value: ["Object1", "Object2", "Object3"] + }, + + prepareForDraw : { + value: function() { + console.log("Preparing to draw edit view"); + } + } +}); \ No newline at end of file -- cgit v1.2.3 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/panels/binding/edit-binding-view.reel') 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 From 32f8b04c6911c6ac2f3f83dded50e6d5c0fbeede Mon Sep 17 00:00:00 2001 From: Eric Guzman Date: Sun, 10 Jun 2012 16:35:03 -0700 Subject: Binding Panel - Minor Editing Panel changes --- .../edit-binding-view.reel/edit-binding-view.css | 6 ++- .../edit-binding-view.reel/edit-binding-view.html | 24 ++++++--- .../edit-binding-view.reel/edit-binding-view.js | 62 +++++++++++++++++++--- 3 files changed, 78 insertions(+), 14 deletions(-) (limited to 'js/panels/binding/edit-binding-view.reel') 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 6e2ca31c..aa539cd6 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 @@ -13,7 +13,10 @@ position: absolute; top: 0; width: 100%; - -webkit-transition: -webkit-transform .55s cubic-bezier(.44,.19,0,.99); + -webkit-transition-property: -webkit-transform, box-shadow; + -webkit-transition-duration: .55s, .2s; + -webkit-transition-timing-function: cubic-bezier(.44,.19,0,.99); + -webkit-user-select: text; } .edit-binding-view ul { @@ -37,6 +40,7 @@ background-color: #444; border: 1px solid #313131; display: inline-block; + height: 13px; margin-left: 5px; padding: 1px 4px; width: 45%; 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 0c1abcee..d07f4445 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 @@ -13,14 +13,19 @@ "owner": { "prototype": "js/panels/binding/edit-binding-view.reel", "properties": { - "element": {"#": "edit-binding"} + "element": {"#": "edit-binding"}, + "sourceObjectField" : {"@": "sourceObjectField" }, + "boundObjectField" : {"@": "boundObjectField" }, + "sourceObjectPropertyPathField" : {"@": "sourceObjectPropertyPathField" }, + "boundObjectPropertyPathField" : {"@": "boundObjectPropertyPathField" }, + "directionCheckbox" : {"@": "directionCheckbox" } } }, "sourceObjectField": { "prototype": "js/components/hintable.reel", "properties": { + "startOnEvent": "click", "element": {"#": "sourceObjectField"} - }, "bindings": { "value": {"<-": "@owner.sourceObjectIdentifier"} @@ -35,6 +40,7 @@ "boundObjectField": { "prototype": "js/components/hintable.reel", "properties": { + "startOnEvent": "click", "element": {"#": "boundObjectField"} }, "bindings": { @@ -50,6 +56,7 @@ "sourceObjectPropertyPathField": { "prototype": "js/components/hintable.reel", "properties": { + "startOnEvent": "click", "element": {"#": "so-pp"}, "identifier": "sourceProperty" }, @@ -66,6 +73,7 @@ "boundObjectPropertyPathField": { "prototype": "js/components/hintable.reel", "properties": { + "startOnEvent": "click", "element": {"#": "bo-pp"}, "identifier": "boundProperty" }, @@ -109,18 +117,20 @@
- + + +
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 c3ef7384..c9f946f5 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 @@ -83,13 +83,16 @@ exports.EditBindingView = Montage.create(Component, { this.sourceObjectField.hints = this.objectIdentifiers; if(value.sourceObject) { - this.sourceObjectIdentifier = value.sourceObject.identifier || ''; + 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; + } else { + this.isNewBinding = true; } this.oneway = value.oneway; @@ -99,14 +102,20 @@ exports.EditBindingView = Montage.create(Component, { }, /* ------------------- - Save/Close button handlers + Form properties ------------------- */ + dirty: { value: null }, + isNewBinding : { value: null }, + "sourceObjectField" : {value: null, enumerable: true }, "boundObjectField" : {value: null, enumerable: true }, "sourceObjectPropertyPathField" : {value: null, enumerable: true }, "boundObjectPropertyPathField" : {value: null, enumerable: true }, "directionCheckbox" : {value: null, enumerable: true }, + "deleteButton" : {value: null }, + "saveButton" : {value: null }, + "cancelButton" : {value: null }, clearForm : { value: function() { @@ -115,24 +124,86 @@ exports.EditBindingView = Montage.create(Component, { field.value = ''; } } + this.dirty = false; + } + }, + + saveForm : { + value: function() { + var controller = this.application.ninja.objectsController, + newBindingArgs = { + sourceObject : this.getObjectFromIdentifierValue(this.sourceObjectField.value), + sourceObjectPropertyPath : this.sourceObjectPropertyPathField.value, + boundObject : this.getObjectFromIdentifierValue(this.boundObjectField.value), + boundObjectPropertyPath : this.boundObjectPropertyPathField.value, + oneway: this.oneway + }; + + if(this.isNewBinding) { + controller.addBinding(newBindingArgs); + } else { + controller.editBinding(this.bindingArgs, newBindingArgs); + } + + controller.currentObject = controller.currentObject; + } + }, + + getObjectFromIdentifierValue : { + value: function(id) { + var identifiers = this.getObjectIdentifiers(), + objects = this.application.ninja.objectsController.objects; + + return objects[identifiers.indexOf(id)]; } }, /* ------------------- - Save/Close button handlers + Save/Cancel/Delete button handlers ------------------- */ - handleCloseButtonAction : { + handleCancelButtonAction : { + value: function(e) { + this.clearForm(); + this.parentComponent.editing = false; + } + }, + + handleDeleteButtonAction : { + value: function(e) { + var controller = this.application.ninja.objectsController; + + controller.removeBinding(this.bindingArgs); + controller.currentObject = controller.currentObject; + + this.parentComponent.editing = false; + } + }, + handleSaveButtonAction : { value: function(e) { + this.saveForm(); this.parentComponent.editing = false; } }, + + /* ------------------- + Dirty handler + ------------------- */ + + handleEvent : { + value: function(e) { + if(e._event.type === 'change') { + this.dirty = true; + } + } + }, + /* ------------------- Draw Cycle ------------------- */ - willDraw : { + prepareForDraw : { value: function() { } -- cgit v1.2.3 From bb1ab90e9ad1814f4e26f820bcdf5e54fa838a18 Mon Sep 17 00:00:00 2001 From: Eric Guzman Date: Tue, 12 Jun 2012 12:59:42 -0700 Subject: Binding Panel - set up new edit view layout --- .../edit-binding-view.reel/edit-binding-view.css | 13 +++++++++ .../edit-binding-view.reel/edit-binding-view.html | 31 ++++++++++++---------- 2 files changed, 30 insertions(+), 14 deletions(-) (limited to 'js/panels/binding/edit-binding-view.reel') 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 aa539cd6..37e27309 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 @@ -19,6 +19,19 @@ -webkit-user-select: text; } +.edit-object-binding { + display: -webkit-box; + -webkit-box-orient: horizontal +} +.edit-object-binding > div { + -webkit-box-flex: 1; + overflow: hidden; +} +.edit-object-binding .object-icon { + -webkit-transform: scale(.75); + float: left; +} + .edit-binding-view ul { padding: 0; margin: 0; 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 604d4871..c13e4587 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 @@ -148,23 +148,26 @@
-
\ 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 c9f946f5..10f427af 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 @@ -145,7 +145,6 @@ exports.EditBindingView = Montage.create(Component, { controller.editBinding(this.bindingArgs, newBindingArgs); } - controller.currentObject = controller.currentObject; } }, @@ -174,7 +173,6 @@ exports.EditBindingView = Montage.create(Component, { var controller = this.application.ninja.objectsController; controller.removeBinding(this.bindingArgs); - controller.currentObject = controller.currentObject; this.parentComponent.editing = false; } -- cgit v1.2.3 From 62c7c2ac7b72c7e89611d064eef1f4f77a54696d Mon Sep 17 00:00:00 2001 From: Eric Guzman Date: Wed, 13 Jun 2012 19:08:46 -0700 Subject: Edit Binding - Binding improvements to show icon and save form --- .../edit-binding-view.reel/edit-binding-view.css | 9 +- .../edit-binding-view.reel/edit-binding-view.html | 24 ++- .../edit-binding-view.reel/edit-binding-view.js | 173 ++++++++++++++++++--- 3 files changed, 167 insertions(+), 39 deletions(-) (limited to 'js/panels/binding/edit-binding-view.reel') 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 23585aca..01feb5cc 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 @@ -33,7 +33,6 @@ display: -webkit-box; -webkit-box-orient: horizontal; -webkit-box-flex: 1; - overflow: hidden; } .object-container:first-child { margin-right: 5px; @@ -47,10 +46,7 @@ width: 40px; -webkit-box-flex: 0; } -.object-icon-container > div { - height: 100%; - width: 100%; -} + .edit-object-binding .object-icon { -webkit-transform: scale(.75); height: 100%; @@ -93,8 +89,9 @@ .buttons-container { background-color: #474747; + padding: 5px 0; position: absolute; - bottom: 5px; + bottom: 0; width: 100%; } 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 e2cbdd1d..91a5426f 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 @@ -21,7 +21,9 @@ "directionCheckbox" : {"@": "directionCheckbox" }, "saveButton":{ "@": "saveButton" }, "cancelButton":{ "@": "cancelButton" }, - "deleteButton":{ "@": "deleteButton" } + "deleteButton":{ "@": "deleteButton" }, + "sourceObjectIconElement": {"#": "source-object-icon"}, + "boundObjectIconElement": {"#": "bound-object-icon"} } }, "sourceObjectField": { @@ -31,7 +33,7 @@ "element": {"#": "sourceObjectField"} }, "bindings": { - "value": {"<-": "@owner.sourceObjectIdentifier"} + "value": {"<<->": "@owner.sourceObjectIdentifier"} }, "listeners" : [ { @@ -47,7 +49,7 @@ "element": {"#": "boundObjectField"} }, "bindings": { - "value": {"<-": "@owner.boundObjectIdentifier"} + "value": {"<<->": "@owner.boundObjectIdentifier"} }, "listeners" : [ { @@ -64,7 +66,7 @@ "identifier": "sourceProperty" }, "bindings": { - "value": {"<-": "@owner.sourceObjectPropertyPath"} + "value": {"<<->": "@owner.sourceObjectPropertyPath"} }, "listeners" : [ { @@ -81,7 +83,7 @@ "identifier": "boundProperty" }, "bindings": { - "value": {"<-": "@owner.boundObjectPropertyPath"} + "value": {"<<->": "@owner.boundObjectPropertyPath"} }, "listeners" : [ { @@ -147,14 +149,10 @@
- -
-
-
-
+
Test @@ -164,9 +162,7 @@
-
-
-
+
Test @@ -175,12 +171,10 @@
-
-
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 10f427af..62a47aaf 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 @@ -5,10 +5,13 @@ */ var Montage = require("montage/core/core").Montage, - Component = require("montage/ui/component").Component; + Component = require("montage/ui/component").Component, + Converter = require("montage/core/converter/converter").Converter; -exports.EditBindingView = Montage.create(Component, { +var editBindingView = exports.EditBindingView = Montage.create(Component, { + sourceObjectIconElement : { value: null }, + boundObjectIconElement : { value: null }, objectIdentifiers : { value: null @@ -22,25 +25,90 @@ exports.EditBindingView = Montage.create(Component, { }, /* ------------------- - Binding Properties + Object Identifier (for associating with object) ------------------- */ + _sourceObjectIdentifier : { value: null }, sourceObjectIdentifier : { - value: "", - distinct: true - }, - sourceObjectPropertyPath : { - value: "", - distinct: true + get : function() { return this._sourceObjectIdentifier; }, + set : function(value) { + if(value === this._sourceObjectIdentifier) { return; } + + this._sourceObjectIdentifier = value; + + this.needsDraw = true; + } }, + + _boundObjectIdentifier : { value: null }, boundObjectIdentifier : { - value: "", - distinct: true + get : function() { return this._boundObjectIdentifier; }, + set : function(value) { + if(value === this._boundObjectIdentifier) { return; } + + this._boundObjectIdentifier = value; + + this.needsDraw = true; + } + }, + + + /* ------------------- + Binding Properties + ------------------- */ + + _sourceObject : { value: null }, + sourceObject : { + get : function() { return this._sourceObject; }, + set : function(value) { + if(value === this._sourceObject) { return; } + + this._sourceObject = value; + + this.needsDraw = true; + } + }, + + _boundObject : { value: null }, + boundObject : { + get : function() { return this._boundObject; }, + set : function(value) { + if(value === this._boundObject) { return; } + console.log("Bound Object being set to ", value); + this._boundObject = value; + + this.needsDraw = true; + } + }, + + _sourceObjectPropertyPath : { value: null }, + 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; + } }, + + _boundObjectPropertyPath : { value: null }, boundObjectPropertyPath : { - value: "", - distinct: true + get : function() { return this._boundObjectPropertyPath; }, + set : function(value) { + if(value === this._boundObjectPropertyPath) { return; } + + this._boundObjectPropertyPath = value; + + this.needsDraw = true; + } }, + _oneway: { value: null }, @@ -130,13 +198,15 @@ exports.EditBindingView = Montage.create(Component, { saveForm : { value: function() { + debugger; + var controller = this.application.ninja.objectsController, newBindingArgs = { - sourceObject : this.getObjectFromIdentifierValue(this.sourceObjectField.value), - sourceObjectPropertyPath : this.sourceObjectPropertyPathField.value, - boundObject : this.getObjectFromIdentifierValue(this.boundObjectField.value), - boundObjectPropertyPath : this.boundObjectPropertyPathField.value, - oneway: this.oneway + sourceObject : this.sourceObject, + sourceObjectPropertyPath : this.sourceObjectPropertyPathField.value, // TODO: shouldn't need to do this (get from bound property) + boundObject : this.boundObject, + boundObjectPropertyPath : this.boundObjectPropertyPathField.value, // TODO: shouldn't need to do this + oneway: this.oneway }; if(this.isNewBinding) { @@ -201,9 +271,76 @@ exports.EditBindingView = Montage.create(Component, { Draw Cycle ------------------- */ + templateDidLoad : { + value: function() { + + + Object.defineBinding(this, 'sourceObject', { + boundObject: this, + boundObjectPropertyPath: 'sourceObjectIdentifier', + oneway: false, + converter : objectIdentifierConverter.create() + }); + + Object.defineBinding(this, 'boundObject', { + boundObject: this, + boundObjectPropertyPath: 'boundObjectIdentifier', + oneway: false, + converter : objectIdentifierConverter.create() + }); + + } + }, + prepareForDraw : { value: function() { } + }, + + draw : { + value: function() { + var defaultIconClass = 'object-icon', + controller = this.application.ninja.objectsController, + category; + + this.sourceObjectIconElement.className = defaultIconClass; + this.boundObjectIconElement.className = defaultIconClass; + + if(this.sourceObject) { + category = controller.getObjectCategory(this.sourceObject).toLowerCase(); + + if(category) { + this.sourceObjectIconElement.classList.add('object-icon-'+category); + } + } + + if(this.boundObject) { + category = controller.getObjectCategory(this.boundObject).toLowerCase() || null; + + if(category) { + this.boundObjectIconElement.classList.add('object-icon-'+category); + } + } + } + } +}); + +var objectIdentifierConverter = exports.ObjectIdentifierConverter = Montage.create(Converter, { + convert: { + value: function(identifier) { + if(!identifier) { return null; } + + var identifiers = editBindingView.getObjectIdentifiers(), + objects = editBindingView.application.ninja.objectsController.objects; + + return objects[identifiers.indexOf(identifier)]; + } + }, + revert: { + value: function(object) { + console.log("converter revert"); + return object.identifier; + } } }); \ No newline at end of file -- cgit v1.2.3 From b7e739311d9ddeb99029313cae9395878c7f7706 Mon Sep 17 00:00:00 2001 From: Eric Guzman Date: Mon, 18 Jun 2012 13:23:05 -0700 Subject: Binding - Show tray when there are objects. Edit binding view css update. --- .../binding/edit-binding-view.reel/edit-binding-view.css | 4 ++++ js/panels/binding/edit-binding-view.reel/edit-binding-view.js | 11 +++++++++++ 2 files changed, 15 insertions(+) (limited to 'js/panels/binding/edit-binding-view.reel') 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..955cff3a 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 @@ -116,6 +116,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.js b/js/panels/binding/edit-binding-view.reel/edit-binding-view.js index 62a47aaf..8fd6a48e 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,12 @@ var editBindingView = exports.EditBindingView = Montage.create(Component, { this._sourceObject = value; + if(value) { + + this.sourceObjectPropertyPathField.hints = this.application.ninja.objectsController.getPropertiesFromObject(value); + console.log("Setting hints to: ", this.sourceObjectPropertyPathField.hints); + } + this.needsDraw = true; } }, @@ -77,6 +83,11 @@ var editBindingView = exports.EditBindingView = Montage.create(Component, { console.log("Bound Object being set to ", value); this._boundObject = value; + if(value) { + this.boundObjectPropertyPathField.hints = this.application.ninja.objectsController.getPropertiesFromObject(value); + console.log("Setting hints to: ", this.boundObjectPropertyPathField.hints); + } + this.needsDraw = true; } }, -- cgit v1.2.3 From 54674d9160475f1bb72bd7eaacb2da0fb51863f4 Mon Sep 17 00:00:00 2001 From: Eric Guzman Date: Mon, 18 Jun 2012 16:01:31 -0700 Subject: Edit Binding View - Handle no object for icon --- js/panels/binding/edit-binding-view.reel/edit-binding-view.css | 5 ++++- js/panels/binding/edit-binding-view.reel/edit-binding-view.js | 10 +++++++++- 2 files changed, 13 insertions(+), 2 deletions(-) (limited to 'js/panels/binding/edit-binding-view.reel') 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 955cff3a..634f391c 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 @@ -55,13 +55,16 @@ position:relative; top: -1px; left: -1px; + -webkit-transition: opacity 200ms linear; } .object-fields-container { -webkit-box-flex: 1; padding-top: 1px; width: 1px; } - +.no-object { + opacity: 0; +} .edit-binding-view ul { padding: 0; 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 8fd6a48e..5ee8c65a 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 @@ -32,6 +32,7 @@ var editBindingView = exports.EditBindingView = Montage.create(Component, { sourceObjectIdentifier : { get : function() { return this._sourceObjectIdentifier; }, set : function(value) { + console.log("Source object IDENTIFIER changed"); if(value === this._sourceObjectIdentifier) { return; } this._sourceObjectIdentifier = value; @@ -44,6 +45,7 @@ var editBindingView = exports.EditBindingView = Montage.create(Component, { boundObjectIdentifier : { get : function() { return this._boundObjectIdentifier; }, set : function(value) { + console.log("Bound object IDENTIFIER changed"); if(value === this._boundObjectIdentifier) { return; } this._boundObjectIdentifier = value; @@ -66,7 +68,6 @@ var editBindingView = exports.EditBindingView = Montage.create(Component, { this._sourceObject = value; if(value) { - this.sourceObjectPropertyPathField.hints = this.application.ninja.objectsController.getPropertiesFromObject(value); console.log("Setting hints to: ", this.sourceObjectPropertyPathField.hints); } @@ -273,6 +274,7 @@ var editBindingView = exports.EditBindingView = Montage.create(Component, { handleEvent : { value: function(e) { if(e._event.type === 'change') { + console.log("here we are"); this.dirty = true; } } @@ -319,19 +321,25 @@ var editBindingView = exports.EditBindingView = Montage.create(Component, { this.boundObjectIconElement.className = defaultIconClass; if(this.sourceObject) { + this.sourceObjectIconElement.classList.remove('no-object'); category = controller.getObjectCategory(this.sourceObject).toLowerCase(); if(category) { this.sourceObjectIconElement.classList.add('object-icon-'+category); } + } else { + this.sourceObjectIconElement.classList.add('no-object'); } if(this.boundObject) { + this.boundObjectIconElement.classList.remove('no-object'); category = controller.getObjectCategory(this.boundObject).toLowerCase() || null; if(category) { this.boundObjectIconElement.classList.add('object-icon-'+category); } + } else { + this.boundObjectIconElement.classList.add('no-object'); } } } -- cgit v1.2.3 From e0db1e6cb924d6d863f3a0224b05e6c281443d02 Mon Sep 17 00:00:00 2001 From: Eric Guzman Date: Mon, 18 Jun 2012 18:57:44 -0700 Subject: Edit View - Minor cleanup --- js/panels/binding/edit-binding-view.reel/edit-binding-view.css | 4 ++-- js/panels/binding/edit-binding-view.reel/edit-binding-view.html | 4 ++-- 2 files changed, 4 insertions(+), 4 deletions(-) (limited to 'js/panels/binding/edit-binding-view.reel') 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 634f391c..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,7 +55,7 @@ position:relative; top: -1px; left: -1px; - -webkit-transition: opacity 200ms linear; + -webkit-transition: opacity 550ms linear; } .object-fields-container { -webkit-box-flex: 1; 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 @@
- Test +
@@ -165,7 +165,7 @@
- Test +
-- cgit v1.2.3 From aaa917e53253b595c59e6e9549fcb95a402af364 Mon Sep 17 00:00:00 2001 From: Eric Guzman Date: Mon, 18 Jun 2012 18:58:37 -0700 Subject: Edit Binding View - Improve how form is populated, cleared, and saved. Also cleaned up some logs. --- .../edit-binding-view.reel/edit-binding-view.js | 74 +++++++++------------- 1 file changed, 31 insertions(+), 43 deletions(-) (limited to 'js/panels/binding/edit-binding-view.reel') 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 5ee8c65a..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 @@ -32,7 +32,6 @@ var editBindingView = exports.EditBindingView = Montage.create(Component, { sourceObjectIdentifier : { get : function() { return this._sourceObjectIdentifier; }, set : function(value) { -