CSS Panel - Added removing of rules/styles

5 files changed, 78 insertions, 4 deletions

diff --git a/js/panels/css-panel/rule-components/css-style-rule.reel/css-style-rule.js b/js/panels/css-panel/rule-components/css-style-rule.reel/css-style-rule.js
index ac22878e..d2c81b93 100644
--- a/js/panels/css-panel/rule-components/css-style-rule.reel/css-style-rule.js
+++ b/js/panels/css-panel/rule-components/css-style-rule.reel/css-style-rule.js
@@ -86,6 +86,15 @@ exports.CssStyleRule = Montage.create(Component, {
         }
     },
 
+    update: {
+        value: function() {
+            if(this.cssText !== this.rule.cssText) {
+                // TODO: add update for selector and stylesheet name
+                this.declarationComponent.update();
+            }
+        }
+    },
+
     templateDidLoad : {
         value: function() {
             //console.log("css style rule : template did load");
@@ -93,8 +102,11 @@ exports.CssStyleRule = Montage.create(Component, {
     },
     prepareForDraw : {
         value: function() {
-            this.selectorField.addEventListener('change', this, false);
-
+            if(this.rule.type === 'inline') {
+                this.selectorField.readOnly = true;
+            } else {
+                this.selectorField.addEventListener('change', this, false);
+            }
             //console.log("css style rule : prepare for draw");
 
         }
diff --git a/js/panels/css-panel/rule-list.reel/rule-list.js b/js/panels/css-panel/rule-list.reel/rule-list.js
index 4ed3ec11..8d179248 100644
--- a/js/panels/css-panel/rule-list.reel/rule-list.js
+++ b/js/panels/css-panel/rule-list.reel/rule-list.js
@@ -25,7 +25,7 @@ exports.RuleList = Montage.create(Component, {
             console.log('list: ', list);
             this._rules = list;
 
-            ///// remove previsouly added rules
+            ///// remove previously added rules
             if(this.childComponents){
                 this.childComponents.forEach(function(ruleComponent) {
                     this.removeRule(ruleComponent);
@@ -50,7 +50,10 @@ exports.RuleList = Montage.create(Component, {
         value: [],
         distinct: true
     },
-
+    rulesToRemove : {
+        value: [],
+        distinct: true
+    },
     addRule: {
         value: function(rule) {
             var componentBase = this.supportedRules[rule.type],
@@ -73,6 +76,14 @@ exports.RuleList = Montage.create(Component, {
         }
     },
 
+    removeRule : {
+        value: function(rule) {
+            this.childComponents.splice(this.childComponents.indexOf(rule), 1);
+            this.rulesToRemove.push(rule);
+            this.needsDraw = true;
+        }
+    },
+
     update : {
         value: function() {
             this.childComponents.forEach(function(component) {
@@ -106,11 +117,18 @@ exports.RuleList = Montage.create(Component, {
             this.rulesToDraw.forEach(function(component) {
                 this.element.appendChild(component.element);
                 this._needsScrollToBottom = this.needsDraw = true;
+                this.childComponents.push(component);
                 component.needsDraw = true;
             }, this);
 
+            //// Iterate through all rules that need draw and append them
+            this.rulesToRemove.forEach(function(component) {
+                this.element.removeChild(component.element);
+            }, this);
+
             ///// Null out any rules that were just drawn
             this.rulesToDraw.length = 0;
+            this.rulesToRemove.length = 0;
         }
     }
 });
diff --git a/js/panels/css-panel/style.reel/style.js b/js/panels/css-panel/style.reel/style.js
index b86be0ae..a8939bc6 100644
--- a/js/panels/css-panel/style.reel/style.js
+++ b/js/panels/css-panel/style.reel/style.js
@@ -131,6 +131,18 @@ exports.Style = Montage.create(TreeNode, {
         }
     },
 
+    remove : {
+        value: function() {
+            var branchController = this.parentComponent.parentComponent.contentController;
+
+            ///// Remove style property from declaration
+            this.treeView.parentComponent.declaration.removeProperty(this.propertyField._preEditValue);
+
+            ///// Remove data from branch controller and update UI
+            branchController.removeObjects(this.sourceObject);
+        }
+    },
+
     getRule : {
         value: function() {
             return this.treeView.parentComponent.declaration.parentRule;
@@ -315,10 +327,16 @@ exports.Style = Montage.create(TreeNode, {
             if(this.empty) {
                 this.element.draggable = false;
                 this.element.classList.add('empty-css-style');
+                if(!this.addStyleButton.parentNode) {
+                    console.log("Adding style for ", this.propertyText);
+                    this.element.appendChild(this.addStyleButton);
+                    this.addStyleButton.addEventListener('click', this, false);
+                }
             } else {
                 this.element.draggable = true;
                 this.element.classList.remove('empty-css-style');
                 if(this.addStyleButton.parentNode) {
+                    console.log("Removing style for ", this.propertyText);
                     this.element.removeChild(this.addStyleButton);
                 }
             }
diff --git a/js/panels/css-panel/styles-view-container.reel/styles-view-container.js b/js/panels/css-panel/styles-view-container.reel/styles-view-container.js
index 0204d2b8..e51c78cd 100644
--- a/js/panels/css-panel/styles-view-container.reel/styles-view-container.js
+++ b/js/panels/css-panel/styles-view-container.reel/styles-view-container.js
@@ -29,6 +29,7 @@ exports.StylesViewContainer = Montage.create(Component, {
     templateDidLoad : {
         value: function() {
             this.eventManager.addEventListener('styleSheetsReady', this, false);
+            this.eventManager.addEventListener('elementChange', this, false);
         }
     },
     handleStyleSheetsReady: {
@@ -46,6 +47,13 @@ exports.StylesViewContainer = Montage.create(Component, {
             this.hasStyles = true;
         }
     },
+    handleElementChange : {
+        value: function(e) {
+            if(e._event.detail.type !== 'cssChange') {
+                this.ruleListContainer.displayedList.component.update();
+            }
+        }
+    },
 
     draw : {
         value: function() {
diff --git a/js/panels/css-panel/styles-view-mediator.js b/js/panels/css-panel/styles-view-mediator.js
index 8a0e4137..c3154db0 100644
--- a/js/panels/css-panel/styles-view-mediator.js
+++ b/js/panels/css-panel/styles-view-mediator.js
@@ -23,6 +23,12 @@ exports.StylesViewMediator = Montage.create(Component, {
 
     handleSelectorChange : {
         value: function(rule, newSelector, ruleComponent) {
+            if(newSelector === "") {
+                debugger;
+                ruleComponent.parentComponent.removeRule(ruleComponent);
+                return false;
+            }
+
             rule.selectorText = newSelector;
 
             ruleComponent.applied = this.ruleListContainer.displayedList.selection.every(function(el) {
@@ -103,6 +109,12 @@ exports.StylesViewMediator = Montage.create(Component, {
                 return false;
             }
 
+            if(property === '') {
+                style.remove();
+                this._dispatchChange(oldProperty, browserValue);
+                return false;