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.js276
1 files changed, 138 insertions, 138 deletions
diff --git a/js/controllers/styles-controller.js b/js/controllers/styles-controller.js
index 1030acb4..973c3aa1 100755
--- a/js/controllers/styles-controller.js
+++ b/js/controllers/styles-controller.js
@@ -59,26 +59,26 @@ Methods:
59 - Delete stylesheets 59 - Delete stylesheets
60 - Enable stylesheets 60 - Enable stylesheets
61 - Disable stylesheets 61 - Disable stylesheets
62 62
63 use case : set background color 63 use case : set background color
64 - needs to know most specific rule WITH that property 64 - needs to know most specific rule WITH that property
65 - 65 -
66 66
67*/ 67*/
68 68
69var stylesController = exports.StylesController = Montage.create(Component, { 69var stylesController = exports.StylesController = Montage.create(Component, {
70 70
71 ///// Initialize after the active document has been set, and 71 ///// Initialize after the active document has been set, and
72 ///// bind the document to prop w/ setter. The setter calls to find 72 ///// bind the document to prop w/ setter. The setter calls to find
73 ///// the stage and default css files. 73 ///// the stage and default css files.
74 74
75 ///// Active document gets automatically set when the 75 ///// Active document gets automatically set when the
76 ///// document controller changes it 76 ///// document controller changes it
77 _currentDocument : { 77 _currentDocument : {
78 value : null, 78 value : null,
79 enumerable : false 79 enumerable : false
80 }, 80 },
81 81
82 currentDocument : { 82 currentDocument : {
83 get : function() { 83 get : function() {
84 return this._currentDocument; 84 return this._currentDocument;
@@ -97,7 +97,7 @@ var stylesController = exports.StylesController = Montage.create(Component, {
97 97
98 ///// setting document via binding 98 ///// setting document via binding
99 this._currentDocument = document; 99 this._currentDocument = document;
100 100
101 ///// Stage stylesheet should always be found 101 ///// Stage stylesheet should always be found
102 this._stageStylesheet = this.getSheetFromElement(this.CONST.STAGE_SHEET_ID); 102 this._stageStylesheet = this.getSheetFromElement(this.CONST.STAGE_SHEET_ID);
103 // Returns null if sheet not found (as in non-ninja projects) 103 // Returns null if sheet not found (as in non-ninja projects)
@@ -191,29 +191,29 @@ var stylesController = exports.StylesController = Montage.create(Component, {
191 } 191 }
192 }, 192 },
193 /* ----------------- Rule methods ----------------- */ 193 /* ----------------- Rule methods ----------------- */
194 194
195 ///// Add Rule 195 ///// Add Rule
196 ///// Passed in rule will be appended to the default stylesheet 196 ///// Passed in rule will be appended to the default stylesheet
197 ///// The rule can be in the form of a string (one argument), or 197 ///// The rule can be in the form of a string (one argument), or
198 ///// the selector string and declaration string (two arguments), or 198 ///// the selector string and declaration string (two arguments), or
199 ///// the selector string and a declaration object. 199 ///// the selector string and a declaration object.
200 ///// Optionally pass in the rule index (defaults to end of sheet) 200 ///// Optionally pass in the rule index (defaults to end of sheet)
201 201
202 /* 202 /*
203 Signature 1 : 203 Signature 1 :
204 addRule( "#div1", "color:blue; width:100px;", 3) 204 addRule( "#div1", "color:blue; width:100px;", 3)
205 [str] [str] [num] 205 [str] [str] [num]
206 206
207 Signature 2 (w/ styles object literal): 207 Signature 2 (w/ styles object literal):
208 addRule( "#div1", { color:"blue", width:"100px" }, 3) 208 addRule( "#div1", { color:"blue", width:"100px" }, 3)
209 [str] [obj] [num] 209 [str] [obj] [num]
210 210
211 Signature 3 (w/ full rule as one string) : 211 Signature 3 (w/ full rule as one string) :
212 addRule( "#div1 { color:blue; width:100px; }", 3) 212 addRule( "#div1 { color:blue; width:100px; }", 3)
213 [str] [num] 213 [str] [num]
214 214
215 */ 215 */
216 216
217 addRule : { 217 addRule : {
218 value : function(selector, declaration, stylesheet, index) { 218 value : function(selector, declaration, stylesheet, index) {
219 stylesheet = stylesheet || this._defaultStylesheet; 219 stylesheet = stylesheet || this._defaultStylesheet;
@@ -228,20 +228,20 @@ var stylesController = exports.StylesController = Montage.create(Component, {
228 rule; 228 rule;
229 229
230 index = index || (argType === 'number') ? declaration : rulesLength; 230 index = index || (argType === 'number') ? declaration : rulesLength;
231 231
232 if(argType === 'string') { 232 if(argType === 'string') {
233 ruleText += '{' + declaration + '}'; 233 ruleText += '{' + declaration + '}';
234 } else if(argType === 'object') { 234 } else if(argType === 'object') {
235 ruleText += '{' + this.cssFromObject(declaration) + '}'; 235 ruleText += '{' + this.cssFromObject(declaration) + '}';
236 } 236 }
237 237
238 stylesheet.insertRule(ruleText, index); 238 stylesheet.insertRule(ruleText, index);
239 239
240 ///// Invalidate cache because rule dominance is affected 240 ///// Invalidate cache because rule dominance is affected
241 this._clearCache(); 241 this._clearCache();
242 242
243 this.styleSheetModified(stylesheet); 243 this.styleSheetModified(stylesheet);
244 244
245 rule = stylesheet.rules[index]; 245 rule = stylesheet.rules[index];
246 246
247 ///// attach specificity to rule object 247 ///// attach specificity to rule object
@@ -256,7 +256,7 @@ var stylesController = exports.StylesController = Montage.create(Component, {
256 return rule; 256 return rule;
257 } 257 }
258 }, 258 },
259 259
260 ///// Create Override Rule 260 ///// Create Override Rule
261 ///// Takes a given rule and creates a rule with a selector of equal 261 ///// Takes a given rule and creates a rule with a selector of equal
262 ///// or greater specificity, and inserts it after the original rule 262 ///// or greater specificity, and inserts it after the original rule
@@ -264,10 +264,10 @@ var stylesController = exports.StylesController = Montage.create(Component, {
264 ///// and the class will have to be applied to the element in order for 264 ///// and the class will have to be applied to the element in order for
265 ///// the rule to stick 265 ///// the rule to stick
266 ///// Returns an object containing this classname and the rule itself 266 ///// Returns an object containing this classname and the rule itself
267 267
268 createOverrideRule : { 268 createOverrideRule : {
269 value : function(ruleToOverride, element) { 269 value : function(ruleToOverride, element) {
270 270
271 ///// Locally-scoped function to de-clutter variable declarations 271 ///// Locally-scoped function to de-clutter variable declarations
272 function getSelector(el, rule) { 272 function getSelector(el, rule) {
273 return this._getMostSpecificSelectorForElement(el, rule[this.CONST.SPECIFICITY_KEY]).selector; 273 return this._getMostSpecificSelectorForElement(el, rule[this.CONST.SPECIFICITY_KEY]).selector;
@@ -283,12 +283,12 @@ var stylesController = exports.StylesController = Montage.create(Component, {
283 283
284 ///// Create new rule with selector and insert it after the rule we're overriding 284 ///// Create new rule with selector and insert it after the rule we're overriding
285 rule = this.addRule(overrideData.selector + ' { }', this.getRuleIndex(ruleToOverride)+1); 285 rule = this.addRule(overrideData.selector + ' { }', this.getRuleIndex(ruleToOverride)+1);
286 286
287 return { 287 return {
288 className : overrideData.className, 288 className : overrideData.className,
289 rule : rule 289 rule : rule
290 }; 290 };
291 291
292 } 292 }
293 }, 293 },
294 294
@@ -341,18 +341,18 @@ var stylesController = exports.StylesController = Montage.create(Component, {
341 }; 341 };
342 } 342 }
343 }, 343 },
344 344
345 ///// Delete Rule 345 ///// Delete Rule
346 ///// Deletes the passed-in rule from its stylesheet 346 ///// Deletes the passed-in rule from its stylesheet
347 ///// Argument can be the index of the rule, or the rule itself 347 ///// Argument can be the index of the rule, or the rule itself
348 ///// If the index is passed, the sheet must be passed in 348 ///// If the index is passed, the sheet must be passed in
349 349
350 deleteRule : { 350 deleteRule : {
351 value : function(rule, sheet) { 351 value : function(rule, sheet) {
352 var index; 352 var index;
353 353
354 if(typeof rule === 'number') { 354 if(typeof rule === 'number') {
355 ///// 1st arg is the index 355 ///// 1st arg is the index
356 index = rule; 356 index = rule;
357 } else { 357 } else {
358 ///// derive the index of the rule 358 ///// derive the index of the rule
@@ -360,7 +360,7 @@ var stylesController = exports.StylesController = Montage.create(Component, {
360 ///// the sheet is a property of the rule 360 ///// the sheet is a property of the rule
361 sheet = rule.parentStyleSheet; 361 sheet = rule.parentStyleSheet;
362 } 362 }
363 363
364 if(index > -1) { 364 if(index > -1) {
365 sheet.deleteRule(index); 365 sheet.deleteRule(index);
366 } 366 }
@@ -370,22 +370,22 @@ var stylesController = exports.StylesController = Montage.create(Component, {
370 return index; 370 return index;
371 } 371 }
372 }, 372 },
373 373
374 ///// Get Dominant Rule For Style 374 ///// Get Dominant Rule For Style
375 ///// Given an element, this method returns the dominant rule 375 ///// Given an element, this method returns the dominant rule
376 ///// for the particular style property. 376 ///// for the particular style property.
377 ///// Optionally, it returns an override object if no single-target 377 ///// Optionally, it returns an override object if no single-target
378 ///// rule is found. 378 ///// rule is found.
379 ///// An override object consists of a rule to override, an