Skip to content

Cleanup #1

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
btleffler merged 1 commit into from
Jan 15, 2012
Merged

Cleanup #1

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
21 changes: 12 additions & 9 deletions jquery.swapstyle.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,9 +13,9 @@
thisSheet, // Cache each sheet as we loop through
thisNode, // Node for link tags
href, // Cache the href
cssRules, // So we can store where the browser stores import rules
cssRules, // So we can have where the browser keeps import rules
rule; // Cache the rule

// Loop through all the stylesheets
for ( s = 0; s < document.styleSheets.length; s++ ) {
// The current stylesheet
Expand All @@ -24,7 +24,7 @@
// If the href property isn't null, we should check the rule.
if ( thisSheet.href !== null &&
typeof thisSheet.href !== "undefined" ) {
if ( thisSheet.href.indexOf( original ) !== -1 ) {
if ( thisSheet.href.indexOf( original ) !== -1 ) {
// Modify the link in question
thisNode = thisSheet.ownerNode;

Expand All @@ -35,7 +35,7 @@

href = thisNode.href;
thisNode.href = href.replace( original, replacement );

// We've already replaced the stylesheet, so we
// shouldn't haveto check any of it's rules.
continue;
Expand All @@ -56,7 +56,7 @@
// The current rule
rule = cssRules[ r ];

/*
/*
* If the rule has an href, it's an @import! We
* should check the href. I tried using 'instanceof,'
* but Opera had no idea how to handle that
Expand All @@ -65,7 +65,7 @@
rule.href.indexOf(original) != -1 ) { */

if ( rule.href !== null &&
typeof rule.href !== "undefined" ) {
typeof rule.href !== "undefined" ) {
if ( rule.href.indexOf( original ) !== -1 ) {
// Insert the new rule at the end
if ( thisSheet.insertRule ) {
Expand All @@ -75,7 +75,10 @@
);
} else {
// IE
thisSheet.addImport( replacement, cssRules.length );
thisSheet.addImport(
replacement,
cssRules.length
);
}

// Delete the old one to get rid of clutter
Expand All @@ -85,10 +88,10 @@
// IE
thisSheet.removeImport( r );
}
} // IF :rule.href.indexOf( original ) !== -1
} // IF: rule.href.indexOf( original ) !== -1
} // IF: rule.href !== null && typeof rule.href !== "undefined"
} // FOR: r = 0; r < cssRules.length; r++
} // IF: typeof cssRules !== "undefined"
} // FOR: s = 0; s < document.styleSheets.length; s++
};
} )( jQuery );
} )( jQuery );
2 changes: 1 addition & 1 deletion jquery.swapstyle.min.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,4 +3,4 @@
* Author: Benjamin Leffler <btleffler@gmail.com>
* Date: 09/14/11
*/
(function(a){"use strict";a.swapstyle=function(a,b){var c,d,e,f,g,h,i;for(c=0;c<document.styleSheets.length;c++){e=document.styleSheets[c];if(e.href!==null&&typeof e.href!=="undefined"){if(e.href.indexOf(a)!==-1){f=e.ownerNode;if(e.owningElement){f=e.owningElement}g=f.href;f.href=g.replace(a,b);continue}}h=e.cssRules;if(e.imports){h=e.imports}if(h!==null){for(d=0;d<h.length;d++){i=h[d];if(i.href!==null&&typeof i.href!=="undefined"){if(i.href.indexOf(a)!==-1){if(e.insertRule){e.insertRule("@import url("+b+");",h.length)}else{e.addImport(b,h.length)}if(e.deleteRule){e.deleteRule(d)}else{e.removeImport(d)}}}}}}}})(jQuery)
(function(a){"use strict";a.swapstyle=function(a,b){var c,d,e,f,g,h,i;for(c=0;c<document.styleSheets.length;c++){e=document.styleSheets[c];if(e.href!==null&&typeof e.href!=="undefined"){if(e.href.indexOf(a)!==-1){f=e.ownerNode;if(e.owningElement){f=e.owningElement;}g=f.href;f.href=g.replace(a,b);continue;}}h=e.cssRules;if(e.imports){h=e.imports;}if(h!==null){for(d=0;d<h.length;d++){i=h[d];if(i.href!==null&&typeof i.href!=="undefined"){if(i.href.indexOf(a)!==-1){if(e.insertRule){e.insertRule("@import url("+b+");",h.length);}else{e.addImport(b,h.length);}if(e.deleteRule){e.deleteRule(d);}else{e.removeImport(d);}}}}}}};})(jQuery);
118 changes: 59 additions & 59 deletions tests/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,61 +1,61 @@
<!DOCTYPE html>
<html lang="en">
<head>
<title>jQuery.SwapStyle()</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<script src="../jquery.swapstyle.min.js"></script>
<link rel="stylesheet" type="text/css" media="all" href="styles/three.css" />
<style type="text/css">
@import url(http://fonts.googleapis.com/css?family=Open+Sans|Oswald);
@import url(styles/one.css);
</style>
</head>
<body>
<h1><a href="https://www.github.com/btleffler/jQuery-SwapStyle/" title="Source and Documentation">jQuery.SwapStyle()</a></h1>
<h2>Author: <a href="http://www.btleffler.com/" title="btleffler.com">Benjamin Leffler</a></h2>
<fieldset class="theForm">
<legend>Styled by link tag</legend>
<label>Swap outside style: </label>
<select id="outside">
<option value="styles/one.css" selected>First</option>
<option value="styles/two.css">Second</option>
</select><br />
<label>Swap inside style: </label>
<select id="inside">
<option value="styles/three.css" selected>Third</option>
<option value="styles/four.css">Fourth</option>
</select>
</fieldset><!--theForm-->
<script>
$(document).ready( function () {
var $outside = $( "select#outside" ), // Outside style selector
$inside = $( "select#inside" ), // Inside style selector
outCurr = $outside.children( "option:selected" ).val(),
inCurr = $inside.children( "option:selected" ).val();
// The onChange handler will call jQuery.swapstyle()
$outside.change( function () {
// Get the new url from the user selection
var newStyleUrl = $outside.children( "option:selected" ).val();
// Swap the style out
$.swapstyle( outCurr, newStyleUrl);
// Save the new current style
outCurr = newStyleUrl;
});
// Same as outside
$inside.change( function () {
var newStyleUrl = $inside.children( "option:selected" ).val();
// jQuery.swapstyle will work with
// @import rules *AND* link tags.
$.swapstyle( inCurr, newStyleUrl );
inCurr = newStyleUrl;
});
});
</script>
</body>
</html>
<head>
<title>jQuery.SwapStyle()</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<script src="../jquery.swapstyle.min.js"></script>
<link rel="stylesheet" type="text/css" media="all" href="styles/three.css" />
<style type="text/css">
@import url(http://fonts.googleapis.com/css?family=Open+Sans|Oswald);
@import url(styles/one.css);
</style>
</head>
<body>
<h1><a href="https://www.github.com/btleffler/jQuery-SwapStyle/" title="Source and Documentation">jQuery.SwapStyle()</a></h1>
<h2>Author: <a href="http://www.btleffler.com/" title="btleffler.com">Benjamin Leffler</a></h2>
<fieldset class="theForm">
<legend>Styled by link tag</legend>
<label>Swap outside style: </label>
<select id="outside">
<option value="styles/one.css" selected>First</option>
<option value="styles/two.css">Second</option>
</select><br />
<label>Swap inside style: </label>
<select id="inside">
<option value="styles/three.css" selected>Third</option>
<option value="styles/four.css">Fourth</option>
</select>
</fieldset><!--theForm-->
<script>
$(document).ready( function () {
var $outside = $( "select#outside" ), // Outside style selector
$inside = $( "select#inside" ), // Inside style selector
outCurr = $outside.children( "option:selected" ).val(),
inCurr = $inside.children( "option:selected" ).val();

// The onChange handler will call jQuery.swapstyle()
$outside.change( function () {
// Get the new url from the user selection
var newStyleUrl = $outside.children( "option:selected" ).val();

// Swap the style out
$.swapstyle( outCurr, newStyleUrl);

// Save the new current style
outCurr = newStyleUrl;
});

// Same as outside
$inside.change( function () {
var newStyleUrl = $inside.children( "option:selected" ).val();

// jQuery.swapstyle will work with
// @import rules *AND* link tags.
$.swapstyle( inCurr, newStyleUrl );

inCurr = newStyleUrl;
});
});
</script>
</body>
</html>
52 changes: 26 additions & 26 deletions tests/styles/four.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,33 +1,33 @@
.theForm {
border: 3px solid gray;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
-o-border-radius: 8px;
-ms-border-radius: 8px;
border-radius: 8px;
background-color: #888;
position: absolute;
bottom: 25px;
left: 25px;
color: white;
border: 3px solid gray;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
-o-border-radius: 8px;
-ms-border-radius: 8px;
border-radius: 8px;
background-color: #888;
position: absolute;
bottom: 25px;
left: 25px;
color: white;
}

.theForm > legend {
border: 3px solid gray;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
-o-border-radius: 8px;
-ms-border-radius: 8px;
border-radius: 8px;
-webkit-box-shadow: -2px 2px 1px black;
-mozilla-box-shadow: -2px 2px 1px black;
-o-box-shadow: -2px 2px 1px black;
-ms-box-shadow: -2px 2px 1px black;
box-shadow: -2px 2px 1px black;
background-color: #888;
color: white;
border: 3px solid gray;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
-o-border-radius: 8px;
-ms-border-radius: 8px;
border-radius: 8px;
-webkit-box-shadow: -2px 2px 1px black;
-mozilla-box-shadow: -2px 2px 1px black;
-o-box-shadow: -2px 2px 1px black;
-ms-box-shadow: -2px 2px 1px black;
box-shadow: -2px 2px 1px black;
background-color: #888;
color: white;
}

.theForm > label {
font-size: .8em;
}
font-size: .8em;
}
28 changes: 14 additions & 14 deletions tests/styles/one.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,27 +1,27 @@
body {
background-color: #506077;
color: black;
margin: 75px;
font-family: 'Open Sans', sans-serif;
background-color: #506077;
color: black;
margin: 75px;
font-family: 'Open Sans', sans-serif;
}

h1 {
color: gray;
font-size: 2em;
margin: 0;
color: gray;
font-size: 2em;
margin: 0;
}

h1 > a {
color: gray;
color: gray;
}

h2 {
margin: 0 0 0 25px;
color: #203044;
font-size: 1.5em;
margin: 0 0 0 25px;
color: #203044;
font-size: 1.5em;
}

h2 > a {
text-decoration: none;
color: #304055;
}
text-decoration: none;
color: #304055;
}
52 changes: 26 additions & 26 deletions tests/styles/three.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,33 +1,33 @@
.theForm {
border: 2px solid white;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
-o-border-radius: 5px;
-ms-border-radius: 5px;
border-radius: 5px;
background-color: #DDD;
position: absolute;
bottom: 25px;
right: 25px;
color: black;
border: 2px solid white;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
-o-border-radius: 5px;
-ms-border-radius: 5px;
border-radius: 5px;
background-color: #DDD;
position: absolute;
bottom: 25px;
right: 25px;
color: black;
}

.theForm > legend {
border: 2px solid white;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
-o-border-radius: 5px;
-ms-border-radius: 5px;
border-radius: 5px;
-webkit-box-shadow: 2px 2px 1px black;
-mozilla-box-shadow: 2px 2px 1px black;
-o-box-shadow: 2px 2px 1px black;
-ms-box-shadow: 2px 2px 1px black;
box-shadow: 2px 2px 1px black;
background-color: #DDD;
color: black;
border: 2px solid white;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
-o-border-radius: 5px;
-ms-border-radius: 5px;
border-radius: 5px;
-webkit-box-shadow: 2px 2px 1px black;
-mozilla-box-shadow: 2px 2px 1px black;
-o-box-shadow: 2px 2px 1px black;
-ms-box-shadow: 2px 2px 1px black;
box-shadow: 2px 2px 1px black;
background-color: #DDD;
color: black;
}

.theForm > label {
font-size: 1em;
}
font-size: 1em;
}
Loading