1 files changed, 205 insertions, 27 deletions

diff --git a/js/controllers/styles-controller.js b/js/controllers/styles-controller.js
index afd298c9..011caec5 100644
--- a/js/controllers/styles-controller.js
+++ b/js/controllers/styles-controller.js
@@ -171,10 +171,12 @@ var stylesController = exports.StylesController = Montage.create(Component, {
             if(argType === 'string') {
                 ruleText += '{' + declaration + '}';
             } else if(argType === 'object') {
-                ruleText += '{' + nj.cssFromObject(declaration) + '}';
+                ruleText += '{' + this.cssFromObject(declaration) + '}';
             }
             
             stylesheet.insertRule(ruleText, index);
+
+            this.styleSheetModified(stylesheet);
             
             rule = stylesheet.rules[index];
             
@@ -199,25 +201,42 @@ var stylesController = exports.StylesController = Montage.create(Component, {
             
             ///// Locally-scoped function to de-clutter variable declarations
             function getSelector(el, rule) {
-
                 return this._getMostSpecificSelectorForElement(el, rule[this.CONST.SPECIFICITY_KEY]).selector;
             }
 
             var selectorToOverride = getSelector.bind(this)(element, ruleToOverride),
-                tokens             = selectorToOverride.split(/\s/),
-                newClass           = this.generateClassName(element.nodeName),
-                lastToken, pseudoSplit, base, pseudo, newToken, newSelector, rule;
+                overrideData, rule;
+
+            ///// Get the overriding selector and className
+            overrideData = this.createOverrideSelector(selectorToOverride, element.nodeName);
+
+            ///// Create new rule with selector and insert it after the rule we're overriding
+            rule = this.addRule(overrideData.selector + ' { }', this.getRuleIndex(ruleToOverride)+1);
+            
+            return {
+                className : overrideData.className,
+                rule      : rule
+            };
+            
+        }
+    },
+
+    createOverrideSelector : {
+        value: function(selectorToOverride, classPrefix, className) {
+            var tokens = selectorToOverride.split(/\s/),
+                newClass = className || this.generateClassName(classPrefix, true),
+                lastToken, pseudoSplit, base, pseudo, newToken, newSelector;
 
             ///// Creating an overriding selector by replacing the last
             ///// class, attribute or type selector in passed-in rule's selector
-            
+
             ///// Grab the last token
             lastToken   = tokens[tokens.length-1];
             pseudoSplit = lastToken.split(':');
             ///// The last token can have pseudo class. Let's preserve it
             base   = pseudoSplit[0];
             pseudo = (pseudoSplit[1]) ? ':'+pseudoSplit[1] : '';
-            
+
             ///// Now, all we want to do is replace the last token with a
             ///// generated class name, except if the last token is an ID selector,
             ///// in which case we append the generated class name to the ID selector
@@ -231,18 +250,15 @@ var stylesController = exports.StylesController = Montage.create(Component, {
                 ///// Append the generated class
                 newToken += '.' + newClass + pseudo;
             }
-            
+
             ///// Now we can build the new selector by replacing the last token
             tokens[tokens.length-1] = newToken;
             newSelector = tokens.join(' ');
-            
-            rule = this.addRule(newSelector + ' { }', this.getRuleIndex(ruleToOverride)+1);
-            
+
             return {
                 className : newClass,
-                rule      : rule
+                selector  : newSelector
             };
-            
         }
     },
     
@@ -269,6 +285,8 @@ var stylesController = exports.StylesController = Montage.create(Component, {
                 sheet.deleteRule(index);
             }
 
+            this.styleSheetModified(sheet);
+
             return index;
         }
     },
@@ -370,7 +388,7 @@ var stylesController = exports.StylesController = Montage.create(Component, {
     ///// from which an overriding rule can be created.
 
     getDominantRuleForGroup : {
-        value : function(elements, property) {
+        value : function(elements, property, forceOverride) {
             var selectorsToOverride = [],
                 commonRules, dominantRules, useImportant;
 
@@ -517,6 +535,9 @@ var stylesController = exports.StylesController = Montage.create(Component, {
         value : function(rule, selector) {
             rule.selectorText = selector;
             rule[this.CONST.SPECIFICITY_KEY] = this.getSpecificity(selector);
+
+            this.styleSheetModified(rule.parentStyleSheet);
+
             return rule;
         }
     },
@@ -639,7 +660,7 @@ var stylesController = exports.StylesController = Montage.create(Component, {
     },
     
     ///// Get Most Specific Selector For Element
-    ///// Given a selector+specificty array, find the most specific
+    ///// Given a selector+specificity array, find the most specific
     ///// selector for the passed-in element
     
     _getMostSpecificSelectorForElement : {
@@ -721,7 +742,11 @@ var stylesController = exports.StylesController = Montage.create(Component, {
     ///// Calculate specificity
     ///// Returns the specificity value of passed-in selector
     ///// WARNING: Do not pass in grouped selectors!
-    ///// Helpful for determining precedence of style rules   
+    ///// Helpful for determining precedence of style rules
+    ///// Calculation javascript code courtesy of Graham Bradley:
+    ///// http://gbradley.com/2009/10/02/css-specificity-in-javascript
+    ///// Used with author's permission
+
     calculateSpecificity : {
         value : function(selector) {
             var s   = selector.replace(/\([^\)]+\)/,''),
@@ -762,6 +787,8 @@ var stylesController = exports.StylesController = Montage.create(Component, {
             ///// method to apply/test the new value
             dec.setProperty(property, value, priority);
 
+            this.styleSheetModified(rule.parentStyleSheet);
+
             ///// Return browser value for value we just set
             return dec.getPropertyValue(property);
         }
@@ -786,14 +813,44 @@ var stylesController = exports.StylesController = Montage.create(Component, {
             return browserValues;
         }
     },
-    
+
+    ///// Set Keyframe Style
+    ///// For a given CSSKeyframesRule, we may add a style to the keyframe at
+    ///// given index.
+
+    setKeyframeStyle : {
+        value : function(rule, keyframeIndex, property, value, useImportant) {
+            return this.setStyle(rule.cssRules[keyframeIndex], property, value, useImportant);
+        }
+    },
+
+    ///// Set Keyframe Styles
+    ///// For a given CSSKeyframesRule, we may add styles to the keyframe at
+    ///// given index.
+
+    setKeyframeStyle : {
+        value : function(rule, keyframeIndex, property, value, useImportant) {
+            return this.setStyles(rule.cssRules[keyframeIndex], property, value, useImportant);
+        }
+    },
+
+    insertKeyframe : {
+        value : function() {
+
+        }
+    },
+
+
     ///// Delete style
     ///// Removes the property from the style declaration/rule
     ///// Returns the rule
     
     deleteStyle : {
         value : function(rule, property) {
+            this.styleSheetModified(rule.parentStyleSheet);
+
             rule.style.removeProperty(property);
+
             return rule;
         }
     },
@@ -922,6 +979,43 @@ var stylesController = exports.StylesController = Montage.create(Component, {