CSS Style Rule - Extract and append class name from selector on first change

2 files changed, 17 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 cfe3c24d..e0ffb1a8 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
@@ -8,6 +8,9 @@ var Montage = require("montage/core/core").Montage,
     Component = require("montage/ui/component").Component;
 
 exports.CssStyleRule = Montage.create(Component, {
+    addClassNameOnChange : {
+        value: null
+    },
     unappliedClass : {
         value: 'unapplied-css-rule'
     },
diff --git a/js/panels/css-panel/styles-view-delegate.js b/js/panels/css-panel/styles-view-delegate.js
index 919f6034..1644460a 100644
--- a/js/panels/css-panel/styles-view-delegate.js
+++ b/js/panels/css-panel/styles-view-delegate.js
@@ -53,17 +53,17 @@ exports.StylesViewDelegate = Montage.create(Component, {
                 return false;
             }
 
-            if(!ruleComponent.firstChangeHappened) {
-                var lastClass = newSelector.substring(newSelector.lastIndexOf('.')+1);
+            if(ruleComponent.addClassNameOnChange) {
+                var lastClass = this._getClassNameFromSelector(newSelector);
 
-                if(lastClass !== newSelector) {
+                if(lastClass) {
                     ///// 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, lastClass);
                     },this);
                 }
-                ruleComponent.firstChangeHappened = true;
+                ruleComponent.addClassNameOnChange = false;
             }
 
             rule.selectorText = newSelector;
@@ -75,6 +75,13 @@ exports.StylesViewDelegate = Montage.create(Component, {
             this._dispatchChange();
         }
     },
+    _getClassNameFromSelector : {
+        value: function(selectorText) {
+            var results = /.*\.([A-Za-z0-9_-]+)\:?[A-Za-z0-9_"=-]*$/.exec(selectorText);
+
+            return (results) ? results[1] : null;
+        }
+    },
 
     ///// Returns true if the passed-in selector targets the passed-in element
     _doesSelectorTargetElement : {
@@ -249,6 +256,9 @@ exports.StylesViewDelegate = Montage.create(Component, {
             ///// Add rule directly to the rule list
             this.ruleListContainer.displayedList.component.addRule(newRule, null, applies, function(ruleComponent) {
                 var rC = ruleComponent;
+
+                rC.addClassNameOnChange = true;
+
                 setTimeout(function() {
                     rC.selectorField.start();
                 },50);