From efe8f144e9506ce1c611445a1c8e4291ce3d1af7 Mon Sep 17 00:00:00 2001
From: Eric Guzman
Date: Tue, 22 May 2012 15:02:38 -0700
Subject: CSS Style Rule - Extract and append class name from selector on first
 change

---
 .../css-style-rule.reel/css-style-rule.js              |  3 +++
 js/panels/css-panel/styles-view-delegate.js            | 18 ++++++++++++++----
 2 files changed, 17 insertions(+), 4 deletions(-)

(limited to 'js/panels/css-panel')

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);
-- 
cgit v1.2.3