From 648ee61ae84216d0236e0dbc211addc13b2cfa3a Mon Sep 17 00:00:00 2001 From: Kris Kowal Date: Fri, 6 Jul 2012 11:52:06 -0700 Subject: Expand tabs --- js/panels/Timeline/Style.reel/Style.js | 538 ++++++++++++++++----------------- 1 file changed, 269 insertions(+), 269 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 122c2c0a..db4593a2 100644 --- a/js/panels/Timeline/Style.reel/Style.js +++ b/js/panels/Timeline/Style.reel/Style.js @@ -31,17 +31,17 @@ POSSIBILITY OF SUCH DAMAGE. /* * Style component: Edits and manages a single style rule for a Layer in the Timeline. * Public Properties: - * editorProperty: The CSS property for the style. - * editorValue: The value for the editorProperty. - * whichView: Which view to show, the hintable view (where a new property can be typed in) - * or the propval view (where the property's value can be set with the tweener). - * Valid values are "hintable" and "propval", defaults to "hintable". + * editorProperty: The CSS property for the style. + * editorValue: The value for the editorProperty. + * whichView: Which view to show, the hintable view (where a new property can be typed in) + * or the propval view (where the property's value can be set with the tweener). + * Valid values are "hintable" and "propval", defaults to "hintable". * */ 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, { @@ -72,151 +72,151 @@ var LayerStyle = exports.LayerStyle = Montage.create(Component, { }, /* === BEGIN: Models === */ - // isSelected: whether or not the style is selected - _isSelected: { - value: false - }, - isSelected: { - serializable: true, - get: function() { - return this._isSelected; - }, - set: function(newVal) { - - if (newVal !== this._isSelected) { - this._isSelected = newVal; - this.needsDraw = true; - } - } - }, - + // isSelected: whether or not the style is selected + _isSelected: { + value: false + }, + isSelected: { + serializable: true, + get: function() { + return this._isSelected; + }, + set: function(newVal) { + + if (newVal !== this._isSelected) { + this._isSelected = newVal; + this.needsDraw = true; + } + } + }, + /* isActive: Whether or not the user is actively clicking within the style; used to communicate state with * parent Layer. */ _isActive: { - value: false + value: false }, isActive: { - get: function() { - return this._isActive; - }, - set: function(newVal) { - this._isActive = newVal; - } + get: function() { + return this._isActive; + }, + set: function(newVal) { + this._isActive = newVal; + } }, // Property for this editor _editorProperty: { - value: "" + value: "" }, editorProperty: { - serializable: true, - get: function() { - return this._editorProperty; - }, - set: function(newVal) { - this._editorProperty = newVal; - this.needsDraw = true; - } + serializable: true, + get: function() { + return this._editorProperty; + }, + set: function(newVal) { + this._editorProperty = newVal; + this.needsDraw = true; + } }, // Value for the property for this editor. _editorValue: { - value: "" + value: "" }, editorValue: { - serializable: true, - get: function() { - return this._editorValue; - }, - set: function(newVal) { - this._editorValue = newVal; - this.needsDraw = true; - } + serializable: true, + get: function() { + return this._editorValue; + }, + set: function(newVal) { + this._editorValue = newVal; + this.needsDraw = true; + } }, - // The tweener used to change the value for this property. + // The tweener used to change the value for this property. _ruleTweener: { - value: false + value: false }, ruleTweener: { - serializable: true, - get: function() { - return this._ruleTweener; - }, - set: function(newVal) { - this._ruleTweener = newVal; - this.needsDraw = true; - } + serializable: true, + get: function() { + return this._ruleTweener; + }, + set: function(newVal) { + this._ruleTweener = newVal; + this.needsDraw = true; + } }, // The hintable we use to change the Property _myHintable: { - value: "" + value: "" }, myHintable: { - get: function() { - return this._myHintable; - }, - set: function(newVal) { - this._myHintable = newVal; - }, + get: function() { + return this._myHintable; + }, + set: function(newVal) { + this._myHintable = newVal; + }, serializable: true }, _myHintableValue : { - value: null + value: null }, myHintableValue: { - get: function() { - return this._myHintableValue; - }, - set: function(newVal) { - this._myHintableValue = newVal; - } + get: function() { + return this._myHintableValue; + }, + set: function(newVal) { + this._myHintableValue = newVal; + } }, // swapViews: Is a view swap happening? _swapViews : { - value: true + value: true }, // whichView: which view should we show: hintable or propval _whichView : { - value: "hintable" + value: "hintable" }, whichView: { - serializable: true, - get: function() { - return this._whichView; - }, - set: function(newVal) { - if (this._whichView !== newVal) { - if ((newVal !== "hintable") && (newVal !== "propval")) { - this.log("Error: Unknown view -"+newVal+"- requested for style.js."); - return; - } - this._whichView = newVal; - this._swapViews = true; - this.needsDraw = true; - } - } + serializable: true, + get: function() { + return this._whichView; + }, + set: function(newVal) { + if (this._whichView !== newVal) { + if ((newVal !== "hintable") && (newVal !== "propval")) { + this.log("Error: Unknown view -"+newVal+"- requested for style.js."); + return; + } + this._whichView = newVal; + this._swapViews = true; + this.needsDraw = true; + } + } }, - // styleID: the id for this style; - // Used to publish events - _styleID : { - value: null - }, - styleID: { - serializable: true, - get: function() { - return this._styleID; - }, - set: function(newVal) { - this._styleID = newVal; - this.needsDraw = true; - } - }, + // styleID: the id for this style; + // Used to publish events + _styleID : { + value: null + }, + styleID: { + serializable: true, + get: function() { + return this._styleID; + }, + set: function(newVal) { + this._styleID = newVal; + this.needsDraw = true; + } + }, addedColorChips: { value: false }, @@ -254,158 +254,158 @@ var LayerStyle = exports.LayerStyle = Montage.create(Component, { } }, - handleMousedown: { - value: function(event) { - this.isActive = true; - } - }, + handleMousedown: { + value: function(event) { + this.isActive = true; + } + }, /* === END: Models === */ - /* === BEGIN : Draw cycle === */ + /* === BEGIN : Draw cycle === */ prepareForDraw: { value: function() { - this.init(); + this.init(); } }, draw: { - value: function() { - - if (this._swapViews === true) { - // Show the right thing - this._showView(); - } - if (this.isSelected) { - this.element.classList.add("style-selected"); - } else { - this.element.classList.remove("style-selected"); - } + value: function() { + + if (this._swapViews === true) { + // Show the right thing + this._showView(); + } + if (this.isSelected) { + this.element.classList.add("style-selected"); + } else { + this.element.classList.remove("style-selected"); + } - } + } }, didDraw: { - value: function() { - if (this._swapViews === true) { - // View swap has been completed. - this._swapViews === false; - } - } - }, - /* === END: Draw cycle === */ - - /* === BEGIN: controllers === */ - - // handleStylePropertyDblClick: What happens when the user double-clicks on the style property - handleStylePropertyDblclick: { - value: function(event) { - this.whichView = "hintable"; - } - }, - - // handleHintableStop: What happens when the hintable issues its stop event - handleHintableStop: { - value: function(event) { - // this should be handled via binding, but somehow is not. Setting manually for now. - this.editorProperty = this.myHintable.value; - // Change views. - this.whichView = "propval"; - } - }, - - // Init: Initialize the component with some useful selectors and other defaults. - init : { - value: function() { - - var arrHints = [], - i = 0; - - // Get the array of hints from _myTweenables: - for (i = 0; i < this._myTweenables.length; i++) { - arrHints.push(this._myTweenables[i].property) - } - - // Set useful information for the hintable - this.myHintable.editingClass = "editable2"; - this.myHintable.hints = arrHints; - - // Bind a handler to the Hintable's change event - this.myHintable.identifier = "hintable"; - this.myHintable.addEventListener("stop", this, false); - - // Add the click handler to the styleProperty: When the user double-clicks on it, we want to start the editor. - this.styleProperty.identifier = "styleProperty"; - this.styleProperty.addEventListener("dblclick", this, false); - - // Get some selectors that we'll be using - this.editorHottextContainer = this.element.querySelector(".editor-hottext"); - this.editorInputContainer = this.element.querySelector(".editor-input"); - this.editorColorContainer = this.element.querySelector(".editor-color"); - this.containerHintable = this.element.querySelector(".row-hintable"); - this.containerPropvals = this.element.querySelector(".container-propvals"); - this.valueEditorInput = this.element.querySelector(".editor-input input"); - - // mousedown listener to handle - this.element.addEventListener("mousedown", this, false); - } - }, - - // showView: Show the appropriate view - _showView : { - value: function() { - if (this.whichView === "hintable") { - this.containerHintable.classList.remove("hidden"); - this.containerPropvals.classList.add("hidden"); - this.myHintable.start(); - } else { - this.containerHintable.classList.add("hidden"); - this.containerPropvals.classList.remove("hidden"); - this._showTweener(); - } - } - }, - - // showTweener: show the appropriate tweener - _showTweener : { - value: function() { - // Which tweener should we show? - // First, get the appropriate editor type from the data structure. - var tweenable = {}, - i = 0; + value: function() { + if (this._swapViews === true) { + // View swap has been completed. + this._swapViews === false; + } + } + }, + /* === END: Draw cycle === */ + + /* === BEGIN: controllers === */ + + // handleStylePropertyDblClick: What happens when the user double-clicks on the style property + handleStylePropertyDblclick: { + value: function(event) { + this.whichView = "hintable"; + } + }, + + // handleHintableStop: What happens when the hintable issues its stop event + handleHintableStop: { + value: function(event) { + // this should be handled via binding, but somehow is not. Setting manually for now. + this.editorProperty = this.myHintable.value; + // Change views. + this.whichView = "propval"; + } + }, + + // Init: Initialize the component with some useful selectors and other defaults. + init : { + value: function() { + + var arrHints = [], + i = 0; + + // Get the array of hints from _myTweenables: + for (i = 0; i < this._myTweenables.length; i++) { + arrHints.push(this._myTweenables[i].property) + } + + // Set useful information for the hintable + this.myHintable.editingClass = "editable2"; + this.myHintable.hints = arrHints; + + // Bind a handler to the Hintable's change event + this.myHintable.identifier = "hintable"; + this.myHintable.addEventListener("stop", this, false); + + // Add the click handler to the styleProperty: When the user double-clicks on it, we want to start the editor. + this.styleProperty.identifier = "styleProperty"; + this.styleProperty.addEventListener("dblclick", this, false); + + // Get some selectors that we'll be using + this.editorHottextContainer = this.element.querySelector(".editor-hottext"); + this.editorInputContainer = this.element.querySelector(".editor-input"); + this.editorColorContainer = this.element.querySelector(".editor-color"); + this.containerHintable = this.element.querySelector(".row-hintable"); + this.containerPropvals = this.element.querySelector(".container-propvals"); + this.valueEditorInput = this.element.querySelector(".editor-input input"); + + // mousedown listener to handle + this.element.addEventListener("mousedown", this, false); + } + }, + + // showView: Show the appropriate view + _showView : { + value: function() { + if (this.whichView === "hintable") { + this.containerHintable.classList.remove("hidden"); + this.containerPropvals.classList.add("hidden"); + this.myHintable.start(); + } else { + this.containerHintable.classList.add("hidden"); + this.containerPropvals.classList.remove("hidden"); + this._showTweener(); + } + } + }, + + // showTweener: show the appropriate tweener + _showTweener : { + value: function() { + // Which tweener should we show? + // First, get the appropriate editor type from the data structure. + var tweenable = {}, + i = 0; if (this.ruleTweener === true) { return; } else { this.ruleTweener = true; } - - tweenable.tweener = "input"; - - for (i = 0; i < this._myTweenables.length; i++) { - if (this._myTweenables[i].property === this.editorProperty) { - tweenable = this._myTweenables[i]; - } - } - - if (tweenable.tweener === "hottext" ) { - this.editorInputContainer.classList.add("hidden"); - this.editorColorContainer.classList.add("hidden"); - this.editorHottextContainer.classList.remove("hidden"); - this.valueEditorHottext.acceptableUnits = [tweenable.units]; - this.valueEditorHottext.units = tweenable.units; - this.valueEditorHottext.minValue = tweenable.min; - this.valueEditorHottext.maxValue = tweenable.max; + + tweenable.tweener = "input"; + + for (i = 0; i < this._myTweenables.length; i++) { + if (this._myTweenables[i].property === this.editorProperty) { + tweenable = this._myTweenables[i]; + } + } + + if (tweenable.tweener === "hottext" ) { + this.editorInputContainer.classList.add("hidden"); + this.editorColorContainer.classList.add("hidden"); + this.editorHottextContainer.classList.remove("hidden"); + this.valueEditorHottext.acceptableUnits = [tweenable.units]; + this.valueEditorHottext.units = tweenable.units; + this.valueEditorHottext.minValue = tweenable.min; + this.valueEditorHottext.maxValue = tweenable.max; this.valueEditorHottext.identifier="hottext"; el = this.parentComponent.parentComponent.parentComponent.parentComponent.layerData.stageElement; this.editorValue = parseFloat(ElementsMediator.getProperty(el, this.editorProperty)); this.valueEditorHottext.value = this.editorValue this.valueEditorHottext.addEventListener("change",this,false); this.valueEditorHottext.addEventListener("changing",this,false); - this.valueEditorHottext.needsDraw = true; - } else if (tweenable.tweener === "color" ) { - this.editorInputContainer.classList.add("hidden"); - this.editorColorContainer.classList.remove("hidden"); - this.editorHottextContainer.classList.add("hidden"); + this.valueEditorHottext.needsDraw = true; + } else if (tweenable.tweener === "color" ) { + this.editorInputContainer.classList.add("hidden"); + this.editorColorContainer.classList.remove("hidden"); + this.editorHottextContainer.classList.add("hidden"); if(tweenable.colorType === "fill"){ this._isFill = true; @@ -429,20 +429,20 @@ var LayerStyle = exports.LayerStyle = Montage.create(Component, { this.addedColorChips = true; } } - // TODO: set up color chip here. - } else if (tweenable.tweener === "input"){ - this.editorInputContainer.classList.remove("hidden"); - this.editorColorContainer.classList.add("hidden"); - this.editorHottextContainer.classList.add("hidden"); - this.valueEditorInput.value = this.editorValue; + // TODO: set up color chip here. + } else if (tweenable.tweener === "input"){ + this.editorInputContainer.classList.remove("hidden"); + this.editorColorContainer.classList.add("hidden"); + this.editorHottextContainer.classList.add("hidden"); + this.valueEditorInput.value = this.editorValue; this.valueEditorInput.addEventListener("blur",this,false); - } else { - this.log("Warning: unknown tweenable -"+tweenable.tweener+"- specified in style.js.") - } - } - }, - - /* === END: Controllers === */ + } else { + this.log("Warning: unknown tweenable -"+tweenable.tweener+"- specified in style.js.") + } + } + }, + + /* === END: Controllers === */ _myTweenables: { value: [ @@ -786,36 +786,36 @@ var LayerStyle = exports.LayerStyle = Montage.create(Component, { } }, - - /* Begin: Logging routines */ + + /* Begin: Logging routines */ _boolDebug: { - enumerable: false, - value: false // set to true to enable debugging to console; false for turning off all debugging. + 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; - } + get: function() { + return this._boolDebug; + }, + set: function(boolDebugSwitch) { + this._boolDebug = boolDebugSwitch; + } }, log: { - value: function(strMessage) { - if (this.boolDebug) { - console.log(this.getLineNumber() + ": " + strMessage); - } - } + 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]; - } - } + value: function() { + try { + throw new Error('bazinga') + }catch(e){ + return e.stack.split("at")[3].split(":")[2]; + } + } } - /* End: Logging routines */ + /* End: Logging routines */ }); -- cgit v1.2.3 From 04343eda8c2f870b0da55cfdc8003c99fe1cc4de Mon Sep 17 00:00:00 2001 From: Kris Kowal Date: Fri, 6 Jul 2012 11:53:10 -0700 Subject: Remove trailing spaces --- js/panels/Timeline/Style.reel/Style.js | 60 +++++++++++++++++----------------- 1 file changed, 30 insertions(+), 30 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 db4593a2..82c2d8ab 100644 --- a/js/panels/Timeline/Style.reel/Style.js +++ b/js/panels/Timeline/Style.reel/Style.js @@ -32,11 +32,11 @@ POSSIBILITY OF SUCH DAMAGE. * Style component: Edits and manages a single style rule for a Layer in the Timeline. * Public Properties: * editorProperty: The CSS property for the style. - * editorValue: The value for the editorProperty. + * editorValue: The value for the editorProperty. * whichView: Which view to show, the hintable view (where a new property can be typed in) * or the propval view (where the property's value can be set with the tweener). * Valid values are "hintable" and "propval", defaults to "hintable". - * + * */ var Montage = require("montage/core/core").Montage; @@ -89,7 +89,7 @@ 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. */ @@ -104,7 +104,7 @@ var LayerStyle = exports.LayerStyle = Montage.create(Component, { this._isActive = newVal; } }, - + // Property for this editor _editorProperty: { value: "" @@ -119,7 +119,7 @@ var LayerStyle = exports.LayerStyle = Montage.create(Component, { this.needsDraw = true; } }, - + // Value for the property for this editor. _editorValue: { value: "" @@ -134,8 +134,8 @@ var LayerStyle = exports.LayerStyle = Montage.create(Component, { this.needsDraw = true; } }, - - // The tweener used to change the value for this property. + + // The tweener used to change the value for this property. _ruleTweener: { value: false }, @@ -149,7 +149,7 @@ var LayerStyle = exports.LayerStyle = Montage.create(Component, { this.needsDraw = true; } }, - + // The hintable we use to change the Property _myHintable: { value: "" @@ -174,12 +174,12 @@ var LayerStyle = exports.LayerStyle = Montage.create(Component, { this._myHintableValue = newVal; } }, - + // swapViews: Is a view swap happening? _swapViews : { value: true }, - + // whichView: which view should we show: hintable or propval _whichView : { value: "hintable" @@ -201,7 +201,7 @@ var LayerStyle = exports.LayerStyle = Montage.create(Component, { } } }, - + // styleID: the id for this style; // Used to publish events _styleID : { @@ -259,9 +259,9 @@ var LayerStyle = exports.LayerStyle = Montage.create(Component, { this.isActive = true; } }, - + /* === END: Models === */ - + /* === BEGIN : Draw cycle === */ prepareForDraw: { value: function() { @@ -270,7 +270,7 @@ var LayerStyle = exports.LayerStyle = Montage.create(Component, { }, draw: { value: function() { - + if (this._swapViews === true) { // Show the right thing this._showView(); @@ -293,16 +293,16 @@ var LayerStyle = exports.LayerStyle = Montage.create(Component, { } }, /* === END: Draw cycle === */ - + /* === BEGIN: controllers === */ - + // handleStylePropertyDblClick: What happens when the user double-clicks on the style property handleStylePropertyDblclick: { value: function(event) { this.whichView = "hintable"; } }, - + // handleHintableStop: What happens when the hintable issues its stop event handleHintableStop: { value: function(event) { @@ -312,14 +312,14 @@ var LayerStyle = exports.LayerStyle = Montage.create(Component, { this.whichView = "propval"; } }, - + // Init: Initialize the component with some useful selectors and other defaults. init : { value: function() { var arrHints = [], i = 0; - + // Get the array of hints from _myTweenables: for (i = 0; i < this._myTweenables.length; i++) { arrHints.push(this._myTweenables[i].property) @@ -328,15 +328,15 @@ var LayerStyle = exports.LayerStyle = Montage.create(Component, { // Set useful information for the hintable this.myHintable.editingClass = "editable2"; this.myHintable.hints = arrHints; - + // Bind a handler to the Hintable's change event this.myHintable.identifier = "hintable"; this.myHintable.addEventListener("stop", this, false); - + // Add the click handler to the styleProperty: When the user double-clicks on it, we want to start the editor. this.styleProperty.identifier = "styleProperty"; this.styleProperty.addEventListener("dblclick", this, false); - + // Get some selectors that we'll be using this.editorHottextContainer = this.element.querySelector(".editor-hottext"); this.editorInputContainer = this.element.querySelector(".editor-input"); @@ -344,12 +344,12 @@ var LayerStyle = exports.LayerStyle = Montage.create(Component, { this.containerHintable = this.element.querySelector(".row-hintable"); this.containerPropvals = this.element.querySelector(".container-propvals"); this.valueEditorInput = this.element.querySelector(".editor-input input"); - - // mousedown listener to handle + + // mousedown listener to handle this.element.addEventListener("mousedown", this, false); } }, - + // showView: Show the appropriate view _showView : { value: function() { @@ -364,7 +364,7 @@ var LayerStyle = exports.LayerStyle = Montage.create(Component, { } } }, - + // showTweener: show the appropriate tweener _showTweener : { value: function() { @@ -378,7 +378,7 @@ var LayerStyle = exports.LayerStyle = Montage.create(Component, { } else { this.ruleTweener = true; } - + tweenable.tweener = "input"; for (i = 0; i < this._myTweenables.length; i++) { @@ -441,9 +441,9 @@ var LayerStyle = exports.LayerStyle = Montage.create(Component, { } } }, - + /* === END: Controllers === */ - + _myTweenables: { value: [ { @@ -786,7 +786,7 @@ var LayerStyle = exports.LayerStyle = Montage.create(Component, { } }, - + /* Begin: Logging routines */ _boolDebug: { enumerable: false, -- cgit v1.2.3