CSS Style Rule - Add code for changing selectors and showing unapplied rules

1 files changed, 67 insertions, 6 deletions

diff --git a/js/panels/css-panel/styles-view-mediator.js b/js/panels/css-panel/styles-view-mediator.js
index c93a5e73..8a0e4137 100644
--- a/js/panels/css-panel/styles-view-mediator.js
+++ b/js/panels/css-panel/styles-view-mediator.js
@@ -9,6 +9,9 @@ var Montage = require("montage/core/core").Montage,
     Keyboard = require("js/mediators/keyboard-mediator").Keyboard;
 
 exports.StylesViewMediator = Montage.create(Component, {
+    newClassPrefix : {
+        value: "new-class"
+    },
     stylesController : {
         get: function() {
             return this.application.ninja.stylesController;
@@ -17,25 +20,72 @@ exports.StylesViewMediator = Montage.create(Component, {
             return;
         }
     },
+
+    handleSelectorChange : {
+        value: function(rule, newSelector, ruleComponent) {
+            rule.selectorText = newSelector;
+
+            ruleComponent.applied = this.ruleListContainer.displayedList.selection.every(function(el) {
+                return this._doesSelectorTargetElement(newSelector, el);
+            }, this);
+
+        }
+    },
+
+    ///// Add rule button action
     handleAddAction : {
         value: function(e) {
-            var selector, newRule;
-
-            ///// Add rule to the container
+            var selector,
+                newRule,
+                applies = true;
 
             ///// Get selection prefix
             if(this.ruleListContainer.displayedList.selection.length > 1) {
                 selector = this.stylesController.generateClassName(null, true);
             } else {
-                selector = this.stylesController.generateClassName(this.ruleListContainer.displayedList.selection[0].nodeName);
+                selector = this.stylesController.generateClassName(this.newClassPrefix);
             }
 
+            ///// Create the rule with generated selector
             newRule = this.application.ninja.stylesController.addRule('.'+selector, ' { }');
 
-            this.ruleListContainer.displayedList.component.addRule(newRule);
+            ///// Add the generated class to each element in selection
+            ///// and check whether it applies to the element
+            this.ruleListContainer.displayedList.selection.forEach(function(el) {
+                this.stylesController.addClass(el, selector);
+                
+                if(applies) {
+                    applies = (this._doesSelectorTargetElement('.'+selector, el));
+                }
+            },this);
+
+            ///// Add rule directly to the rule list
+            this.ruleListContainer.displayedList.component.addRule(newRule).applied = applies;
+
+        }
+    },
+
+    _doesSelectorTargetElement : {
+        value: function doesSelectorTargetElement(selector, element) {
+            var doc = element.ownerDocument,
+                matchingEls = Array.prototype.slice.call(doc.querySelectorAll(selector));
+            return matchingEls.indexOf(element) !== -1;
+        }
+    },
 
+    ///// Enable/Disable Style when checkbox is clicked
+    handleStyleToggle : {
+        value: function(rule, enable, style) {
+            if(enable) {
+                this.stylesController.setStyle(rule, style.propertyText, style.valueText, style.priority);
+            } else {
+                this.stylesController.deleteStyle(rule, style.propertyText);
+            }
+
+            this._dispatchChange();
         }
     },
+
     handleStyleStop: {
         value: function(e) {
             console.log("Handle Style Stop");
@@ -90,7 +140,18 @@ exports.StylesViewMediator = Montage.create(Component, {
             this._dispatchChange(property, browserValue);
 
             if(style.editingNewStyle) {
-                style.treeView.parentComponent.addNewStyle();
+                style.treeView.parentComponent.addNewStyleAfter(style);
+                style.editingNewStyle = false;
+            }
+        }
+    },
+
+    handlePaste : {
+        value: function(e) {
+            var text = document.execCommand('insertHTML', null, e._event.clipboardData.getData("Text")).trim();
+
+            if(text.matches(/([a-zA-Z-]+:[a-zA-Z-]+){,1}/)) {
+
             }
         }
     },