aboutsummaryrefslogtreecommitdiff
path: root/js/controllers/styles-controller.js
diff options
context:
space:
mode:
Diffstat (limited to 'js/controllers/styles-controller.js')
-rwxr-xr-xjs/controllers/styles-controller.js196
1 files changed, 139 insertions, 57 deletions
diff --git a/js/controllers/styles-controller.js b/js/controllers/styles-controller.js
index 2ff3e235..534f77c7 100755
--- a/js/controllers/styles-controller.js
+++ b/js/controllers/styles-controller.js
@@ -53,11 +53,11 @@ var stylesController = exports.StylesController = Montage.create(Component, {
53 ///// Bind app's activeDocument property to 53 ///// Bind app's activeDocument property to
54 ///// styles controller's _activeDocument property 54 ///// styles controller's _activeDocument property
55 55
56 Object.defineBinding(this, "activeDocument", { 56// Object.defineBinding(this, "activeDocument", {
57 boundObject: this.application.ninja, 57// boundObject: this.application.ninja,
58 boundObjectPropertyPath: "currentDocument", 58// boundObjectPropertyPath: "currentDocument",
59 oneway: true 59// oneway: true
60 }); 60// });
61 } 61 }
62 }, 62 },
63 63
@@ -79,10 +79,14 @@ var stylesController = exports.StylesController = Montage.create(Component, {
79 return this._activeDocument; 79 return this._activeDocument;
80 }, 80 },
81 set : function(document) { 81 set : function(document) {
82
83 ///// If the document is null set default stylesheets to null 82 ///// If the document is null set default stylesheets to null
84 83
85 if(!document) { 84 if(!document || document.currentView === "code") {
85 this._activeDocument = null;
86 this._stageStylesheet = null;
87 this.defaultStylesheet = null;
88 this.userStyleSheets = [];
89 this.clearDirtyStyleSheets();
86 return false; 90 return false;
87 } 91 }
88 92
@@ -94,11 +98,18 @@ var stylesController = exports.StylesController = Montage.create(Component, {
94 // Returns null if sheet not found (as in non-ninja projects) 98 // Returns null if sheet not found (as in non-ninja projects)
95 // Setter will handle null case 99 // Setter will handle null case
96 this.defaultStylesheet = this.getSheetFromElement(this.CONST.DEFAULT_SHEET_ID); 100 this.defaultStylesheet = this.getSheetFromElement(this.CONST.DEFAULT_SHEET_ID);
97 101
98 //debugger; 102 this.userStyleSheets = nj.toArray(document.model.views.design.document.styleSheets).filter(function(sheet) {
103 return sheet !== this._stageStylesheet;
104 }, this);
105
106 NJevent('styleSheetsReady', this);
99 }, 107 },
100 enumerable : false 108 enumerable : false
101 }, 109 },
110 userStyleSheets : {
111 value : null
112 },
102 _stageStylesheet : { 113 _stageStylesheet : {
103 value : null 114 value : null
104 }, 115 },
@@ -113,22 +124,27 @@ var stylesController = exports.StylesController = Montage.create(Component, {
113 if(sheet) { 124 if(sheet) {
114 this._defaultStylesheet = sheet; 125 this._defaultStylesheet = sheet;
115 } else { 126 } else {
116 127 if(sheet === null) {
117 ///// Use the last stylesheet in the document as the default 128 this._defaultStylesheet = null;
118 129 return false;
119 var sheets = this._activeDocument._document.styleSheets,
120 lastIndex = sheets.length-1;
121
122 ///// If the only sheet is the stage stylesheet, this will be true
123 ///// in which case, we want to create a stylesheet to hold the
124 ///// user's style rules
125
126 if(sheets[lastIndex] === this._stageStyleSheet) {
127 this._defaultStylesheet = this.createStylesheet('nj-default');
128 } else {
129 this._defaultStylesheet = sheets[lastIndex];
130 } 130 }
131 //check that the document has a design view
132 else if(this._activeDocument.model && this._activeDocument.model.views && this._activeDocument.model.views.design){
133 ///// Use the last stylesheet in the document as the default
131 134
135 var sheets = this._activeDocument.model.views.design.document.styleSheets,
136 lastIndex = sheets.length-1;
137
138 ///// If the only sheet is the stage stylesheet, this will be true
139 ///// in which case, we want to create a stylesheet to hold the
140 ///// user's style rules
141
142 if(sheets[lastIndex] === this._stageStyleSheet) {
143 this._defaultStylesheet = this.createStylesheet('nj-default');
144 } else {
145 this._defaultStylesheet = sheets[lastIndex];
146 }
147 }
132 } 148 }
133 } 149 }
134 }, 150 },
@@ -159,13 +175,17 @@ var stylesController = exports.StylesController = Montage.create(Component, {
159 175
160 addRule : { 176 addRule : {
161 value : function(selector, declaration, stylesheet, index) { 177 value : function(selector, declaration, stylesheet, index) {
162 //console.log("Add rule"); 178 stylesheet = stylesheet || this._defaultStylesheet;
179
180 if(stylesheet === null) {
181 stylesheet = this.defaultStylesheet = this.createStylesheet();
182 }
183
163 var rulesLength = this._defaultStylesheet.rules.length, 184 var rulesLength = this._defaultStylesheet.rules.length,
164 argType = (typeof declaration), 185 argType = (typeof declaration),
165 ruleText = selector, 186 ruleText = selector,
166 stylesheet = stylesheet || this._defaultStylesheet, 187 rule;
167 property, rule; 188
168
169 index = index || (argType === 'number') ? declaration : rulesLength; 189 index = index || (argType === 'number') ? declaration : rulesLength;
170 190
171 if(argType === 'string') { 191 if(argType === 'string') {
@@ -183,6 +203,7 @@ var stylesController = exports.StylesController = Montage.create(Component, {
183 ///// attach specificity to rule object 203 ///// attach specificity to rule object
184 ///// if rule is css keyframes, return rule and don't attach specificity 204 ///// if rule is css keyframes, return rule and don't attach specificity
185 if (rule instanceof WebKitCSSKeyframesRule) { 205 if (rule instanceof WebKitCSSKeyframesRule) {
206
186 return rule; 207 return rule;
187 } 208 }
188 rule[this.CONST.SPECIFICITY_KEY] = this.getSpecificity(rule.selectorText); 209 rule[this.CONST.SPECIFICITY_KEY] = this.getSpecificity(rule.selectorText);
@@ -209,10 +230,12 @@ var stylesController = exports.StylesController = Montage.create(Component, {
209 } 230 }
210 231
211 var selectorToOverride = getSelector.bind(this)(element, ruleToOverride), 232 var selectorToOverride = getSelector.bind(this)(element, ruleToOverride),
212 overrideData, rule; 233 overrideData, rule, isRuleLocked;
234
235 isRuleLocked = this.isSheetLocked(ruleToOverride.parentStyleSheet);
213 236
214 ///// Get the overriding selector and className 237 ///// Get the overriding selector and className
215 overrideData = this.createOverrideSelector(selectorToOverride, element.nodeName); 238 overrideData = this.createOverrideSelector(selectorToOverride, element.nodeName, isRuleLocked);
216 239
217 ///// Create new rule with selector and insert it after the rule we're overriding 240 ///// Create new rule with selector and insert it after the rule we're overriding
218 rule = this.addRule(overrideData.selector + ' { }', this.getRuleIndex(ruleToOverride)+1); 241 rule = this.addRule(overrideData.selector + ' { }', this.getRuleIndex(ruleToOverride)+1);
@@ -226,7 +249,7 @@ var stylesController = exports.StylesController = Montage.create(Component, {
226 }, 249 },
227 250
228 createOverrideSelector : { 251 createOverrideSelector : {
229 value: function(selectorToOverride, classPrefix, className) { 252 value: function(selectorToOverride, classPrefix, increaseSpecificity, className) {
230 var tokens = selectorToOverride.split(/\s/), 253 var tokens = selectorToOverride.split(/\s/),
231 newClass = className || this.generateClassName(classPrefix, true), 254 newClass = className || this.generateClassName(classPrefix, true),
232 lastToken, pseudoSplit, base, pseudo, newToken, newSelector; 255 lastToken, pseudoSplit, base, pseudo, newToken, newSelector;
@@ -247,10 +270,19 @@ var stylesController = exports.StylesController = Montage.create(Component, {
247 if(base.indexOf('#') !== -1) { 270 if(base.indexOf('#') !== -1) {
248 newToken = base + '.' + newClass + pseudo; 271 newToken = base + '.' + newClass + pseudo;
249 } else { 272 } else {
250 ///// Replace last class or attribute selector 273 if(increaseSpecificity) {
251 ///// Get everything right before the last class or attribute selector 274 ///// Increases specificity by one class selector
252 ///// to support compound selector values: (i.e. .firstClass.secondClass) 275 ///// We'll do a direct append to the base class
253 newToken = base.substring(0, Math.max(base.lastIndexOf('.'), base.lastIndexOf('['))); 276 ///// if we want to increase the specificity
277 newToken = base;
278 } else {
279 ///// Maintains original specificity
280 ///// Replace last class or attribute selector
281 ///// Get everything right before the last class or attribute selector
282 ///// to support compound selector values: (i.e. .firstClass.secondClass)
283 newToken = base.substring(0, Math.max(base.lastIndexOf('.'), base.lastIndexOf('[')));
284 }
285
254 ///// Append the generated class 286 ///// Append the generated class
255 newToken += '.' + newClass + pseudo; 287 newToken += '.' + newClass + pseudo;
256 } 288 }
@@ -795,7 +827,7 @@ var stylesController = exports.StylesController = Montage.create(Component, {
795 ///// method to apply/test the new value 827 ///// method to apply/test the new value
796 dec.setProperty(property, value, priority); 828 dec.setProperty(property, value, priority);
797 829
798 if(rule.parentStyleSheet) { 830 if(rule.type !== 'inline' && rule.parentStyleSheet) {
799 this.styleSheetModified(rule.parentStyleSheet); 831 this.styleSheetModified(rule.parentStyleSheet);
800 } 832 }
801 833
@@ -855,7 +887,7 @@ var stylesController = exports.StylesController = Montage.create(Component, {
855 887
856 getAnimationRuleWithName : { 888 getAnimationRuleWithName : {
857 value: function(name, document) { 889 value: function(name, document) {
858 var doc = document || this._activeDocument._document, 890 var doc = document || this._activeDocument.model.views.design.document,
859 animRules = this.getDocumentAnimationRules(doc), 891 animRules = this.getDocumentAnimationRules(doc),
860 rule, i; 892 rule, i;
861 893
@@ -877,7 +909,7 @@ var stylesController = exports.StylesController = Montage.create(Component, {
877 909