Styles Controller - Added fix for setting style on cached, multi-target rule.

Added fix for setting style on cached, multi-target rule. Also added parameter to selector override to augment specificity of selector

1 files changed, 35 insertions, 10 deletions

diff --git a/js/controllers/styles-controller.js b/js/controllers/styles-controller.js
index dfe7c69a..02c3dad9 100755
--- a/js/controllers/styles-controller.js
+++ b/js/controllers/styles-controller.js
@@ -217,10 +217,12 @@ var stylesController = exports.StylesController = Montage.create(Component, {
             }
 
             var selectorToOverride = getSelector.bind(this)(element, ruleToOverride),
-                overrideData, rule;
+                overrideData, rule, isRuleLocked;
+
+            isRuleLocked = this.isSheetLocked(ruleToOverride.parentStyleSheet);
 
             ///// Get the overriding selector and className
-            overrideData = this.createOverrideSelector(selectorToOverride, element.nodeName);
+            overrideData = this.createOverrideSelector(selectorToOverride, element.nodeName, isRuleLocked);
 
             ///// Create new rule with selector and insert it after the rule we're overriding
             rule = this.addRule(overrideData.selector + ' { }', this.getRuleIndex(ruleToOverride)+1);
@@ -234,7 +236,7 @@ var stylesController = exports.StylesController = Montage.create(Component, {
     },
 
     createOverrideSelector : {
-        value: function(selectorToOverride, classPrefix, className) {
+        value: function(selectorToOverride, classPrefix, increaseSpecificity, className) {
             var tokens = selectorToOverride.split(/\s/),
                 newClass = className || this.generateClassName(classPrefix, true),
                 lastToken, pseudoSplit, base, pseudo, newToken, newSelector;
@@ -255,10 +257,19 @@ var stylesController = exports.StylesController = Montage.create(Component, {
             if(base.indexOf('#') !== -1) {
                 newToken = base + '.' + newClass + pseudo;
             } else {
-                ///// Replace last class or attribute selector
-                ///// Get everything right before the last class or attribute selector
-                ///// to support compound selector values: (i.e. .firstClass.secondClass)
-                newToken = base.substring(0, Math.max(base.lastIndexOf('.'), base.lastIndexOf('[')));
+                if(increaseSpecificity) {
+                    ///// Increases specificity by one class selector
+                    ///// We'll do a direct append to the base class
+                    ///// if we want to increase the specificity
+                    newToken = base;
+                } else {
+                    ///// Maintains original specificity
+                    ///// Replace last class or attribute selector
+                    ///// Get everything right before the last class or attribute selector
+                    ///// to support compound selector values: (i.e. .firstClass.secondClass)
+                    newToken = base.substring(0, Math.max(base.lastIndexOf('.'), base.lastIndexOf('[')));
+                }
+
                 ///// Append the generated class
                 newToken += '.' + newClass + pseudo;
             }
@@ -979,12 +990,13 @@ var stylesController = exports.StylesController = Montage.create(Component, {
             var doc = element.ownerDocument,
                 useImportant = false,
                 cache = this._getCachedRuleForProperty(element, property),
-                dominantRule, override, className, browserValue;
+                dominantRule, override, className, browserValue, cacheMatchesMany;
 
             if(cache) {
                 ///// We've cached the rule for this property!
                 //console.log('Styles Controller :: setElementStyle - We found the cached rule!');
                 dominantRule = cache;
+                cacheMatchesMany = this.matchesMultipleElements(dominantRule, doc);
             } else {
                 ///// Use Dominant Rule logic to find the right place to add the style
                 ///// Pass "true" to method to return an override object, which
@@ -992,7 +1004,7 @@ var stylesController = exports.StylesController = Montage.create(Component, {
                 dominantRule = this.getDominantRuleForElement(element, property, true, isStageElement);
 
             }
-               
+
             ///// Did we find a dominant rule?
             if(!dominantRule) {
                 ///// No. This means there was no rule with this property, and no
@@ -1010,6 +1022,13 @@ var stylesController = exports.StylesController = Montage.create(Component, {
                 useImportant = dominantRule.useImportant;
                 dominantRule = override.rule;
                 this.addClass(element, override.className);
+            } else if(cacheMatchesMany) {
+                ///// Only happens when the cached rule applies to multiple
+                ///// elements - we must create override
+                override = this.createOverrideRule(dominantRule, element);
+                useImportant = !!dominantRule.style.getPropertyPriority(property);
+                dominantRule = override.rule;
+                this.addClass(element, override.className);
             }
 
 
@@ -1017,7 +1036,7 @@ var stylesController = exports.StylesController = Montage.create(Component, {
             browserValue = this.setStyle(dominantRule, property, value, useImportant);
 
             ///// Only cache the dominant rule if the style value was valid, and not already cached
-            if(browserValue && !cache) {
+            if(browserValue && (!cache || cacheMatchesMany)) {
                 this._setCachedRuleForProperty(element, property, dominantRule);
             }
 
@@ -1280,6 +1299,12 @@ var stylesController = exports.StylesController = Montage.create(Component, {
         }
     },
 
+    isSheetLocked : {
+        value: function(sheet) {
+            return !!sheet.ownerNode.dataset['ninjaFileReadOnly'];
+        }
+    },
+
     ///// Style Sheet Modified
     ///// Method to call whenever a stylesheet change is made
     ///// Dispatches an event, and keeps list of dirty style sheets