Internalize all css & modify code to use css class names

2 files changed, 132 insertions, 217 deletions

diff --git a/index.html b/index.html
index 04ebcad..d0177f2 100644
--- a/index.html
+++ b/index.html
@@ -26,9 +26,8 @@
 		Here is the bookmarklet:</p>
 
 		<p>
-			<a href="javascript:(function(){function%20loadScript(a,b){var%20c=document.createElement('script');c.type='text/javascript';c.src=a;var%20d=document.getElementsByTagName('head')[0],done=false;c.onload=c.onreadystatechange=function(){if(!done&amp;&amp;(!this.readyState||this.readyState=='loaded'||this.readyState=='complete')){done=true;b()}};d.appendChild(c)}loadScript('http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js',function(){loadScript('http://css-tricks.github.io/The-Printliminator/js/printliminator.js',function(){printliminator()})})})()" class="bookmarklet">Printliminator</a>
+			<a href="javascript:/*PRINTLIMINATOR*/(function(){function%20loadScript(a,b){var%20c=document.createElement('script');c.type='text/javascript';c.src=a;var%20d=document.getElementsByTagName('head')[0],done=false;c.onload=c.onreadystatechange=function(){if(!done&amp;&amp;(!this.readyState||this.readyState=='loaded'||this.readyState=='complete')){done=true;b()}};d.appendChild(c)}loadScript('//ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js',function(){var%20jq=jQuery.noConflict();loadScript('//css-tricks.github.io/The-Printliminator/js/printliminator.js',function(){csstricksPrintliminator(jq)})})})()" class="bookmarklet">Printliminator</a>
 			<span style="font-size: 14px;">&lt; drag to your bookmarks bar</span>
-		</p>
 
 		<h2>Video Demo</h2>
 
diff --git a/js/printliminator.js b/js/printliminator.js
index 035a53a..4cb5650 100644
--- a/js/printliminator.js
+++ b/js/printliminator.js
@@ -1,259 +1,175 @@
-function printlimator() {
-	//remove conflicts with other javascript libraries
-	var $ = jQuery;
+/* Printliminator */
+function csstricksPrintliminator( jQ ) {
+	// remove conflicts with other javascript libraries
+	var $ = jQ.noConflict(),
+	history = [],
+	dont = false,
+	// programmically added stylesheets
+	root = '', // '//css-tricks.com/examples/ThePrintliminator/';
+	styles = '' +
+		'._print_controls { position: fixed; top: 25px; right: 25px; width: 162px; height: 182px; z-index: 10000;' +
+			'-moz-user-select: none; -webkit-user-select: none; -ms-user-select: none;' +
+			'background: url(' + root + 'images/printliminator2.png) no-repeat; }' +
+		'._print_controls_close { position: absolute; top: -20px; right: -20px; width: 33px; height: 33px;' +
+			'background: url(' + root + 'images/printliminator2.png) -222px -3px no-repeat; }' +
+		'._print_controls_close:hover { background-position: -222px -39px; }' +
+		'._print_controls_remove_graphics, ._print_controls_print, ._print_controls_undo, ._print_controls_stylize {' +
+			'position: absolute; height: 74px; width: 74px;' +
+			'background: url(' + root + 'images/printliminator2.png) no-repeat; }' +
+		'._print_controls_remove_graphics { top: 6px; left: 6px; background-position: 0px -182px; }' +
+		'._print_controls_remove_graphics:hover { background-position: 0 -256px; }' +
+		'._print_controls_remove_graphics.active { background-position: 0 -330px; }' +
+		'._print_controls_print { top: 83px; left: 83px; background-position: -74px -182px; }' +
+		'._print_controls_print:hover { background-position: -74px -256px; }' +
+		'._print_controls_print.active { background-position: -74px -330px; }' +
+		'._print_controls_undo { top: 83px; left: 6px; background-position: -148px -182px; }' +
+		'._print_controls_undo:hover { background-position: -148px -256px; }' +
+		'._print_controls_undo.active { background-position: -148px -330px; }' +
+		'._print_controls_stylize { top: 6px; left: 83px; background-position: -222px -182px; }' +
+		'._print_controls_stylize:hover { background-position: -222px -256px; }' +
+		'._print_controls_stylize.active { background-position: -222px -330px; }' +
+		'._print_removed { display: none !important; }' +
+		'._printliminator_highlight { outline: 3px solid red; }' +
+		'@media print{ ._print_controls { display: none; } }',
 
-	//like the hover function, but for mousedown state
-	$.fn.active = function(fn1, fn2) {
-		var el = this;
-		$(el).mousedown(fn1);
-		$(document).mouseup(function() {
-			fn2.call(el);
-		});
-		return this;
-	};
+	printstylesheet = '@media print, screen {' +
+		'body { margin:0; padding:0; line-height: 1.4; word-spacing: 1.1pt; letter-spacing: 0.2pt;' +
+			'font-family: Garamond, "Times New Roman", serif; color: #000; background: none; font-size: 12pt; }' +
+		'h1, h2, h3, h4, h5, h6 { font-family: Helvetica, Arial, sans-serif; }' +
+		'h1 { font-size: 19pt; }' +
+		'h2 { font-size: 17pt; }' +
+		'h3 { font-size: 15pt; }' +
+		'h4, h5, h6 { font-size: 12pt; }' +
+		'code { font: 10pt Courier, monospace; }' +
+		'blockquote { margin: 1.3em; padding: 1em;  font-size: 10pt; }' +
+		'hr { background-color: #ccc; }' +
+		'img { float: left; margin: 1em 1.5em 1.5em 0; }' +
+		'a img { border: none; }' +
+		'table { margin: 1px; text-align: left; border-collapse: collapse; }' +
+		'th { border: 1px solid #333;  font-weight: bold; }' +
+		'td { border: 1px solid #333; }' +
+		'th, td { padding: 4px 10px; }' +
+		'tfoot { font-style: italic; }' +
+		'caption { background: #fff; margin-bottom: 20px; text-align: left; }' +
+		'thead {display: table-header-group; }' +
+		'tr { page-break-inside: avoid; }' +
+		'} @media screen { body { padding: 20px; } }';
 
-	var history = [];
+	$( '<style id="_print_controls_styles">' )
+		.text( styles )
+		.appendTo( 'head' );
 
-	var dont = false;
-	$('body *:not(._print_controls, ._print_controls *)')
-		.live('click', function(e) {
-			if (!dont) {
+	$( 'body *:not(._print_controls, ._print_controls *)' )
+		.live( 'click', function( e ) {
+			if ( !dont ) {
 				e.preventDefault();
-				var done;
-				if (e.altKey) {
-					done = $("body *").not("._print_controls, ._print_controls *, style")
-					.not($(this).parents().andSelf())
-					.not($(this).find("*"))
-					.hide();
+				var $done,
+					$this = $( this );
+				if ( e.altKey ) {
+					$done = $( 'body *' )
+						.not( '._print_controls, ._print_controls *, style' )
+						.not( $this.parents().andSelf() )
+						.not( $this.find( '*' ) )
+						.addClass( '_print_removed' );
 				} else {
-					done = $(this).hide();
+					$done = $this;
 				}
-
-				done.addClass("_print_removed");
-				history.push(done);
+				$done.addClass( '_print_removed' );
+				history.push( $done );
 			}
 		})
-		.live('mouseover', function() {
-			if (!dont) $(this).css('outline', '3px solid red')
+		.live( 'mouseover', function() {
+			if ( !dont ) { $(this).addClass( '_printliminator_highlight' ); }
 		})
-		.live('mouseout', function() {
-			if (!dont) $(this).css('outline', 'none')
+		.live( 'mouseout', function() {
+			if ( !dont ) { $(this).removeClass( '_printliminator_highlight' ); }
 		});
 
-	var controls = $('<div>')
-		.addClass('_print_controls')
-		.css({
-			position: 'fixed',
-			top: 25,
-			right: 25,
-			width: 162,
-			height: 182,
-			background: 'url(http://css-tricks.com/examples/ThePrintliminator/images/printliminator2.png) no-repeat',
-			zIndex: 10000
-		})
-		.mouseover(function() {
-			dont = true
-		})
-		.mouseout(function() {
-			dont = false
-		})
-		.appendTo('body');
+	var $controls = $( '<div class="_print_controls">' )
+		.appendTo( 'body' );
 
-	//fix IE6, which doesn't support position: fixed
-	if (controls.css('position') != 'fixed') {
-		controls.css('position', 'absolute');
+	// fix IE6, which doesn't support position: fixed
+	if ( $controls.css( 'position' ) !== 'fixed' ) {
+		$controls.css( 'position', 'absolute' );
 	}
 
-	//Remove Graphics
-	$('<div>')
-		.css({
-			background: 'url(http://css-tricks.com/examples/ThePrintliminator/images/printliminator2.png) 0 -182px no-repeat',
-			position: 'absolute',
-			top: 6,
-			left: 6,
-			width: 74,
-			height: 74
-		})
-		.click(function() {
-			var done = $('img,iframe,object,embed,input[type=image],ins').hide();
-			var bg = $('body *:not(._print_controls, ._print_controls *)').css('background');
-			var item = $('body *:not(._print_controls, ._print_controls *)').css('background', 'none');
-
+	// Remove Graphics
+	$( '<div class="_print_controls_remove_graphics">' )
+		.click( function() {
+			var done = $('img,iframe,object,embed,input[type=image],ins').addClass( '_print_removed' ),
+				bg = $('body *:not(._print_controls, ._print_controls *)').css('background'),
+				item = $('body *:not(._print_controls, ._print_controls *)').css('background', 'none');
 			done.addClass("_print_removed");
 			history.push(function() {
 				done.show();
 				item.css('background', bg);
 			});
 		})
-		.hover(function() {
-			$(this).css({
-				"background-position": "0 -256px"
-			})
-		}, function() {
-			$(this).css({
-				"background-position": "0 -182px"
-			})
-		})
-		.active(function() {
-			$(this).css({
-				"background-position": "0 -330px"
-			})
-		}, function() {
-			$(this).css({
-				"background-position": "0 -182px"
-			})
-		})
-		.appendTo(controls);
+		.appendTo( $controls );
 
 	// Print Stylize
-	$('<div>')
-		.css({
-			background: 'url(http://css-tricks.com/examples/ThePrintliminator/images/printliminator2.png) no-repeat -222px -182px',
-			position: 'absolute',
-			top: 6,
-			left: 83,
-			width: 74,
-			height: 74
-		})
-		.click(function() {
+	$( '<div class="_print_controls_stylize">' )
+		.click( function() {
 			window.print();
 		})
-		.hover(function() {
-			$(this).css({
-				"background-position": "-222px -256px"
-			})
-		}, function() {
-			$(this).css({
-				"background-position": "-222px -182px"
-			})
-		})
-		.active(function() {
-			$(this).css({
-				"background-position": "-222px -330px"
-			})
-		}, function() {
-			$(this).css({
-				"background-position": "-222px -182px"
-			})
-		})
-		.appendTo(controls);
+		.appendTo( $controls );
 
-	//Print
-	$('<div>')
-		.css({
-			background: 'url(http://css-tricks.com/examples/ThePrintliminator/images/printliminator2.png) -74px -182px no-repeat',
-			position: 'absolute',
-			top: 83,
-			left: 83,
-			width: 74,
-			height: 74
-		})
-		.hover(function() {
-			$(this).css({
-				"background-position": "-74px -256px"
-			})
-		}, function() {
-			$(this).css({
-				"background-position": "-74px -182px"
-			})
-		})
-		.active(function() {
-			$(this).css({
-				"background-position": "-74px -330px"
-			})
-		}, function() {
-			$(this).css({
-				"background-position": "-74px -182px"
-			})
-		})
-		.click(function() {
-			var links = $("link[rel='stylesheet'], style:not(#_print_control_styles)").remove();
-			//cache and remove inline styles
-			var inline = $('body *:not(._print_controls, ._print_controls > *, ._print_removed)').map(function() {
-				var style = $(this).attr("style");
-				$(this).attr("style", "");
+	// Print
+	$( '<div class="_print_controls_print">' )
+		.click( function() {
+			var links = $( 'link[rel="stylesheet"], style:not(#_print_controls_styles)' ).remove(),
+			// cache and remove inline styles
+			inline = $( 'body *:not(._print_controls, ._print_controls > *, ._print_removed)' ).map( function() {
+				var $this = $( this ),
+					style = $this.attr( 'style' );
+				$this.attr( 'style', '' );
 				return {
 					el: this,
 					style: style
 				};
-			});
-			var print = $("<link rel='stylesheet' type='text/css' href='http://css-tricks.com/examples/ThePrintliminator/css/printliminator.css'/>").appendTo("head");
+			}),
+			print = $( '<style id="_print_controls_printstylesheet">' )
+				.text( printstylesheet )
+				.appendTo( 'head' );
 
-			history.push(function() {
+			history.push( function() {
 				print.remove();
-				links.appendTo("head");
-				inline.each(function() {
-					$(this.el).attr("style", this.style);
+				links.appendTo( 'head' );
+				inline.each( function() {
+					$( this.el ).attr( 'style', this.style );
 				});
 			});
 		})
-		.appendTo(controls);
+		.appendTo( $controls );
 
-	//Close
-	$('<div>')
-		.css({
-			background: 'url(http://css-tricks.com/examples/ThePrintliminator/images/printliminator2.png) -222px -3px no-repeat',
-			position: 'absolute',
-			top: -20,
-			right: -20,
-			width: 33,
-			height: 33
+	// Close
+	$( '<div class="_print_controls_close">' )
+		.click( function() {
+			$( '._print_controls, #_print_controls_styles' ).remove();
 		})
-		.hover(function() {
-			$(this).css({
-				"background-position": "-222px -39px"
-			})
-		}, function() {
-			$(this).css({
-				"background-position": "-222px -3px"
-			})
-		})
-		.click(function() {
-			$('._print_controls').remove();
-		})
-		.appendTo(controls);
+		.appendTo( $controls );
 
-	$("<div>")
-		.css({
-			background: 'url(http://css-tricks.com/examples/ThePrintliminator/images/printliminator2.png) -148px -182px no-repeat',
-			position: 'absolute',
-			top: 83,
-			left: 6,
-			width: 74,
-			height: 74
-		})
-		.hover(function() {
-			$(this).css({
-				"background-position": "-148px -256px"
-			})
-		}, function() {
-			$(this).css({
-				"background-position": "-148px -182px"
-			})
-		})
-		.active(function() {
-			$(this).css({
-				"background-position": "-148px -330px"
-			})
-		}, function() {
-			$(this).css({
-				"background-position": "-148px -182px"
-			})
-		})
-		.click(function() {
+	// Undo
+	$( '<div class="_print_controls_undo">' )
+		.click( function() {
 			var last = history.pop();
-			if (last) {
-				if (typeof last != 'function') {
-					last.removeClass("_print_removed").show();
+			if ( last ) {
+				if ( typeof last !== 'function' ) {
+					last.removeClass( '_print_removed' );
 				} else {
 					last.call();
 				}
 			}
 		})
-		.appendTo(controls);
+		.appendTo( $controls );
 
-		//make sure that the controls don't get printed
-		$('<style id="_print_control_styles">')
-			.text('@media print{._print_controls{display:none;}}')
-			.appendTo("head");
-	}
+	// active state
+	$( '._print_controls_remove_graphics, ._print_controls_print, ._print_controls_undo, ._print_controls_stylize' )
+		.bind( 'mousedown', function() {
+			$( this ).addClass( 'active' );
+		})
+		.bind( 'mouseleave mouseup', function() {
+			$( this ).removeClass( 'active' );
+		});
+
+}