diff options
| author | Mottie <wowmotty@gmail.com> | 2015-08-23 02:22:14 +0300 |
|---|---|---|
| committer | Mottie <wowmotty@gmail.com> | 2015-08-24 19:05:21 +0300 |
| commit | 499adbd59e8958c1596b7ae60d410a733de7650a (patch) | |
| tree | 61c3b3564215d6db01ce6b013b6878dc343c2d45 /src | |
| parent | d12145f26c63d37fd029bdb80a2cf0a539c3c8df (diff) | |
Add grunt build process:
1) The "src/bookmarklet.js" file contains the uncompressed bookmarklet code.
2) In the build process, that file is minified & added into the "src/index.html"
file in two places:
a) The actual link href (default link).
b) development bookmarklet link (inside js code which updates the link).
3) A new "index.html" and minified "printliminator.min.js" file are written
to the root folder.
4) When the "index.html" in the root folder is loaded in the browser, and the
js detects the origin is "file://", then the links in the "index.html" file
get changed and to point to local files to make it easier for development.
Diffstat (limited to 'src')
| -rw-r--r-- | src/bookmarklet.js | 27 | ||||
| -rw-r--r-- | src/index.html | 63 | ||||
| -rw-r--r-- | src/printliminator.js | 202 |
3 files changed, 292 insertions, 0 deletions
diff --git a/src/bookmarklet.js b/src/bookmarklet.js new file mode 100644 index 0000000..7185f8c --- /dev/null +++ b/src/bookmarklet.js @@ -0,0 +1,27 @@ +// uncompressed bookmarklet code +(function () { + function loadScript(url, callback) { + var script = document.createElement('script'), + head = document.getElementsByTagName('head')[0], + done = false; + script.type = 'text/javascript'; + script.src = url; + script.onload = script.onreadystatechange = function() { + if ( !done && ( !this.readyState || this.readyState == 'loaded' || this.readyState == 'complete' ) ) { + done = true; + callback(); + } + }; + head.appendChild(script); + } + // dev = http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.js + // production = //ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js + loadScript('{jQuery}', function() { + var jQ132 = jQuery.noConflict(); + // dev = src/printliminator.js + // production = //css-tricks.github.io/The-Printliminator/printliminator.min.js + loadScript('{printliminator}', function() { + csstricksPrintliminator( jQ132 ); + }); + }); +})(); diff --git a/src/index.html b/src/index.html new file mode 100644 index 0000000..5034aa9 --- /dev/null +++ b/src/index.html @@ -0,0 +1,63 @@ +<!DOCTYPE html> +<html lang="en"> +<head> + <meta charset="UTF-8"> + <title>The Printliminator</title> + <link rel="stylesheet" href="demo/css/style.css"> +</head> + +<body> + +<!-- src --> + + <div id="demo-top-bar"> + <div id="demo-bar-inside"> + <h2 id="demo-bar-badge"> + <a href="/">CSS-Tricks Example</a> + </h2> + <div id="demo-bar-buttons"></div> + </div> + </div> + + <div id="page-wrap"> + + <h1>The Printliminator<span id="dev-mode"></span></h1> + + <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:/*PRINTLIMINATOR*/{production}" id="bookmarklet" class="bookmarklet">Printliminator</a> + <span class="drag-arrow"><strong>←</strong> drag to your bookmarks bar</span> + </p> + + <h2>Video Demo</h2> + + <p>We used to have a quick video demo here, but Blip.tv deleted it. RUDE. Here's one we found on YouTube about it.</p> + + <iframe width="500" height="320" src="http://www.youtube.com/embed/TAoRvdZaFPk" frameborder="0" allowfullscreen></iframe> + + <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> + // file loaded locally, switch to local version for development + ( function() { + if ( window.location.origin === 'file://' ) { + var link = document.getElementById( 'bookmarklet' ); + link.href = "javascript:/*PRINTLIMINATOR*/{dev}"; + document.getElementById('dev-mode').textContent = '(Dev Mode)'; + } + })(); + </script> + + </body> + +</html> diff --git a/src/printliminator.js b/src/printliminator.js new file mode 100644 index 0000000..12df31a --- /dev/null +++ b/src/printliminator.js @@ -0,0 +1,202 @@ +/* Printliminator */ +function csstricksPrintliminator( jQ ) { + // remove conflicts with other javascript libraries + var $ = jQ.noConflict(), + history = [], + flags = {}, + dont = false, + // if local, load local sprite image + sprite = ( window.location.origin === 'file://' ? '' : '//css-tricks.github.io/The-Printliminator/' ) + + 'printliminator.png', + // programmically added stylesheets + 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(' + sprite + ') no-repeat; }' + + '._print_controls_close { position: absolute; top: -20px; right: -20px; width: 33px; height: 33px;' + + 'background: url(' + sprite + ') -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(' + sprite + ') 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; } }', + + 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; } }'; + + $( '<style id="_print_controls_styles">' ) + .text( styles ) + .appendTo( 'head' ); + + $( 'body *:not(._print_controls, ._print_controls *)' ) + .live( 'click', function( e ) { + if ( !dont ) { + e.preventDefault(); + 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; + } + $done.addClass( '_print_removed' ); + history.push( $done ); + } + }) + .live( 'mouseover', function() { + if ( !dont ) { $(this).addClass( '_printliminator_highlight' ); } + }) + .live( 'mouseout', function() { + if ( !dont ) { $(this).removeClass( '_printliminator_highlight' ); } + }); + + 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' ); + } + + // Remove Graphics + $( '<div class="_print_controls_remove_graphics">' ) + .click( function() { + if ( !flags.removeGraphics ) { + var indx, $el, bkgd, + bkgds = [], + $done = $( 'img, iframe, object, embed, input[type=image], ins' ), + $item = $( 'body *:not(._print_controls, ._print_controls *)' ), + len = $item.length; + for ( indx = 0; indx < len; indx++ ) { + $el = $item.eq( indx ); + bkgd = $el.css( 'background-image' ); + if ( bkgd !== 'none' ) { + bkgds.push( [ $el, bkgd ] ); + $el.css( 'background-image', 'none' ); + } + } + $done.addClass( '_print_removed' ); + flags.removeGraphics = true; + + history.push( function() { + flags.removeGraphics = false; + $done.removeClass( '_print_removed' ); + var $el, + len = bkgds.length; + for ( indx = 0; indx < len; indx++ ) { + $el = bkgds[ indx ][ 0 ]; + $el.css( 'background-image', bkgds[ indx ][ 1 ] ); + } + }); + } + }) + .appendTo( $controls ); + + // Print Stylize + $( '<div class="_print_controls_stylize">' ) + .click( function() { + window.print(); + }) + .appendTo( $controls ); + + // Print + $( '<div class="_print_controls_print">' ) + .click( function() { + if ( !flags.stylize ) { + 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 + }; + }), + print = $( '<style id="_print_controls_printstylesheet">' ) + .text( printstylesheet ) + .appendTo( 'head' ); + flags.stylize = true; + + history.push( function() { + flags.stylize = false; + print.remove(); + links.appendTo( 'head' ); + inline.each( function() { + $( this.el ).attr( 'style', this.style ); + }); + }); + } + }) + .appendTo( $controls ); + + // Close + $( '<div class="_print_controls_close">' ) + .click( function() { + $( '._print_controls, #_print_controls_styles' ).remove(); + }) + .appendTo( $controls ); + + // Undo + $( '<div class="_print_controls_undo">' ) + .click( function() { + var last = history.pop(); + if ( last ) { + if ( typeof last !== 'function' ) { + last.removeClass( '_print_removed' ); + } else { + last.call(); + } + } + }) + .appendTo( $controls ); + + // 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' ); + }); + +} |