Timeline: Code refactor for Style.js

1 files changed, 103 insertions, 92 deletions

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.LayerSty