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.js299
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>
2Copyright (c) 2012, Motorola Mobility, Inc 2Copyright (c) 2012, Motorola Mobility LLC.
3All Rights Reserved. 3All Rights Reserved.
4BSD License.
5 4
6Redistribution and use in source and binary forms, with or without 5Redistribution and use in source and binary forms, with or without
7modification, are permitted provided that the following conditions are met: 6modification, 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
18THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" 19THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS"
19AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE 20AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE
20IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE 21IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE
21ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT OWNER OR CONTRIBUTORS BE 22ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR CONTRIBUTORS BE
22LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR 23LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
23CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF 24CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
24SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS 25SUBSTITUTE 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
69var stylesController = exports.StylesController = Montage.create(Component, { 70var 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