From 04343eda8c2f870b0da55cfdc8003c99fe1cc4de Mon Sep 17 00:00:00 2001
From: Kris Kowal
Date: Fri, 6 Jul 2012 11:53:10 -0700
Subject: Remove trailing spaces
---
js/controllers/styles-controller.js | 276 ++++++++++++++++++------------------
1 file changed, 138 insertions(+), 138 deletions(-)
(limited to 'js/controllers/styles-controller.js')
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:
- Delete stylesheets
- Enable stylesheets
- Disable stylesheets
-
+
use case : set background color
- needs to know most specific rule WITH that property
- -
+ -
*/
var stylesController = exports.StylesController = Montage.create(Component, {
-
+
///// Initialize after the active document has been set, and
///// bind the document to prop w/ setter. The setter calls to find
///// the stage and default css files.
- ///// Active document gets automatically set when the
+ ///// Active document gets automatically set when the
///// document controller changes it
_currentDocument : {
value : null,
enumerable : false
},
-
+
currentDocument : {
get : function() {
return this._currentDocument;
@@ -97,7 +97,7 @@ var stylesController = exports.StylesController = Montage.create(Component, {
///// setting document via binding
this._currentDocument = document;
-
+
///// Stage stylesheet should always be found
this._stageStylesheet = this.getSheetFromElement(this.CONST.STAGE_SHEET_ID);
// Returns null if sheet not found (as in non-ninja projects)
@@ -191,29 +191,29 @@ var stylesController = exports.StylesController = Montage.create(Component, {
}
},
/* ----------------- Rule methods ----------------- */
-
+
///// Add Rule
///// Passed in rule will be appended to the default stylesheet
///// The rule can be in the form of a string (one argument), or
///// the selector string and declaration string (two arguments), or
///// the selector string and a declaration object.
///// Optionally pass in the rule index (defaults to end of sheet)
-
+
/*
- Signature 1 :
+ Signature 1 :
addRule( "#div1", "color:blue; width:100px;", 3)
[str] [str] [num]
-
- Signature 2 (w/ styles object literal):
+
+ Signature 2 (w/ styles object literal):
addRule( "#div1", { color:"blue", width:"100px" }, 3)
[str] [obj] [num]
-
- Signature 3 (w/ full rule as one string) :
+
+ Signature 3 (w/ full rule as one string) :
addRule( "#div1 { color:blue; width:100px; }", 3)
[str] [num]
-
+
*/
-
+
addRule : {
value : function(selector, declaration, stylesheet, index) {
stylesheet = stylesheet || this._defaultStylesheet;
@@ -228,20 +228,20 @@ var stylesController = exports.StylesController = Montage.create(Component, {
rule;
index = index || (argType === 'number') ? declaration : rulesLength;
-
+
if(argType === 'string') {
ruleText += '{' + declaration + '}';
} else if(argType === 'object') {
ruleText += '{' + this.cssFromObject(declaration) + '}';
}
-
+
stylesheet.insertRule(ruleText, index);
///// Invalidate cache because rule dominance is affected
this._clearCache();
this.styleSheetModified(stylesheet);
-
+
rule = stylesheet.rules[index];
///// attach specificity to rule object
@@ -256,7 +256,7 @@ var stylesController = exports.StylesController = Montage.create(Component, {
return rule;
}
},
-
+
///// Create Override Rule
///// Takes a given rule and creates a rule with a selector of equal
///// or greater specificity, and inserts it after the original rule
@@ -264,10 +264,10 @@ var stylesController = exports.StylesController = Montage.create(Component, {
///// and the class will have to be applied to the element in order for
///// the rule to stick
///// Returns an object containing this classname and the rule itself
-
+
createOverrideRule : {
value : function(ruleToOverride, element) {
-
+
///// Locally-scoped function to de-clutter variable declarations
function getSelector(el, rule) {
return this._getMostSpecificSelectorForElement(el, rule[this.CONST.SPECIFICITY_KEY]).selector;
@@ -283,12 +283,12 @@ var stylesController = exports.StylesController = Montage.create(Component, {
///// Create new rule with selector and insert it after the rule we're overriding
rule = this.addRule(overrideData.selector + ' { }', this.getRuleIndex(ruleToOverride)+1);
-
+
return {
className : overrideData.className,
rule : rule
};
-
+
}
},
@@ -341,18 +341,18 @@ var stylesController = exports.StylesController = Montage.create(Component, {
};
}
},
-
+
///// Delete Rule
///// Deletes the passed-in rule from its stylesheet
///// Argument can be the index of the rule, or the rule itself
///// If the index is passed, the sheet must be passed in
-
+
deleteRule : {
value : function(rule, sheet) {
var index;
-
+
if(typeof rule === 'number') {
- ///// 1st arg is the index
+ ///// 1st arg is the index
index = rule;
} else {
///// derive the index of the rule
@@ -360,7 +360,7 @@ var stylesController = exports.StylesController = Montage.create(Component, {
///// the sheet is a property of the rule
sheet = rule.parentStyleSheet;
}
-
+
if(index > -1) {
sheet.deleteRule(index);
}
@@ -370,22 +370,22 @@ var stylesController = exports.StylesController = Montage.create(Component, {
return index;
}
},
-
+
///// Get Dominant Rule For Style
- ///// Given an element, this method returns the dominant rule
+ ///// Given an element, this method returns the dominant rule
///// for the particular style property.
///// Optionally, it returns an override object if no single-target
///// rule is found.
///// An override object consists of a rule to override, and a
///// flag for using !important or not
-
+
getDominantRuleForElement : {
value : function(element, property, returnOverrideObject, useStageStyleSheet) {
var matchedRules = this.getMatchingRules(element, true, useStageStyleSheet),
doc = element.ownerDocument,
useImportant = false,
inLineStyleRule, rulesWithProperty, importantRules, dominantRule;
-
+
///// First, since an element's style attribute is a CSSStyleDeclaration
///// and not a CSSStyleRule, we want to create an imitation rule object
///// to act like any returned by getMatchedCSSRules
@@ -417,7 +417,7 @@ var stylesController = exports.StylesController = Montage.create(Component, {
- Get
2) No rules with the property (i.e., no chance of property collision)
- use the original rule list to find the most specific, single-target rule
- - start with the highest specificity to minimize calls to querySelectorAll()
+ - start with the highest specificity to minimize calls to querySelectorAll()
- if there is no single-target rule, create a new rule to apply this style
*/
@@ -439,7 +439,7 @@ var stylesController = exports.StylesController = Montage.create(Component, {
//dominantRule = this._getFirstSingleTargetRule(rulesWithProperty, doc);
dominantRule = rulesWithProperty[0];
}
-
+
} else { // no rules with property
///// In this case, we don't want to use the inline style
///// Important flag is irrelevant because the style property isn't defined
@@ -457,7 +457,7 @@ var stylesController = exports.StylesController = Montage.create(Component, {
singleTargetBackup : this._getFirstSingleTargetRule(matchedRules.slice(1), doc)
};
}
-
+
return dominantRule;
}
},
@@ -525,58 +525,58 @@ var stylesController = exports.StylesController = Montage.create(Component, {
///// Disable Rule
///// Disables a rule by giving it a known garbage selector
-
+
disableRule : {
value : function(rule, sheet) {
rule = (typeof rule === 'number') ? sheet.rules[rule] : rule;
-
+
rule.selectorText += this.CONST.GARBAGE_SELECTOR;
-
+
return rule;
}
},
-
+
///// Enable Rule
///// Enables a rule by removing the known garbage selector
-
+
enableRule : {
value : function(rule, sheet) {
rule = (typeof rule === 'number') ? sheet.rules[rule] : rule;
-
+
///// remove any occurances of the garbage selector
rule.selectorText.replace(this.CONST.GARBAGE_SELECTOR, '');
-
+
return rule;
}
},
-
+
///// Has Property
///// Checks to see if a rule has the property defined in
///// its declaration.
///// Optionally checks for shortand property
-
+
hasProperty : {
value: function(rule, property, checkForShorthand) {
var properties = [property],
shorthands = cssShorthandMap[property];
-
+
///// If shorthand properties are defined, add to the array
///// of which properties to check for
if(shorthands) {
properties.concat(shorthands);
}
-
+
///// return true if any property exists in rule
return properties.some(function(prop) {
return !!rule.style.getPropertyValue(prop);
}, this);
-
+
}
},
-
+
///// Matches Multiple Elements
///// Checks to see if the rule affects multiple elements
-
+
matchesMultipleElements : {
value: function(rule, document) {
if(rule.isInlineStyle) {
@@ -606,12 +606,12 @@ var stylesController = exports.StylesController = Montage.create(Component, {
}
},
-
-
+
+
///// Set Rule Selector
///// Allows user to change the selector of given rule
///// while attaching new specificity value to rule object
-
+
setRuleSelector : {
value : function(rule, selector) {
rule.selectorText = selector;
@@ -622,13 +622,13 @@ var stylesController = exports.StylesController = Montage.create(Component, {
return rule;
}
},
-
+
///// Get Rule Index
///// Returns the index of the passed-in rule.
///// Returns -1 if not found.
///// A rule's index is useful to know for deleting, inserting
///// and determining rule precedence
-
+
getRuleIndex : {
value : function(rule) {
var rules = nj.toArray(rule.parentStyleSheet.rules);
@@ -666,7 +666,7 @@ var stylesController = exports.StylesController = Montage.create(Component, {
///// Get All Matching Rules
///// Returns an array of css rules for an element
///// Optionally sorted by specificity, and can omit pseudo elements
-
+
getMatchingRules : { //TODO: Remove omitPseudos from here and usages
value: function(element, omitPseudos, useStageStyleSheet) {
var rules,
@@ -748,17 +748,17 @@ var stylesController = exports.StylesController = Montage.create(Component, {
return order;
}
-
+
rules.sort(sorter.bind(this));
-
+
return rules;
}
},
-
+
///// Get Common Rules
///// Returns an array of rules that are common to all the elements
///// in passed-in element array.
-
+
getCommonRules : {
value : function(elements) {
var itemIndex = -1,
@@ -783,17 +783,17 @@ var stylesController = exports.StylesController = Montage.create(Component, {
return commonRules;
}
},
-
+
///// Get Most Specific Selector For Element
///// Given a selector+specificity array, find the most specific
///// selector for the passed-in element
-
+
_getMostSpecificSelectorForElement : {
value : function(element, specArr) {
- if(specArr.length === 1) {
+ if(specArr.length === 1) {
return specArr[0];
}
-
+
var matchingElements, i;
for(i = 0; i < specArr.length; i++) {
@@ -840,12 +840,12 @@ var stylesController = exports.StylesController = Montage.create(Component, {
}
},
-
+
///// Get First Single Target Rule
///// Loops through the array of rules sequentially, returning the first
///// single-target rule (i.e. first rule which affects only one element)
///// Returns null if no single target rule is found
-
+
_getFirstSingleTargetRule : {
value : function(rules, document) {
var i;
@@ -857,32 +857,32 @@ var stylesController = exports.StylesController = Montage.create(Component, {
return null;
}
},
-
+
///// Compare Specificity
///// Takes two specificity objects and returns:
///// -1 if first is more specific than second
///// +1 if second is more speficic than first
///// 0 if equal in specificity
-
+
compareSpecificity : {
value : function(a, b) {
var specA = a,
specB = b,
order;
-
+
[this.CONST.SPEC_ID_KEY,this.CONST.SPEC_CLASS_KEY,this.CONST.SPEC_TYPE_KEY].some(function(t) {
order = specA[t] < specB[t] ? 1 : (specA[t] > specB[t]) ? -1 : 0;
return order !== 0;
}, this);
-
+
return order;
}
},
-
+
///// Get specificity
- ///// Creates array of objects, ordered by specificity for each
+ ///// Creates array of objects, ordered by specificity for each
///// selector in the passed-in selectorText.
-
+
getSpecificity : {
value : function(selector) {
var arr = selector.split(',').map(function(sel) {
@@ -891,14 +891,14 @@ var stylesController = exports.StylesController = Montage.create(Component, {
specificity : this.calculateSpecificity(sel)
};
}, this);
-
+
///// now sort by specificity
return arr.sort(function(a, b) {
return this.compareSpecificity(a.specificity, b.specificity);
}.bind(this));
}
},
-
+
///// Calculate specificity
///// Returns the specificity value of passed-in selector
///// WARNING: Do not pass in grouped selectors!
@@ -911,36 +911,36 @@ var stylesController = exports.StylesController = Montage.create(Component, {
value : function(selector) {
var s = selector.replace(/\([^\)]+\)/,''),
obj = {};
-
+
///// function for counting matches for different
///// selector patterns
function m(reg) {
var matches = s.match(reg);
return matches ? matches.length : 0;
}
-
+
obj[this.CONST.SPEC_ID_KEY] = m(/#[\d\w-_]+/g); /// match id selector
obj[this.CONST.SPEC_CLASS_KEY] = m(/[\.:\[][^\.:\[+>]+/g); /// match class selector
obj[this.CONST.SPEC_TYPE_KEY] = m(/(^|[\s\+>])\w+/g); /// match tag selector
-
+
return obj;
}
},
-
+
/* ----------------- Style methods ----------------- */
-
+
///// Add style
///// Set style property and value on provided rule
///// with optional priority (!important)
///// Returns the browser's value of passed-in property
-
+
setStyle : {
value: function(rule, property, value, useImportant) {
var dec = rule.style, priority;
-
+
///// Remove property for passive validation (sets it to null)
dec.removeProperty(property);
-
+
priority = (useImportant) ? this.IMPORTANT_FLAG : null;
///// Use CSS declaration's setProperty()
@@ -955,23 +955,23 @@ var stylesController = exports.StylesController = Montage.create(Component, {
return dec.getPropertyValue(property);
}
},
-
+
///// Add styles
///// Set multiple styles on provided rule
///// Returns a collection of browser values for the
///// passed-in properties
-
+
setStyles : {
value: function(rule, styles, useImportant) {
var browserValues = {}, property, value;
-
+
for(property in styles) {
if(styles.hasOwnProperty(property)) {
value = styles[property];
browserValues[property] = this.setStyle(rule, property, value, useImportant);
}
}
-
+
return browserValues;
}
},
@@ -1061,7 +1061,7 @@ var stylesController = exports.StylesController = Montage.create(Component, {
///// Delete style
///// Removes the property from the style declaration/rule
///// Returns the rule
-
+
deleteStyle : {
value : function(rule, property) {
this.styleSheetModified(rule.parentStyleSheet);
@@ -1071,34 +1071,34 @@ var stylesController = exports.StylesController = Montage.create(Component, {
return rule;
}
},
-
+
///// Delete styles
///// Removes all style properties in passed-in array or object
///// Returns the rule
-
+
deleteStyles : {
value : function(rule, properties) {
if(properties.constructor !== Array && typeof properties === 'object') {
properties = Object.keys(properties);
}
-
+
properties.forEach(function(prop) {
this.deleteStyle(rule, prop);
}, this);
-
+
return rule;
}
},
-
+
/* ----------------- Element methods ----------------- */
-
+
///// Set Element Style
///// Applies style to element via dominant rule logic:
-
+
///// We find the most specific rule that has the style property (or it's shorthand)
///// and does not affect multiple elements (we don't want to change that style on
///// all elements sharing a class, for example).
-
+
///// Here there are a few possibilities:
///// 1) We find the most specific, single-target matching rule with the property defined
///// - Great! Set the style on it.
@@ -1113,11 +1113,11 @@ var stylesController = exports.StylesController = Montage.create(Component, {
///// - use most specific, single-target rule
///// - else (this means no single-target rule matches element), create a class
///// - for this element
-
-
+
+
///// For Undo/Redo: should return object detailing what actually happened
///// during the application of the style (created rule or amended rule)
-
+
setElementStyle : {
value : function(element, property, value, isStageElement) {
var doc = element.ownerDocument,
@@ -1151,7 +1151,7 @@ var stylesController = exports.StylesController = Montage.create(Component, {
className = this.generateClassName(element.nodeName);
dominantRule = this.addRule('.'+className + '{}');
this.addClass(element, className);
-
+
} else if(dominantRule.ruleToOverride) {
///// Do we have to override a rule?
///// Well, let's first see if a higher-specificity, single-target
@@ -1198,7 +1198,7 @@ var stylesController = exports.StylesController = Montage.create(Component, {
///// Set Element Styles
///// Applies passed-in styles to the element via dominant rule logic
///// Styles must be in object format with the property as the key
-
+
setElementStyles : {
value : function(element, styles, isStageElement) {
for(var property in styles) {
@@ -1245,13 +1245,13 @@ var stylesController = exports.StylesController = Montage.create(Component, {
this.addRule(selectors.join(', '), styles);
}
},
-
+
///// Get Element Style
///// Gets the style value that is currently applied to the element
///// Uses Dominant Rule logic to determine the rule that has the property
///// and if not found, can optionally return the computed style instead of
///// null.
-
+
getElementStyle : {
value : function(element, property, fallbackOnComputed, isStageElement) {
var cache = this._getCachedRuleForProperty(element, property),
@@ -1379,26 +1379,26 @@ var stylesController = exports.StylesController = Montage.create(Component, {
return rule;
}
},
-
+
///// Add Class
///// Adds class to element
-
+
addClass : {
value : function(element, className) {
element.classList.add(className);
}
},
-
+
/* ----------------- Stylesheet methods ----------------- */
-
+
///// Create a stylesheet via style tag in active document, or
///// optionally passed-in document
-
+
createStylesheet : {
value: function(id, document) {
var doc = document || this._currentDocument.model.views.design.document,
sheetElement, sheet;
-
+
sheetElement = nj.make('style', {
type : 'text/css',
rel : 'stylesheet',
@@ -1446,16 +1446,16 @@ var stylesController = exports.StylesController = Montage.create(Component, {
}
},
-
+
///// Gets the stylesheet object associated with passed-in
///// element or element id, with option context (document)
///// (For and