CSS Panel - add handlers for css panel actions

1 files changed, 75 insertions, 2 deletions

diff --git a/js/panels/css-panel/styles-view-mediator.js b/js/panels/css-panel/styles-view-mediator.js
index 38b61220..c93a5e73 100644
--- a/js/panels/css-panel/styles-view-mediator.js
+++ b/js/panels/css-panel/styles-view-mediator.js
@@ -5,7 +5,8 @@
  </copyright> */
 
 var Montage = require("montage/core/core").Montage,
-    Component = require("montage/ui/component").Component;
+    Component = require("montage/ui/component").Component,
+    Keyboard = require("js/mediators/keyboard-mediator").Keyboard;
 
 exports.StylesViewMediator = Montage.create(Component, {
     stylesController : {
@@ -29,10 +30,82 @@ exports.StylesViewMediator = Montage.create(Component, {
                 selector = this.stylesController.generateClassName(this.ruleListContainer.displayedList.selection[0].nodeName);
             }
 
-            newRule = this.application.ninja.stylesController.addRule("."+selector, ' { }');
+            newRule = this.application.ninja.stylesController.addRule('.'+selector, ' { }');
 
             this.ruleListContainer.displayedList.component.addRule(newRule);
 
         }
+    },
+    handleStyleStop: {
+        value: function(e) {
+            console.log("Handle Style Stop");
+            //debugger;
+            if(e._event.detail.type === 'keydown') {
+
+            }
+        }
+    },
+    handlePropertyChange : {
+        value: function(rule, property, value, oldProperty, style) {
+            var browserValue;
+
+            if(style.editingNewStyle) {
+                return false;
+            }
+
+                ///// Remove old property and add new one
+            this.stylesController.deleteStyle(rule, oldProperty);
+            browserValue = this.stylesController.setStyle(rule, property, value);
+
+            ///// Mark style as invalid if the browser doesn't accept it
+            style.invalid = (browserValue === null);
+
+            console.log("BrowserValue: ", browserValue, rule);
+
+            this._dispatchChange(property, browserValue);
+        }
+    },
+    handleValueChange : {
+        value: function(rule, property, value, style) {
+            var browserValue, units;
+
+            ///// Auto-fill units if not provided and units
+            ///// not previously stored
+            units = style.getUnits(value);
+            if(style.units && units === null && parseInt(value)) {
+                value += style.units;
+                style.valueField.value = value;
+            } else if (value !== '0') {
+                style.units = units;
+            }
+
+            ///// update value
+            browserValue = this.stylesController.setStyle(rule, property, value);
+
+            ///// Mark style as invalid if the browser doesn't accept it
+            style.invalid = (browserValue === null);
+
+            console.log("BrowserValue: ", browserValue, rule);
+
+            this._dispatchChange(property, browserValue);
+
+            if(style.editingNewStyle) {
+                style.treeView.parentComponent.addNewStyle();
+            }
+        }
+    },
+
+    _dispatchChange : {
+        value: function(property, value) {
+            this.application.ninja.stage.updatedStage = true;
+            NJevent('elementChange', {
+                type : 'cssChange',
+                data: {
+                    "prop": property,
+                    "value": value
+                },
+                redraw: null
+            });
+        }
     }
 });
\ No newline at end of file