From eb80f8a610100f908b5cb9ffc65bfa94f8a23c21 Mon Sep 17 00:00:00 2001
From: Eric Guzman
Date: Tue, 8 May 2012 13:26:36 -0700
Subject: CSS Panel - Create non-tree declaration (optimized). And add updating
 functionality.

---
 .../style-declaration.reel/style-declaration.js    | 261 +++++++++++++++++++++
 1 file changed, 261 insertions(+)
 create mode 100644 js/panels/css-panel/style-declaration.reel/style-declaration.js

(limited to 'js/panels/css-panel/style-declaration.reel/style-declaration.js')

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
+            });
+        }
+    },
+
+
+    /* drag/drop events */
+    handleDrop : {
+        value: function(e) {
+            console.log('dropped');
+        }
+    },
+    handleDragenter : {
+        value: function(e) {
+            console.log("dec - drag enter");
+            this.element.classList.add("drag-over");
+        }
+    },
+    handleDragleave : {
+        value: function(e) {
+            if(this.element === e._event.toElement || this._containsElement(e._event.toElement)) {
+                //// Dragged-over element is inside of component element
+                //// I.e. it's not really a "drag leave"
+                e.stopPropagation();
+                e.preventDefault();
+                return false;
+            }
+
+            console.log("DECLARATION - ELEMENT NOT IN DEC", e._event.toElement);
+
+            //console.log("dec - drag leave");
+            this.element.classList.remove("drag-over");
+        }
+    },
+
+    draw: {
+        value: function() {
+            if(this._declaration) {
+
+            }
+        }
+    },
+
+    _containsElement : {
+        value: function(innerElement) {
+            var isInComponent = false,
+                parent = innerElement.parentNode;
+
+            while (parent !== document) {
+                if(parent === this.element) {
+                    isInComponent = true;
+                    break;
+                }
+                parent = parent.parentNode;
+            }
+
+            return isInComponent;
+        }
+    }
+});
\ No newline at end of file
-- 
cgit v1.2.3


From 6056a569caab94bdbdc2c60b58907109ff468dd3 Mon Sep 17 00:00:00 2001
From: Eric Guzman
Date: Thu, 10 May 2012 13:21:38 -0700
Subject: Style Declaration - Improved updating of styles using binding.

---
 .../style-declaration.reel/style-declaration.js    | 245 ++++++++++-----------
 1 file changed, 118 insertions(+), 127 deletions(-)

(limited to 'js/panels/css-panel/style-declaration.reel/style-declaration.js')

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;
                 });
 
                 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)
-                    };
+                    subProps.forEach(function(subProp) {
+                        stylesArray.splice(stylesArray.indexOf(subProp), 1);
+                    }, this);
+                    shorthandsToAdd.push(shorthands[0]);
                 }
-            }
+            }, 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 {
-                name: property,
-                value: this._declaration.getPropertyValue(property)
-            };
+            return map;
         }
     },
-    _removeItemsFromArray : {
-        value: function(array, items) {
-            items.forEach(function(item) {
-                var index = array.indexOf(item);
-                array.splice(index, 1);
-            }, this);
+
+    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 i = styleToIndexMap[prop];
+
+                    ///// Style component exists for property
+                    ///// Update its value
+                    if(i) {
+                        this.styles[i].value = this.declaration.getPropertyValue(prop);
+                        usedIndices.push(i);
+                    }
+                }, this);
+
+                ///// Keep copy of cssText to know when we need to
+                ///// update the view
+                this.cssText = this.declaration.cssText;
+                this.needsDraw = true;
+            }
         }
     },
+
     styleTree : {
         value: {
             "properties" : []
@@ -182,18 +177,6 @@ console.log("dec being set", this);
         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({
@@ -204,7 +187,6 @@ console.log("dec being set", this);
         }
     },
 
-
     /* drag/drop events */
     handleDrop : {
         value: function(e) {
@@ -234,11 +216,20 @@ console.log("dec being set", this);
         }
     },
 
-    draw: {
+    templateDidLoad : {
         value: function() {
-            if(this._declaration) {
-
+            if(this.focusDelegate) {
+                this.styleComponent.delegate = this.focusDelegate;
             }
+            this.arrayController.sortFunction = this._styleSortFunction;
+        }
+    },
+
+    prepareForDraw : {
+        value: function(e) {
+            this._element.addEventListener('drop', this, false);
+            this.element.addEventListener('dragenter', this, false);
+            this.element.addEventListener('dragleave', this, false);
         }
     },
 
-- 
cgit v1.2.3


From ac76f688b392f3c5959ec8d651ec35fe311c7a53 Mon Sep 17 00:00:00 2001
From: Eric Guzman
Date: Wed, 16 May 2012 14:12:14 -0700
Subject: Style Declaration - Fix update/add/addNew methods

---
 .../style-declaration.reel/style-declaration.js    | 48 ++++++++++++++++++----
 1 file changed, 41 insertions(+), 7 deletions(-)

(limited to 'js/panels/css-panel/style-declaration.reel/style-declaration.js')

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 33e77297..7ba00cc7 100644
--- a/js/panels/css-panel/style-declaration.reel/style-declaration.js
+++ b/js/panels/css-panel/style-declaration.reel/style-declaration.js
@@ -86,9 +86,9 @@ exports.StyleDeclaration = Montage.create(Component, {
 
             if(this.includeEmptyStyle) {
                 this.styles.push({
-                    "name": "property",
-                    "value" : "value",
-                    "isEmpty": true
+                    name    : "property",
+                    value   : "value",
+                    isEmpty : true
                 });
             }
 
@@ -159,6 +159,26 @@ exports.StyleDeclaration = Montage.create(Component, {
                     if(i) {
                         this.styles[i].value = this.declaration.getPropertyValue(prop);
                         usedIndices.push(i);
+                    } 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);
+                                    shorthandUpdated = true;
+                                }
+                            }, this);
+                        }
+
+                        if(!shorthandUpdated) {
+                            this.addStyle(prop, this.declaration.getPropertyValue(prop));
+                        }
                     }
                 }, this);
 
@@ -179,13 +199,27 @@ exports.StyleDeclaration = Montage.create(Component, {
 
     addNewStyle : {
         value: function() {
-            this.styles.push({
-                "name": "property",
-                "value" : "value",
-                "isEmpty": true
+            this.addStyle('property', 'value', {
+                isEmpty : true
             });
         }
     },
+    addStyle : {
+        value: function(property, value, data) {
+            var styleDescriptor = {
+                property : property,
+                value : value
+            }, prop;
+
+            for(prop in data) {
+                if(data.hasOwnProperty(prop)) {
+                    styleDescriptor[prop] = data[prop];
+                }
+            }
+
+            this.arrayController.addObjects(styleDescriptor);
+        }
+    },
 
     /* drag/drop events */
     handleDrop : {
-- 
cgit v1.2.3


From 4cb4f3e9cc43817787dac407152fe7fb949eafc9 Mon Sep 17 00:00:00 2001
From: Eric Guzman
Date: Wed, 16 May 2012 23:15:02 -0700
Subject: Style Declaration - fix property name in addStyle()

---
 js/panels/css-panel/style-declaration.reel/style-declaration.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

(limited to 'js/panels/css-panel/style-declaration.reel/style-declaration.js')

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 7ba00cc7..1ae1d6f4 100644
--- a/js/panels/css-panel/style-declaration.reel/style-declaration.js
+++ b/js/panels/css-panel/style-declaration.reel/style-declaration.js
@@ -207,7 +207,7 @@ exports.StyleDeclaration = Montage.create(Component, {
     addStyle : {
         value: function(property, value, data) {
             var styleDescriptor = {
-                property : property,
+                name : property,
                 value : value
             }, prop;
 
-- 
cgit v1.2.3


From 1f8ee914686a0fac3e256b4f18683b83d591e6a6 Mon Sep 17 00:00:00 2001
From: Eric Guzman
Date: Thu, 17 May 2012 16:03:50 -0700
Subject: CSS Panel - declaration - sort objects when flag is set

---
 .../css-panel/style-declaration.reel/style-declaration.js    | 12 +++++++++++-
 1 file changed, 11 insertions(+), 1 deletion(-)

(limited to 'js/panels/css-panel/style-declaration.reel/style-declaration.js')

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 1ae1d6f4..61a65099 100644
--- a/js/panels/css-panel/style-declaration.reel/style-declaration.js
+++ b/js/panels/css-panel/style-declaration.reel/style-declaration.js
@@ -11,6 +11,7 @@ var Montage = require("montage/core/core").Montage,
 exports.StyleDeclaration = Montage.create(Component, {
     cssText : { value: null },
     focusDelegate : { value: null },
+    needsSort : { value: null },
 
     includeEmptyStyle : {
         value: true,
@@ -100,7 +101,7 @@ exports.StyleDeclaration = Montage.create(Component, {
             }, this);
 
             this._declaration = dec;
-            this.needsDraw = true;
+            this.needsDraw = this.needsSort = true;
         }
     },
 
@@ -267,6 +268,15 @@ exports.StyleDeclaration = Montage.create(Component, {
         }
     },
 
+    willDraw : {
+        value: function() {
+            if(this.needsSort) {
+                this.arrayController.organizeObjects();
+                this.needsSort = false;
+            }
+        }
+    },
+
     _containsElement : {
         value: function(innerElement) {
             var isInComponent = false,
-- 
cgit v1.2.3


From 7f0dad901bef6512357a7a768fda1cb3106ac864 Mon Sep 17 00:00:00 2001
From: Eric Guzman
Date: Thu, 17 May 2012 19:55:18 -0700
Subject: CSS Panel - Fix style declaration interaction

---
 .../style-declaration.reel/style-declaration.js         | 17 +++++++++--------
 1 file changed, 9 insertions(+), 8 deletions(-)

(limited to 'js/panels/css-panel/style-declaration.reel/style-declaration.js')

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 61a65099..c679783e 100644
--- a/js/panels/css-panel/style-declaration.reel/style-declaration.js
+++ b/js/panels/css-panel/style-declaration.reel/style-declaration.js
@@ -85,6 +85,13 @@ exports.StyleDeclaration = Montage.create(Component, {
 
             stylesArray = Array.prototype.slice.call(dec);
 
+            stylesArray.forEach(function(prop, index) {
+                this.styles.push({
+                    name: prop,
+                    value: dec.getPropertyValue(prop)
+                });
+            }, this);
+
             if(this.includeEmptyStyle) {
                 this.styles.push({
                     name    : "property",
@@ -93,13 +100,6 @@ exports.StyleDeclaration = Montage.create(Component, {
                 });
             }
 
-            stylesArray.forEach(function(prop, index) {
-                this.styles.push({
-                    name: prop,
-                    value: dec.getPropertyValue(prop)
-                });
-            }, this);
-
             this._declaration = dec;
             this.needsDraw = this.needsSort = true;
         }
@@ -218,7 +218,8 @@ exports.StyleDeclaration = Montage.create(Component, {
                 }
             }
 
-            this.arrayController.addObjects(styleDescriptor);
+            this.styles.push(styleDescriptor);
+            this.arrayController.organizeObjects();
         }
     },
 
-- 
cgit v1.2.3


From 1792d1f72889bfb4c48d32d950d3b680abf0a4c8 Mon Sep 17 00:00:00 2001
From: Eric Guzman
Date: Fri, 18 May 2012 11:17:15 -0700
Subject: Minor fix - Prevent montage binding warning

---
 js/panels/css-panel/style-declaration.reel/style-declaration.js | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

(limited to 'js/panels/css-panel/style-declaration.reel/style-declaration.js')

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 c679783e..5aae9c6e 100644
--- a/js/panels/css-panel/style-declaration.reel/style-declaration.js
+++ b/js/panels/css-panel/style-declaration.reel/style-declaration.js
@@ -88,7 +88,8 @@ exports.StyleDeclaration = Montage.create(Component, {
             stylesArray.forEach(function(prop, index) {
                 this.styles.push({
                     name: prop,
-                    value: dec.getPropertyValue(prop)
+                    value: dec.getPropertyValue(prop),
+                    isEmpty: false
                 });
             }, this);
 
@@ -209,7 +210,8 @@ exports.StyleDeclaration = Montage.create(Component, {
         value: function(property, value, data) {
             var styleDescriptor = {
                 name : property,
-                value : value
+                value : value,
+                isEmpty: false
             }, prop;
 
             for(prop in data) {
-- 
cgit v1.2.3


From 18c260f5f55608d4774aea27f6c2d23e89921361 Mon Sep 17 00:00:00 2001
From: Eric Guzman
Date: Fri, 18 May 2012 11:26:35 -0700
Subject: Style Declaration - Fix update method to prevent duplicate styles in
 list

---
 js/panels/css-panel/style-declaration.reel/style-declaration.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

(limited to 'js/panels/css-panel/style-declaration.reel/style-declaration.js')

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 5aae9c6e..75ea18cf 100644
--- a/js/panels/css-panel/style-declaration.reel/style-declaration.js
+++ b/js/panels/css-panel/style-declaration.reel/style-declaration.js
@@ -158,7 +158,7 @@ exports.StyleDeclaration = Montage.create(Component, {
 
                     ///// Style component exists for property
                     ///// Update its value
-                    if(i) {
+                    if(i !== undefined) {
                         this.styles[i].value = this.declaration.getPropertyValue(prop);
                         usedIndices.push(i);
                     } else {
-- 
cgit v1.2.3


From 13da56e791b7478ad3dbb8162a583a6b2c8c4b6b Mon Sep 17 00:00:00 2001
From: Eric Guzman
Date: Fri, 18 May 2012 17:27:31 -0700
Subject: 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.
---
 .../style-declaration.reel/style-declaration.js    | 38 +++++++++++++++++-----
 1 file changed, 30 insertions(+), 8 deletions(-)

(limited to 'js/panels/css-panel/style-declaration.reel/style-declaration.js')

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;
             }
         }
-- 
cgit v1.2.3


From 423ec19206efe0bfd72131ba8a3012f6cdff09ce Mon Sep 17 00:00:00 2001
From: Eric Guzman
Date: Mon, 21 May 2012 10:07:10 -0700
Subject: CSS Style Declaration - Improved style item interaction

---
 .../style-declaration.reel/style-declaration.js    | 29 +++++++++++++---------
 1 file changed, 17 insertions(+), 12 deletions(-)

(limited to 'js/panels/css-panel/style-declaration.reel/style-declaration.js')

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 8e364d0d..711879ce 100644
--- a/js/panels/css-panel/style-declaration.reel/style-declaration.js
+++ b/js/panels/css-panel/style-declaration.reel/style-declaration.js
@@ -32,14 +32,15 @@ exports.StyleDeclaration = Montage.create(Component, {
                 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;
-            }
+//            if (styleA.name < styleB.name) {
+//                return -1;
+//            } else if (styleA.name > styleB.name) {
+//                return 1;
+//            } else {
+//                return 0;
+//            }
         }
     },
     _styleFilterFunction: {
@@ -173,6 +174,7 @@ exports.StyleDeclaration = Montage.create(Component, {
                                     //// if shorthand exists in list of rendered styles
                                     //// update it
                                     this.styles[shorthandIndex].value = this.declaration.getPropertyValue(shorthand);
+                                    usedIndices.push(shorthandIndex);
                                     shorthandUpdated = true;
                                 }
                             }, this);
@@ -225,13 +227,16 @@ exports.StyleDeclaration = Montage.create(Component, {
                 isEmpty: false
             }, prop;
 
+            console.log('adding "'+ property+'" with value "' + value + '"');
+
             for(prop in data) {
                 if(data.hasOwnProperty(prop)) {
                     styleDescriptor[prop] = data[prop];
                 }
             }
 
-            this.styles.push(styleDescriptor);
+            //this.styles.push(styleDescriptor);
+            this.arrayController.addObjects(styleDescriptor);
 
             this.needsSort = this.needsDraw = true;
         }
@@ -239,9 +244,9 @@ exports.StyleDeclaration = Montage.create(Component, {
     removeStyle : {
         value: function(styleDescriptor) {
             var styleDescriptorIndex = this.styles.indexOf(styleDescriptor);
-
-            this.styles.splice(styleDescriptorIndex, 1);
-            //this.arrayController.removeObjects(styleDescriptor);
+console.log("removing style", styleDescriptor);
+            //this.styles.splice(styleDescriptorIndex, 1);
+            this.arrayController.removeObjects(styleDescriptor);
 
             //this.needsDraw = true;
         }
@@ -281,7 +286,7 @@ exports.StyleDeclaration = Montage.create(Component, {
             if(this.focusDelegate) {
                 this.styleComponent.delegate = this.focusDelegate;
             }
-            //this.arrayController.sortFunction = this._styleSortFunction;
+            this.arrayController.sortFunction = this._styleSortFunction;
         }
     },
 
-- 
cgit v1.2.3


From 1f4d7643b484cab4258cda2bb8eefcc6a60452df Mon Sep 17 00:00:00 2001
From: Eric Guzman
Date: Tue, 22 May 2012 09:27:25 -0700
Subject: CSS Style Declaration - Improve shorthand filtering

---
 .../style-declaration.reel/style-declaration.js    | 38 +++++++++++-----------
 1 file changed, 19 insertions(+), 19 deletions(-)

(limited to 'js/panels/css-panel/style-declaration.reel/style-declaration.js')

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 711879ce..57cbdb63 100644
--- a/js/panels/css-panel/style-declaration.reel/style-declaration.js
+++ b/js/panels/css-panel/style-declaration.reel/style-declaration.js
@@ -84,8 +84,7 @@ exports.StyleDeclaration = Montage.create(Component, {
             ///// Take snapshot of declaration
             this.cssText = dec.cssText;
 
-            stylesArray = Array.prototype.slice.call(dec);
-
+            stylesArray = this.filterShorthands(Array.prototype.slice.call(dec));
             stylesArray.forEach(function(prop, index) {
                 this.styles.push({
                     name: prop,
@@ -107,28 +106,32 @@ exports.StyleDeclaration = Montage.create(Component, {
         }
     },
 
-    styleShorthander : {
+    filterShorthands : {
         value: function(styles) {
             var shorthandsToAdd = [],
                 subProps, hasAll;
 
-            styles.forEach(function(property, index, styleArray) {
-                var shorthands = ShorthandProps.CSS_SHORTHAND_MAP[property];
+            var stylesCopy = styles.map(function(style) {
+                return style;
+            });
 
-                if(!shorthands) { return false; }
+            stylesCopy.forEach(function(property, index) {
+                var shorthands = ShorthandProps.CSS_SHORTHAND_MAP[property];
+                if(shorthands) {
+                    subProps = ShorthandProps.CSS_SHORTHAND_TO_SUBPROP_MAP[shorthands[0]];
 
-                var subProps = ShorthandProps.CSS_SHORTHAND_TO_SUBPROP_MAP[shorthands[0]],
-                    stylesArray = styleArray;
+                    hasAll = subProps.every(function(subProp) {
+                        return styles.indexOf(subProp) !== -1;
+                    });
 
-                hasAll = subProps.every(function(subProp) {
-                    return stylesArray.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]);
+                    }
 
-                if(hasAll) {
-                    subProps.forEach(function(subProp) {
-                        stylesArray.splice(stylesArray.indexOf(subProp), 1);
-                    }, this);
-                    shorthandsToAdd.push(shorthands[0]);
+                    return true;
                 }
             }, this);
 
@@ -227,8 +230,6 @@ exports.StyleDeclaration = Montage.create(Component, {
                 isEmpty: false
             }, prop;
 
-            console.log('adding "'+ property+'" with value "' + value + '"');
-
             for(prop in data) {
                 if(data.hasOwnProperty(prop)) {
                     styleDescriptor[prop] = data[prop];
@@ -244,7 +245,6 @@ exports.StyleDeclaration = Montage.create(Component, {
     removeStyle : {
         value: function(styleDescriptor) {
             var styleDescriptorIndex = this.styles.indexOf(styleDescriptor);
-console.log("removing style", styleDescriptor);
             //this.styles.splice(styleDescriptorIndex, 1);
             this.arrayController.removeObjects(styleDescriptor);
 
-- 
cgit v1.2.3