Style Declaration - Improved updating of styles using binding.

3 files changed, 133 insertions, 133 deletions

diff --git a/js/panels/css-panel/style-declaration.reel/style-declaration.css b/js/panels/css-panel/style-declaration.reel/style-declaration.css
index e37d89d2..6be8d33c 100644
--- a/js/panels/css-panel/style-declaration.reel/style-declaration.css
+++ b/js/panels/css-panel/style-declaration.reel/style-declaration.css
@@ -4,10 +4,8 @@
  (c) Copyright 2011 Motorola Mobility, Inc.  All Rights Reserved.
  </copyright> */
 
-.treeRoot > .style-shorthand-branch > div {
-    display: none;
-}
-.treeRoot > .style-shorthand-branch > dl {
+
+.declaration-list {
     margin-top: 4px;
 }
 .drag-over {
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 9123e2a0..2fdb11d5 100644
--- a/js/panels/css-panel/style-declaration.reel/style-declaration.html
+++ b/js/panels/css-panel/style-declaration.reel/style-declaration.html
@@ -22,6 +22,9 @@ No rights, expressed or implied, whatsoever to this software are provided by Mot
             },
             "arrayController": {
                 "prototype": "montage/ui/controller/array-controller",
+                "properties": {
+                    "automaticallyOrganizeObjects": true
+                },
                 "bindings": {
                     "content": {
                         "boundObject": {"@": "owner"},
@@ -44,9 +47,17 @@ No rights, expressed or implied, whatsoever to this software are provided by Mot
                     "declaration": {"@": "owner"}
                 },
                 "bindings": {
-                    "sourceObject" : {
+                    "propertyText" : {
+                        "boundObject": {"@": "repetition"},
+                        "boundObjectPropertyPath": "objectAtCurrentIteration.name"
+                    },
+                    "valueText" : {
+                        "boundObject": {"@": "repetition"},
+                        "boundObjectPropertyPath": "objectAtCurrentIteration.value"
+                    },
+                    "empty" : {
                         "boundObject": {"@": "repetition"},
-                        "boundObjectPropertyPath": "objectAtCurrentIteration"
+                        "boundObjectPropertyPath": "objectAtCurrentIteration.isEmpty"
                     },
                     "delegate": {
                         "boundObject": {"@": "owner"},
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;
         }
     },