From 72efb92273d20757097b18326fb31d070a6d693d Mon Sep 17 00:00:00 2001 From: Eric Guzman Date: Tue, 19 Jun 2012 15:55:17 -0700 Subject: Objects Tray - Show only "off stage" objects --- js/controllers/objects-controller.js | 5 ++--- js/stage/objects-tray.reel/objects-tray.html | 3 ++- js/stage/objects-tray.reel/objects-tray.js | 32 +++++++++++++++++++++++++++- 3 files changed, 35 insertions(+), 5 deletions(-) diff --git a/js/controllers/objects-controller.js b/js/controllers/objects-controller.js index 877f7f9f..3a6f6e97 100644 --- a/js/controllers/objects-controller.js +++ b/js/controllers/objects-controller.js @@ -4,14 +4,13 @@ (c) Copyright 2011 Motorola Mobility, Inc. All Rights Reserved. */ -var Montage = require("montage/core/core").Montage, - Component = require("montage/ui/component").Component; +var Montage = require("montage/core/core").Montage; var CATEGORIES = { }; -var objectsController = exports.ObjectsController = Montage.create(Component, { +var objectsController = exports.ObjectsController = Montage.create(Montage, { _currentDocument : { value : null, diff --git a/js/stage/objects-tray.reel/objects-tray.html b/js/stage/objects-tray.reel/objects-tray.html index 0fece3fe..710e3edf 100644 --- a/js/stage/objects-tray.reel/objects-tray.html +++ b/js/stage/objects-tray.reel/objects-tray.html @@ -14,7 +14,8 @@ "owner": { "prototype": "js/stage/objects-tray.reel", "properties": { - "element": {"#": "objects-tray"} + "element": {"#": "objects-tray"}, + "offStageObjectsController": {"@": "arrayController"} } }, "repetition" : { diff --git a/js/stage/objects-tray.reel/objects-tray.js b/js/stage/objects-tray.reel/objects-tray.js index 190abf57..3872c8b6 100644 --- a/js/stage/objects-tray.reel/objects-tray.js +++ b/js/stage/objects-tray.reel/objects-tray.js @@ -15,6 +15,23 @@ exports.ObjectsTray = Montage.create(Component, { hideClass : { value: 'hide-objects-tray'}, _empty : { value: null }, _workspaceMode : { value: null }, + + offStageObjectsController : { + value: null + }, + + _showAllObjects : { value: null }, + showAllObjects : { + get : function() { return this._showAllObjects; }, + set : function(value) { + if(value === this._showAllObjects) { return; } + + this._showAllObjects = value; + + this.needsDraw = true; + } + }, + workspaceMode : { get : function() { return this._workspaceMode; }, set : function(value) { @@ -43,6 +60,19 @@ exports.ObjectsTray = Montage.create(Component, { } }, + offStageObjectFilter : { + value: function(obj) { + if(this.showAllObjects) { + return true; + } + + var isComponent = this.application.ninja.objectsController._hasPrototype(obj, "Component"), + hasValidElement = obj.element && obj.element.parentNode; + + return !isComponent || !hasValidElement; + } + }, + _hide : { value: null }, hide : { get : function() { return this._hide; }, @@ -58,7 +88,7 @@ exports.ObjectsTray = Montage.create(Component, { templateDidLoad: { value: function() { - console.log('objects panel loaded'); + this.offStageObjectsController.filterFunction = this.offStageObjectFilter.bind(this); } }, -- cgit v1.2.3 From 5b303f858ab78877f26f61e87230b010460ee03b Mon Sep 17 00:00:00 2001 From: Eric Guzman Date: Wed, 20 Jun 2012 11:28:32 -0700 Subject: Objects Tray - Filter list of components for those without visual representation --- js/controllers/objects-controller.js | 14 ++++++++++++++ js/panels/objects/object.reel/object.js | 16 ++++++++++++++++ js/stage/objects-tray.reel/objects-tray.html | 8 +++++++- js/stage/objects-tray.reel/objects-tray.js | 23 ++++++++++++++++------- 4 files changed, 53 insertions(+), 8 deletions(-) diff --git a/js/controllers/objects-controller.js b/js/controllers/objects-controller.js index b8efd432..54ff14ba 100644 --- a/js/controllers/objects-controller.js +++ b/js/controllers/objects-controller.js @@ -190,6 +190,8 @@ var objectsController = exports.ObjectsController = Montage.create(Montage, { } }, + /* ----- Utils ----- */ + _hasPrototype : { value: function(object, prototypeName) { var prototypes = this.getPrototypes(object).map(function(proto) { @@ -201,6 +203,18 @@ var objectsController = exports.ObjectsController = Montage.create(Montage, { } }, + ///// Returns true if the element is "non-visual", i.e. is not a component, + ///// and has not element property + + isOffStageObject : { + value: function(object) { + var isComponent = this._hasPrototype(object, "Component"), + hasValidElement = object.element && object.element.parentNode; + + return !isComponent || !hasValidElement; + } + }, + /* ---- Bindable controller properties ---- */ currentObjectBindings : { diff --git a/js/panels/objects/object.reel/object.js b/js/panels/objects/object.reel/object.js index 76f1b5bf..b8bf1b1e 100644 --- a/js/panels/objects/object.reel/object.js +++ b/js/panels/objects/object.reel/object.js @@ -75,6 +75,22 @@ exports.Object = Montage.create(Component, { }, + /* --------------------- + Event Handlers + --------------------- */ + + handleClick: { + value: function(e) { + this.parentComponent.parentComponent.displayHUDForObject(this.sourceObject); + } + }, + + prepareForDraw : { + value: function() { + this.iconElement.addEventListener('click', this, false); + } + }, + draw : { value: function() { if(this.type) { diff --git a/js/stage/objects-tray.reel/objects-tray.html b/js/stage/objects-tray.reel/objects-tray.html index 710e3edf..5a0db85e 100644 --- a/js/stage/objects-tray.reel/objects-tray.html +++ b/js/stage/objects-tray.reel/objects-tray.html @@ -39,7 +39,13 @@ "bindings": { "sourceObject" : {"<-": "@repetition.objectAtCurrentIteration"}, "identifier" : {"<-": "@repetition.objectAtCurrentIteration.identifier"} - } + }, + "listeners": [ + { + "type": "click", + "listener": {"@": "owner"} + } + ] } } diff --git a/js/stage/objects-tray.reel/objects-tray.js b/js/stage/objects-tray.reel/objects-tray.js index 3872c8b6..360d6037 100644 --- a/js/stage/objects-tray.reel/objects-tray.js +++ b/js/stage/objects-tray.reel/objects-tray.js @@ -66,10 +66,7 @@ exports.ObjectsTray = Montage.create(Component, { return true; } - var isComponent = this.application.ninja.objectsController._hasPrototype(obj, "Component"), - hasValidElement = obj.element && obj.element.parentNode; - - return !isComponent || !hasValidElement; + return this.application.ninja.objectsController.isOffStageObject(obj); } }, @@ -85,6 +82,15 @@ exports.ObjectsTray = Montage.create(Component, { } }, + displayHUDForObject : { + value: function(object) { + this.parentComponent.boundComponents.push(object); + } + }, + + /* --------------------- + Draw Cycle + --------------------- */ templateDidLoad: { value: function() { @@ -107,12 +113,15 @@ exports.ObjectsTray = Montage.create(Component, { "oneway": true }); + } + }, + willDraw : { + value: function() { if(this.objects) { - this.empty = !this.objects.length; + this._empty = !this.offStageObjectsController.organizedObjects.length; } else { - this.empty = true; + this._empty = true; } - } }, draw : { -- cgit v1.2.3 From e9783135c3a6c95b7ccc3a6e45f40a030a2a067c Mon Sep 17 00:00:00 2001 From: Eric Guzman Date: Wed, 20 Jun 2012 11:40:17 -0700 Subject: Objects Tray - Use label instead of identifier for object name --- js/panels/objects/object.reel/object.css | 2 +- js/panels/objects/object.reel/object.html | 10 +++------- js/panels/objects/object.reel/object.js | 6 ++---- 3 files changed, 6 insertions(+), 12 deletions(-) diff --git a/js/panels/objects/object.reel/object.css b/js/panels/objects/object.reel/object.css index f090ade6..79b7647c 100644 --- a/js/panels/objects/object.reel/object.css +++ b/js/panels/objects/object.reel/object.css @@ -43,7 +43,7 @@ margin: 0 auto 5px; width: 50px; } -.object-label { +.object-name { color: #fff; display: block; text-align: center; diff --git a/js/panels/objects/object.reel/object.html b/js/panels/objects/object.reel/object.html index 6274f480..f9de1499 100644 --- a/js/panels/objects/object.reel/object.html +++ b/js/panels/objects/object.reel/object.html @@ -21,14 +21,10 @@ "labelText": { "prototype": "montage/ui/dynamic-text.reel", "properties": { - "element": {"#": "label" } + "element": {"#": "name" } }, "bindings": { - "value" : { - "boundObject": {"@": "owner"}, - "boundObjectPropertyPath": "label", - "oneway": true - } + "value" : {"<-": "@owner.name"} } } @@ -41,7 +37,7 @@
  • - +
    • diff --git a/js/panels/objects/object.reel/object.js b/js/panels/objects/object.reel/object.js index b8bf1b1e..6f8f5c92 100644 --- a/js/panels/objects/object.reel/object.js +++ b/js/panels/objects/object.reel/object.js @@ -48,8 +48,6 @@ exports.Object = Montage.create(Component, { this._identifier = value; - this.label = value; - this.needsDraw = true; } @@ -67,8 +65,8 @@ exports.Object = Montage.create(Component, { this._montageMetaData = data; - if(!this.identifier && data.label) { - this.label = data.label; + if(data.label) { + this.name = data.label; this.needsDraw = true; } } -- cgit v1.2.3 From 8ac2ce1566995c91fe4721df2b121ed6437b9e1c Mon Sep 17 00:00:00 2001 From: Eric Guzman Date: Wed, 20 Jun 2012 12:40:49 -0700 Subject: Binding HUD - Show hud for "off stage" objects in tray --- .../binding-hud.reel/binding-hud.js | 44 ++++++++++++++++++---- js/stage/binding-view.reel/binding-view.js | 8 ++++ js/stage/objects-tray.reel/objects-tray.html | 1 + js/stage/objects-tray.reel/objects-tray.js | 3 ++ 4 files changed, 49 insertions(+), 7 deletions(-) diff --git a/js/stage/binding-view.reel/binding-hud.reel/binding-hud.js b/js/stage/binding-view.reel/binding-hud.reel/binding-hud.js index 4b40d4da..cc94e844 100755 --- a/js/stage/binding-view.reel/binding-hud.reel/binding-hud.js +++ b/js/stage/binding-view.reel/binding-hud.reel/binding-hud.js @@ -52,17 +52,35 @@ exports.BindingHud = Montage.create(Component, { return this._userComponent; }, set: function(val) { - if (typeof(val) !== "undefined") { - this._userComponent = val; + if(!val) { return; } + + var controller = this.application.ninja.objectsController, + bindingView = this.parentComponent.parentComponent, + isOffStage, icon, iconOffsets; + + this._userComponent = val; + this.properties = controller.getPropertiesFromObject(val, true); + + controller.getObjectBindings(this.userComponent).forEach(function(obj) { + this.boundProperties.push(obj.sourceObjectPropertyPath); + }, this); + + isOffStage = controller.isOffStageObject(val); + + if(isOffStage) { + icon = bindingView.getOffStageIcon(val); + iconOffsets = this.getElementOffsetToParent(icon.element, bindingView.element); + this.title = icon.name; + this.x = iconOffsets.x; + this.y = iconOffsets.y - 80; + } else { this.title = val.identifier; this.x = val.element.offsetLeft; this.y = val.element.offsetTop; - this.properties = this.application.ninja.objectsController.getPropertiesFromObject(val, true); - this.application.ninja.objectsController.getObjectBindings(this.userComponent).forEach(function(obj) { - this.boundProperties.push(obj.sourceObjectPropertyPath); - }.bind(this)); - this.needsDraw = true; } + + this.needsDraw = true; + } }, @@ -111,6 +129,18 @@ exports.BindingHud = Montage.create(Component, { } }, + getElementOffsetToParent : { + value: function(element, parent) { + var nodeToPage = webkitConvertPointFromNodeToPage(element, new WebKitPoint(0, 0)), + parentToPage = webkitConvertPointFromNodeToPage(parent, new WebKitPoint(0, 0)); + + return { + x : nodeToPage.x - parentToPage.x, + y : nodeToPage.y - parentToPage.y + } + } + }, + _x: { value: 20 }, diff --git a/js/stage/binding-view.reel/binding-view.js b/js/stage/binding-view.reel/binding-view.js index 9bd99176..e2bbb60b 100755 --- a/js/stage/binding-view.reel/binding-view.js +++ b/js/stage/binding-view.reel/binding-view.js @@ -255,6 +255,14 @@ exports.BindingView = Montage.create(Component, { value:null }, + getOffStageIcon : { + value: function(object) { + var index = this.objectsTray.offStageObjectsController.organizedObjects.indexOf(object); + + return this.objectsTray.iconsRepetition.childComponents[index]; + } + }, + // When mouse pointer is on a hud this value will be set to true _mouseOverHud: { value: false }, diff --git a/js/stage/objects-tray.reel/objects-tray.html b/js/stage/objects-tray.reel/objects-tray.html index 5a0db85e..901f3e58 100644 --- a/js/stage/objects-tray.reel/objects-tray.html +++ b/js/stage/objects-tray.reel/objects-tray.html @@ -15,6 +15,7 @@ "prototype": "js/stage/objects-tray.reel", "properties": { "element": {"#": "objects-tray"}, + "iconsRepetition": {"@": "repetition" }, "offStageObjectsController": {"@": "arrayController"} } }, diff --git a/js/stage/objects-tray.reel/objects-tray.js b/js/stage/objects-tray.reel/objects-tray.js index 360d6037..75ece4c3 100644 --- a/js/stage/objects-tray.reel/objects-tray.js +++ b/js/stage/objects-tray.reel/objects-tray.js @@ -16,6 +16,9 @@ exports.ObjectsTray = Montage.create(Component, { _empty : { value: null }, _workspaceMode : { value: null }, + iconsRepetition : { + value: null + }, offStageObjectsController : { value: null }, -- cgit v1.2.3