From c144c6921d42fe96c18045b1c2a9822a467b1253 Mon Sep 17 00:00:00 2001 From: Eric Guzman Date: Fri, 15 Jun 2012 18:34:22 -0700 Subject: Objects Tray - Moved to stage object from binding view --- js/stage/binding-view.reel/binding-view.css | 11 ----------- js/stage/binding-view.reel/binding-view.html | 10 +--------- js/stage/stage.reel/stage.css | 18 ++++++++++++++++++ js/stage/stage.reel/stage.html | 12 ++++++++++++ 4 files changed, 31 insertions(+), 20 deletions(-) diff --git a/js/stage/binding-view.reel/binding-view.css b/js/stage/binding-view.reel/binding-view.css index a08def8a..37bc8318 100755 --- a/js/stage/binding-view.reel/binding-view.css +++ b/js/stage/binding-view.reel/binding-view.css @@ -5,7 +5,6 @@ */ .bindingView { - height: 100%; position: absolute; width:100%; z-index: 12; @@ -24,13 +23,3 @@ z-index: 1; } -.objects-tray-container { - bottom: 11px; - position: absolute; - width: 100%; - display: -webkit-box; - -webkit-box-orient: horizontal; - -webkit-box-pack: center; - -webkit-box-align: center; - z-index: 2; -} \ No newline at end of file diff --git a/js/stage/binding-view.reel/binding-view.html b/js/stage/binding-view.reel/binding-view.html index 9a127618..e0c42194 100755 --- a/js/stage/binding-view.reel/binding-view.html +++ b/js/stage/binding-view.reel/binding-view.html @@ -41,12 +41,6 @@ "listener": {"@": "owner"} } ] - }, - "objectsTray" : { - "prototype": "js/stage/objects-tray.reel", - "properties": { - "element": {"#": "objects-tray" } - } } } @@ -56,15 +50,13 @@
+
-
-
-
diff --git a/js/stage/stage.reel/stage.css b/js/stage/stage.reel/stage.css index 2271cd8a..bc20c4f3 100755 --- a/js/stage/stage.reel/stage.css +++ b/js/stage/stage.reel/stage.css @@ -48,6 +48,24 @@ width:2500px;/*to prevent scrolling of editor container in the middle of the page for short files*/ } +.stage-tray-container { + height: 100%; + position: absolute; + width: 100%; +} + +.objects-tray-container { + bottom: 10px; + position: absolute; + width: 100%; + display: -webkit-box; + -webkit-box-orient: horizontal; + -webkit-box-pack: center; + -webkit-box-align: center; + z-index: 2; +} + + span.CodeMirror-matchhighlight { background: #e9e9e9 } .CodeMirror-focused span.CodeMirror-matchhighlight { background: #e7e4ff; !important } div.CodeMirror span.CodeMirror-matchingbracket {color: #000 !important;background-color: #ffd500;} diff --git a/js/stage/stage.reel/stage.html b/js/stage/stage.reel/stage.html index 397af0b6..acab4b1b 100755 --- a/js/stage/stage.reel/stage.html +++ b/js/stage/stage.reel/stage.html @@ -47,6 +47,12 @@ "element": {"#": "bindingView" } } }, + "objectsTray" : { + "prototype": "js/stage/objects-tray.reel", + "properties": { + "element": {"#": "objects-tray" } + } + }, "owner": { "prototype": "js/stage/stage.reel", "properties": { @@ -83,6 +89,12 @@ +
+
+
+
+
+
-- 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 +++++++++++ js/stage/objects-tray.reel/objects-tray.js | 9 ++++++++- 3 files changed, 23 insertions(+), 1 deletion(-) 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; } }, diff --git a/js/stage/objects-tray.reel/objects-tray.js b/js/stage/objects-tray.reel/objects-tray.js index c046a3bb..190abf57 100644 --- a/js/stage/objects-tray.reel/objects-tray.js +++ b/js/stage/objects-tray.reel/objects-tray.js @@ -13,6 +13,7 @@ var Montage = require("montage/core/core").Montage, exports.ObjectsTray = Montage.create(Component, { hideClass : { value: 'hide-objects-tray'}, + _empty : { value: null }, _workspaceMode : { value: null }, workspaceMode : { get : function() { return this._workspaceMode; }, @@ -76,11 +77,17 @@ exports.ObjectsTray = Montage.create(Component, { "oneway": true }); + if(this.objects) { + this.empty = !this.objects.length; + } else { + this.empty = true; + } + } }, draw : { value: function() { - if(this.hide) { + if(this.hide || this._empty) { this.element.classList.add(this.hideClass); } else { this.element.classList.remove(this.hideClass); -- 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(-) 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 a0079f570ce996cb5acbf050a7abb1df1ad788eb Mon Sep 17 00:00:00 2001 From: Eric Guzman Date: Mon, 18 Jun 2012 18:56:04 -0700 Subject: Hintable - Fix editable/hintable value property so it is bindable. --- js/components/editable.reel/editable.js | 45 +++++++++++++++++++++++++++++---- js/components/hintable.reel/hintable.js | 36 +------------------------- 2 files changed, 41 insertions(+), 40 deletions(-) diff --git a/js/components/editable.reel/editable.js b/js/components/editable.reel/editable.js index 103e418f..88b93b2c 100644 --- a/js/components/editable.reel/editable.js +++ b/js/components/editable.reel/editable.js @@ -93,12 +93,43 @@ exports.Editable = Montage.create(Component, { } } }, + + _value : { value: null }, value : { - get: function() { - return this._element.textContent; - }, - set: function(str) { - this._element.textContent = str; + get : function() { return this._value; }, + set : function(value) { + if(value === this._value) { return; } + + var node = this._getFirstTextNode(); + node.textContent = value; + + this._value = value; + } + }, + _getFirstTextNode : { + value : function(el) { + ///// optional el argument specified container element + var e = el || this._element, + nodes = e.childNodes, node; + + if(nodes.length) { + for(var i=0; i
-
+
\ No newline at end of file diff --git a/js/panels/binding-panel.reel/binding-panel.js b/js/panels/binding-panel.reel/binding-panel.js index 45fa4005..c040c009 100644 --- a/js/panels/binding-panel.reel/binding-panel.js +++ b/js/panels/binding-panel.reel/binding-panel.js @@ -64,11 +64,15 @@ exports.BindingPanel = Montage.create(Component, { handleAddAction : { value: function(e) { - var newBindingArgs = { - sourceObject : this.application.ninja.objectsController.currentObject - }; + var sourceObject = this.application.ninja.objectsController.currentObject; - this.displayEditView(newBindingArgs); + if(sourceObject) { + this.displayEditView({ + sourceObject: sourceObject + }); + } else { + this.displayEditView(); + } } }, -- 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(-) 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(-) 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 From e04903ed2d2e6754119550cb071e03878bb1b14b Mon Sep 17 00:00:00 2001 From: Eric Guzman Date: Mon, 18 Jun 2012 19:08:05 -0700 Subject: Objects Tray - Move back to binding view --- js/stage/binding-view.reel/binding-view.css | 11 +++++++++++ js/stage/binding-view.reel/binding-view.html | 10 ++++++++++ js/stage/stage.reel/stage.css | 18 ------------------ js/stage/stage.reel/stage.html | 12 ------------ 4 files changed, 21 insertions(+), 30 deletions(-) diff --git a/js/stage/binding-view.reel/binding-view.css b/js/stage/binding-view.reel/binding-view.css index 37bc8318..543577d1 100755 --- a/js/stage/binding-view.reel/binding-view.css +++ b/js/stage/binding-view.reel/binding-view.css @@ -5,6 +5,7 @@ */ .bindingView { + height: 100%; position: absolute; width:100%; z-index: 12; @@ -23,3 +24,13 @@ z-index: 1; } +.objects-tray-container { + bottom: 10px; + position: absolute; + width: 100%; + display: -webkit-box; + -webkit-box-orient: horizontal; + -webkit-box-pack: center; + -webkit-box-align: center; + z-index: 2; +} \ No newline at end of file diff --git a/js/stage/binding-view.reel/binding-view.html b/js/stage/binding-view.reel/binding-view.html index e0c42194..91c9e397 100755 --- a/js/stage/binding-view.reel/binding-view.html +++ b/js/stage/binding-view.reel/binding-view.html @@ -27,6 +27,12 @@ "objects": {"<-": "@owner.bindables"} } }, + "objectsTray" : { + "prototype": "js/stage/objects-tray.reel", + "properties": { + "element": {"#": "objects-tray" } + } + }, "hud": { "prototype": "js/stage/binding-view.reel/binding-hud.reel", "properties": { @@ -57,6 +63,10 @@ +
+
+
+ diff --git a/js/stage/stage.reel/stage.css b/js/stage/stage.reel/stage.css index bc20c4f3..2271cd8a 100755 --- a/js/stage/stage.reel/stage.css +++ b/js/stage/stage.reel/stage.css @@ -48,24 +48,6 @@ width:2500px;/*to prevent scrolling of editor container in the middle of the page for short files*/ } -.stage-tray-container { - height: 100%; - position: absolute; - width: 100%; -} - -.objects-tray-container { - bottom: 10px; - position: absolute; - width: 100%; - display: -webkit-box; - -webkit-box-orient: horizontal; - -webkit-box-pack: center; - -webkit-box-align: center; - z-index: 2; -} - - span.CodeMirror-matchhighlight { background: #e9e9e9 } .CodeMirror-focused span.CodeMirror-matchhighlight { background: #e7e4ff; !important } div.CodeMirror span.CodeMirror-matchingbracket {color: #000 !important;background-color: #ffd500;} diff --git a/js/stage/stage.reel/stage.html b/js/stage/stage.reel/stage.html index acab4b1b..397af0b6 100755 --- a/js/stage/stage.reel/stage.html +++ b/js/stage/stage.reel/stage.html @@ -47,12 +47,6 @@ "element": {"#": "bindingView" } } }, - "objectsTray" : { - "prototype": "js/stage/objects-tray.reel", - "properties": { - "element": {"#": "objects-tray" } - } - }, "owner": { "prototype": "js/stage/stage.reel", "properties": { @@ -89,12 +83,6 @@ -
-
-
-
-
-
-- cgit v1.2.3