|
|
@ -17,17 +17,17 @@ |
|
|
|
|
|
|
|
|
/* jshint unused:false */ |
|
|
/* jshint unused:false */ |
|
|
/* global base64_decode, CSSWizardView, window, console, jQuery */ |
|
|
/* global base64_decode, CSSWizardView, window, console, jQuery */ |
|
|
var fi = function () { |
|
|
var fi = function() { |
|
|
|
|
|
|
|
|
this.cssImportStatements = []; |
|
|
this.cssImportStatements = []; |
|
|
this.cssKeyframeStatements = []; |
|
|
this.cssKeyframeStatements = []; |
|
|
|
|
|
|
|
|
this.cssRegex = new RegExp('([\\s\\S]*?){([\\s\\S]*?)}', 'gi'); |
|
|
this.cssRegex = new RegExp("([\\s\\S]*?){([\\s\\S]*?)}", "gi"); |
|
|
this.cssMediaQueryRegex = '((@media [\\s\\S]*?){([\\s\\S]*?}\\s*?)})'; |
|
|
this.cssMediaQueryRegex = "((@media [\\s\\S]*?){([\\s\\S]*?}\\s*?)})"; |
|
|
this.cssKeyframeRegex = '((@.*?keyframes [\\s\\S]*?){([\\s\\S]*?}\\s*?)})'; |
|
|
this.cssKeyframeRegex = "((@.*?keyframes [\\s\\S]*?){([\\s\\S]*?}\\s*?)})"; |
|
|
this.combinedCSSRegex = '((\\s*?@media[\\s\\S]*?){([\\s\\S]*?)}\\s*?})|(([\\s\\S]*?){([\\s\\S]*?)})'; //to match css & media queries together
|
|
|
this.combinedCSSRegex = "((\\s*?@media[\\s\\S]*?){([\\s\\S]*?)}\\s*?})|(([\\s\\S]*?){([\\s\\S]*?)})"; //to match css & media queries together
|
|
|
this.cssCommentsRegex = '(\\/\\*[\\s\\S]*?\\*\\/)'; |
|
|
this.cssCommentsRegex = "(\\/\\*[\\s\\S]*?\\*\\/)"; |
|
|
this.cssImportStatementRegex = new RegExp('@import .*?;', 'gi'); |
|
|
this.cssImportStatementRegex = new RegExp("@import .*?;", "gi"); |
|
|
}; |
|
|
}; |
|
|
|
|
|
|
|
|
/* |
|
|
/* |
|
|
@ -37,10 +37,10 @@ var fi = function () { |
|
|
|
|
|
|
|
|
@return cleanedCSS contains no css comments |
|
|
@return cleanedCSS contains no css comments |
|
|
*/ |
|
|
*/ |
|
|
fi.prototype.stripComments = function (cssString) { |
|
|
fi.prototype.stripComments = function(cssString) { |
|
|
var regex = new RegExp(this.cssCommentsRegex, 'gi'); |
|
|
var regex = new RegExp(this.cssCommentsRegex, "gi"); |
|
|
|
|
|
|
|
|
return cssString.replace(regex, ''); |
|
|
return cssString.replace(regex, ""); |
|
|
}; |
|
|
}; |
|
|
|
|
|
|
|
|
/* |
|
|
/* |
|
|
@ -52,7 +52,7 @@ fi.prototype.stripComments = function (cssString) { |
|
|
|
|
|
|
|
|
@return object css |
|
|
@return object css |
|
|
*/ |
|
|
*/ |
|
|
fi.prototype.parseCSS = function (source) { |
|
|
fi.prototype.parseCSS = function(source) { |
|
|
|
|
|
|
|
|
if (source === undefined) { |
|
|
if (source === undefined) { |
|
|
return []; |
|
|
return []; |
|
|
@ -69,17 +69,17 @@ fi.prototype.parseCSS = function (source) { |
|
|
if (imports !== null) { |
|
|
if (imports !== null) { |
|
|
this.cssImportStatements.push(imports[0]); |
|
|
this.cssImportStatements.push(imports[0]); |
|
|
css.push({ |
|
|
css.push({ |
|
|
selector: '@imports', |
|
|
selector: "@imports", |
|
|
type: 'imports', |
|
|
type: "imports", |
|
|
styles: imports[0] |
|
|
styles: imports[0], |
|
|
}); |
|
|
}); |
|
|
} else { |
|
|
} else { |
|
|
break; |
|
|
break; |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
source = source.replace(this.cssImportStatementRegex, ''); |
|
|
source = source.replace(this.cssImportStatementRegex, ""); |
|
|
//get keyframe statements
|
|
|
//get keyframe statements
|
|
|
var keyframesRegex = new RegExp(this.cssKeyframeRegex, 'gi'); |
|
|
var keyframesRegex = new RegExp(this.cssKeyframeRegex, "gi"); |
|
|
var arr; |
|
|
var arr; |
|
|
while (true) { |
|
|
while (true) { |
|
|
arr = keyframesRegex.exec(source); |
|
|
arr = keyframesRegex.exec(source); |
|
|
@ -87,44 +87,44 @@ fi.prototype.parseCSS = function (source) { |
|
|
break; |
|
|
break; |
|
|
} |
|
|
} |
|
|
css.push({ |
|
|
css.push({ |
|
|
selector: '@keyframes', |
|
|
selector: "@keyframes", |
|
|
type: 'keyframes', |
|
|
type: "keyframes", |
|
|
styles: arr[0] |
|
|
styles: arr[0], |
|
|
}); |
|
|
}); |
|
|
} |
|
|
} |
|
|
source = source.replace(keyframesRegex, ''); |
|
|
source = source.replace(keyframesRegex, ""); |
|
|
|
|
|
|
|
|
//unified regex
|
|
|
//unified regex
|
|
|
var unified = new RegExp(this.combinedCSSRegex, 'gi'); |
|
|
var unified = new RegExp(this.combinedCSSRegex, "gi"); |
|
|
|
|
|
|
|
|
while (true) { |
|
|
while (true) { |
|
|
arr = unified.exec(source); |
|
|
arr = unified.exec(source); |
|
|
if (arr === null) { |
|
|
if (arr === null) { |
|
|
break; |
|
|
break; |
|
|
} |
|
|
} |
|
|
var selector = ''; |
|
|
var selector = ""; |
|
|
if (arr[2] === undefined) { |
|
|
if (arr[2] === undefined) { |
|
|
selector = arr[5].split('\r\n').join('\n').trim(); |
|
|
selector = arr[5].split("\r\n").join("\n").trim(); |
|
|
} else { |
|
|
} else { |
|
|
selector = arr[2].split('\r\n').join('\n').trim(); |
|
|
selector = arr[2].split("\r\n").join("\n").trim(); |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
/* |
|
|
/* |
|
|
fetch comments and associate it with current selector |
|
|
fetch comments and associate it with current selector |
|
|
*/ |
|
|
*/ |
|
|
var commentsRegex = new RegExp(this.cssCommentsRegex, 'gi'); |
|
|
var commentsRegex = new RegExp(this.cssCommentsRegex, "gi"); |
|
|
var comments = commentsRegex.exec(selector); |
|
|
var comments = commentsRegex.exec(selector); |
|
|
if (comments !== null) { |
|
|
if (comments !== null) { |
|
|
selector = selector.replace(commentsRegex, '').trim(); |
|
|
selector = selector.replace(commentsRegex, "").trim(); |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
//determine the type
|
|
|
//determine the type
|
|
|
if (selector.indexOf('@media') !== -1) { |
|
|
if (selector.indexOf("@media") !== -1) { |
|
|
//we have a media query
|
|
|
//we have a media query
|
|
|
var cssObject = { |
|
|
var cssObject = { |
|
|
selector: selector, |
|
|
selector: selector, |
|
|
type: 'media', |
|
|
type: "media", |
|
|
subStyles: this.parseCSS(arr[3] + '\n}') //recursively parse media query inner css
|
|
|
subStyles: this.parseCSS(arr[3] + "\n}"), //recursively parse media query inner css
|
|
|
}; |
|
|
}; |
|
|
if (comments !== null) { |
|
|
if (comments !== null) { |
|
|
cssObject.comments = comments[0]; |
|
|
cssObject.comments = comments[0]; |
|
|
@ -135,10 +135,10 @@ fi.prototype.parseCSS = function (source) { |
|
|
var rules = this.parseRules(arr[6]); |
|
|
var rules = this.parseRules(arr[6]); |
|
|
var style = { |
|
|
var style = { |
|
|
selector: selector, |
|
|
selector: selector, |
|
|
rules: rules |
|
|
rules: rules, |
|
|
}; |
|
|
}; |
|
|
if (selector === '@font-face') { |
|
|
if (selector === "@font-face") { |
|
|
style.type = 'font-face'; |
|
|
style.type = "font-face"; |
|
|
} |
|
|
} |
|
|
if (comments !== null) { |
|
|
if (comments !== null) { |
|
|
style.comments = comments[0]; |
|
|
style.comments = comments[0]; |
|
|
@ -157,9 +157,9 @@ fi.prototype.parseCSS = function (source) { |
|
|
@param rules, css directive string example |
|
|
@param rules, css directive string example |
|
|
\n\ncolor:white;\n font-size:18px;\n |
|
|
\n\ncolor:white;\n font-size:18px;\n |
|
|
*/ |
|
|
*/ |
|
|
fi.prototype.parseRules = function (rules) { |
|
|
fi.prototype.parseRules = function(rules) { |
|
|
//convert all windows style line endings to unix style line endings
|
|
|
//convert all windows style line endings to unix style line endings
|
|
|
rules = rules.split('\r\n').join('\n'); |
|
|
rules = rules.split("\r\n").join("\n"); |
|
|
var ret = []; |
|
|
var ret = []; |
|
|
|
|
|
|
|
|
// Split all rules but keep semicolon for base64 url data
|
|
|
// Split all rules but keep semicolon for base64 url data
|
|
|
@ -171,11 +171,11 @@ fi.prototype.parseRules = function (rules) { |
|
|
|
|
|
|
|
|
//determine if line is a valid css directive, ie color:white;
|
|
|
//determine if line is a valid css directive, ie color:white;
|
|
|
line = line.trim(); |
|
|
line = line.trim(); |
|
|
if (line.indexOf(':') !== -1) { |
|
|
if (line.indexOf(":") !== -1) { |
|
|
//line contains :
|
|
|
//line contains :
|
|
|
line = line.split(':'); |
|
|
line = line.split(":"); |
|
|
var cssDirective = line[0].trim(); |
|
|
var cssDirective = line[0].trim(); |
|
|
var cssValue = line.slice(1).join(':').trim(); |
|
|
var cssValue = line.slice(1).join(":").trim(); |
|
|
|
|
|
|
|
|
//more checks
|
|
|
//more checks
|
|
|
if (cssDirective.length < 1 || cssValue.length < 1) { |
|
|
if (cssDirective.length < 1 || cssValue.length < 1) { |
|
|
@ -186,19 +186,19 @@ fi.prototype.parseRules = function (rules) { |
|
|
//push rule
|
|
|
//push rule
|
|
|
ret.push({ |
|
|
ret.push({ |
|
|
directive: cssDirective, |
|
|
directive: cssDirective, |
|
|
value: cssValue |
|
|
value: cssValue, |
|
|
}); |
|
|
}); |
|
|
} else { |
|
|
} else { |
|
|
//if there is no ':', but what if it was mis splitted value which starts with base64
|
|
|
//if there is no ':', but what if it was mis splitted value which starts with base64
|
|
|
if (line.trim().substr(0, 7) == 'base64,') { //hack :)
|
|
|
if (line.trim().substr(0, 7) == "base64,") { //hack :)
|
|
|
ret[ret.length - 1].value += line.trim(); |
|
|
ret[ret.length - 1].value += line.trim(); |
|
|
} else { |
|
|
} else { |
|
|
//add rule, even if it is defective
|
|
|
//add rule, even if it is defective
|
|
|
if (line.length > 0) { |
|
|
if (line.length > 0) { |
|
|
ret.push({ |
|
|
ret.push({ |
|
|
directive: '', |
|
|
directive: "", |
|
|
value: line, |
|
|
value: line, |
|
|
defective: true |
|
|
defective: true, |
|
|
}); |
|
|
}); |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
@ -211,7 +211,7 @@ fi.prototype.parseRules = function (rules) { |
|
|
just returns the rule having given directive |
|
|
just returns the rule having given directive |
|
|
if not found returns false; |
|
|
if not found returns false; |
|
|
*/ |
|
|
*/ |
|
|
fi.prototype.findCorrespondingRule = function (rules, directive, value) { |
|
|
fi.prototype.findCorrespondingRule = function(rules, directive, value) { |
|
|
if (value === undefined) { |
|
|
if (value === undefined) { |
|
|
value = false; |
|
|
value = false; |
|
|
} |
|
|
} |
|
|
@ -231,7 +231,7 @@ fi.prototype.findCorrespondingRule = function (rules, directive, value) { |
|
|
Finds styles that have given selector, compress them, |
|
|
Finds styles that have given selector, compress them, |
|
|
and returns them |
|
|
and returns them |
|
|
*/ |
|
|
*/ |
|
|
fi.prototype.findBySelector = function (cssObjectArray, selector, contains) { |
|
|
fi.prototype.findBySelector = function(cssObjectArray, selector, contains) { |
|
|
if (contains === undefined) { |
|
|
if (contains === undefined) { |
|
|
contains = false; |
|
|
contains = false; |
|
|
} |
|
|
} |
|
|
@ -263,7 +263,7 @@ fi.prototype.findBySelector = function (cssObjectArray, selector, contains) { |
|
|
/* |
|
|
/* |
|
|
deletes cssObjects having given selector, and returns new array |
|
|
deletes cssObjects having given selector, and returns new array |
|
|
*/ |
|
|
*/ |
|
|
fi.prototype.deleteBySelector = function (cssObjectArray, selector) { |
|
|
fi.prototype.deleteBySelector = function(cssObjectArray, selector) { |
|
|
var ret = []; |
|
|
var ret = []; |
|
|
for (var i = 0; i < cssObjectArray.length; i++) { |
|
|
for (var i = 0; i < cssObjectArray.length; i++) { |
|
|
if (cssObjectArray[i].selector !== selector) { |
|
|
if (cssObjectArray[i].selector !== selector) { |
|
|
@ -277,7 +277,7 @@ fi.prototype.deleteBySelector = function (cssObjectArray, selector) { |
|
|
Compresses given cssObjectArray and tries to minimize |
|
|
Compresses given cssObjectArray and tries to minimize |
|
|
selector redundence. |
|
|
selector redundence. |
|
|
*/ |
|
|
*/ |
|
|
fi.prototype.compressCSS = function (cssObjectArray) { |
|
|
fi.prototype.compressCSS = function(cssObjectArray) { |
|
|
var compressed = []; |
|
|
var compressed = []; |
|
|
var done = {}; |
|
|
var done = {}; |
|
|
for (var i = 0; i < cssObjectArray.length; i++) { |
|
|
for (var i = 0; i < cssObjectArray.length; i++) { |
|
|
@ -315,19 +315,19 @@ fi.prototype.compressCSS = function (cssObjectArray) { |
|
|
|
|
|
|
|
|
@return diff css object contains changed values in css1 in regards to css2 see test input output in /test/data/css.js |
|
|
@return diff css object contains changed values in css1 in regards to css2 see test input output in /test/data/css.js |
|
|
*/ |
|
|
*/ |
|
|
fi.prototype.cssDiff = function (css1, css2) { |
|
|
fi.prototype.cssDiff = function(css1, css2) { |
|
|
if (css1.selector !== css2.selector) { |
|
|
if (css1.selector !== css2.selector) { |
|
|
return false; |
|
|
return false; |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
//if one of them is media query return false, because diff function can not operate on media queries
|
|
|
//if one of them is media query return false, because diff function can not operate on media queries
|
|
|
if ((css1.type === 'media' || css2.type === 'media')) { |
|
|
if ((css1.type === "media" || css2.type === "media")) { |
|
|
return false; |
|
|
return false; |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
var diff = { |
|
|
var diff = { |
|
|
selector: css1.selector, |
|
|
selector: css1.selector, |
|
|
rules: [] |
|
|
rules: [], |
|
|
}; |
|
|
}; |
|
|
var rule1, rule2; |
|
|
var rule1, rule2; |
|
|
for (var i = 0; i < css1.rules.length; i++) { |
|
|
for (var i = 0; i < css1.rules.length; i++) { |
|
|
@ -352,12 +352,11 @@ fi.prototype.cssDiff = function (css1, css2) { |
|
|
rule1 = this.findCorrespondingRule(css1.rules, rule2.directive); |
|
|
rule1 = this.findCorrespondingRule(css1.rules, rule2.directive); |
|
|
if (rule1 === false) { |
|
|
if (rule1 === false) { |
|
|
//rule1 is a new rule
|
|
|
//rule1 is a new rule
|
|
|
rule2.type = 'DELETED'; //mark it as a deleted rule, so that other merge operations could be true
|
|
|
rule2.type = "DELETED"; //mark it as a deleted rule, so that other merge operations could be true
|
|
|
diff.rules.push(rule2); |
|
|
diff.rules.push(rule2); |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
if (diff.rules.length === 0) { |
|
|
if (diff.rules.length === 0) { |
|
|
return false; |
|
|
return false; |
|
|
} |
|
|
} |
|
|
@ -373,18 +372,17 @@ fi.prototype.cssDiff = function (css1, css2) { |
|
|
@param reverse, [optional], if given true, first parameter will be traversed on reversed order |
|
|
@param reverse, [optional], if given true, first parameter will be traversed on reversed order |
|
|
effectively giving priority to the styles in newArray |
|
|
effectively giving priority to the styles in newArray |
|
|
*/ |
|
|
*/ |
|
|
fi.prototype.intelligentMerge = function (cssObjectArray, newArray, reverse) { |
|
|
fi.prototype.intelligentMerge = function(cssObjectArray, newArray, reverse) { |
|
|
if (reverse === undefined) { |
|
|
if (reverse === undefined) { |
|
|
reverse = false; |
|
|
reverse = false; |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
for (var i = 0; i < newArray.length; i++) { |
|
|
for (var i = 0; i < newArray.length; i++) { |
|
|
this.intelligentCSSPush(cssObjectArray, newArray[i], reverse); |
|
|
this.intelligentCSSPush(cssObjectArray, newArray[i], reverse); |
|
|
} |
|
|
} |
|
|
for (i = 0; i < cssObjectArray.length; i++) { |
|
|
for (i = 0; i < cssObjectArray.length; i++) { |
|
|
var cobj = cssObjectArray[i]; |
|
|
var cobj = cssObjectArray[i]; |
|
|
if (cobj.type === 'media' || (cobj.type === 'keyframes')) { |
|
|
if (cobj.type === "media" || (cobj.type === "keyframes")) { |
|
|
continue; |
|
|
continue; |
|
|
} |
|
|
} |
|
|
cobj.rules = this.compactRules(cobj.rules); |
|
|
cobj.rules = this.compactRules(cobj.rules); |
|
|
@ -400,7 +398,7 @@ fi.prototype.intelligentMerge = function (cssObjectArray, newArray, reverse) { |
|
|
@param reverse [optional] default is false, if given, cssObjectArray will be reversly traversed |
|
|
@param reverse [optional] default is false, if given, cssObjectArray will be reversly traversed |
|
|
resulting more priority in minimalObject's styles |
|
|
resulting more priority in minimalObject's styles |
|
|
*/ |
|
|
*/ |
|
|
fi.prototype.intelligentCSSPush = function (cssObjectArray, minimalObject, reverse) { |
|
|
fi.prototype.intelligentCSSPush = function(cssObjectArray, minimalObject, reverse) { |
|
|
var pushSelector = minimalObject.selector; |
|
|
var pushSelector = minimalObject.selector; |
|
|
//find correct selector if not found just push minimalObject into cssObject
|
|
|
//find correct selector if not found just push minimalObject into cssObject
|
|
|
var cssObject = false; |
|
|
var cssObject = false; |
|
|
@ -428,15 +426,15 @@ fi.prototype.intelligentCSSPush = function (cssObjectArray, minimalObject, rever |
|
|
if (cssObject === false) { |
|
|
if (cssObject === false) { |
|
|
cssObjectArray.push(minimalObject); //just push, because cssSelector is new
|
|
|
cssObjectArray.push(minimalObject); //just push, because cssSelector is new
|
|
|
} else { |
|
|
} else { |
|
|
if (minimalObject.type !== 'media') { |
|
|
if (minimalObject.type !== "media") { |
|
|
for (var ii = 0; ii < minimalObject.rules.length; ii++) { |
|
|
for (var ii = 0; ii < minimalObject.rules.length; ii++) { |
|
|
var rule = minimalObject.rules[ii]; |
|
|
var rule = minimalObject.rules[ii]; |
|
|
//find rule inside cssObject
|
|
|
//find rule inside cssObject
|
|
|
var oldRule = this.findCorrespondingRule(cssObject.rules, rule.directive); |
|
|
var oldRule = this.findCorrespondingRule(cssObject.rules, rule.directive); |
|
|
if (oldRule === false) { |
|
|
if (oldRule === false) { |
|
|
cssObject.rules.push(rule); |
|
|
cssObject.rules.push(rule); |
|
|
} else if (rule.type == 'DELETED') { |
|
|
} else if (rule.type == "DELETED") { |
|
|
oldRule.type = 'DELETED'; |
|
|
oldRule.type = "DELETED"; |
|
|
} else { |
|
|
} else { |
|
|
//rule found just update value
|
|
|
//rule found just update value
|
|
|
|
|
|
|
|
|
@ -457,10 +455,10 @@ fi.prototype.intelligentCSSPush = function (cssObjectArray, minimalObject, rever |
|
|
|
|
|
|
|
|
@returns rules array, compacted by deleting all unneccessary rules |
|
|
@returns rules array, compacted by deleting all unneccessary rules |
|
|
*/ |
|
|
*/ |
|
|
fi.prototype.compactRules = function (rules) { |
|
|
fi.prototype.compactRules = function(rules) { |
|
|
var newRules = []; |
|
|
var newRules = []; |
|
|
for (var i = 0; i < rules.length; i++) { |
|
|
for (var i = 0; i < rules.length; i++) { |
|
|
if (rules[i].type !== 'DELETED') { |
|
|
if (rules[i].type !== "DELETED") { |
|
|
newRules.push(rules[i]); |
|
|
newRules.push(rules[i]); |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
@ -471,18 +469,18 @@ fi.prototype.compactRules = function (rules) { |
|
|
|
|
|
|
|
|
@param [optional] cssBase, if given computes cssString from cssObject array |
|
|
@param [optional] cssBase, if given computes cssString from cssObject array |
|
|
*/ |
|
|
*/ |
|
|
fi.prototype.getCSSForEditor = function (cssBase, depth) { |
|
|
fi.prototype.getCSSForEditor = function(cssBase, depth) { |
|
|
if (depth === undefined) { |
|
|
if (depth === undefined) { |
|
|
depth = 0; |
|
|
depth = 0; |
|
|
} |
|
|
} |
|
|
var ret = ''; |
|
|
var ret = ""; |
|
|
if (cssBase === undefined) { |
|
|
if (cssBase === undefined) { |
|
|
cssBase = this.css; |
|
|
cssBase = this.css; |
|
|
} |
|
|
} |
|
|
//append imports
|
|
|
//append imports
|
|
|
for (var i = 0; i < cssBase.length; i++) { |
|
|
for (var i = 0; i < cssBase.length; i++) { |
|
|
if (cssBase[i].type == 'imports') { |
|
|
if (cssBase[i].type == "imports") { |
|
|
ret += cssBase[i].styles + '\n\n'; |
|
|
ret += cssBase[i].styles + "\n\n"; |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
for (i = 0; i < cssBase.length; i++) { |
|
|
for (i = 0; i < cssBase.length; i++) { |
|
|
@ -492,34 +490,34 @@ fi.prototype.getCSSForEditor = function (cssBase, depth) { |
|
|
} |
|
|
} |
|
|
var comments = ""; |
|
|
var comments = ""; |
|
|
if (tmp.comments !== undefined) { |
|
|
if (tmp.comments !== undefined) { |
|
|
comments = tmp.comments + '\n'; |
|
|
comments = tmp.comments + "\n"; |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
if (tmp.type == 'media') { //also put media queries to output
|
|
|
if (tmp.type == "media") { //also put media queries to output
|
|
|
ret += comments + tmp.selector + '{\n'; |
|
|
ret += comments + tmp.selector + "{\n"; |
|
|
ret += this.getCSSForEditor(tmp.subStyles, depth + 1); |
|
|
ret += this.getCSSForEditor(tmp.subStyles, depth + 1); |
|
|
ret += '}\n\n'; |
|
|
ret += "}\n\n"; |
|
|
} else if (tmp.type !== 'keyframes' && tmp.type !== 'imports') { |
|
|
} else if (tmp.type !== "keyframes" && tmp.type !== "imports") { |
|
|
ret += this.getSpaces(depth) + comments + tmp.selector + ' {\n'; |
|
|
ret += this.getSpaces(depth) + comments + tmp.selector + " {\n"; |
|
|
ret += this.getCSSOfRules(tmp.rules, depth + 1); |
|
|
ret += this.getCSSOfRules(tmp.rules, depth + 1); |
|
|
ret += this.getSpaces(depth) + '}\n\n'; |
|
|
ret += this.getSpaces(depth) + "}\n\n"; |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
//append keyFrames
|
|
|
//append keyFrames
|
|
|
for (i = 0; i < cssBase.length; i++) { |
|
|
for (i = 0; i < cssBase.length; i++) { |
|
|
if (cssBase[i].type == 'keyframes') { |
|
|
if (cssBase[i].type == "keyframes") { |
|
|
ret += cssBase[i].styles + '\n\n'; |
|
|
ret += cssBase[i].styles + "\n\n"; |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
return ret; |
|
|
return ret; |
|
|
}; |
|
|
}; |
|
|
|
|
|
|
|
|
fi.prototype.getImports = function (cssObjectArray) { |
|
|
fi.prototype.getImports = function(cssObjectArray) { |
|
|
var imps = []; |
|
|
var imps = []; |
|
|
for (var i = 0; i < cssObjectArray.length; i++) { |
|
|
for (var i = 0; i < cssObjectArray.length; i++) { |
|
|
if (cssObjectArray[i].type == 'imports') { |
|
|
if (cssObjectArray[i].type == "imports") { |
|
|
imps.push(cssObjectArray[i].styles); |
|
|
imps.push(cssObjectArray[i].styles); |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
@ -529,30 +527,30 @@ fi.prototype.getImports = function (cssObjectArray) { |
|
|
given rules array, returns visually formatted css string |
|
|
given rules array, returns visually formatted css string |
|
|
to be used inside editor |
|
|
to be used inside editor |
|
|
*/ |
|
|
*/ |
|
|
fi.prototype.getCSSOfRules = function (rules, depth) { |
|
|
fi.prototype.getCSSOfRules = function(rules, depth) { |
|
|
var ret = ''; |
|
|
var ret = ""; |
|
|
for (var i = 0; i < rules.length; i++) { |
|
|
for (var i = 0; i < rules.length; i++) { |
|
|
if (rules[i] === undefined) { |
|
|
if (rules[i] === undefined) { |
|
|
continue; |
|
|
continue; |
|
|
} |
|
|
} |
|
|
if (rules[i].defective === undefined) { |
|
|
if (rules[i].defective === undefined) { |
|
|
ret += this.getSpaces(depth) + rules[i].directive + ' : ' + rules[i].value + ';\n'; |
|
|
ret += this.getSpaces(depth) + rules[i].directive + " : " + rules[i].value + ";\n"; |
|
|
} else { |
|
|
} else { |
|
|
ret += this.getSpaces(depth) + rules[i].value + ';\n'; |
|
|
ret += this.getSpaces(depth) + rules[i].value + ";\n"; |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
} |
|
|
} |
|
|
return ret || '\n'; |
|
|
return ret || "\n"; |
|
|
}; |
|
|
}; |
|
|
|
|
|
|
|
|
/* |
|
|
/* |
|
|
A very simple helper function returns number of spaces appended in a single string, |
|
|
A very simple helper function returns number of spaces appended in a single string, |
|
|
the number depends input parameter, namely input*2 |
|
|
the number depends input parameter, namely input*2 |
|
|
*/ |
|
|
*/ |
|
|
fi.prototype.getSpaces = function (num) { |
|
|
fi.prototype.getSpaces = function(num) { |
|
|
var ret = ''; |
|
|
var ret = ""; |
|
|
for (var i = 0; i < num * 4; i++) { |
|
|
for (var i = 0; i < num * 4; i++) { |
|
|
ret += ' '; |
|
|
ret += " "; |
|
|
} |
|
|
} |
|
|
return ret; |
|
|
return ret; |
|
|
}; |
|
|
}; |
|
|
@ -563,14 +561,14 @@ fi.prototype.getSpaces = function (num) { |
|
|
|
|
|
|
|
|
@returns css string in which this.cssPreviewNamespace prepended |
|
|
@returns css string in which this.cssPreviewNamespace prepended |
|
|
*/ |
|
|
*/ |
|
|
fi.prototype.applyNamespacing = function (css, forcedNamespace) { |
|
|
fi.prototype.applyNamespacing = function(css, forcedNamespace) { |
|
|
var cssObjectArray = css; |
|
|
var cssObjectArray = css; |
|
|
var namespaceClass = '.' + this.cssPreviewNamespace; |
|
|
var namespaceClass = "." + this.cssPreviewNamespace; |
|
|
if (forcedNamespace !== undefined) { |
|
|
if (forcedNamespace !== undefined) { |
|
|
namespaceClass = forcedNamespace; |
|
|
namespaceClass = forcedNamespace; |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
if (typeof css === 'string') { |
|
|
if (typeof css === "string") { |
|
|
cssObjectArray = this.parseCSS(css); |
|
|
cssObjectArray = this.parseCSS(css); |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
@ -578,21 +576,21 @@ fi.prototype.applyNamespacing = function (css, forcedNamespace) { |
|
|
var obj = cssObjectArray[i]; |
|
|
var obj = cssObjectArray[i]; |
|
|
|
|
|
|
|
|
//bypass namespacing for @font-face @keyframes @import
|
|
|
//bypass namespacing for @font-face @keyframes @import
|
|
|
if (obj.selector.indexOf('@font-face') > -1 || obj.selector.indexOf('keyframes') > -1 || obj.selector.indexOf('@import') > -1 || obj.selector.indexOf('.form-all') > -1 || obj.selector.indexOf('#stage') > -1) { |
|
|
if (obj.selector.indexOf("@font-face") > -1 || obj.selector.indexOf("keyframes") > -1 || obj.selector.indexOf("@import") > -1 || obj.selector.indexOf(".form-all") > -1 || obj.selector.indexOf("#stage") > -1) { |
|
|
continue; |
|
|
continue; |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
if (obj.type !== 'media') { |
|
|
if (obj.type !== "media") { |
|
|
var selector = obj.selector.split(','); |
|
|
var selector = obj.selector.split(","); |
|
|
var newSelector = []; |
|
|
var newSelector = []; |
|
|
for (var j = 0; j < selector.length; j++) { |
|
|
for (var j = 0; j < selector.length; j++) { |
|
|
if (selector[j].indexOf('.supernova') === -1) { //do not apply namespacing to selectors including supernova
|
|
|
if (selector[j].indexOf(".supernova") === -1) { //do not apply namespacing to selectors including supernova
|
|
|
newSelector.push(namespaceClass + ' ' + selector[j]); |
|
|
newSelector.push(namespaceClass + " " + selector[j]); |
|
|
} else { |
|
|
} else { |
|
|
newSelector.push(selector[j]); |
|
|
newSelector.push(selector[j]); |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
obj.selector = newSelector.join(','); |
|
|
obj.selector = newSelector.join(","); |
|
|
} else { |
|
|
} else { |
|
|
obj.subStyles = this.applyNamespacing(obj.subStyles, forcedNamespace); //handle media queries as well
|
|
|
obj.subStyles = this.applyNamespacing(obj.subStyles, forcedNamespace); //handle media queries as well
|
|
|
} |
|
|
} |
|
|
@ -605,26 +603,26 @@ fi.prototype.applyNamespacing = function (css, forcedNamespace) { |
|
|
given css string or object array, clears possible namespacing from |
|
|
given css string or object array, clears possible namespacing from |
|
|
all of the selectors inside the css |
|
|
all of the selectors inside the css |
|
|
*/ |
|
|
*/ |
|
|
fi.prototype.clearNamespacing = function (css, returnObj) { |
|
|
fi.prototype.clearNamespacing = function(css, returnObj) { |
|
|
if (returnObj === undefined) { |
|
|
if (returnObj === undefined) { |
|
|
returnObj = false; |
|
|
returnObj = false; |
|
|
} |
|
|
} |
|
|
var cssObjectArray = css; |
|
|
var cssObjectArray = css; |
|
|
var namespaceClass = '.' + this.cssPreviewNamespace; |
|
|
var namespaceClass = "." + this.cssPreviewNamespace; |
|
|
if (typeof css === 'string') { |
|
|
if (typeof css === "string") { |
|
|
cssObjectArray = this.parseCSS(css); |
|
|
cssObjectArray = this.parseCSS(css); |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
for (var i = 0; i < cssObjectArray.length; i++) { |
|
|
for (var i = 0; i < cssObjectArray.length; i++) { |
|
|
var obj = cssObjectArray[i]; |
|
|
var obj = cssObjectArray[i]; |
|
|
|
|
|
|
|
|
if (obj.type !== 'media') { |
|
|
if (obj.type !== "media") { |
|
|
var selector = obj.selector.split(','); |
|
|
var selector = obj.selector.split(","); |
|
|
var newSelector = []; |
|
|
var newSelector = []; |
|
|
for (var j = 0; j < selector.length; j++) { |
|
|
for (var j = 0; j < selector.length; j++) { |
|
|
newSelector.push(selector[j].split(namespaceClass + ' ').join('')); |
|
|
newSelector.push(selector[j].split(namespaceClass + " ").join("")); |
|
|
} |
|
|
} |
|
|
obj.selector = newSelector.join(','); |
|
|
obj.selector = newSelector.join(","); |
|
|
} else { |
|
|
} else { |
|
|
obj.subStyles = this.clearNamespacing(obj.subStyles, true); //handle media queries as well
|
|
|
obj.subStyles = this.clearNamespacing(obj.subStyles, true); //handle media queries as well
|
|
|
} |
|
|
} |
|
|
@ -641,17 +639,17 @@ fi.prototype.clearNamespacing = function (css, returnObj) { |
|
|
creates a new style tag (also destroys the previous one) |
|
|
creates a new style tag (also destroys the previous one) |
|
|
and injects given css string into that css tag |
|
|
and injects given css string into that css tag |
|
|
*/ |
|
|
*/ |
|
|
fi.prototype.createStyleElement = function (id, css, format) { |
|
|
fi.prototype.createStyleElement = function(id, css, format) { |
|
|
if (format === undefined) { |
|
|
if (format === undefined) { |
|
|
format = false; |
|
|
format = false; |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
if (this.testMode === false && format !== 'nonamespace') { |
|
|
if (this.testMode === false && format !== "nonamespace") { |
|
|
//apply namespacing classes
|
|
|
//apply namespacing classes
|
|
|
css = this.applyNamespacing(css); |
|
|
css = this.applyNamespacing(css); |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
if (typeof css != 'string') { |
|
|
if (typeof css != "string") { |
|
|
css = this.getCSSForEditor(css); |
|
|
css = this.getCSSForEditor(css); |
|
|
} |
|
|
} |
|
|
//apply formatting for css
|
|
|
//apply formatting for css
|
|
|
@ -660,7 +658,7 @@ fi.prototype.createStyleElement = function (id, css, format) { |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
if (this.testMode !== false) { |
|
|
if (this.testMode !== false) { |
|
|
return this.testMode('create style #' + id, css); //if test mode, just pass result to callback
|
|
|
return this.testMode("create style #" + id, css); //if test mode, just pass result to callback
|
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
var __el = document.getElementById(id); |
|
|
var __el = document.getElementById(id); |
|
|
@ -668,11 +666,11 @@ fi.prototype.createStyleElement = function (id, css, format) { |
|
|
__el.parentNode.removeChild(__el); |
|
|
__el.parentNode.removeChild(__el); |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
var head = document.head || document.getElementsByTagName('head')[0], |
|
|
var head = document.head || document.getElementsByTagName("head")[0], |
|
|
style = document.createElement('style'); |
|
|
style = document.createElement("style"); |
|
|
|
|
|
|
|
|
style.id = id; |
|
|
style.id = id; |
|
|
style.type = 'text/css'; |
|
|
style.type = "text/css"; |
|
|
|
|
|
|
|
|
head.appendChild(style); |
|
|
head.appendChild(style); |
|
|
|
|
|
|
|
|
|
Igor Kulikov
7 years ago