From d6c427432bd0040b084b854407e9ed59a6707b54 Mon Sep 17 00:00:00 2001 From: Eric Guzman Date: Fri, 15 Jun 2012 15:00:06 -0700 Subject: Objects Tray - Add objects tray to binding view --- js/stage/objects-tray.reel/objects-tray.css | 33 ++++++++++++++++ js/stage/objects-tray.reel/objects-tray.html | 58 ++++++++++++++++++++++++++++ js/stage/objects-tray.reel/objects-tray.js | 53 +++++++++++++++++++++++++ 3 files changed, 144 insertions(+) create mode 100644 js/stage/objects-tray.reel/objects-tray.css create mode 100644 js/stage/objects-tray.reel/objects-tray.html create mode 100644 js/stage/objects-tray.reel/objects-tray.js (limited to 'js/stage/objects-tray.reel') diff --git a/js/stage/objects-tray.reel/objects-tray.css b/js/stage/objects-tray.reel/objects-tray.css new file mode 100644 index 00000000..422d6a8f --- /dev/null +++ b/js/stage/objects-tray.reel/objects-tray.css @@ -0,0 +1,33 @@ +/* + 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. +
*/ + +/* + +
+ +
+ +*/ + +.objects-list { + font-size: 11px; + margin: 10px 0 0 0; + padding: 0; + text-shadow: -1px -1px 0 #4D4D4D; +} + +.objects-tray { + background-color: rgba(0,0,0,.6); + border-top-right-radius: 8px; + border-top-left-radius: 8px; + box-shadow: inset 0 0 3px #333; + padding: 0 10px 5px; + margin: 0 auto; + overflow: hidden; + -webkit-box-flex: 0; +} \ No newline at end of file diff --git a/js/stage/objects-tray.reel/objects-tray.html b/js/stage/objects-tray.reel/objects-tray.html new file mode 100644 index 00000000..0fece3fe --- /dev/null +++ b/js/stage/objects-tray.reel/objects-tray.html @@ -0,0 +1,58 @@ + + + + + + + + + + + + + +
+ +
+ + + diff --git a/js/stage/objects-tray.reel/objects-tray.js b/js/stage/objects-tray.reel/objects-tray.js new file mode 100644 index 00000000..ee1ecd06 --- /dev/null +++ b/js/stage/objects-tray.reel/objects-tray.js @@ -0,0 +1,53 @@ +/* + 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. +
*/ + +/** + @requires montage/core/core + @requires montage/ui/component + */ +var Montage = require("montage/core/core").Montage, + Component = require("montage/ui/component").Component; + +exports.ObjectsTray = Montage.create(Component, { + _objects: { value: null }, + objects: { + get: function() { + return this._objects; + }, + set: function(value) { + this._objects = value; + this.needsDraw = true; + } + }, + + + templateDidLoad: { + value: function() { + console.log('objects panel loaded'); + } + }, + + prepareForDraw : { + value: function() { + + Object.defineBinding(this, 'objects', { + "boundObject": this.application.ninja.objectsController, + "boundObjectPropertyPath": "objects", + "oneway": true + }); + + } + }, + draw : { + value: function() { + console.log("objects panel draw"); + if(this.objects) { + + } + } + } + +}); \ No newline at end of file -- cgit v1.2.3 From 592bbb7e47d14528c1c9b034877a38f90db5649b Mon Sep 17 00:00:00 2001 From: Eric Guzman Date: Fri, 15 Jun 2012 16:25:21 -0700 Subject: Objects Tray - Add hiding based on workspace mode. --- js/stage/objects-tray.reel/objects-tray.css | 8 ++++++ js/stage/objects-tray.reel/objects-tray.js | 44 +++++++++++++++++++++++++++-- 2 files changed, 49 insertions(+), 3 deletions(-) (limited to 'js/stage/objects-tray.reel') diff --git a/js/stage/objects-tray.reel/objects-tray.css b/js/stage/objects-tray.reel/objects-tray.css index 422d6a8f..61d9ff1e 100644 --- a/js/stage/objects-tray.reel/objects-tray.css +++ b/js/stage/objects-tray.reel/objects-tray.css @@ -30,4 +30,12 @@ margin: 0 auto; overflow: hidden; -webkit-box-flex: 0; + -webkit-transition: -webkit-transform .5s cubic-bezier(.44,.19,0,.99); + -webkit-transform-origin: center bottom; + +} + +.hide-objects-tray { + /*-webkit-transform: scale(0);*/ + -webkit-transform: translate3d(0, 100px, 0) scale(.5); } \ No newline at end of file diff --git a/js/stage/objects-tray.reel/objects-tray.js b/js/stage/objects-tray.reel/objects-tray.js index ee1ecd06..c046a3bb 100644 --- a/js/stage/objects-tray.reel/objects-tray.js +++ b/js/stage/objects-tray.reel/objects-tray.js @@ -12,6 +12,25 @@ var Montage = require("montage/core/core").Montage, Component = require("montage/ui/component").Component; exports.ObjectsTray = Montage.create(Component, { + hideClass : { value: 'hide-objects-tray'}, + _workspaceMode : { value: null }, + workspaceMode : { + get : function() { return this._workspaceMode; }, + set : function(value) { + if(value === this._workspaceMode) { return; } + + var toHide = (value !== 'binding'); + + setTimeout(function() { + this.hide = toHide; + }.bind(this), 200); + + this._workspaceMode = value; + + this.needsDraw = true; + } + }, + _objects: { value: null }, objects: { get: function() { @@ -23,6 +42,18 @@ exports.ObjectsTray = Montage.create(Component, { } }, + _hide : { value: null }, + hide : { + get : function() { return this._hide; }, + set : function(value) { + if(value === this._hide) { return; } + + this._hide = value; + + this.needsDraw = true; + } + }, + templateDidLoad: { value: function() { @@ -33,6 +64,12 @@ exports.ObjectsTray = Montage.create(Component, { prepareForDraw : { value: function() { + Object.defineBinding(this, 'workspaceMode', { + "boundObject": this.application.ninja, + "boundObjectPropertyPath": "workspaceMode", + "oneway": true + }); + Object.defineBinding(this, 'objects', { "boundObject": this.application.ninja.objectsController, "boundObjectPropertyPath": "objects", @@ -43,9 +80,10 @@ exports.ObjectsTray = Montage.create(Component, { }, draw : { value: function() { - console.log("objects panel draw"); - if(this.objects) { - + if(this.hide) { + this.element.classList.add(this.hideClass); + } else { + this.element.classList.remove(this.hideClass); } } } -- 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. --- js/stage/objects-tray.reel/objects-tray.js | 9 ++++++++- 1 file changed, 8 insertions(+), 1 deletion(-) (limited to 'js/stage/objects-tray.reel') 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 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/stage/objects-tray.reel/objects-tray.html | 3 ++- js/stage/objects-tray.reel/objects-tray.js | 32 +++++++++++++++++++++++++++- 2 files changed, 33 insertions(+), 2 deletions(-) (limited to 'js/stage/objects-tray.reel') 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/stage/objects-tray.reel/objects-tray.html | 8 +++++++- js/stage/objects-tray.reel/objects-tray.js | 23 ++++++++++++++++------- 2 files changed, 23 insertions(+), 8 deletions(-) (limited to 'js/stage/objects-tray.reel') 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 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 --- js/stage/objects-tray.reel/objects-tray.html | 1 + js/stage/objects-tray.reel/objects-tray.js | 3 +++ 2 files changed, 4 insertions(+) (limited to 'js/stage/objects-tray.reel') 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