diff options
Diffstat (limited to 'js/controllers/styles-controller.js')
-rwxr-xr-x | js/controllers/styles-controller.js | 276 |
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 | ||
69 | var stylesController = exports.StylesController = Montage.create(Component, { | 69 | var 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 |