From 2c1aec1f4d7b2ca03cb9911feeb8a9d1d66f9826 Mon Sep 17 00:00:00 2001 From: Eric Guzman Date: Fri, 25 May 2012 16:34:21 -0700 Subject: Data Binding - Hacked patch to Montage to enable serialization of dynamically bound objects. We should remove this once montage github issue [gh-657] is in our version of montage. --- node_modules/montage/core/event/binding.js | 24 +++++++++++++++++++++++- 1 file changed, 23 insertions(+), 1 deletion(-) diff --git a/node_modules/montage/core/event/binding.js b/node_modules/montage/core/event/binding.js index 2e226372..c10c52e4 100755 --- a/node_modules/montage/core/event/binding.js +++ b/node_modules/montage/core/event/binding.js @@ -343,9 +343,31 @@ var BindingDescriptor = exports.BindingDescriptor = Montage.create(Montage, /** }); Serializer.defineSerializationUnit("bindings", function(object) { - var bindingDescriptors = object._bindingDescriptors; + var bindingDescriptors = object._bindingDescriptors, + bindingDescriptorsCopy; + + // TODO: Hacked this function to create copy of object literal + // TODO: Remove when montage finds out how to identify object literals + // TODO: in a different way + function cloneObject(object, level) { + var clone = {}; + + for (var key in object) { + if (level > 0) { + clone[key] = cloneObject(object[key], level - 1); + } else { + clone[key] = object[key]; + } + } + + return clone; + } if (bindingDescriptors) { + if (Object.getPrototypeOf(bindingDescriptors) !== Object.prototype) { + bindingDescriptors = cloneObject(bindingDescriptors , 1); + } + return bindingDescriptors; } }); -- cgit v1.2.3 From dad4e3aa51b9f2b370f20f13bdb00ccc33f8d891 Mon Sep 17 00:00:00 2001 From: Eric Guzman Date: Fri, 25 May 2012 16:34:52 -0700 Subject: Object component - Minor cleanup --- js/panels/objects/object.reel/object.js | 32 +++++--------------------------- 1 file changed, 5 insertions(+), 27 deletions(-) diff --git a/js/panels/objects/object.reel/object.js b/js/panels/objects/object.reel/object.js index 953c1baf..43abafad 100644 --- a/js/panels/objects/object.reel/object.js +++ b/js/panels/objects/object.reel/object.js @@ -57,41 +57,19 @@ exports.Object = Montage.create(Component, { get: function() { return this._montageLabel; }, - set: function(value) { - if(this._montageMetaData === value) { return false; } + set: function(data) { + if(this._montageMetaData === data) { return false; } - this._montageMetaData = value; + this._montageMetaData = data; - if(!this.identifier && value.label) { - this.label = value.label; + if(!this.identifier && data.label) { + this.label = data.label; this.needsDraw = true; } } }, - templateDidLoad: { - value: function() { - console.log('object loaded'); - } - }, - - prepareForDraw : { - value: function() { - - } - }, - - willDraw : { - value: function() { - if(this._needsPropertyInspection) { - - } - - console.log("This label ", this.label); - } - }, - draw : { value: function() { -- cgit v1.2.3 From 1be5495b77c1dd426be3a6be05555254856de6ba Mon Sep 17 00:00:00 2001 From: Eric Guzman Date: Fri, 25 May 2012 16:35:17 -0700 Subject: Object Component - Enable native dragging --- js/panels/objects/object.reel/object.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/js/panels/objects/object.reel/object.html b/js/panels/objects/object.reel/object.html index efc66d79..a072ab5e 100644 --- a/js/panels/objects/object.reel/object.html +++ b/js/panels/objects/object.reel/object.html @@ -38,7 +38,7 @@ -
  • +
  • -- cgit v1.2.3 From 1f7c17d688c3340b31d2e1c2b7205b10bd806968 Mon Sep 17 00:00:00 2001 From: Eric Guzman Date: Fri, 25 May 2012 16:37:24 -0700 Subject: Objects Controller - Now keeps track of document's object instances, including added components --- js/controllers/objects-controller.js | 83 +++++++++++++++++++++++++----------- js/document/models/html.js | 5 +++ js/document/templates/app/main.js | 1 + js/document/views/design.js | 6 ++- 4 files changed, 69 insertions(+), 26 deletions(-) diff --git a/js/controllers/objects-controller.js b/js/controllers/objects-controller.js index 543aa96f..5bab9eab 100644 --- a/js/controllers/objects-controller.js +++ b/js/controllers/objects-controller.js @@ -8,46 +8,79 @@ var Montage = require("montage/core/core").Montage, Component = require("montage/ui/component").Component; var objectsController = exports.ObjectsController = Montage.create(Component, { - objects : { - value: [] - }, - - handleAppLoaded : { - value: function() { - ///// Bind app's activeDocument property to - ///// objects controller's _activeDocument property - } - }, - - deserializedFromTemplate : { - value: function() { - this.eventManager.addEventListener( "appLoaded", this, false); - }, - enumerable : false - }, _activeDocument : { value : null, enumerable : false }, - activeDocument : { get : function() { return this._activeDocument; }, - set : function(document) { - ///// If the document is null set default stylesheets to null - if(!document) { return false; } + set : function(doc) { + if(!doc) { return false; } + // TODO: remove setTimeout when timing of montage initialization is done setTimeout(function() { - this.objects = document._document.application._template._deserializer.getObjectsFromLastDeserialization(); + this.bindToModelObjects(); }.bind(this), 1000); - - ///// setting document via binding - this._activeDocument = document; + this._activeDocument = doc; }, enumerable : false + }, + + objects : { + value: [] + }, + + _isBoundToModelObjects : { + value: null + }, + bindToModelObjects : { + value: function() { + //// Remove any previous bindings if previously bound + if(!this._isBoundToModelObjects) { + Object.deleteBinding(this, 'objects'); + this._isBoundToModelObjects = true; + } + + Object.defineBinding(this, 'objects', { + boundObject: this.activeDocument.model, + boundObjectPropertyPath: 'objects', + oneway: false + }); + } + }, + + /* -------------------------- + Binding Methods + ----------------------------- */ + + addBinding : { + value: function(bindingDescriptor) { + if(!bindingDescriptor.sourceObject || !bindingDescriptor.sourceObjectPropertyPath || !bindingDescriptor) { return; } + + Object.defineBinding(bindingDescriptor.sourceObject, bindingDescriptor.sourceObjectPropertyPath, bindingDescriptor); + } + }, + + removeBinding : { + value: function(bindingDescriptor) { + if(!bindingDescriptor) { return; } + + Object.deleteBinding(bindingDescriptor.sourceObject, bindingDescriptor.sourceObjectPropertyBindingPath); + } + }, + + editBindingPropertyPath : { + value: function(bindingDescriptor, newPropertyPath) { + this.removeBinding(bindingDescriptor); + + //this.addBinding() + + + } } }); \ No newline at end of file diff --git a/js/document/models/html.js b/js/document/models/html.js index 9cc8ce92..10112565 100755 --- a/js/document/models/html.js +++ b/js/document/models/html.js @@ -69,6 +69,7 @@ exports.HtmlDocumentModel = Montage.create(BaseDocumentModel, { setComponentInstance: { value: function(instance, el) { this.userComponents[el.uuid] = instance; + this.objects.push(instance); } }, //////////////////////////////////////////////////////////////////// @@ -81,6 +82,10 @@ exports.HtmlDocumentModel = Montage.create(BaseDocumentModel, { return null; } } + }, + //////////////////////////////////////////////////////////////////// + objects : { + value: null } //////////////////////////////////////////////////////////////////// //////////////////////////////////////////////////////////////////// diff --git a/js/document/templates/app/main.js b/js/document/templates/app/main.js index a406abdb..91c46fda 100644 --- a/js/document/templates/app/main.js +++ b/js/document/templates/app/main.js @@ -29,6 +29,7 @@ exports.Main = Montage.create(Component, { var componentRequire = component[data.name]; var componentInstance = componentRequire.create(); + componentInstance._montage_metadata.label = data.name; componentInstance.element = element; componentInstance.needsDraw = true; diff --git a/js/document/views/design.js b/js/document/views/design.js index b3887fdf..75eb3695 100755 --- a/js/document/views/design.js +++ b/js/document/views/design.js @@ -363,11 +363,15 @@ exports.DesignDocumentView = Montage.create(BaseDocumentView, { initMontage: { value: function (scripttags) { // + //debugger; this.iframe.contentWindow.document.body.addEventListener('mjsTemplateReady', function () { //Initializing template with user's seriliazation var template = this.iframe.contentWindow.mjsTemplate.create(); + template.initWithDocument(this.iframe.contentWindow.document); - template.instantiateWithOwnerAndDocument(null, this.iframe.contentWindow.document, function (e){/*Nothing just a required extra parameter*/}); + template.instantiateWithOwnerAndDocument(null, this.iframe.contentWindow.document, function (e){ + this.model.objects = template.deserializer.getObjectsFromLastDeserialization(); + }.bind(this)); }.bind(this), false); } }, -- cgit v1.2.3 From e09efe3212e86ac794de3fc8ecfc6cdef7b15181 Mon Sep 17 00:00:00 2001 From: Eric Guzman Date: Wed, 30 May 2012 15:02:23 -0700 Subject: Objects Controller - Add bindable controller properties, and bindings getter --- js/controllers/objects-controller.js | 75 +++++++++++++++++++++++++++++------- js/ninja.reel/ninja.html | 2 +- 2 files changed, 62 insertions(+), 15 deletions(-) diff --git a/js/controllers/objects-controller.js b/js/controllers/objects-controller.js index 5bab9eab..cd0139a0 100644 --- a/js/controllers/objects-controller.js +++ b/js/controllers/objects-controller.js @@ -9,13 +9,13 @@ var Montage = require("montage/core/core").Montage, var objectsController = exports.ObjectsController = Montage.create(Component, { - _activeDocument : { + _currentDocument : { value : null, enumerable : false }, - activeDocument : { + currentDocument : { get : function() { - return this._activeDocument; + return this._currentDocument; }, set : function(doc) { if(!doc) { return false; } @@ -25,7 +25,7 @@ var objectsController = exports.ObjectsController = Montage.create(Component, { this.bindToModelObjects(); }.bind(this), 1000); - this._activeDocument = doc; + this._currentDocument = doc; }, enumerable : false }, @@ -46,7 +46,7 @@ var objectsController = exports.ObjectsController = Montage.create(Component, { } Object.defineBinding(this, 'objects', { - boundObject: this.activeDocument.model, + boundObject: this.currentDocument.model, boundObjectPropertyPath: 'objects', oneway: false }); @@ -58,28 +58,75 @@ var objectsController = exports.ObjectsController = Montage.create(Component, { ----------------------------- */ addBinding : { - value: function(bindingDescriptor) { - if(!bindingDescriptor.sourceObject || !bindingDescriptor.sourceObjectPropertyPath || !bindingDescriptor) { return; } + value: function(bindingArgs) { + if(!bindingArgs.sourceObject || !bindingArgs.sourceObjectPropertyPath || !bindingArgs) { return; } - Object.defineBinding(bindingDescriptor.sourceObject, bindingDescriptor.sourceObjectPropertyPath, bindingDescriptor); + Object.defineBinding(bindingArgs.sourceObject, bindingArgs.sourceObjectPropertyPath, bindingArgs); } }, removeBinding : { - value: function(bindingDescriptor) { - if(!bindingDescriptor) { return; } + value: function(bindingArgs) { + if(!bindingArgs) { return; } - Object.deleteBinding(bindingDescriptor.sourceObject, bindingDescriptor.sourceObjectPropertyBindingPath); + Object.deleteBinding(bindingArgs.sourceObject, bindingArgs.sourceObjectPropertyPath); } }, editBindingPropertyPath : { - value: function(bindingDescriptor, newPropertyPath) { - this.removeBinding(bindingDescriptor); + value: function(bindingArgs, newPropertyPath) { + this.removeBinding(bindingArgs); - //this.addBinding() + bindingArgs.boundObjectPropertyPath = 'newPropertyPath'; + this.addBinding(bindingArgs); + } + }, + + getObjectBindings : { + value: function(object) { + var descriptors = object._bindingDescriptors, + bindingsArray = [], + property, descriptor, bindingArgsObject; + + for(property in descriptors) { + if(descriptors.hasOwnProperty(property)) { + descriptor = descriptors[property]; + + bindingArgsObject = { + sourceObject : object, + sourceObjectPropertyPath : property, + boundObject : descriptor.boundObject, + boundObjectPropertyPath : descriptor.boundObjectPropertyPath, + onweway : descriptor.oneway + }; + + bindingsArray.push(bindingArgsObject); + } + } + + return bindingsArray; + } + }, + + /* ---- Bindable controller properties ---- */ + + currentObjectBindings : { + value: null + }, + _currentObject : { + value: null + }, + currentObject : { + get: function() { + return this._currentObject; + }, + set: function(value) { + if(value === this._currentObject) { return; } + + this.currentObjectBindings = this.getObjectBindings(value); + this._currentObject = value; } } diff --git a/js/ninja.reel/ninja.html b/js/ninja.reel/ninja.html index 1f0582b1..53b8676f 100755 --- a/js/ninja.reel/ninja.html +++ b/js/ninja.reel/ninja.html @@ -326,7 +326,7 @@ "objectsController" : { "prototype": "js/controllers/objects-controller", "bindings": { - "activeDocument": {"<-": "@owner.currentDocument"} + "currentDocument": {"<-": "@owner.currentDocument"} } }, -- cgit v1.2.3 From 04ef4ffcfde762a0aead4a7b702f3c019fdbeb69 Mon Sep 17 00:00:00 2001 From: Eric Guzman Date: Thu, 31 May 2012 21:57:22 -0700 Subject: Binding Panel - Developed panel components. --- js/panels/binding-panel.reel/binding-panel.css | 11 +++++++ js/panels/binding-panel.reel/binding-panel.html | 26 ++++++++++++++- js/panels/binding-panel.reel/binding-panel.js | 14 ++++++++ .../binding/binding-item.reel/binding-item.css | 13 ++++++++ .../binding/binding-item.reel/binding-item.html | 37 ++++++++++++++++++++++ .../binding/binding-item.reel/binding-item.js | 26 +++++++++++++++ 6 files changed, 126 insertions(+), 1 deletion(-) create mode 100644 js/panels/binding/binding-item.reel/binding-item.css create mode 100644 js/panels/binding/binding-item.reel/binding-item.html create mode 100644 js/panels/binding/binding-item.reel/binding-item.js diff --git a/js/panels/binding-panel.reel/binding-panel.css b/js/panels/binding-panel.reel/binding-panel.css index e69de29b..8597a926 100644 --- a/js/panels/binding-panel.reel/binding-panel.css +++ b/js/panels/binding-panel.reel/binding-panel.css @@ -0,0 +1,11 @@ +/* + 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. +
    */ + + +.bindings-list { + padding: 0; + margin: 0; +} \ No newline at end of file diff --git a/js/panels/binding-panel.reel/binding-panel.html b/js/panels/binding-panel.reel/binding-panel.html index 0db7b95f..d2e18e99 100644 --- a/js/panels/binding-panel.reel/binding-panel.html +++ b/js/panels/binding-panel.reel/binding-panel.html @@ -15,6 +15,28 @@ "properties": { "element": {"#": "binding"} } + }, + "arrayController": { + "prototype": "montage/ui/controller/array-controller", + "bindings": { + "content" : {"<-": "@owner.bindings" } + } + }, + "repetition": { + "prototype": "montage/ui/repetition.reel", + "properties": { + "element": {"#": "bindings-list"}, + "contentController": {"@": "arrayController"} + } + }, + "bindingItem": { + "prototype": "js/panels/binding/binding-item.reel", + "properties": { + "element": {"#": "binding-item"} + }, + "bindings": { + "sourceObjectPropertyPath": {"<-": "@repetition.objectAtCurrentIteration.sourceObjectPropertyPath"} + } } } @@ -22,7 +44,9 @@
    - this is a test +
    \ 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 03fe5723..9fdec416 100644 --- a/js/panels/binding-panel.reel/binding-panel.js +++ b/js/panels/binding-panel.reel/binding-panel.js @@ -4,6 +4,20 @@ var Montage = require("montage/core/core").Montage, exports.BindingPanel = Montage.create(Component, { + bindings : { + value: null + }, + + templateDidLoad : { + value: function() { + Object.defineBinding(this, 'bindings', { + boundObject: this.application.ninja.objectsController, + boundObjectPropertyPath: "currentObjectBindings", + oneway: true + }); + } + }, + prepareForDraw: { value: function() { console.log("test- objects"); diff --git a/js/panels/binding/binding-item.reel/binding-item.css b/js/panels/binding/binding-item.reel/binding-item.css new file mode 100644 index 00000000..dc90f162 --- /dev/null +++ b/js/panels/binding/binding-item.reel/binding-item.css @@ -0,0 +1,13 @@ +/* + 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. +
    */ + +.binding-item { + color: #FFF; + margin: 0 8px; + padding: 3px; + border-bottom: 1px solid #FFF; + list-style-type: none; +} \ No newline at end of file diff --git a/js/panels/binding/binding-item.reel/binding-item.html b/js/panels/binding/binding-item.reel/binding-item.html new file mode 100644 index 00000000..23182345 --- /dev/null +++ b/js/panels/binding/binding-item.reel/binding-item.html @@ -0,0 +1,37 @@ + + + + + + + + + +
  • + +
  • + + \ No newline at end of file diff --git a/js/panels/binding/binding-item.reel/binding-item.js b/js/panels/binding/binding-item.reel/binding-item.js new file mode 100644 index 00000000..9365da65 --- /dev/null +++ b/js/panels/binding/binding-item.reel/binding-item.js @@ -0,0 +1,26 @@ +/* + 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.BindingItem = Montage.create(Component, { + + sourceObjectPropertyPath : { value: null }, + + templateDidLoad : { + value: function() { + console.log("loaded binding item"); + } + }, + + prepareForDraw: { + value: function() { + console.log("preparing to draw binding item"); + } + } +}); \ No newline at end of file -- cgit v1.2.3 From 0f59ef2a4b78fbcee402255857e8355a67fa7e66 Mon Sep 17 00:00:00 2001 From: Eric Guzman Date: Fri, 1 Jun 2012 12:53:24 -0700 Subject: Bindings Panel - Update binding panel components --- js/controllers/objects-controller.js | 20 +++++++ js/panels/binding-panel.reel/binding-panel.css | 2 +- js/panels/binding-panel.reel/binding-panel.html | 6 +- .../binding/binding-item.reel/binding-item.css | 34 +++++++++++- .../binding/binding-item.reel/binding-item.html | 54 +++++++++++++++++- .../binding/binding-item.reel/binding-item.js | 64 +++++++++++++++++++++- 6 files changed, 173 insertions(+), 7 deletions(-) diff --git a/js/controllers/objects-controller.js b/js/controllers/objects-controller.js index cd0139a0..a02c3045 100644 --- a/js/controllers/objects-controller.js +++ b/js/controllers/objects-controller.js @@ -109,6 +109,26 @@ var objectsController = exports.ObjectsController = Montage.create(Component, { } }, + /* ---- Bindable Properties ---- */ + + getEnumerableProperties : { + value: function(object, excludeUnderscoreProperties) { + var properties = []; + + for(var key in object) { + properties.push(key); + } + + if(excludeUnderscoreProperties) { + properties = properties.filter(function(property) { + return property[0] !== '_'; + }, this); + } + + return properties.sort(); + } + }, + /* ---- Bindable controller properties ---- */ currentObjectBindings : { diff --git a/js/panels/binding-panel.reel/binding-panel.css b/js/panels/binding-panel.reel/binding-panel.css index 8597a926..f29b66c1 100644 --- a/js/panels/binding-panel.reel/binding-panel.css +++ b/js/panels/binding-panel.reel/binding-panel.css @@ -8,4 +8,4 @@ .bindings-list { padding: 0; margin: 0; -} \ No newline at end of file +} diff --git a/js/panels/binding-panel.reel/binding-panel.html b/js/panels/binding-panel.reel/binding-panel.html index d2e18e99..2850b67c 100644 --- a/js/panels/binding-panel.reel/binding-panel.html +++ b/js/panels/binding-panel.reel/binding-panel.html @@ -35,7 +35,11 @@ "element": {"#": "binding-item"} }, "bindings": { - "sourceObjectPropertyPath": {"<-": "@repetition.objectAtCurrentIteration.sourceObjectPropertyPath"} + "sourceObjectPropertyPath": {"<-": "@repetition.objectAtCurrentIteration.sourceObjectPropertyPath"}, + "sourceObject": {"<-": "@repetition.objectAtCurrentIteration.sourceObject"}, + "boundObjectPropertyPath": {"<-": "@repetition.objectAtCurrentIteration.boundObjectPropertyPath"}, + "boundObject": {"<-": "@repetition.objectAtCurrentIteration.boundObject"}, + "oneway": {"<-": "@repetition.objectAtCurrentIteration.oneway"} } } diff --git a/js/panels/binding/binding-item.reel/binding-item.css b/js/panels/binding/binding-item.reel/binding-item.css index dc90f162..0f4416b9 100644 --- a/js/panels/binding/binding-item.reel/binding-item.css +++ b/js/panels/binding/binding-item.reel/binding-item.css @@ -8,6 +8,38 @@ color: #FFF; margin: 0 8px; padding: 3px; - border-bottom: 1px solid #FFF; + border-bottom: 1px solid #505050; list-style-type: none; + display: -webkit-box; + -webkit-box-orient: horizontal; +} +.binding-item > * { + -webkit-box-flex: 1; +} +.source-object, .bound-object { + padding: 5px 0 3px; +} +.source-object { + background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABcAAAAXCAYAAADgKtSgAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyRpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw%2FeHBhY2tldCBiZWdpbj0i77u%2FIiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8%2BIDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYxIDY0LjE0MDk0OSwgMjAxMC8xMi8wNy0xMDo1NzowMSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNS4xIE1hY2ludG9zaCIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDowREQ2NEVFRkE0M0IxMUUxQTkwQ0M2Qzc0NjQ4NTRBNiIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDowREQ2NEVGMEE0M0IxMUUxQTkwQ0M2Qzc0NjQ4NTRBNiI%2BIDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOjBERDY0RUVEQTQzQjExRTFBOTBDQzZDNzQ2NDg1NEE2IiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOjBERDY0RUVFQTQzQjExRTFBOTBDQzZDNzQ2NDg1NEE2Ii8%2BIDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY%2BIDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8%2B50zlPwAAAttJREFUeNqMls9rE0EUx2fz24RKsoluUAkIHhWFXtVCJRAhFBRB8D8I1GMF%2FwJFjwr9DzwVipKDUBvQg4KgeJOe1OSS2PxYMUnzO77vsm%2BcSbJpB76dLvve5719M%2FMmxnQ6FV4jn89fo%2BkBaY2UJmVIZVKV9J70ivTNy99YBCdolqZCv9%2B%2F0%2Bl0BM0CdqPRSAQCAWEYhgiHwyIWi2HeJdtt0t6xcAI%2FGw6HW61Wy4H6fD4pHpPJRApBEomECAaDz%2BnVI084gV90u93NRqPhwJCl3%2B%2BXYGTM9gCPx2Pna%2FB%2FMpkU0Wj0Jb16yLyAAn4CcL1eRxYSrMLVASB%2FEQLAL5VKbVKANr1%2BLDMn8AaV4nWtVnNggGNGADgjY4gHfCAEABhfQP7ObFkW%2FO%2BS2S5nXmg2mw6AM1ZLYlDi5u1fInLJlgHaX86K1gdLKxcEDgUoOHBsN1q43GAwEKFQSANDACdyPzVw56sl%2Fn48R%2B%2Bnc4sMDvGytNCrKOZ9qrWToVpjzngenBbtTxdkqdhW9QWPxj2UZX12yzmOnuDzshQ8q0GgXq%2BHV1lknsFCqDvCF5ivsQrW9vLMYoMDHo2LIJqolWo4HZOG%2BvbzhcYLwaofP7s8E4QmZ80rjmHvZ8TR96QEnbp8KE6vlTU427IfP7u8Jv6WsRCcvTSmxz%2BljOgd6AFWblbmAqinHBzwaPwAvIT%2BoPYLmQkFsN%2FpAaJXfouV6xUtWz5QrEgkAtM9wHfoyMpeAWlB3ABHB%2Bb%2FAFcpwI2KBlV9wQOXj%2F9%2BtVpdxwscfT7%2B8oQuOf4MxfGHYJ9Op0tkdou3xDa6GvcK7hezUmGq2Ie7o9vfhQMvFos7lO1T0zRlBiwOxAD1edYW%2FuCgJEv7OZfluH7OWtTPF95E1Hy2bNs%2B8U0Uj8fR9JbfREqAnHuHbvAdyjXnJqXcoW%2FcGr890QWtBFlF10Rzc2%2F%2BM6RD9xdAya3tZy%2F%2FfwIMAMwfSVrTb5e6AAAAAElFTkSuQmCC); + background-position: right center; + background-repeat: no-repeat; + padding-right: 30px; +} +.bound-object { + padding-left: 12px; +} +.so-object-identifier, .bo-object-identifier { + float: right; + color: #999; +} +.binding-item .binding-edit-button { + background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAYAAABWdVznAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyRpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw%2FeHBhY2tldCBiZWdpbj0i77u%2FIiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8%2BIDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYxIDY0LjE0MDk0OSwgMjAxMC8xMi8wNy0xMDo1NzowMSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNS4xIE1hY2ludG9zaCIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDpDQkI4QzVEMTc3ODcxMUUxQTlCOUNDQUJBMEUyMTIwMSIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDpDQkI4QzVEMjc3ODcxMUUxQTlCOUNDQUJBMEUyMTIwMSI%2BIDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOkNCQjhDNUNGNzc4NzExRTFBOUI5Q0NBQkEwRTIxMjAxIiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOkNCQjhDNUQwNzc4NzExRTFBOUI5Q0NBQkEwRTIxMjAxIi8%2BIDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY%2BIDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8%2Bs3B0RQAAAd9JREFUeNockbGL2nAUx%2FNLorHaJXKjJ6YcDkVcHByUQwQDbl26FqEu3dykLjoIXXTwDygKFcrRP%2BC8Q0HwQDlwOaRCKFiuCmo0d0Jr1ZjY923ghZfv9%2FN%2B7%2F1eOJ%2FPx%2BEpl8uKZVk3p9PpRlXV81QqdY4cGjww%2F9l2u81Fo1EuFotdbrdbzbbtX%2FP5%2FAqBHBo8MGB5RVF8yWTSv9%2FvXYIgsNVq9XcwGLxCIBdFkcEDA5YZhnFNJwXcbjc3Go32mUzmlsaYYAQ6QGk0GmooFJKoE8fz%2FE9%2BsVjIHo%2FHpes6y2azX8PhsNbtdtMI5NDggQHL0wW%2FdDodfTqdPm02m4dqtfqmXq9LCOTQ4IEBy3u93gdq9YfCplHM2Wz2gsZ7ptggJ%2B0ADwxYRuI1zfqaLvY7l8t9mkwmcqVSeWeapl0oFJqBQOCpVqt9lCTpJWnfWb%2Ffv6fKM2xot9s9FovFz71ez6ST7UQiIZVKpffUzU%2Ffp%2FV6vWLBYPDD8Xi8oJ%2FkarVaKhVatLlHxhgny7KfPCGdTt%2FS945W%2FEPUNO2KNihGIpH44XBI0Tak8Xh8hoJ4PC7RGCZN0BkOh3fEHUV6Gdi50%2BnUqaWxXC6FfD7%2FDQXNZvMtXdZyOBw6IUtw%2FwQYACT6GJDDh744AAAAAElFTkSuQmCC); + background-repeat: no-repeat; + background-position: right center; + border: 0 none; + cursor: pointer; + padding-top: 6px; + width: 12px; + height: 100%; + margin-left: 10px; } \ No newline at end of file diff --git a/js/panels/binding/binding-item.reel/binding-item.html b/js/panels/binding/binding-item.reel/binding-item.html index 23182345..a569b8b4 100644 --- a/js/panels/binding/binding-item.reel/binding-item.html +++ b/js/panels/binding/binding-item.reel/binding-item.html @@ -16,14 +16,54 @@ "element": {"#": "binding-item"} } }, - "label": { + "soProperty": { "prototype": "montage/ui/dynamic-text.reel", "properties": { - "element": {"#": "label"} + "element": {"#": "so-property"} }, "bindings": { "value": {"<-": "@owner.sourceObjectPropertyPath"} } + }, + "soObject": { + "prototype": "montage/ui/dynamic-text.reel", + "properties": { + "element": {"#": "so-object"} + }, + "bindings": { + "value": {"<-": "@owner.sourceObjectLabel"} + } + }, + "boProperty" : { + "prototype": "montage/ui/dynamic-text.reel", + "properties": { + "element": {"#": "bo-property"} + }, + "bindings": { + "value": {"<-": "@owner.boundObjectPropertyPath"} + } + }, + "boObject": { + "prototype": "montage/ui/dynamic-text.reel", + "properties": { + "element": {"#": "bo-object"} + }, + "bindings": { + "value": {"<-": "@owner.boundObjectLabel"} + } + }, + "editButton": { + "prototype": "montage/ui/button.reel", + "properties": { + "element": {"#": "edit-button"}, + "identifier": "editButton", + "label": " " + }, + "listeners": [{ + "type": "action", + "listener": {"@": "owner"} + }] + } } @@ -31,7 +71,15 @@
  • - +
    + + +
    +
    + + +
    +
  • \ No newline at end of file diff --git a/js/panels/binding/binding-item.reel/binding-item.js b/js/panels/binding/binding-item.reel/binding-item.js index 9365da65..bda62ef3 100644 --- a/js/panels/binding/binding-item.reel/binding-item.js +++ b/js/panels/binding/binding-item.reel/binding-item.js @@ -9,8 +9,70 @@ var Montage = require("montage/core/core").Montage, exports.BindingItem = Montage.create(Component, { + sourceObjectLabel : { value: null }, + boundObjectLabel : { value: null }, - sourceObjectPropertyPath : { value: null }, + _sourceObject : { value: null }, + sourceObject : { + get: function() { + return this._sourceObject; + }, + set: function(value) { + if(value === this._sourceObject) { return; } + + this.sourceObjectLabel = value.identifier; + + this._sourceObject = value; + } + }, + _boundObject : { value: null }, + boundObject : { + get: function() { + return this._boundObject; + }, + set: function(value) { + if(value === this._boundObject) { return; } + + this.boundObjectLabel = value.identifier; + + this._boundObject = value; + } + }, + + _sourceObjectPropertyPath : { value: null }, + sourceObjectPropertyPath : { + get: function() { + return this._sourceObjectPropertyPath; + }, + set: function(value) { + if(value === this._sourceObjectPropertyPath) { return; } + this._sourceObjectPropertyPath = value; + this.needsDraw = true; + } + }, + _boundObjectPropertyPath : { value: null }, + boundObjectPropertyPath : { + get: function() { + return this._boundObjectPropertyPath; + }, + set: function(value) { + if(value === this._boundObjectPropertyPath) { return; } + this._boundObjectPropertyPath = value; + this.needsDraw = true; + } + }, + + _oneway : { value: null }, + oneway : { + get: function() { + return this._oneway; + }, + set: function(value) { + if(value === this._oneway) { return; } + this._oneway = value; + this.needsDraw = true; + } + }, templateDidLoad : { value: function() { -- cgit v1.2.3