From f3dc624fa464a79fd8e8cec1ddd16ed2109bda23 Mon Sep 17 00:00:00 2001 From: Ananya Sen Date: Fri, 10 Feb 2012 16:05:27 -0800 Subject: Revert "Merge from /joseeight/ninja-internal/tree/FileIO" This reverts commit c48eeb01bd726895dc577d8b843b2a75883eee07. Signed-off-by: Ananya Sen --- js/panels/Timeline/Style.reel/Style.js | 648 --------------------------------- 1 file changed, 648 deletions(-) delete mode 100644 js/panels/Timeline/Style.reel/Style.js (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 deleted file mode 100644 index e6e03901..00000000 --- a/js/panels/Timeline/Style.reel/Style.js +++ /dev/null @@ -1,648 +0,0 @@ -/* - * 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". - * - */ - -var Montage = require("montage/core/core").Montage; -var Component = require("montage/ui/component").Component; - -var LayerStyle = exports.LayerStyle = Montage.create(Component, { - - hasTemplate:{ - value: true - }, - - /* === BEGIN: Models === */ - // isSelected: whether or not the style is selected - _isSelected: { - serializable: true, - 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 - }, - isActive: { - get: function() { - return this._isActive; - }, - set: function(newVal) { - this._isActive = newVal; - } - }, - - // Property for this editor - _editorProperty: { - serializable: true, - value: "" - }, - editorProperty: { - serializable: true, - get: function() { - return this._editorProperty; - }, - set: function(newVal) { - this._editorProperty = newVal; - this.needsDraw = true; - } - }, - - // Value for the property for this editor. - _editorValue: { - serializable: true, - value: "" - }, - editorValue: { - 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. - _ruleTweener: { - serializable: true, - value: false - }, - ruleTweener: { - 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: "" - }, - myHintable: { - get: function() { - return this._myHintable; - }, - set: function(newVal) { - this._myHintable = newVal; - } - }, - _myHintableValue : { - value: null - }, - myHintableValue: { - get: function() { - return this._myHintableValue; - }, - set: function(newVal) { - this._myHintableValue = newVal; - } - }, - - // swapViews: Is a view swap happening? - _swapViews : { - value: true - }, - - // whichView: which view should we show: hintable or propval - _whichView : { - serializable: true, - 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; - } - } - }, - - // styleID: the id for this style; - // Used to publish events - _styleID : { - serializable: true, - value: null - }, - styleID: { - serializable: true, - get: function() { - return this._styleID; - }, - set: function(newVal) { - this._styleID = newVal; - this.needsDraw = true; - } - }, - - handleMousedown: { - value: function(event) { - this.isActive = true; - } - }, - - /* === END: Models === */ - - /* === BEGIN : Draw cycle === */ - prepareForDraw: { - value: function() { - this.init(); - } - }, - draw: { - value: function() { - - if (this._swapViews === true) { - // Show the right thing - this._showView(); - } - if (this.isSelected) { - this.element.classList.add("selected"); - } else { - this.element.classList.remove("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; - - 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.needsDraw = true; - } else if (tweenable.tweener === "color" ) { - this.editorInputContainer.classList.add("hidden"); - this.editorColorContainer.classList.remove("hidden"); - this.editorHottextContainer.classList.add("hidden"); - // 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; - } else { - this.log("Warning: unknown tweenable -"+tweenable.tweener+"- specified in style.js.") - } - } - }, - - /* === END: Controllers === */ - - _myTweenables: { - value: [ - { - "property" : "background-color", - "tweener" : "color", - "units" : "", - "min" : "", - "max" : "", - "default" :"#FFFFFF" - }, - { - "property" : "background-position-x", - "tweener" : "hottext", - "units" : "px", - "min" : -9999, - "max" : 9999, - "default" : 0 - }, - { - "property" : "background-position-y", - "tweener" : "hottext", - "units" : "px", - "min" : -9999, - "max" : 9999, - "default" : 0 - }, - { - "property" : "border-color", - "tweener" : "color", - "units" : "", - "min" : "", - "max" : "", - "default" : "#FFFFFF" - }, - { - "property" : "border-width", - "tweener" : "hottext", - "units" : "px", - "min" : 0, - "max" : 9999, - "default" : 0 - }, - { - "property" : "border-bottom-color", - "tweener" : "color", - "units" : "", - "default" : "#FFFFFF" - }, - { - "property" : "border-bottom-width", - "tweener" : "hottext", - "units" : "px", - "min" : 0, - "max" : 9999, - "default" : 0 - }, - { - "property" : "border-left-color", - "tweener" : "color", - "units" : "", - "default" : "#FFFFFF" - }, - { - "property" : "border-left-width", - "tweener" : "hottext", - "units" : "px", - "min" : 0, - "max" : 9999, - "default" : 0 - }, - { - "property" : "border-top-color", - "tweener" : "color", - "units" : "", - "default" : "#FFFFFF" - }, - { - "property" : "border-top-width", - "tweener" : "hottext", - "units" : "px", - "min" : 0, - "max" : 9999, - "default" : 0 - }, - { - "property" : "border-right-color", - "tweener" : "color", - "units" : "", - "default" : "#FFFFFF" - }, - { - "property" : "border-right-width", - "tweener" : "hottext", - "units" : "px", - "min" : 0, - "max" : 9999, - "default" : 0 - }, - { - "property" : "border-radius", - "tweener" : "hottext", - "units" : "px", - "min" : 0, - "max" : 9999, - "default" : 0 - }, - { - "property" : "bottom", - "tweener" : "hottext", - "units" : "px", - "min" : -9999, - "max" : 9999, - "default" : 0 - }, - { - "property" : "color", - "tweener" : "color", - "units" : "", - "default" : "#FFFFFF" - }, - { - "property" : "margin", - "tweener" : "hottext", - "units" : "px", - "min" : -9999, - "max" : 9999, - "default" : 0 - }, - { - "property" : "margin-left", - "tweener" : "hottext", - "units" : "px", - "min" : -9999, - "max" : 9999, - "default" : 0 - }, - { - "property" : "margin-right", - "tweener" : "hottext", - "units" : "px", - "min" : -9999, - "max" : 9999, - "default" : 0 - }, - { - "property" : "margin-top", - "tweener" : "hottext", - "units" : "px", - "min" : -9999, - "max" : 9999, - "default" : 0 - }, - { - "property" : "margin-bottom", - "tweener" : "hottext", - "units" : "px", - "min" : -9999, - "max" : 9999, - "default" : 0 - }, - { - "property" : "padding", - "tweener" : "hottext", - "units" : "px", - "min" : 0, - "max" : 9999, - "default" : 0 - }, - { - "property" : "padding-left", - "tweener" : "hottext", - "units" : "px", - "min" : 0, - "max" : 9999, - "default" : 0 - }, - { - "property" : "padding-right", - "tweener" : "hottext", - "units" : "px", - "min" : 0, - "max" : 9999, - "default" : 0 - }, - { - "property" : "padding-top", - "tweener" : "hottext", - "units" : "px", - "min" : 0, - "max" : 9999, - "default" : 0 - }, - { - "property" : "padding-bottom", - "tweener" : "hottext", - "units" : "px", - "min" : 0, - "max" : 9999, - "default" : 0 - }, - { - "property" : "max-height", - "tweener" : "hottext", - "units" : "px", - "min" : 0, - "max" : 9999, - "default" : 0 - }, - { - "property" : "max-width", - "tweener" : "hottext", - "units" : "px", - "min" : 0, - "max" : 9999, - "default" : 0 - }, - { - "property" : "min-height", - "tweener" : "hottext", - "units" : "px", - "min" : 0, - "max" : 9999, - "default" : 0 - }, - { - "property" : "min-width", - "tweener" : "hottext", - "units" : "px", - "min" : 0, - "max" : 9999, - "default" : 0 - }, - { - "property" : "opacity", - "tweener" : "hottext", - "units" : "%", - "min" : 0, - "max" : 100, - "default" : 100 - }, - { - "property" : "text-indent", - "tweener" : "hottext", - "units" : "px", - "min" : -9999, - "max" : 9999, - "default" : 0 - }, - { - "property" : "top", - "tweener" : "hottext", - "units" : "px", - "min" : -9999, - "max" : 9999, - "default" : 0 - }, - { - "property" : "right", - "tweener" : "hottext", - "units" : "px", - "min" : -9999, - "max" : 9999, - "default" : 0 - }, - { - "property" : "left", - "tweener" : "hottext", - "units" : "px", - "min" : -9999, - "max" : 9999, - "default" : 0 - }, - { - "property" : "width", - "tweener" : "hottext", - "units" : "px", - "min" : 0, - "max" : 9999, - "default" : 0 - }, - { - "property" : "height", - "tweener" : "hottext", - "units" : "px", - "min" : 0, - "max" : 9999, - "default" : 0 - } - ] - - }, - - /* 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