Style Declaration - Handle removing styles

Removed sorting and had to put a null check in the style component because the valueText was being set to undefined and causing an error. Check with montage on why that is happening.

4 files changed, 48 insertions, 12 deletions

diff --git a/js/panels/css-panel/css-style.reel/css-style.js b/js/panels/css-panel/css-style.reel/css-style.js
index 1787665f..dd84c7e9 100644
--- a/js/panels/css-panel/css-style.reel/css-style.js
+++ b/js/panels/css-panel/css-style.reel/css-style.js
@@ -14,6 +14,7 @@ exports.CssStyle = Montage.create(Component, {
     editNewEmptyClass : { value: 'edit-empty-style' },
     invalidStyleClass : { value: "style-item-invalid" },
     emptyStyleClass   : { value: "empty-css-style" },
+    source            : { value: null },
 
     propertyText : {
         value: "property",
@@ -29,6 +30,10 @@ exports.CssStyle = Montage.create(Component, {
             return this._valueText;
         },
         set: function(text) {
+            /// TODO: Figure out why montage is trying to set this to undefined
+            /// TODO: when the style object is removed from the repetition
+            if(text === null || text === undefined) { return; }
+
             this._valueText = this.browserValue = text;
             this.units = this.getUnits(text);
         }
diff --git a/js/panels/css-panel/style-declaration.reel/style-declaration.html b/js/panels/css-panel/style-declaration.reel/style-declaration.html
index 5724ffc3..b1381bc6 100644
--- a/js/panels/css-panel/style-declaration.reel/style-declaration.html
+++ b/js/panels/css-panel/style-declaration.reel/style-declaration.html
@@ -44,6 +44,11 @@ No rights, expressed or implied, whatsoever to this software are provided by Mot
                     "declaration": {"@": "owner"}
                 },
                 "bindings": {
+                    "source" : {
+                        "boundObject": {"@": "repetition"},
+                        "boundObjectPropertyPath": "objectAtCurrentIteration",
+                        "oneway": true
+                    },
                     "propertyText" : {
                         "boundObject": {"@": "repetition"},
                         "boundObjectPropertyPath": "objectAtCurrentIteration.name"
diff --git a/js/panels/css-panel/style-declaration.reel/style-declaration.js b/js/panels/css-panel/style-declaration.reel/style-declaration.js
index 75ea18cf..8e364d0d 100644
--- a/js/panels/css-panel/style-declaration.reel/style-declaration.js
+++ b/js/panels/css-panel/style-declaration.reel/style-declaration.js
@@ -154,13 +154,13 @@ exports.StyleDeclaration = Montage.create(Component, {
                     styleToIndexMap = this._getStyleToIndexMap();
 
                 Array.prototype.slice.call(this.declaration).forEach(function(prop, index) {
-                    var i = styleToIndexMap[prop];
+                    var styleObjectIndex = styleToIndexMap[prop];
 
                     ///// Style component exists for property
                     ///// Update its value
-                    if(i !== undefined) {
-                        this.styles[i].value = this.declaration.getPropertyValue(prop);
-                        usedIndices.push(i);
+                    if(styleObjectIndex !== undefined) {
+                        this.styles[styleObjectIndex].value = this.declaration.getPropertyValue(prop);
+                        usedIndices.push(styleObjectIndex);
                     } else {
                         //// styles doesn't exist, does shorthand?
                         var shorthands = ShorthandProps.CSS_SHORTHAND_MAP[prop],
@@ -179,15 +179,26 @@ exports.StyleDeclaration = Montage.create(Component, {
                         }
 
                         if(!shorthandUpdated) {
+                            //// push to usedIndices so we don't remove styles we just added
+                            usedIndices.push(this.styles.length);
                             this.addStyle(prop, this.declaration.getPropertyValue(prop));
                         }
                     }
                 }, this);
 
+                for(var i = this.styles.length-1; i>=0; i--) {
+                    if(usedIndices.indexOf(i) === -1) {
+                        if(!this.styles[i].isEmpty) {
+                            ///// index not used, remove style
+                            this.removeStyle(this.styles[i]);
+                        }
+                    }
+                }
+
                 ///// Keep copy of cssText to know when we need to
                 ///// update the view
                 this.cssText = this.declaration.cssText;
-                this.needsDraw = true;
+                this.needsDraw = this.needsSort = true;
             }
         }
     },
@@ -221,7 +232,18 @@ exports.StyleDeclaration = Montage.create(Component, {
             }
 
             this.styles.push(styleDescriptor);
-            this.arrayController.organizeObjects();
+
+            this.needsSort = this.needsDraw = true;
+        }
+    },
+    removeStyle : {
+        value: function(styleDescriptor) {
+            var styleDescriptorIndex = this.styles.indexOf(styleDescriptor);
+
+            this.styles.splice(styleDescriptorIndex, 1);
+            //this.arrayController.removeObjects(styleDescriptor);
+
+            //this.needsDraw = true;
         }
     },
 
@@ -259,7 +281,7 @@ exports.StyleDeclaration = Montage.create(Component, {
             if(this.focusDelegate) {
                 this.styleComponent.delegate = this.focusDelegate;
             }
-            this.arrayController.sortFunction = this._styleSortFunction;
+            //this.arrayController.sortFunction = this._styleSortFunction;
         }
     },
 
@@ -274,7 +296,7 @@ exports.StyleDeclaration = Montage.create(Component, {
     willDraw : {
         value: function() {
             if(this.needsSort) {
-                this.arrayController.organizeObjects();
+                //this.arrayController.organizeObjects();
                 this.needsSort = false;
             }
         }
diff --git a/js/panels/css-panel/styles-view-delegate.js b/js/panels/css-panel/styles-view-delegate.js
index 38b0fcc6..b5efc18c 100644
--- a/js/panels/css-panel/styles-view-delegate.js
+++ b/js/panels/css-panel/styles-view-delegate.js
@@ -145,14 +145,16 @@ exports.StylesViewMediator = Montage.create(Component, {
                 return false;
             }
 
+            ///// Remove old property
+            this.stylesController.deleteStyle(rule, oldProperty);
+
             if(property === '') {
-                style.remove();
+                style.parentComponent.parentComponent.removeStyle(style.source);
                 this._dispatchChange(oldProperty, browserValue);
                 return false;
             }
 
-                ///// Remove old property and add new one
-            this.stylesController.deleteStyle(rule, oldProperty);
+            // now add new property
             browserValue = this.stylesController.setStyle(rule, property, value);
 
             ///// Mark style as invalid if the browser doesn't accept it
@@ -166,7 +168,9 @@ exports.StylesViewMediator = Montage.create(Component, {
             var browserValue, units;
 
             if(value === '') {
-                style.remove();
+                ///// Remove old property
+                this.stylesController.deleteStyle(rule, property);
+                style.parentComponent.parentComponent.removeStyle(style.source);
                 this._dispatchChange(property, browserValue);
                 return false;
             }