diff options
author | Mottie <wowmotty@gmail.com> | 2015-08-22 06:32:37 +0300 |
---|---|---|
committer | Mottie <wowmotty@gmail.com> | 2015-08-23 20:39:17 +0300 |
commit | 4552ad2ff3a17f57a55bf41778b9264a55d8e06c (patch) | |
tree | 504a77b4e4127435a022b9ecd940e6ae75a65b64 | |
parent | 65a10e0dbc81af4ff124d7b82f8223f507395e6b (diff) |
Internalize all css & modify code to use css class names
-rw-r--r-- | index.html | 3 | ||||
-rw-r--r-- | js/printliminator.js | 346 |
2 files changed, 132 insertions, 217 deletions
@@ -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&&(!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&&(!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;">< 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' ); + }); + +} |