CSS Style - Add style interaction

3 files changed, 117 insertions, 46 deletions

diff --git a/js/panels/css-panel/declaration.reel/declaration.html b/js/panels/css-panel/declaration.reel/declaration.html
index 3a513871..3ff41e0c 100644
--- a/js/panels/css-panel/declaration.reel/declaration.html
+++ b/js/panels/css-panel/declaration.reel/declaration.html
@@ -15,7 +15,8 @@ No rights, expressed or implied, whatsoever to this software are provided by Mot
                 "name" : "Declaration",
                 "properties" : {
                     "element" : {"#" : "container"},
-                    "treeController": {"@": "treeController"}
+                    "treeController": {"@": "treeController"},
+                    "treeView" : {"@": "treeView"}
                 }
             },
             "styleShorthand": {
@@ -23,7 +24,7 @@ No rights, expressed or implied, whatsoever to this software are provided by Mot
                 "name": "StyleShorthand"
             },
             "treeController": {
-                "module": "js/controllers/tree-controller",
+                "module": "js/components/controllers/tree-controller",
                 "name": "TreeController",
                 "properties" : {
                     "branchKey" : "properties",
diff --git a/js/panels/css-panel/declaration.reel/declaration.js b/js/panels/css-panel/declaration.reel/declaration.js
index 9685510b..873d2ce4 100644
--- a/js/panels/css-panel/declaration.reel/declaration.js
+++ b/js/panels/css-panel/declaration.reel/declaration.js
@@ -18,7 +18,10 @@ exports.Declaration = Montage.create(Component, {
     templateDidLoad : {
         value: function() {
             console.log("declaration - template did load");
-            this.treeController.delegate = this.focusDelegate || this;
+
+            if(this.focusDelegate) {
+                this.treeController.delegate = this.focusDelegate;
+            }
         }
     },
     prepareForDraw : {
@@ -119,9 +122,17 @@ exports.Declaration = Montage.create(Component, {
         distinct: true
     },
 
-    addNewStyle : {
-        value: function() {
-            debugger;
+    addNewStyleAfter : {
+        value: function(style) {
+            //this.treeController.branchControllers[0].addObjects({
+            foo1 = style.parentComponent.parentComponent;
+            style.parentComponent.parentComponent.contentController.addObjects({
+                name: 'property',
+                value: 'value',
+                isEmpty: true,
+                treeNodeType: 'leaf'
+            });
+            style.parentComponent.parentComponent.needsDraw = true;
         }
     },
 
diff --git a/js/panels/css-panel/style.reel/style.js b/js/panels/css-panel/style.reel/style.js
index 517d1012..b86be0ae 100644
--- a/js/panels/css-panel/style.reel/style.js
+++ b/js/panels/css-panel/style.reel/style.js
@@ -38,6 +38,15 @@ exports.Style = Montage.create(TreeNode, {
             this.units = this.getUnits(text);
         }
     },
+    _priority: { value: "", distinct: true },
+    priority: {
+        get: function() {
+            return this._priority;
+        },
+        set: function(value) {
+            this._priority = value;
+        }
+    },
 
     getUnits : {
         value: function(val) {
@@ -57,25 +66,35 @@ exports.Style = Montage.create(TreeNode, {
         },
         set: function(value) {
             this._enabled = value;
+            this.delegate.handleStyleToggle(this.getRule(), this._enabled, this);
             this.needsDraw = true;
         }
     },
 
+    _empty : { value: null },
+    empty : {
+        get: function() {
+            return this._empty;
+        },
+        set: function(isEmpty) {
+            if(this._empty === isEmpty) { return false; }
+            this._empty = isEmpty;
+            this.needsDraw = true;
+        }
+    },
 
     dirty : {
         get: function() {
             return this.propertyField.isDirty || this.valueField.isDirty;
         },
         set: function(value) {
-
+            return false;
         }
     },
 
     _invalid: { value: null },
     invalid : {
-        get: function() {
-            return this._invalid;
-        },
+        get: function() { return this._invalid; },
         set: function(value) {
             this._invalid = value;
             this.needsDraw = true;
@@ -88,6 +107,8 @@ exports.Style = Montage.create(TreeNode, {
             return this._editing;
         },
         set: function(value) {
+            if(this._editing === value) { return false; }
+
             this._editing = value;
             this.needsDraw = true;
         }
@@ -101,11 +122,21 @@ exports.Style = Montage.create(TreeNode, {
             return this._editingNewStyle;
         },
         set: function(value) {
+            if(this._editingNewStyle === value) {
+                return false;
+            }
+
             this._editingNewStyle = value;
             this.needsDraw = true;
         }
     },
 
+    getRule : {
+        value: function() {
+            return this.treeView.parentComponent.declaration.parentRule;
+        }
+    },
+
     handleEvent : {
         value: function(e) {
             console.log(e);
@@ -136,13 +167,7 @@ exports.Style = Montage.create(TreeNode, {
             this.element.classList.remove("drag-enter");
         }
     },
-    handleSourceObjectSet: {
-        value: function() {
-            //debugger;
-            this.propertyText = this.sourceObject.name;
-            this.valueText = this.sourceObject.value;
-        }
-    },
+
     handleWebkitTransitionEnd : {
         value: function(e) {
             console.log("trans end");
@@ -150,7 +175,9 @@ exports.Style = Montage.create(TreeNode, {
     },
     handleClick : {
         value: function(e) {
-            console.log("handleAction");
+            console.log("handle Add button click");
+            this.propertyField.start();
+            //this.editingNewStyle = true;
             this.editingNewStyle = this.editing = true;
         }
     },
@@ -167,23 +194,23 @@ exports.Style = Montage.create(TreeNode, {
             var event = e;
             ///// Function to determine if an empty (new) style should return
             ///// to showing the add button, i.e. the fields were not clicked
-            function shouldStopEditing() {
+            function fieldsClicked() {
                 var clicked;
                 if(e._event.detail.originalEventType === 'mousedown') {
                     clicked = e._event.detail.originalEvent.target;
-                    return clicked !== this.propertyField.element && clicked !== this.valueField.element;
+                    return clicked === this.propertyField.element || clicked === this.valueField.element;
                 }
-                return;
+                return false;