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/ninja.reel/ninja.js | 2 +- js/stage/objects-tray.reel/objects-tray.css | 8 ++++++ js/stage/objects-tray.reel/objects-tray.js | 44 +++++++++++++++++++++++++++-- 3 files changed, 50 insertions(+), 4 deletions(-) (limited to 'js') diff --git a/js/ninja.reel/ninja.js b/js/ninja.reel/ninja.js index fe20447a..4127e59a 100755 --- a/js/ninja.reel/ninja.js +++ b/js/ninja.reel/ninja.js @@ -47,7 +47,7 @@ exports.Ninja = Montage.create(Component, { workspaceMode: { get: function() { - return this.workspaceMode; + return this._workspaceMode; }, set: function(val) { if(this._workspaceMode !== val ) { 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