first commit

author: Chris Coyier <chriscoyier@gmail.com> 2011-06-30 05:38:44 +0400
committer: Chris Coyier <chriscoyier@gmail.com> 2011-06-30 05:38:44 +0400
commit: 3c9c186796f9c72bb6e50ea8caebf2ea35dc62c4 (patch)
tree: 635afb33f48cc39bc7af4d14b18cfe1847414563
14 files changed, 408 insertions, 0 deletions
diff --git a/.DS_Store b/.DS_Store
new file mode 100644
index 0000000..ba3b77f
--- /dev/null
+++ b/.DS_Store
diff --git a/README.markdown b/README.markdown
new file mode 100644
index 0000000..e69de29
--- /dev/null
+++ b/README.markdown
diff --git a/css/printliminator.css b/css/printliminator.css
new file mode 100644
index 0000000..9c9ef0f
--- /dev/null
+++ b/css/printliminator.css
@@ -0,0 +1,39 @@
+@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; }
+        
+    /*Headings */
+    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; }
+    
+    /* Images */
+    img { float: left; margin: 1em 1.5em 1.5em 0; }
+    a img { border: none; }
+    
+    /* Table */
+    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; }
+}
diff --git a/css/style.css b/css/style.css
new file mode 100644
index 0000000..c007153
--- /dev/null
+++ b/css/style.css
@@ -0,0 +1,14 @@
+/*
+	 CSS-Tricks Example
+	 by Chris Coyier
+	 http://css-tricks.com
+*/
+
+*					{ margin: 0; padding: 0; }
+body				{ font: 20px/1.6 Georgia, serif; }
+
+#page-wrap		    { width: 570px; margin: 25px auto; }
+h1                  { font: bold 50px Helvetica, sans-serif; letter-spacing: -2px; margin: 0 0 15px 0; }
+p                   { margin: 0 0 15px 0; }
+.bookmarklet        { text-decoration: none; background: black; color: white; padding: 8px 20px; -moz-border-radius: 10px; -webkit-border-radius: 10px; }
+h2                  { font: bold 32px Helvetica, sans-serif; letter-spacing: -2px; margin: 40px 0 10px 0; }
+\ No newline at end of file
diff --git a/images/printliminator-bg.png b/images/printliminator-bg.png
new file mode 100644
index 0000000..74073bd
--- /dev/null
+++ b/images/printliminator-bg.png
diff --git a/images/printliminator-close.png b/images/printliminator-close.png
new file mode 100644
index 0000000..dfbfaf5
--- /dev/null
+++ b/images/printliminator-close.png
diff --git a/images/printliminator-printstylize.png b/images/printliminator-printstylize.png
new file mode 100644
index 0000000..8ed777b
--- /dev/null
+++ b/images/printliminator-printstylize.png
diff --git a/images/printliminator-removeimages.png b/images/printliminator-removeimages.png
new file mode 100644
index 0000000..b37d781
--- /dev/null
+++ b/images/printliminator-removeimages.png
diff --git a/images/printliminator-sendtoprinter.png b/images/printliminator-sendtoprinter.png
new file mode 100644
index 0000000..ed273f1
--- /dev/null
+++ b/images/printliminator-sendtoprinter.png
diff --git a/images/printliminator.png b/images/printliminator.png
new file mode 100644
index 0000000..ab8c6cb
--- /dev/null
+++ b/images/printliminator.png
diff --git a/images/printliminator2.png b/images/printliminator2.png
new file mode 100644
index 0000000..8b8a0b9
--- /dev/null
+++ b/images/printliminator2.png
diff --git a/index.php b/index.php
new file mode 100644
index 0000000..fa21a6f
--- /dev/null
+++ b/index.php
@@ -0,0 +1,51 @@
+<head>
+	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
+	
+	<title>The Printliminator</title>
+	
+	<link rel="stylesheet" type="text/css" href="css/style.css" />
+</head>
+
+<body>
+
+	<div id="page-wrap">
+	
+	   <h1>The Printliminator <span style="font-size: 12px; color: red; letter-spacing: 1px;">BETA</span></h1>
+	   
+	   <div style="width: 50px; float: right; margin: 0 0 0 15px;">
+	   <script type="text/javascript" src="http://tweetmeme.com/i/scripts/button.js"></script>
+	   </div>
+	   
+	   <p>The Printliminator is a bookmarklet with some simple tools you can use 
+	   to makes websites print better. One click to activate, and then click to remove 
+	   elements from the page, remove graphics, and apply better print styling. 
+	    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?ver=1.3.2',function(){loadScript('http://css-tricks.com/examples/ThePrintliminator/js/printliminator.js',function(){printlimator()})})})()" class="bookmarklet">Printliminator</a>	       
+            <span style="font-size: 14px;">&lt; drag to your bookmarks bar</span>
+	   </p>
+	
+	   <h2>Quick Video Demo</h2>
+       <embed src="http://blip.tv/play/hMAsgafAFQA" type="application/x-shockwave-flash" width="570" height="428" allowscriptaccess="always" allowfullscreen="true"></embed>	   
+	   
+	   <h2>Credits</h2>
+	   <p>By <a href="http://chriscoyier.net">Chris Coyier</a> and <a href="http://devongovett.wordpress.com/">Devon Govett</a>. 
+	   Icons by <a href="http://wefunction.com/2008/07/function-free-icon-set/">Function</a>. 
+	   Print stylesheet based on <a href="http://code.google.com/p/hartija/">Hartija</a>.</p>
+	
+	</div>
+	
+	<script type="text/javascript">
+	var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
+	document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
+	</script>
+	<script type="text/javascript">
+	var pageTracker = _gat._getTracker("UA-68528-29");
+	pageTracker._initData();
+	pageTracker._trackPageview();
+	</script>
+	
+</body>
+
+</html>
+\ No newline at end of file
diff --git a/js/printliminator-v1.js b/js/printliminator-v1.js
new file mode 100644
index 0000000..c0bd33f
--- /dev/null
+++ b/js/printliminator-v1.js
@@ -0,0 +1,126 @@
+function printlimator() {
+    //remove conflicts with other javascript libraries
+	var $ = jQuery;
+	var dont = false;
+	$('body *:not(._print_controls, ._print_controls *)').live('click', function (e) {
+	    if (!dont) {
+	        e.preventDefault();
+	        if(e.altKey) {
+	        	$("body *").not("._print_controls, ._print_controls *")
+	        			   .not($(this).parents().andSelf())
+	        			   .not($(this).find("*"))
+	        	.remove();
+	       	}
+	        else $(this).remove()
+	    }
+	}).live('mouseover', function () {
+	    if (!dont) $(this).css('outline', '3px solid red')
+	}).live('mouseout', function () {
+	    if (!dont) $(this).css('outline', 'none')
+	});
+	
+	var controls = $('<div>').addClass('_print_controls').css({
+	    position: 'fixed',
+	    top: 15,
+	    right: 15,
+	    width: 258,
+	    height: 101,
+	    background: 'url(http://css-tricks.com/examples/ThePrintliminator/images/printliminator.png) no-repeat',
+	    zIndex: 10000
+	}).mouseover(function () {
+	    dont = true
+	}).mouseout(function () {
+	    dont = false
+	}).appendTo('body');
+	
+	//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/printliminator.png) -68px -101px no-repeat',
+		position: 'absolute',
+		top: 12,
+		left: 15,
+		width: 68,
+		height: 68
+    }).click(function () {
+    	$('img,iframe,object,embed,input[type=image],ins').remove();
+    	$('*:not(._print_controls, ._print_controls *)').css('background-image', 'none');
+	}).hover(function(){
+	   $(this).css({
+	       "background-position": "0 -101px"
+	   })
+	}, function(){
+	   $(this).css({
+	       "background-position": "-68px -101px"
+	   })
+	}).appendTo(controls);
+	
+	// Print Stylize
+	$('<div>').css({
+		background: 'url(http://css-tricks.com/examples/ThePrintliminator/images/printliminator.png) no-repeat -68px -237px',
+		position: 'absolute',
+		top: 12,
+		left: 96,
+		width: 68,
+		height: 68
+    }).click(function () {
+		$("link[rel='stylesheet'], style:not(#_print_control_styles)").remove();
+		$('body *:not(._print_controls, ._print_controls > *)').attr("style", "");
+		$("head").append("<link rel='stylesheet' type='text/css' href='http://css-tricks.com/examples/ThePrintliminator/css/printliminator.css'/>");
+	}).hover(function(){
+	   $(this).css({
+	       "background-position": "0 -237px"
+	   })
+	}, function(){
+	   $(this).css({
+	       "background-position": "-68px -237px"
+	   })
+	}).appendTo(controls);
+	
+	//Print
+	$('<div>').css({
+		background: 'url(http://css-tricks.com/examples/ThePrintliminator/images/printliminator.png) -68px -169px no-repeat',
+		position: 'absolute',
+		top: 12,
+		left: 176,
+		width: 68,
+		height: 68
+    }).hover(function(){
+	   $(this).css({
+	       "background-position": "0 -169px"
+	   })
+	}, function(){
+	   $(this).css({
+	       "background-position": "-68px -169px"
+	   })
+	}).click(function () {
+		window.print();
+	}).appendTo(controls);
+	
+	//Close
+	$('<div>').css({
+		background: 'url(http://css-tricks.com/examples/ThePrintliminator/images/printliminator.png) -258px 0 no-repeat',
+		position: 'absolute',
+		top: -7,
+		right: -7,
+		width: 23,
+		height: 23
+	}).hover(function(){
+	   $(this).css({
+	       "background-position": "-281px 0"
+	   })
+	}, function(){
+	   $(this).css({
+	       "background-position": "-258px 0"
+	   })
+	}).click(function(){
+		$('._print_controls').remove();
+    }).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");
+}
+\ No newline at end of file
diff --git a/js/printliminator.js b/js/printliminator.js
new file mode 100644
index 0000000..23c4a90
--- /dev/null
+++ b/js/printliminator.js
@@ -0,0 +1,178 @@
+function printlimator() {
+    //remove conflicts with other javascript libraries
+	var $ = jQuery;
+	
+	//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;
+	};
+	
+	var history = [];
+	
+	var dont = false;
+	$('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();
+	       	}
+	        else done = $(this).hide();
+	        
+	        done.addClass("_print_removed");
+	        history.push(done);
+	    }
+	}).live('mouseover', function () {
+	    if (!dont) $(this).css('outline', '3px solid red')
+	}).live('mouseout', function () {
+	    if (!dont) $(this).css('outline', 'none')
+	});
+	
+	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');
+	
+	//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');
+    	
+    	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);
+	
+	// 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 () {
+		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);
+	
+	//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", "");
+			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");
+		
+		history.push(function() {
+			print.remove();
+			links.appendTo("head");
+			inline.each(function() {
+				$(this.el).attr("style", this.style);
+			});
+		});
+	}).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
+	}).hover(function(){
+	   $(this).css({ "background-position": "-222px -39px" }) }, function(){
+	   $(this).css({ "background-position": "-222px -3px" })
+	}).click(function(){
+		$('._print_controls').remove();
+    }).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() {
+    	var last = history.pop();
+    	if(last) {
+    		if(typeof last != 'function')
+    			last.removeClass("_print_removed").show();
+    		else last.call();
+    	}
+    }).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");
+}
+\ No newline at end of file
author	Chris Coyier <chriscoyier@gmail.com>	2011-06-30 05:38:44 +0400
committer	Chris Coyier <chriscoyier@gmail.com>	2011-06-30 05:38:44 +0400
commit	3c9c186796f9c72bb6e50ea8caebf2ea35dc62c4 (patch)
tree	635afb33f48cc39bc7af4d14b18cfe1847414563