CSS Panel - Create non-tree declaration (optimized). And add updating functionality.

1 files changed, 261 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..80d8ff7b
--- /dev/null
+++ b/js/panels/css-panel/style-declaration.reel/style-declaration.js
@@ -0,0 +1,261 @@
+/* <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
+    },
+    includeEmptyStyle : {
+        value: true
+    },
+    styles : {
+        value: [],
+        distinct: true
+    },
+
+    templateDidLoad : {
+        value: function() {
+            console.log("Style declaration - template did load");
+
+            if(this.focusDelegate) {
+                //this.treeController.delegate = this.focusDelegate;
+                this.styleComponent.delegate = this.focusDelegate;
+            }
+        }
+    },
+    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);
+        }
+    },
+    _declaration: {
+        value: null
+    },
+    declaration: {
+        get: function() {
+            return this._declaration;
+        },
+        set: function(dec) {
+            if(this._declaration) {
+                this.arrayController.removeObjects(this.styles);
+            }
+console.log("dec being set", this);
+            this._declaration = dec;
+
+            this.cssText = dec.cssText;
+
+            Array.prototype.slice.call(dec).forEach(function(prop, index) {
+                this.styles.push({
+                    name: prop,
+                    value: dec.getPropertyValue(prop)
+                });
+
+            }, this);
+
+            if(this.includeEmptyStyle) {
+                this.styles.push({
+                    "name": "property",
+                    "value" : "value",
+                    "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
+//                });
+//            }
+
+            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)
+                    });
+
+                }, this);
+
+                if(this.includeEmptyStyle) {
+                    this.styles.push({
+                        "name": "property",
+                        "value" : "value",
+                        "isEmpty": true
+                    });
+                }
+//debugger;
+                this.needsDraw = true;
+            }
+        }
+    },
+
+//    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;
+
+            ///// 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;
+                });
+
+                if(hasAll) {
+                    ///// It has all sub properties
+                    ///// Let's return a tree branch and remove the
+                    ///// sub properties from the flat array
+
+                    this._removeItemsFromArray(styleArray, subProps);
+
+                    return {
+                        name: shorthands[0],
+                        value: this._declaration.getPropertyValue(shorthands[0]),
+                        properties: subProps.map(function(p, i, array) {
+                            return {
+                                name: p,
+                                value: this._declaration.getPropertyValue(p)
+                            };
+                        }, this)
+                    };
+                }
+            }
+
+
+            return {
+                name: property,
+                value: this._declaration.getPropertyValue(property)
+            };
+        }
+    },
+    _removeItemsFromArray : {
+        value: function(array, items) {
+            items.forEach(function(item) {
+                var index = array.indexOf(item);
+                array.splice(index, 1);
+            }, this);
+        }
+    },
+    styleTree : {
+        value: {
+            "properties" : []
+        },
+        distinct: true
+    },
+
+//    addNewStyleAfter : {
+//        value: function(style) {
+//            style.parentComponent.parentComponent.contentController.addObjects({
+//                name: 'property',
+//                value: 'value',
+//                isEmpty: true,
+//                treeNodeType: 'leaf'
+//            });
+//            style.parentComponent.parentComponent.needsDraw = true;
+//        }
+//    },
+
+    addNewStyle : {
+        value: function() {
+            this.styles.push({
+                "name": "property",
+                "value" : "value",
+                "isEmpty": true
+            });
+        }
+    },
+