1 files changed, 118 insertions, 127 deletions

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 80d8ff7b..33e77297 100644
--- a/js/panels/css-panel/style-declaration.reel/style-declaration.js
+++ b/js/panels/css-panel/style-declaration.reel/style-declaration.js
@@ -9,38 +9,61 @@ var Montage = require("montage/core/core").Montage,
     ShorthandProps = require("js/panels/CSSPanel/css-shorthand-map");
 
 exports.StyleDeclaration = Montage.create(Component, {
-    cssText : {
-        value: null
-    },
-    focusDelegate : {
-        value: null
-    },
+    cssText : { value: null },
+    focusDelegate : { value: null },
+
     includeEmptyStyle : {
-        value: true
+        value: true,
+        distinct: true
     },
     styles : {
         value: [],
         distinct: true
     },
 
-    templateDidLoad : {
-        value: function() {
-            console.log("Style declaration - template did load");
+    _styleSortFunction : {
+        value: function(styleA, styleB) {
+            ///// If the style is an empty style (with Add button)
+            ///// push to end of declaration
+            if(styleA.isEmpty) {
+                return 1;
+            } else if (styleB.isEmpty) {
+                return -1;
+            }
 
-            if(this.focusDelegate) {
-                //this.treeController.delegate = this.focusDelegate;
-                this.styleComponent.delegate = this.focusDelegate;
+            ///// Alphabetic sort based on property name
+            if (styleA.name < styleB.name) {
+                return -1;
+            } else if (styleA.name > styleB.name) {
+                return 1;
+            } else {
+                return 0;
             }
         }
     },
-    prepareForDraw : {
-        value: function(e) {
-            console.log("Style Declaration :: prepare for draw");
-            this._element.addEventListener('drop', this, false);
-            this.element.addEventListener('dragenter', this, false);
-            this.element.addEventListener('dragleave', this, false);
+    _styleFilterFunction: {
+        value: function(style, styleArray) {
+            var shorthands = ShorthandProps.CSS_SHORTHAND_MAP[style.name];
+
+            ///// No shorthands, return true to include style
+            if(!shorthands) { return true; }
+
+            var subProps = ShorthandProps.CSS_SHORTHAND_TO_SUBPROP_MAP[shorthands[0]],
+                stylesArray = styleArray,
+                hasAll;
+
+            debugger;
+            hasAll = subProps.every(function(subProp) {
+                debugger;
+                return this.declaration[subProp];
+            }, this);
+
+            if(hasAll) {
+                return false;
+            }
         }
     },
+
     _declaration: {
         value: null
     },
@@ -49,21 +72,17 @@ exports.StyleDeclaration = Montage.create(Component, {
             return this._declaration;
         },
         set: function(dec) {
+            var stylesArray;
+
             if(this._declaration) {
-                this.arrayController.removeObjects(this.styles);
+                this.styles = null;
+                this.styles = [];
             }
-console.log("dec being set", this);
-            this._declaration = dec;
 
+            ///// Take snapshot of declaration
             this.cssText = dec.cssText;
 
-            Array.prototype.slice.call(dec).forEach(function(prop, index) {
-                this.styles.push({
-                    name: prop,
-                    value: dec.getPropertyValue(prop)
-                });
-
-            }, this);
+            stylesArray = Array.prototype.slice.call(dec);
 
             if(this.includeEmptyStyle) {
                 this.styles.push({
@@ -72,109 +91,85 @@ console.log("dec being set", this);
                     "isEmpty": true
                 });
             }
-            ///// creates data structure to use with tree component
-            //this.buildStyleTree();
 
-//            if(this.includeEmptyStyle) {
-//                this.styleTree.properties.push({
-//                    "name": "property",
-//                    "value" : "value",
-//                    "isEmpty": true
-//                });
-//            }
+            stylesArray.forEach(function(prop, index) {
+                this.styles.push({
+                    name: prop,
+                    value: dec.getPropertyValue(prop)
+                });
+            }, this);
 
+            this._declaration = dec;
             this.needsDraw = true;
         }
     },
 
-    update : {
-        value: function() {
-            if(this.declaration.cssText !== this.cssText) {
-                ///// Needs update
-//debugger;
-
-                this.styles = null;
-                this.styles = [];
-
-                Array.prototype.slice.call(this.declaration).forEach(function(prop, index) {
-                    this.styles.push({
-                        name: prop,
-                        value: this.declaration.getPropertyValue(prop)
-                    });
+    styleShorthander : {
+        value: function(styles) {
+            var shorthandsToAdd = [],
+                subProps, hasAll;
 
-                }, this);
+            styles.forEach(function(property, index, styleArray) {
+                var shorthands = ShorthandProps.CSS_SHORTHAND_MAP[property];
 
-                if(this.includeEmptyStyle) {
-                    this.styles.push({
-                        "name": "property",
-                        "value" : "value",
-                        "isEmpty": true
-                    });
-                }
-//debugger;
-                this.needsDraw = true;
-            }
-        }
-    },
+                if(!shorthands) { return false; }
 
-//    buildStyleTree : {
-//        value: function() {
-//            var styles = Array.prototype.slice.call(this._declaration).sort();
-//            this.styleTree = {
-//                properties : styles.map(this.styleTreeMapper, this)
-//            };
-//        }
-//    },
-    styleTreeMapper : {
-        value: function arrayToTreeMapper(property, i, styleArray) {
-            var shorthands = ShorthandProps.CSS_SHORTHAND_MAP[property],
-                subProps, hasAll;
+                var subProps = ShorthandProps.CSS_SHORTHAND_TO_SUBPROP_MAP[shorthands[0]],
+                    stylesArray = styleArray;
 
-            ///// Is this a sub property of a shorthand property?
-            if(shorthands) {
-                //debugger;
-                ///// Yes.
-                ///// Now, are all sub properties in the declaration?
-                subProps = ShorthandProps.CSS_SHORTHAND_TO_SUBPROP_MAP[shorthands[0]];
                 hasAll = subProps.every(function(subProp) {
-                    return styleArray.indexOf(subProp) !== -1;
+                    return stylesArray.indexOf(subProp) !== -1;
                 });