Merge pull request #251 from ericguzman/CSSPanelUpdates

Css panel updates

1 files changed, 116 insertions, 35 deletions

diff --git a/js/controllers/styles-controller.js b/js/controllers/styles-controller.js
index 3a942364..dcbe0eaf 100755
--- a/js/controllers/styles-controller.js
+++ b/js/controllers/styles-controller.js
@@ -82,6 +82,11 @@ var stylesController = exports.StylesController = Montage.create(Component, {
             ///// If the document is null set default stylesheets to null
 
             if(!document) {
+                this._activeDocument   = null;
+                this._stageStylesheet  = null;
+                this.defaultStylesheet = null;
+                this.userStyleSheets   = [];
+                this.clearDirtyStyleSheets();
                 return false;
             }
 
@@ -93,11 +98,18 @@ var stylesController = exports.StylesController = Montage.create(Component, {
             // Returns null if sheet not found (as in non-ninja projects)
             // Setter will handle null case
             this.defaultStylesheet = this.getSheetFromElement(this.CONST.DEFAULT_SHEET_ID);
-                        
-            //debugger;
+
+            this.userStyleSheets = nj.toArray(document._document.styleSheets).filter(function(sheet) {
+                return sheet !== this._stageStylesheet;
+            }, this);
+
+            NJevent('styleSheetsReady', this);
         },
         enumerable : false
     },
+    userStyleSheets : {
+        value : null
+    },
     _stageStylesheet : {
         value : null
     },
@@ -111,23 +123,28 @@ var stylesController = exports.StylesController = Montage.create(Component, {
         set : function(sheet) {
             if(sheet) {
                 this._defaultStylesheet = sheet;
-            } else if(this._activeDocument.model && this._activeDocument.model.views && this._activeDocument.model.views.design){//check that the document has a design view
-                
-                ///// Use the last stylesheet in the document as the default
-                
-                var sheets = this._activeDocument._document.styleSheets,
-                    lastIndex = sheets.length-1;
-                
-                ///// If the only sheet is the stage stylesheet, this will be true
-                ///// in which case, we want to create a stylesheet to hold the 
-                ///// user's style rules
-                
-                if(sheets[lastIndex] === this._stageStyleSheet) {
-                    this._defaultStylesheet = this.createStylesheet('nj-default');
-                } else {
-                    this._defaultStylesheet = sheets[lastIndex];
+            } else {
+                if(sheet === null) {
+                    this._defaultStylesheet = null;
+                    return false;
                 }
+                //check that the document has a design view
+                else if(this._activeDocument.model && this._activeDocument.model.views && this._activeDocument.model.views.design){
+                    ///// Use the last stylesheet in the document as the default
+
+                    var sheets = this._activeDocument._document.styleSheets,
+                        lastIndex = sheets.length-1;
 
+                    ///// If the only sheet is the stage stylesheet, this will be true
+                    ///// in which case, we want to create a stylesheet to hold the
+                    ///// user's style rules
+
+                    if(sheets[lastIndex] === this._stageStyleSheet) {
+                        this._defaultStylesheet = this.createStylesheet('nj-default');
+                    } else {
+                        this._defaultStylesheet = sheets[lastIndex];
+                    }
+                }
             }
         }
     },
@@ -158,13 +175,17 @@ var stylesController = exports.StylesController = Montage.create(Component, {
     
     addRule : {
         value : function(selector, declaration, stylesheet, index) {
-            //console.log("Add rule");
+            stylesheet = stylesheet || this._defaultStylesheet;
+
+            if(stylesheet === null) {
+                stylesheet = this.defaultStylesheet = this.createStylesheet();
+            }
+
             var rulesLength = this._defaultStylesheet.rules.length,
                 argType     = (typeof declaration),
                 ruleText    = selector,
-                stylesheet  = stylesheet || this._defaultStylesheet,
-                property, rule;
-            
+                rule;
+
             index = index || (argType === 'number') ? declaration : rulesLength;
             
             if(argType === 'string') {
@@ -182,6 +203,7 @@ var stylesController = exports.StylesController = Montage.create(Component, {
             ///// attach specificity to rule object
             ///// if rule is css keyframes, return rule and don't attach specificity
             if (rule instanceof WebKitCSSKeyframesRule) {
+
                 return rule;
             }
             rule[this.CONST.SPECIFICITY_KEY] = this.getSpecificity(rule.selectorText);
@@ -208,10 +230,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);
@@ -225,7 +249,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;
@@ -246,10 +270,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;
             }
@@ -794,7 +827,7 @@ var stylesController = exports.StylesController = Montage.create(Component, {
             ///// method to apply/test the new value
             dec.setProperty(property, value, priority);
 
-            if(rule.parentStyleSheet) {
+            if(rule.type !== 'inline' && rule.parentStyleSheet) {
                 this.styleSheetModified(rule.parentStyleSheet);
             }
 
@@ -970,12 +1003,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
@@ -983,7 +1017,7 @@ var stylesController = exports.StylesController = Montage.create(Component, {
                 dominantRule = this.getDominantRuleForElement(element, property, true, isStageElement);
 
             }
-               
+