diff options
Diffstat (limited to 'js/controllers/styles-controller.js')
-rwxr-xr-x | js/controllers/styles-controller.js | 299 |
1 files changed, 150 insertions, 149 deletions
diff --git a/js/controllers/styles-controller.js b/js/controllers/styles-controller.js index 1030acb4..89a389a4 100755 --- a/js/controllers/styles-controller.js +++ b/js/controllers/styles-controller.js | |||
@@ -1,24 +1,25 @@ | |||
1 | /* <copyright> | 1 | /* <copyright> |
2 | Copyright (c) 2012, Motorola Mobility, Inc | 2 | Copyright (c) 2012, Motorola Mobility LLC. |
3 | All Rights Reserved. | 3 | All Rights Reserved. |
4 | BSD License. | ||
5 | 4 | ||
6 | Redistribution and use in source and binary forms, with or without | 5 | Redistribution and use in source and binary forms, with or without |
7 | modification, are permitted provided that the following conditions are met: | 6 | modification, are permitted provided that the following conditions are met: |
8 | 7 | ||
9 | - Redistributions of source code must retain the above copyright notice, | 8 | * Redistributions of source code must retain the above copyright notice, |
10 | this list of conditions and the following disclaimer. | 9 | this list of conditions and the following disclaimer. |
11 | - Redistributions in binary form must reproduce the above copyright | 10 | |
12 | notice, this list of conditions and the following disclaimer in the | 11 | * Redistributions in binary form must reproduce the above copyright notice, |
13 | documentation and/or other materials provided with the distribution. | 12 | this list of conditions and the following disclaimer in the documentation |
14 | - Neither the name of Motorola Mobility nor the names of its contributors | 13 | and/or other materials provided with the distribution. |
15 | may be used to endorse or promote products derived from this software | 14 | |
16 | without specific prior written permission. | 15 | * Neither the name of Motorola Mobility LLC nor the names of its |
16 | contributors may be used to endorse or promote products derived from this | ||
17 | software without specific prior written permission. | ||
17 | 18 | ||
18 | THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" | 19 | THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" |
19 | AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE | 20 | AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE |
20 | IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE | 21 | IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE |
21 | ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT OWNER OR CONTRIBUTORS BE | 22 | ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR CONTRIBUTORS BE |
22 | LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR | 23 | LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR |
23 | CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF | 24 | CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF |
24 | SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS | 25 | SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS |
@@ -59,26 +60,26 @@ Methods: | |||
59 | - Delete stylesheets | 60 | - Delete stylesheets |
60 | - Enable stylesheets | 61 | - Enable stylesheets |
61 | - Disable stylesheets | 62 | - Disable stylesheets |
62 | 63 | ||
63 | use case : set background color | 64 | use case : set background color |
64 | - needs to know most specific rule WITH that property | 65 | - needs to know most specific rule WITH that property |
65 | - | 66 | - |
66 | 67 | ||
67 | */ | 68 | */ |
68 | 69 | ||
69 | var stylesController = exports.StylesController = Montage.create(Component, { | 70 | var stylesController = exports.StylesController = Montage.create(Component, { |
70 | 71 | ||
71 | ///// Initialize after the active document has been set, and | 72 | ///// Initialize after the active document has been set, and |
72 | ///// bind the document to prop w/ setter. The setter calls to find | 73 | ///// bind the document to prop w/ setter. The setter calls to find |
73 | ///// the stage and default css files. | 74 | ///// the stage and default css files. |
74 | 75 | ||
75 | ///// Active document gets automatically set when the | 76 | ///// Active document gets automatically set when the |
76 | ///// document controller changes it | 77 | ///// document controller changes it |
77 | _currentDocument : { | 78 | _currentDocument : { |
78 | value : null, | 79 | value : null, |
79 | enumerable : false | 80 | enumerable : false |
80 | }, | 81 | }, |
81 | 82 | ||
82 | currentDocument : { | 83 | currentDocument : { |
83 | get : function() { | 84 | get : function() { |
84 | return this._currentDocument; | 85 | return this._currentDocument; |
@@ -97,7 +98,7 @@ var stylesController = exports.StylesController = Montage.create(Component, { | |||
97 | 98 | ||
98 | ///// setting document via binding | 99 | ///// setting document via binding |
99 | this._currentDocument = document; | 100 | this._currentDocument = document; |
100 | 101 | ||
101 | ///// Stage stylesheet should always be found | 102 | ///// Stage stylesheet should always be found |
102 | this._stageStylesheet = this.getSheetFromElement(this.CONST.STAGE_SHEET_ID); | 103 | this._stageStylesheet = this.getSheetFromElement(this.CONST.STAGE_SHEET_ID); |
103 | // Returns null if sheet not found (as in non-ninja projects) | 104 | // Returns null if sheet not found (as in non-ninja projects) |
@@ -191,29 +192,29 @@ var stylesController = exports.StylesController = Montage.create(Component, { | |||
191 | } | 192 | } |
192 | }, | 193 | }, |
193 | /* ----------------- Rule methods ----------------- */ | 194 | /* ----------------- Rule methods ----------------- */ |
194 | 195 | ||
195 | ///// Add Rule | 196 | ///// Add Rule |
196 | ///// Passed in rule will be appended to the default stylesheet | 197 | ///// Passed in rule will be appended to the default stylesheet |
197 | ///// The rule can be in the form of a string (one argument), or | 198 | ///// The rule can be in the form of a string (one argument), or |
198 | ///// the selector string and declaration string (two arguments), or | 199 | ///// the selector string and declaration string (two arguments), or |
199 | ///// the selector string and a declaration object. | 200 | ///// the selector string and a declaration object. |
200 | ///// Optionally pass in the rule index (defaults to end of sheet) | 201 | ///// Optionally pass in the rule index (defaults to end of sheet) |
201 | 202 | ||
202 | /* | 203 | /* |
203 | Signature 1 : | 204 | Signature 1 : |
204 | addRule( "#div1", "color:blue; width:100px;", 3) | 205 | addRule( "#div1", "color:blue; width:100px;", 3) |
205 | [str] [str] [num] | 206 | [str] [str] [num] |
206 | 207 | ||
207 | Signature 2 (w/ styles object literal): | 208 | Signature 2 (w/ styles object literal): |
208 | addRule( "#div1", { color:"blue", width:"100px" }, 3) | 209 | addRule( "#div1", { color:"blue", width:"100px" }, 3) |
209 | [str] [obj] [num] | 210 | [str] [obj] [num] |
210 | 211 | ||
211 | Signature 3 (w/ full rule as one string) : | 212 | Signature 3 (w/ full rule as one string) : |
212 | addRule( "#div1 { color:blue; width:100px; }", 3) | 213 | addRule( "#div1 { color:blue; width:100px; }", 3) |
213 | [str] [num] | 214 | [str] [num] |
214 | 215 | ||
215 | */ | 216 | */ |
216 | 217 | ||
217 | addRule : { | 218 | addRule : { |
218 | value : function(selector, declaration, stylesheet, index) { | 219 | value : function(selector, declaration, stylesheet, index) { |
219 | stylesheet = stylesheet || this._defaultStylesheet; | 220 | stylesheet = stylesheet || this._defaultStylesheet; |
@@ -228,20 +229,20 @@ var stylesController = exports.StylesController = Montage.create(Component, { | |||
228 | rule; | 229 | rule; |
229 | 230 | ||
230 | index = index || (argType === 'number') ? declaration : rulesLength; | 231 | index = index || (argType === 'number') ? declaration : rulesLength; |
231 | 232 | ||
232 | if(argType === 'string') { | 233 | if(argType === 'string') { |
233 | ruleText += '{' + declaration + '}'; | 234 | ruleText += '{' + declaration + '}'; |
234 | } else if(argType === 'object') { | 235 | } else if(argType === 'object') { |
235 | ruleText += '{' + this.cssFromObject(declaration) + '}'; | 236 | ruleText += '{' + this.cssFromObject(declaration) + '}'; |
236 | } | 237 | } |
237 | 238 | ||
238 | stylesheet.insertRule(ruleText, index); | 239 | stylesheet.insertRule(ruleText, index); |
239 | 240 | ||
240 | ///// Invalidate cache because rule dominance is affected | 241 | ///// Invalidate cache because rule dominance is affected |
241 | this._clearCache(); | 242 | this._clearCache(); |
242 | 243 | ||
243 | this.styleSheetModified(stylesheet); | 244 | this.styleSheetModified(stylesheet); |
244 | 245 | ||
245 | rule = stylesheet.rules[index]; | 246 | rule = stylesheet.rules[index]; |
246 | 247 | ||
247 | ///// attach specificity to rule object | 248 | ///// attach specificity to rule object |
@@ -256,7 +257,7 @@ var stylesController = exports.StylesController = Montage.create(Component, { | |||
256 | return rule; | 257 | return rule; |
257 | } | 258 | } |
258 | }, | 259 | }, |
259 | 260 | ||
260 | ///// Create Override Rule | 261 | ///// Create Override Rule |
261 | ///// Takes a given rule and creates a rule with a selector of equal | 262 | ///// Takes a given rule and creates a rule with a selector of equal |
262 | ///// or greater specificity, and inserts it after the original rule | 263 | ///// or greater specificity, and inserts it after the original rule |
@@ -264,10 +265,10 @@ var stylesController = exports.StylesController = Montage.create(Component, { | |||
264 | ///// and the class will have to be applied to the element in order for | 265 | ///// and the class will have to be applied to the element in order for |
265 | ///// the rule to stick | 266 | ///// the rule to stick |
266 | ///// Returns an object containing this classname and the rule itself | 267 | ///// Returns an object containing this classname and the rule itself |
267 | 268 | ||
268 | createOverrideRule : { | 269 | createOverrideRule : { |
269 | value : function(ruleToOverride, element) { | 270 | value : function(ruleToOverride, element) { |
270 | 271 | ||
271 | ///// Locally-scoped function to de-clutter variable declarations | 272 | ///// Locally-scoped function to de-clutter variable declarations |
272 | function getSelector(el, rule) { | 273 | function getSelector(el, rule) { |
273 | return this._getMostSpecificSelectorForElement(el, rule[this.CONST.SPECIFICITY_KEY]).selector; | 274 | return this._getMostSpecificSelectorForElement(el, rule[this.CONST.SPECIFICITY_KEY]).selector; |
@@ -283,12 +284,12 @@ var stylesController = exports.StylesController = Montage.create(Component, { | |||
283 | 284 | ||
284 | ///// Create new rule with selector and insert it after the rule we're overriding | 285 | ///// Create new rule with selector and insert it after the rule we're overriding |
285 | rule = this.addRule(overrideData.selector + ' { }', this.getRuleIndex(ruleToOverride)+1); | 286 | rule = this.addRule(overrideData.selector + ' { }', this.getRuleIndex(ruleToOverride)+1); |
286 | 287 | ||
287 | return { | 288 | return { |
288 | className : overrideData.className, | 289 | className : overrideData.className, |
289 | rule : rule | 290 | rule : rule |
290 | }; | 291 | }; |
291 | 292 | ||
292 | } | 293 | } |
293 | }, | 294 | }, |
294 | 295 | ||
@@ -341,18 +342,18 @@ var stylesController = exports.StylesController = Montage.create(Component, { | |||
341 | }; | 342 | }; |
342 | } | 343 | } |
343 | }, | 344 | }, |
344 | 345 | ||
345 | ///// Delete Rule | 346 | ///// Delete Rule |
346 | ///// Deletes the passed-in rule from its stylesheet | 347 | ///// Deletes the passed-in rule from its stylesheet |
347 | ///// Argument can be the index of the rule, or th |