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') 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') 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') 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') 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) { - console.log("Source object IDENTIFIER changed"); if(value === this._sourceObjectIdentifier) { return; } this._sourceObjectIdentifier = value; @@ -45,7 +44,6 @@ 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; @@ -69,7 +67,6 @@ var editBindingView = exports.EditBindingView = Montage.create(Component, { if(value) { this.sourceObjectPropertyPathField.hints = this.application.ninja.objectsController.getPropertiesFromObject(value); - console.log("Setting hints to: ", this.sourceObjectPropertyPathField.hints); } this.needsDraw = true; @@ -81,12 +78,10 @@ var editBindingView = exports.EditBindingView = Montage.create(Component, { get : function() { return this._boundObject; }, set : function(value) { if(value === this._boundObject) { return; } - 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; @@ -97,12 +92,8 @@ var editBindingView = exports.EditBindingView = Montage.create(Component, { 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; @@ -156,27 +147,28 @@ var editBindingView = exports.EditBindingView = Montage.create(Component, { // clear form values this.clearForm(); - // set up hints for hintable components - this.objectIdentifiers = this.getObjectIdentifiers(); - console.log("setting hints to ", this.objectIdentifiers); - this.boundObjectField.hints = this.objectIdentifiers; - this.sourceObjectField.hints = this.objectIdentifiers; + if(value) { + // set up hints for hintable components + this.objectIdentifiers = this.getObjectIdentifiers(); + this.boundObjectField.hints = this.objectIdentifiers; + this.sourceObjectField.hints = this.objectIdentifiers; + + if(value.sourceObject) { + this.sourceObjectIdentifier = value.sourceObject.identifier || value.sourceObject._montage_metadata.label; + this.sourceObjectPropertyPath = value.sourceObjectPropertyPath || ''; + } - if(value.sourceObject) { - 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; + } - if(value.boundObject) { - this.boundObjectIdentifier = value.boundObject.identifier || ''; - this.boundObjectPropertyPath = value.boundObjectPropertyPath || ''; - this.isNewBinding = false; - } else { - this.isNewBinding = true; + this.oneway = value.oneway; } - this.oneway = value.oneway; - this.needsDraw = true; } }, @@ -199,25 +191,29 @@ var editBindingView = exports.EditBindingView = Montage.create(Component, { clearForm : { value: function() { - for(var field in this) { - if(this.hasOwnProperty(field)) { - field.value = ''; - } - } + var fields = ["sourceObjectField", + "boundObjectField", + "sourceObjectPropertyPathField", + "boundObjectPropertyPathField"]; + + fields.forEach(function(fieldName) { + this[fieldName].value = ""; + }, this); + + this._bindingArgs = null; + this.dirty = false; } }, saveForm : { value: function() { - debugger; - var controller = this.application.ninja.objectsController, newBindingArgs = { sourceObject : this.sourceObject, - sourceObjectPropertyPath : this.sourceObjectPropertyPathField.value, // TODO: shouldn't need to do this (get from bound property) + sourceObjectPropertyPath : this.sourceObjectPropertyPath, boundObject : this.boundObject, - boundObjectPropertyPath : this.boundObjectPropertyPathField.value, // TODO: shouldn't need to do this + boundObjectPropertyPath : this.boundObjectPropertyPath, oneway: this.oneway }; @@ -274,7 +270,6 @@ var editBindingView = exports.EditBindingView = Montage.create(Component, { handleEvent : { value: function(e) { if(e._event.type === 'change') { - console.log("here we are"); this.dirty = true; } } @@ -286,8 +281,6 @@ var editBindingView = exports.EditBindingView = Montage.create(Component, { templateDidLoad : { value: function() { - - Object.defineBinding(this, 'sourceObject', { boundObject: this, boundObjectPropertyPath: 'sourceObjectIdentifier', @@ -301,7 +294,6 @@ var editBindingView = exports.EditBindingView = Montage.create(Component, { oneway: false, converter : objectIdentifierConverter.create() }); - } }, @@ -317,9 +309,6 @@ var editBindingView = exports.EditBindingView = Montage.create(Component, { controller = this.application.ninja.objectsController, category; - this.sourceObjectIconElement.className = defaultIconClass; - this.boundObjectIconElement.className = defaultIconClass; - if(this.sourceObject) { this.sourceObjectIconElement.classList.remove('no-object'); category = controller.getObjectCategory(this.sourceObject).toLowerCase(); @@ -358,7 +347,6 @@ var objectIdentifierConverter = exports.ObjectIdentifierConverter = Montage.crea }, revert: { value: function(object) { - console.log("converter revert"); return object.identifier; } } -- cgit v1.2.3