From 7e997cac27b4fcb1a30ab53ab5d2114eacfb9222 Mon Sep 17 00:00:00 2001 From: Jon Reid Date: Tue, 3 Jul 2012 12:14:34 -0700 Subject: Timeline: Code refactor for Style.js --- js/panels/Timeline/Style.reel/Style.js | 195 +++++++++++++++++---------------- 1 file changed, 103 insertions(+), 92 deletions(-) (limited to 'js/panels/Timeline/Style.reel/Style.js') diff --git a/js/panels/Timeline/Style.reel/Style.js b/js/panels/Timeline/Style.reel/Style.js index c8d323a9..78bc2db3 100644 --- a/js/panels/Timeline/Style.reel/Style.js +++ b/js/panels/Timeline/Style.reel/Style.js @@ -17,38 +17,80 @@ var Montage = require("montage/core/core").Montage; var Component = require("montage/ui/component").Component; -var ElementsMediator = require("js/mediators/element-mediator").ElementMediator +var ElementsMediator = require("js/mediators/element-mediator").ElementMediator var LayerStyle = exports.LayerStyle = Montage.create(Component, { - + /* === BEGIN: Models === */ + _parentLayerComponent: { + value: null + }, + + _styleContainer: { + value: null + }, styleContainer: { - value: null, - serializable: true + serializable: true, + get: function() { + return this._styleContainer; + }, + set: function(newVal) { + this._styleContainer = newVal; + } }, + _styleHintable: { + value: null + }, styleHintable: { - value: null, - serializable: true + serializable: true, + get: function() { + return this._styleHintable; + }, + set: function(newVal) { + this._styleHintable = newVal; + } }, + _styleProperty: { + value: null + }, styleProperty: { - value: null, - serializable: true + serializable: true, + get: function() { + return this._styleProperty; + }, + set: function(newVal) { + this._styleProperty = newVal; + } }, + _valueEditorHottext: { + value: null + }, valueEditorHottext: { - value: null, - serializable: true + serializable: true, + get: function() { + return this._valueEditorHottext; + }, + set: function(newVal) { + this._valueEditorHottext = newVal; + } }, + _dtextProperty: { + value: null + }, dtextProperty: { - value: null, - serializable: true + serializable: true, + get: function() { + return this._dtextProperty; + }, + set: function(newVal) { + this._dtextProperty = newVal; + } }, - /* === BEGIN: Models === */ - // isSelected: whether or not the style is selected _isSelected: { value: false }, @@ -66,9 +108,6 @@ var LayerStyle = exports.LayerStyle = Montage.create(Component, { } }, - /* isActive: Whether or not the user is actively clicking within the style; used to communicate state with - * parent Layer. - */ _isActive: { value: false }, @@ -139,6 +178,7 @@ var LayerStyle = exports.LayerStyle = Montage.create(Component, { }, serializable: true }, + _myHintableValue : { value: null }, @@ -194,13 +234,13 @@ var LayerStyle = exports.LayerStyle = Montage.create(Component, { } }, - addedColorChips: - { value: false }, + addedColorChips: { + value: false + }, _colorelement: { writable:true }, - colorelement: { enumerable: true, get: function () { @@ -246,11 +286,12 @@ var LayerStyle = exports.LayerStyle = Montage.create(Component, { }, draw: { value: function() { - + // Show the right view if (this._swapViews === true) { - // Show the right thing this._showView(); } + + // Is this style selected? if (this.isSelected) { this.element.classList.add("style-selected"); } else { @@ -260,6 +301,7 @@ var LayerStyle = exports.LayerStyle = Montage.create(Component, { } }, + didDraw: { value: function() { if (this._swapViews === true) { @@ -288,6 +330,41 @@ var LayerStyle = exports.LayerStyle = Montage.create(Component, { this.whichView = "propval"; } }, + + handleFillColorChange: { + value: function (event) { + if(this.application.ninja.timeline.selectedStyle === "color" ||this.application.ninja.timeline.selectedStyle === this.editorProperty){ + var fillColorObject={}; + fillColorObject.color=event._event.color; + fillColorObject.mode=event._event.colorMode; + ElementsMediator.setColor([this._parentLayerComponent.layerData.stageElement], fillColorObject, this._isFill, "Change", "timeline",null,this._borderSide) + } + } + }, + + handleHottextChange:{ + value:function(event){ + if(this.application.ninja.timeline.selectedStyle === this.editorProperty){ + this.application.ninja.elementMediator.setProperty([this._parentLayerComponent.layerData.stageElement], this.editorProperty, [this.editorValue + event.target._units] , "Change", "timeline"); + } + } + }, + + handleHottextChanging:{ + value:function(event){ + if(this.application.ninja.timeline.selectedStyle === this.editorProperty){ + this.application.ninja.elementMediator.setProperty([this._parentLayerComponent.layerData.stageElement], this.editorProperty, [this.editorValue + event.target._units] , "Changing", "timeline"); + } + } + }, + + handleBlur:{ + value:function(event){ + if(this.application.ninja.timeline.selectedStyle === this.editorProperty){ + this.application.ninja.elementMediator.setProperty([this._parentLayerComponent.layerData.stageElement], this.editorProperty, [event.target.value] , "Change", "timeline"); + } + } + }, // Init: Initialize the component with some useful selectors and other defaults. init : { @@ -296,6 +373,8 @@ var LayerStyle = exports.LayerStyle = Montage.create(Component, { var arrHints = [], i = 0; + this._parentLayerComponent = this.parentComponent.parentComponent.parentComponent.parentComponent; + // Get the array of hints from _myTweenables: for (i = 0; i < this._myTweenables.length; i++) { arrHints.push(this._myTweenables[i].property) @@ -372,7 +451,7 @@ var LayerStyle = exports.LayerStyle = Montage.create(Component, { this.valueEditorHottext.minValue = tweenable.min; this.valueEditorHottext.maxValue = tweenable.max; this.valueEditorHottext.identifier="hottext"; - el = this.parentComponent.parentComponent.parentComponent.parentComponent.layerData.stageElement; + el = this._parentLayerComponent.layerData.stageElement; this.editorValue = parseFloat(ElementsMediator.getProperty(el, this.editorProperty)); this.valueEditorHottext.value = this.editorValue this.valueEditorHottext.addEventListener("change",this,false); @@ -397,7 +476,7 @@ var LayerStyle = exports.LayerStyle = Montage.create(Component, { this._fillColorCtrl.props = { side: 'top', align: 'center', wheel: true, palette: true, gradient: false, image: false, nocolor: true, offset: -80 }; this.application.ninja.colorController.addButton("chip", this._fillColorCtrl); this.colorelement = this._fillColorCtrl; - var currentValue = ElementsMediator.getColor(this.parentComponent.parentComponent.parentComponent.parentComponent.layerData.stageElement,this._isFill,this._borderSide) + var currentValue = ElementsMediator.getColor(this._parentLayerComponent.layerData.stageElement,this._isFill,this._borderSide) this.application.ninja.timeline.selectedStyle = this.editorProperty; this._fillColorCtrl.addEventListener("change", this.handleFillColorChange.bind(this), false); if(currentValue){ @@ -725,73 +804,5 @@ var LayerStyle = exports.LayerStyle = Montage.create(Component, { } ] - }, - - handleFillColorChange: { - value: function (event) { - if(this.application.ninja.timeline.selectedStyle === "color" ||this.application.ninja.timeline.selectedStyle === this.editorProperty){ - var fillColorObject={}; - fillColorObject.color=event._event.color; - fillColorObject.mode=event._event.colorMode; - ElementsMediator.setColor([this.parentComponent.parentComponent.parentComponent.parentComponent.layerData.stageElement], fillColorObject, this._isFill, "Change", "timeline",null,this._borderSide) - } - } - }, - - handleHottextChange:{ - value:function(event){ - if(this.application.ninja.timeline.selectedStyle === this.editorProperty){ - this.application.ninja.elementMediator.setProperty([this.parentComponent.parentComponent.parentComponent.parentComponent.layerData.stageElement], this.editorProperty, [this.editorValue + event.target._units] , "Change", "timeline"); - } - } - }, - - handleHottextChanging:{ - value:function(event){ - if(this.application.ninja.timeline.selectedStyle === this.editorProperty){ - this.application.ninja.elementMediator.setProperty([this.parentComponent.parentComponent.parentComponent.parentComponent.layerData.stageElement], this.editorProperty, [this.editorValue + event.target._units] , "Changing", "timeline"); - } - } - }, - - handleBlur:{ - value:function(event){ - if(this.application.ninja.timeline.selectedStyle === this.editorProperty){ - this.application.ninja.elementMediator.setProperty([this.parentComponent.parentComponent.parentComponent.parentComponent.layerData.stageElement], this.editorProperty, [event.target.value] , "Change", "timeline"); - } - } - }, - - - /* Begin: Logging routines */ - _boolDebug: { - enumerable: false, - value: false // set to true to enable debugging to console; false for turning off all debugging. - }, - boolDebug: { - get: function() { - return this._boolDebug; - }, - set: function(boolDebugSwitch) { - this._boolDebug = boolDebugSwitch; - } - }, - log: { - value: function(strMessage) { - if (this.boolDebug) { - console.log(this.getLineNumber() + ": " + strMessage); - } - } - }, - getLineNumber: { - value: function() { - try { - throw new Error('bazinga') - }catch(e){ - return e.stack.split("at")[3].split(":")[2]; - } - } } - /* End: Logging routines */ - }); \ No newline at end of file -- cgit v1.2.3 From 539f430f95812e726ad14012965ece942a010bca Mon Sep 17 00:00:00 2001 From: Jon Reid Date: Tue, 3 Jul 2012 14:42:03 -0700 Subject: Timeline: Refactor style and layer to use pointers to parent components. --- js/panels/Timeline/Style.reel/Style.js | 11 ++++++++--- 1 file changed, 8 insertions(+), 3 deletions(-) (limited to 'js/panels/Timeline/Style.reel/Style.js') diff --git a/js/panels/Timeline/Style.reel/Style.js b/js/panels/Timeline/Style.reel/Style.js index 78bc2db3..802c6311 100644 --- a/js/panels/Timeline/Style.reel/Style.js +++ b/js/panels/Timeline/Style.reel/Style.js @@ -284,6 +284,13 @@ var LayerStyle = exports.LayerStyle = Montage.create(Component, { this.init(); } }, + willDraw: { + value: function() { + if (this._parentLayerComponent === null) { + this._parentLayerComponent = this.parentComponent.parentComponent.parentComponent.parentComponent; + } + } + }, draw: { value: function() { // Show the right view @@ -372,9 +379,7 @@ var LayerStyle = exports.LayerStyle = Montage.create(Component, { var arrHints = [], i = 0; - - this._parentLayerComponent = this.parentComponent.parentComponent.parentComponent.parentComponent; - + // Get the array of hints from _myTweenables: for (i = 0; i < this._myTweenables.length; i++) { arrHints.push(this._myTweenables[i].property) -- cgit v1.2.3 From a869cd3619b783e29cf320f46713b0c790edb15f Mon Sep 17 00:00:00 2001 From: Kris Kowal Date: Fri, 6 Jul 2012 10:57:37 -0700 Subject: Update copyright boilerplate --- js/panels/Timeline/Style.reel/Style.js | 34 +++++++++++++++++++++++++++++----- 1 file changed, 29 insertions(+), 5 deletions(-) (limited to 'js/panels/Timeline/Style.reel/Style.js') diff --git a/js/panels/Timeline/Style.reel/Style.js b/js/panels/Timeline/Style.reel/Style.js index c8d323a9..122c2c0a 100644 --- a/js/panels/Timeline/Style.reel/Style.js +++ b/js/panels/Timeline/Style.reel/Style.js @@ -1,8 +1,32 @@ /* - 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. - */ +Copyright (c) 2012, Motorola Mobility, Inc +All Rights Reserved. +BSD License. + +Redistribution and use in source and binary forms, with or without +modification, are permitted provided that the following conditions are met: + + - Redistributions of source code must retain the above copyright notice, + this list of conditions and the following disclaimer. + - Redistributions in binary form must reproduce the above copyright + notice, this list of conditions and the following disclaimer in the + documentation and/or other materials provided with the distribution. + - Neither the name of Motorola Mobility nor the names of its contributors + may be used to endorse or promote products derived from this software + without specific prior written permission. + +THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" +AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE +IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE +ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT OWNER OR CONTRIBUTORS BE +LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR +CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF +SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS +INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN +CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) +ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE +POSSIBILITY OF SUCH DAMAGE. + */ /* * Style component: Edits and manages a single style rule for a Layer in the Timeline. @@ -794,4 +818,4 @@ var LayerStyle = exports.LayerStyle = Montage.create(Component, { } /* End: Logging routines */ -}); \ No newline at end of file +}); -- cgit v1.2.3