1 files changed, 326 insertions, 0 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
new file mode 100644
index 00000000..57cbdb63
--- /dev/null
+++ b/js/panels/css-panel/style-declaration.reel/style-declaration.js
@@ -0,0 +1,326 @@
+/* <copyright>
+ This file contains proprietary software owned by Motorola Mobility, Inc.<br/>
+ No rights, expressed or implied, whatsoever to this software are provided by Motorola Mobility, Inc. hereunder.<br/>
+ (c) Copyright 2011 Motorola Mobility, Inc.  All Rights Reserved.
+ </copyright> */
+
+var Montage = require("montage/core/core").Montage,
+    Component = require("montage/ui/component").Component,
+    ShorthandProps = require("js/panels/CSSPanel/css-shorthand-map");
+
+exports.StyleDeclaration = Montage.create(Component, {
+    cssText : { value: null },
+    focusDelegate : { value: null },
+    needsSort : { value: null },
+
+    includeEmptyStyle : {
+        value: true,
+        distinct: true
+    },
+    styles : {
+        value: [],
+        distinct: true
+    },
+
+    _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;
+            }
+
+            return 0;
+            ///// Alphabetic sort based on property name
+//            if (styleA.name < styleB.name) {
+//                return -1;
+//            } else if (styleA.name > styleB.name) {
+//                return 1;
+//            } else {
+//                return 0;
+//            }
+        }
+    },
+    _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
+    },
+    declaration: {
+        get: function() {
+            return this._declaration;
+        },
+        set: function(dec) {
+            var stylesArray;
+
+            if(this._declaration) {
+                this.styles = null;
+                this.styles = [];
+            }
+
+            ///// Take snapshot of declaration
+            this.cssText = dec.cssText;
+
+            stylesArray = this.filterShorthands(Array.prototype.slice.call(dec));
+            stylesArray.forEach(function(prop, index) {
+                this.styles.push({
+                    name: prop,
+                    value: dec.getPropertyValue(prop),
+                    isEmpty: false
+                });
+            }, this);
+
+            if(this.includeEmptyStyle) {
+                this.styles.push({
+                    name    : "property",
+                    value   : "value",
+                    isEmpty : true
+                });
+            }
+
+            this._declaration = dec;
+            this.needsDraw = this.needsSort = true;
+        }
+    },
+
+    filterShorthands : {
+        value: function(styles) {
+            var shorthandsToAdd = [],
+                subProps, hasAll;
+
+            var stylesCopy = styles.map(function(style) {
+                return style;
+            });
+
+            stylesCopy.forEach(function(property, index) {
+                var shorthands = ShorthandProps.CSS_SHORTHAND_MAP[property];
+                if(shorthands) {
+                    subProps = ShorthandProps.CSS_SHORTHAND_TO_SUBPROP_MAP[shorthands[0]];
+
+                    hasAll = subProps.every(function(subProp) {
+                        return styles.indexOf(subProp) !== -1;
+                    });
+
+                    if(hasAll) {
+                        for(var i = subProps.length-1; i>=0; i--) {
+                            styles.splice(styles.indexOf(subProps[i]), 1);
+                        }
+                        shorthandsToAdd.push(shorthands[0]);
+                    }
+
+                    return true;
+                }
+            }, this);
+
+            return styles.concat(shorthandsToAdd);
+        }
+    },
+
+    _getStyleToIndexMap : {
+        value: function() {
+            var map = {};
+
+            for(var i = 0; i<this.styles.length; i++) {
+                map[this.styles[i].name] = i;
+            }
+
+            return map;
+        }
+    },
+
+    update : {
+        value: function() {
+            if(this.declaration.cssText !== this.cssText) {
+                var usedIndices = [],
+                    styleToIndexMap = this._getStyleToIndexMap();
+
+                Array.prototype.slice.call(this.declaration).forEach(function(prop, index) {
+                    var styleObjectIndex = styleToIndexMap[prop];
+
+                    ///// Style component exists for property
+                    ///// Update its value
+                    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],
+                            shorthandUpdated = false;
+
+                        if(shorthands) {
+                            shorthands.forEach(function(shorthand) {
+                                var shorthandIndex = styleToIndexMap[shorthand];
+                                if(shorthandIndex) {
+                                    //// if shorthand exists in list of rendered styles
+                                    //// update it
+                                    this.styles[shorthandIndex].value = this.declaration.getPropertyValue(shorthand);
+                                    usedIndices.push(shorthandIndex);
+                                    shorthandUpdated = true;
+                                }
+                            }, this);
+                        }
+
+                        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 = this.needsSort = true;
+            }
+        }
+    },
+
+    styleTree : {
+