Skip to content

Commit

Permalink
Merge pull request chuckcarpenter#14 from chuckcarpenter/lsvx/code_cl…
Browse files Browse the repository at this point in the history 
…eanup

Cleaned up code to prepare for updates
  • Loading branch information
@chuckcarpenter
chuckcarpenter committed Jun 12, 2013
2 parents a4990ba + dca0868 commit 143784d
Show file tree
Hide file tree
Showing 2 changed files with 59 additions and 56 deletions.
101 changes: 52 additions & 49 deletions js/rem.js
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
(function (window, undefined) {

"use strict";
// test for REM unit support
var cssremunit = function() {
var div = document.createElement( 'div' );
Expand All @@ -12,8 +12,8 @@
isStyleSheet = function () {
var styles = document.getElementsByTagName('link'),
filteredStyles = [];
for (i = 0; i < styles.length; i++) {
// here we need to use getAttribute instead of hasAttribute to support IE < 8
for ( var i = 0; i < styles.length; i++) {
if ( styles[i].rel.toLowerCase() === 'stylesheet' && styles[i].getAttribute('data-norem') === null ) {
filteredStyles.push( styles[i] );
}
Expand All @@ -24,68 +24,72 @@

processSheets = function () {
var links = [];
sheets = isStyleSheet(); //search for link tags and confirm it's a stylesheet
sheets.og = sheets.length; //store the original length of sheets as a property
sheets = isStyleSheet(); // search for link tags and confirm it's a stylesheet
sheets.og = sheets.length; // store the original length of sheets as a property
for( var i = 0; i < sheets.length; i++ ){
links[i] = sheets[i].href;
xhr( links[i], matchcss, i );
xhr( links[i], matchCSS, i );
}
},

matchcss = function ( response, i ) { //collect all of the rules from the xhr response texts and match them to a pattern
matchCSS = function ( response, i ) { // collect all of the rules from the xhr response texts and match them to a pattern
var clean = removeComments( response.responseText ),
pattern = /[\w\d\s\-\/\\\[\]:,.'"*()<>+~%#^$_=|]+\{[\w\d\s\-\/\\%#:;,.'"*()]+\d*\.{0,1}\d+rem[\w\d\s\-\/\\%#:;,.'"*()]*\}/g, //find selectors that use rem in one or more of their rules
pattern = /[\w\d\s\-\/\\\[\]:,.'"*()<>+~%#^$_=|@]+\{[\w\d\s\-\/\\%#:;,.'"*()]+\d*\.?\d+rem[\w\d\s\-\/\\%#:;,.'"*()]*\}/g, //find selectors that use rem in one or more of their rules
current = clean.match(pattern),
remPattern =/\d*\.{0,1}\d+rem/g,
remPattern =/\d*\.?\d+rem/g,
remCurrent = clean.match(remPattern);
if( current !== null && current.length !== 0 ){
found = found.concat( current ); //save all of the blocks of rules with rem in a property
foundProps = foundProps.concat( remCurrent ); //save all of the properties with rem
found = found.concat( current ); // save all of the blocks of rules with rem in a property
foundProps = foundProps.concat( remCurrent ); // save all of the properties with rem
}
if( i === sheets.og-1 ){
buildIt();
buildCSS();
}
},

buildIt = function () { //first build each individual rule from elements in the found array and then add it to the string of rules.
var pattern = /[\w\d\s\-\/\\%#:,.'"*()]+\d*\.{0,1}\d+rem[\w\d\s\-\/\\%#:,.'"*()]*[;}]/g; //find properties with rem values in them
buildCSS = function () { // first build each individual rule from elements in the found array and then add it to the string of rules.
var pattern = /[\w\d\s\-\/\\%#:,.'"*()]+\d*\.?\d+rem[\w\d\s\-\/\\%#:,.'"*()]*[;}]/g; // find properties with rem values in them
for( var i = 0; i < found.length; i++ ){
rules = rules + found[i].substr(0,found[i].indexOf("{")+1); //save the selector portion of each rule with a rem value
rules = rules + found[i].substr(0,found[i].indexOf("{")+1); // save the selector portion of each rule with a rem value
var current = found[i].match( pattern );
for( var j = 0; j<current.length; j++ ){ //build a new set of with only the selector and properties that have rem in the value
for( var j = 0; j<current.length; j++ ){ // build a new set of with only the selector and properties that have rem in the value
rules = rules + current[j];
if( j === current.length-1 && rules[rules.length-1] !== "}" ){
rules = rules + "\n}";
}
}
}

parseIt();
parseCSS();
},

parseIt = function () { //replace each set of parentheses with evaluated content
parseCSS = function () { // replace each set of parentheses with evaluated content

for( var i = 0; i < foundProps.length; i++ ){
css[i] = Math.round( eval(foundProps[i].substr(0,foundProps[i].length-3)*fontSize) ) + 'px';
css[i] = Math.round( parseInt(foundProps[i].substr(0,foundProps[i].length-3)*fontSize, 10) ) + 'px';
}

loadCSS();
},

loadCSS = function () { //replace and load the new rules
for( var i = 0; i < css.length; i++ ){ //only run this loop as many times as css has entries
loadCSS = function () { // replace and load the new rules
for( var i = 0; i < css.length; i++ ){ // only run this loop as many times as css has entries
if( css[i] ){
rules = rules.replace( foundProps[i],css[i] ); //replace old rules with our processed rules
rules = rules.replace( foundProps[i],css[i] ); // replace old rules with our processed rules
}
}
var remcss = document.createElement( 'style' );
remcss.setAttribute( 'type', 'text/css' );
remcss.id = 'remReplace';
document.getElementsByTagName( 'head' )[0].appendChild( remcss ); //create the new element
remcss.styleSheet.cssText = rules; // IE8 will not support innerHTML on read-only elements, such as STYLE
document.getElementsByTagName( 'head' )[0].appendChild( remcss ); // create the new element
if( remcss.styleSheet ) {
remcss.styleSheet.cssText = rules; // IE8 will not support innerHTML on read-only elements, such as STYLE
} else {
remcss.appendChild( document.createTextNode( rules ) );
}
},

xhr = function ( url, callback, i ) { //create new XMLHttpRequest object and run it
xhr = function ( url, callback, i ) { // create new XMLHttpRequest object and run it
try {
var xhr = getXMLHttpRequest();
xhr.open( 'GET', url, true );
Expand All @@ -96,14 +100,14 @@
xhr.onreadystatechange = function() {
if ( xhr.readyState === 4 ){
callback(xhr, i);
} else { /*callback function on AJAX error*/ }
} // else { callback function on AJAX error }
};
} catch (e) {
// This block targets old versions of IE, which require "new".
xhr.onreadystatechange = new function() { //IE6 and IE7 need the "new function()" syntax to work properly
if ( xhr.readyState === 4 ){
callback(xhr, i);
} else { /*callback function on AJAX error*/ }
} // else { callback function on AJAX error }
};
}
} catch (e){
Expand All @@ -114,7 +118,7 @@
callback(xdr, i);
};
xdr.onerror = function() {
console.log('IE XDR load fail.');
return false; // xdr load fail
};
xdr.send();
}
Expand All @@ -133,45 +137,44 @@
}
},

getXMLHttpRequest = function () { //we're gonna check if our browser will let us use AJAX
getXMLHttpRequest = function () { // we're gonna check if our browser will let us use AJAX
if (window.XMLHttpRequest) {
return new XMLHttpRequest();
} else { //if XMLHttpRequest doesn't work
} else { // if XMLHttpRequest doesn't work
try {
return new ActiveXObject("MSXML2.XMLHTTP"); // then we'll instead use AJAX through ActiveX for IE6/IE7
} catch (e1) {
try {
return new ActiveXObject("Microsoft.XMLHTTP"); // other microsoft
} catch (e2) {
//No XHR at all...
// No XHR at all...
}
}
}
};

if( !cssremunit() ){ //this checks if the rem value is supported
var rules = '', //initialize the rules variable in this scope so it can be used later
sheets = [], //initialize the array holding the sheets for use later
found = [], //initialize the array holding the found rules for use later
foundProps = [], //initialize the array holding the found properties for use later
css = [], //initialize the array holding the parsed rules for use later
if( !cssremunit() ){ // this checks if the rem value is supported
var rules = '', // initialize the rules variable in this scope so it can be used later
sheets = [], // initialize the array holding the sheets for use later
found = [], // initialize the array holding the found rules for use later
foundProps = [], // initialize the array holding the found properties for use later
css = [], // initialize the array holding the parsed rules for use later
body = document.getElementsByTagName('body')[0],
fontSize = '';
if (body.currentStyle) {
if ( body.currentStyle['fontSize'].indexOf("px") >= 0 ) {
fontSize = body.currentStyle['fontSize'].replace('px', '');
} else if ( body.currentStyle['fontSize'].indexOf("em") >= 0 ) {
fontSize = body.currentStyle['fontSize'].replace('em', '');
} else if ( body.currentStyle['fontSize'].indexOf("pt") >= 0 ) {
fontSize = body.currentStyle['fontSize'].replace('pt', '');
if ( body.currentStyle.fontSize.indexOf("px") >= 0 ) {
fontSize = body.currentStyle.fontSize.replace('px', '');
} else if ( body.currentStyle.fontSize.indexOf("em") >= 0 ) {
fontSize = body.currentStyle.fontSize.replace('em', '');
} else if ( body.currentStyle.fontSize.indexOf("pt") >= 0 ) {
fontSize = body.currentStyle.fontSize.replace('pt', '');
} else {
fontSize = (body.currentStyle['fontSize'].replace('%', '') / 100) * 16; //IE8 returns the percentage while other browsers return the computed value
fontSize = (body.currentStyle.fontSize.replace('%', '') / 100) * 16; // IE8 returns the percentage while other browsers return the computed value
}
} else if (window.getComputedStyle)
fontSize = document.defaultView.getComputedStyle(body, null).getPropertyValue('font-size').replace('px', ''); //find font-size in body element
} else if (window.getComputedStyle) {
fontSize = document.defaultView.getComputedStyle(body, null).getPropertyValue('font-size').replace('px', ''); // find font-size in body element
}
processSheets();
} else {
// do nothing, you are awesome and have REM support
}
} // else { do nothing, you are awesome and have REM support }

})(window);
14 changes: 7 additions & 7 deletions js/rem.min.js
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

0 comments on commit 143784d

Please sign in to comment.