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 From 99f14c2998760a0d871745d41c6e3419c8137d91 Mon Sep 17 00:00:00 2001 From: Eric Guzman Date: Fri, 8 Jun 2012 15:57:37 -0700 Subject: Binding Panel - Add toolbar --- js/panels/binding-panel.reel/binding-panel.css | 6 ++++++ js/panels/binding-panel.reel/binding-panel.html | 18 +++++++++++++++++- js/panels/binding-panel.reel/binding-panel.js | 1 + 3 files changed, 24 insertions(+), 1 deletion(-) (limited to 'js') diff --git a/js/panels/binding-panel.reel/binding-panel.css b/js/panels/binding-panel.reel/binding-panel.css index e3dcf140..97b6ac91 100644 --- a/js/panels/binding-panel.reel/binding-panel.css +++ b/js/panels/binding-panel.reel/binding-panel.css @@ -7,9 +7,15 @@ .binding-panel { position: relative; height: 100%; + display: -webkit-box; + -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" + } + ] + } } - } @@ -58,6 +71,9 @@ +
+
+
diff --git a/js/panels/binding-panel.reel/binding-panel.js b/js/panels/binding-panel.reel/binding-panel.js index c2ce556c..3b20a88f 100644 --- a/js/panels/binding-panel.reel/binding-panel.js +++ b/js/panels/binding-panel.reel/binding-panel.js @@ -24,6 +24,7 @@ exports.BindingPanel = Montage.create(Component, { displayEditView : { value: function(bindingArgs) { + this.editView.bindingArgs = bindingArgs; this.editing = true; } }, -- cgit v1.2.3 From af1c0007fffa3e9db6d11949a9ddec4bd697ee69 Mon Sep 17 00:00:00 2001 From: Eric Guzman Date: Fri, 8 Jun 2012 15:57:57 -0700 Subject: Binding Panel - supply binding args to edit view --- js/panels/binding/binding-item.reel/binding-item.js | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) (limited to 'js') diff --git a/js/panels/binding/binding-item.reel/binding-item.js b/js/panels/binding/binding-item.reel/binding-item.js index 55230fc3..a2b66008 100644 --- a/js/panels/binding/binding-item.reel/binding-item.js +++ b/js/panels/binding/binding-item.reel/binding-item.js @@ -12,6 +12,10 @@ exports.BindingItem = Montage.create(Component, { sourceObjectLabel : { value: null }, boundObjectLabel : { value: null }, + bindingArgs : { + value: null + }, + _sourceObject : { value: null }, sourceObject : { get: function() { @@ -88,7 +92,7 @@ exports.BindingItem = Montage.create(Component, { handleEditButtonAction : { value: function(e) { - this.parentComponent.parentComponent.displayEditView(); + this.parentComponent.parentComponent.displayEditView(this.bindingArgs); } }, -- cgit v1.2.3 From e737ce214eb59b552e6c7dd074c4f4d719bb31d4 Mon Sep 17 00:00:00 2001 From: Eric Guzman Date: Sun, 10 Jun 2012 16:32:34 -0700 Subject: Hintable - Array type check fix for arrays created with map() method. --- js/components/hintable.reel/hintable.js | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) (limited to 'js') 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" -- cgit v1.2.3 From 307a55d74e1ecd448ec1c5f8073dd7cd81be961f Mon Sep 17 00:00:00 2001 From: Eric Guzman Date: Sun, 10 Jun 2012 16:34:14 -0700 Subject: Binding Panel Toolbar - Add action handler --- js/panels/binding-panel.reel/binding-panel.js | 17 +++++++++++++++-- 1 file changed, 15 insertions(+), 2 deletions(-) (limited to 'js') diff --git a/js/panels/binding-panel.reel/binding-panel.js b/js/panels/binding-panel.reel/binding-panel.js index 3b20a88f..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() { @@ -30,9 +29,21 @@ exports.BindingPanel = Montage.create(Component, { }, /* ------------------------- - Draw Cycle + 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', { @@ -57,8 +68,10 @@ exports.BindingPanel = Montage.create(Component, { 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'); } } } -- 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') 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 dbb36888eda1f25387852ea79aef89d22dfd7799 Mon Sep 17 00:00:00 2001 From: Eric Guzman Date: Mon, 11 Jun 2012 07:20:04 -0700 Subject: Binding Panel - fix scrollbar issue with abs positioned edit view. --- js/panels/binding-panel.reel/binding-panel.css | 1 + 1 file changed, 1 insertion(+) (limited to 'js') diff --git a/js/panels/binding-panel.reel/binding-panel.css b/js/panels/binding-panel.reel/binding-panel.css index 97b6ac91..a1d5be0f 100644 --- a/js/panels/binding-panel.reel/binding-panel.css +++ b/js/panels/binding-panel.reel/binding-panel.css @@ -8,6 +8,7 @@ position: relative; height: 100%; display: -webkit-box; + overflow: hidden; -webkit-box-orient: vertical; } -- cgit v1.2.3