aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authorEric Guzman2012-05-09 18:23:17 -0700
committerEric Guzman2012-05-09 18:23:17 -0700
commit0cbfa32fa4e62be128b6478dcba0aa9db902f78b (patch)
tree8c94f2bbadda71ca10242b56b3e5668284170571
parent5330de3ddb40a4db8a2a0572725ab64b23770b3b (diff)
downloadninja-0cbfa32fa4e62be128b6478dcba0aa9db902f78b.tar.gz
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
-rwxr-xr-xjs/controllers/styles-controller.js45
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, {
217 } 217 }
218 218
219 var selectorToOverride = getSelector.bind(this)(element, ruleToOverride), 219 var selectorToOverride = getSelector.bind(this)(element, ruleToOverride),
220 overrideData, rule; 220 overrideData, rule, isRuleLocked;
221
222 isRuleLocked = this.isSheetLocked(ruleToOverride.parentStyleSheet);
221 223
222 ///// Get the overriding selector and className 224 ///// Get the overriding selector and className
223 overrideData = this.createOverrideSelector(selectorToOverride, element.nodeName); 225 overrideData = this.createOverrideSelector(selectorToOverride, element.nodeName, isRuleLocked);
224 226
225 ///// Create new rule with selector and insert it after the rule we're overriding 227 ///// Create new rule with selector and insert it after the rule we're overriding
226 rule = this.addRule(overrideData.selector + ' { }', this.getRuleIndex(ruleToOverride)+1); 228 rule = this.addRule(overrideData.selector + ' { }', this.getRuleIndex(ruleToOverride)+1);
@@ -234,7 +236,7 @@ var stylesController = exports.StylesController = Montage.create(Component, {
234 }, 236 },
235 237
236 createOverrideSelector : { 238 createOverrideSelector : {
237 value: function(selectorToOverride, classPrefix, className) { 239 value: function(selectorToOverride, classPrefix, increaseSpecificity, className) {
238 var tokens = selectorToOverride.split(/\s/), 240 var tokens = selectorToOverride.split(/\s/),
239 newClass = className || this.generateClassName(classPrefix, true), 241 newClass = className || this.generateClassName(classPrefix, true),
240 lastToken, pseudoSplit, base, pseudo, newToken, newSelector; 242 lastToken, pseudoSplit, base, pseudo, newToken, newSelector;
@@ -255,10 +257,19 @@ var stylesController = exports.StylesController = Montage.create(Component, {
255 if(base.indexOf('#') !== -1) { 257 if(base.indexOf('#') !== -1) {
256 newToken = base + '.' + newClass + pseudo; 258 newToken = base + '.' + newClass + pseudo;
257 } else { 259 } else {
258 ///// Replace last class or attribute selector 260 if(increaseSpecificity) {
259 ///// Get everything right before the last class or attribute selector 261 ///// Increases specificity by one class selector
260 ///// to support compound selector values: (i.e. .firstClass.secondClass) 262 ///// We'll do a direct append to the base class
261 newToken = base.substring(0, Math.max(base.lastIndexOf('.'), base.lastIndexOf('['))); 263 ///// if we want to increase the specificity
264 newToken = base;
265 } else {
266 ///// Maintains original specificity
267 ///// Replace last class or attribute selector
268 ///// Get everything right before the last class or attribute selector
269 ///// to support compound selector values: (i.e. .firstClass.secondClass)
270 newToken = base.substring(0, Math.max(base.lastIndexOf('.'), base.lastIndexOf('[')));
271 }
272
262 ///// Append the generated class 273 ///// Append the generated class
263 newToken += '.' + newClass + pseudo; 274 newToken += '.' + newClass + pseudo;
264 } 275 }
@@ -979,12 +990,13 @@ var stylesController = exports.StylesController = Montage.create(Component, {
979 var doc = element.ownerDocument, 990 var doc = element.ownerDocument,
980 useImportant = false, 991 useImportant = false,
981 cache = this._getCachedRuleForProperty(element, property), 992 cache = this._getCachedRuleForProperty(element, property),
982 dominantRule, override, className, browserValue; 993 dominantRule, override, className, browserValue, cacheMatchesMany;
983 994
984 if(cache) { 995 if(cache) {
985 ///// We've cached the rule for this property! 996 ///// We've cached the rule for this property!
986 //console.log('Styles Controller :: setElementStyle - We found the cached rule!'); 997 //console.log('Styles Controller :: setElementStyle - We found the cached rule!');
987 dominantRule = cache; 998 dominantRule = cache;
999 cacheMatchesMany = this.matchesMultipleElements(dominantRule, doc);
988 } else { 1000 } else {
989 ///// Use Dominant Rule logic to find the right place to add the style 1001 ///// Use Dominant Rule logic to find the right place to add the style
990 ///// Pass "true" to method to return an override object, which 1002 ///// Pass "true" to method to return an override object, which
@@ -992,7 +1004,7 @@ var stylesController = exports.StylesController = Montage.create(Component, {
992 dominantRule = this.getDominantRuleForElement(element, property, true, isStageElement); 1004 dominantRule = this.getDominantRuleForElement(element, property, true, isStageElement);
993 1005
994 } 1006 }
995 1007
996 ///// Did we find a dominant rule? 1008 ///// Did we find a dominant rule?
997 if(!dominantRule) { 1009 if(!dominantRule) {
998 ///// No. This means there was no rule with this property, and no 1010 ///// No. This means there was no rule with this property, and no
@@ -1010,6 +1022,13 @@ var stylesController = exports.StylesController = Montage.create(Component, {
1010 useImportant = dominantRule.useImportant; 1022 useImportant = dominantRule.useImportant;
1011 dominantRule = override.rule; 1023 dominantRule = override.rule;
1012 this.addClass(element, override.className); 1024 this.addClass(element, override.className);
1025 } else if(cacheMatchesMany) {
1026 ///// Only happens when the cached rule applies to multiple
1027 ///// elements - we must create override
1028 override = this.createOverrideRule(dominantRule, element);
1029 useImportant = !!dominantRule.style.getPropertyPriority(property);
1030 dominantRule = override.rule;
1031 this.addClass(element, override.className);
1013 } 1032 }
1014 1033
1015 1034
@@ -1017,7 +1036,7 @@ var stylesController = exports.StylesController = Montage.create(Component, {
1017 browserValue = this.setStyle(dominantRule, property, value, useImportant); 1036 browserValue = this.setStyle(dominantRule, property, value, useImportant);
1018 1037
1019 ///// Only cache the dominant rule if the style value was valid, and not already cached 1038 ///// Only cache the dominant rule if the style value was valid, and not already cached
1020 if(browserValue && !cache) { 1039 if(browserValue && (!cache || cacheMatchesMany)) {
1021 this._setCachedRuleForProperty(element, property, dominantRule); 1040 this._setCachedRuleForProperty(element, property, dominantRule);
1022 } 1041 }
1023 1042
@@ -1280,6 +1299,12 @@ var stylesController = exports.StylesController = Montage.create(Component, {
1280 } 1299 }
1281 }, 1300 },
1282 1301
1302 isSheetLocked : {
1303 value: function(sheet) {
1304 return !!sheet.ownerNode.dataset['ninjaFileReadOnly'];
1305 }
1306 },
1307
1283 ///// Style Sheet Modified 1308 ///// Style Sheet Modified
1284 ///// Method to call whenever a stylesheet change is made 1309 ///// Method to call whenever a stylesheet change is made
1285 ///// Dispatches an event, and keeps list of dirty style sheets 1310 ///// Dispatches an event, and keeps list of dirty style sheets