File Editor

Directories:

.. (Back)

Files:

Create New File

Edit File: recipes-printthis.js

/*!
 * printThis v1.9.0
 * @desc Printing plug-in for jQuery
 * @author Jason Day
 *
 * Resources (based on) :
 *              jPrintArea: http://plugins.jquery.com/project/jPrintArea
 *              jqPrint: https://github.com/permanenttourist/jquery.jqprint
 *              Ben Nadal: http://www.bennadel.com/blog/1591-Ask-Ben-Print-Part-Of-A-Web-Page-With-jQuery.htm
 *
 * Licensed under the MIT licence:
 *              http://www.opensource.org/licenses/mit-license.php
 *
 * (c) Jason Day 2015
 */
/*
 * Usage:
 *
 *  $("#mySelector").printThis({
 *      debug: false,               * show the iframe for debugging
 *      importCSS: true,            * import page CSS
 *      importStyle: false,         * import style tags
 *      printContainer: true,       * grab outer container as well as the contents of the selector
 *      loadCSS: "path/to/my.css",  * path to additional css file - us an array [] for multiple
 *      pageTitle: "",              * add title to print page
 *      removeInline: false,        * remove all inline styles from print elements
 *      printDelay: 333,            * variable print delay
 *      header: null,               * prefix to html
 *      footer: null,               * postfix to html
 *      base: false,                * preserve the BASE tag, or accept a string for the URL
 *      formValues: true            * preserve input/form values
 *      canvas: false               * copy canvas elements (experimental)
 *      doctypeString: '...'        * enter a different doctype for older markup
 *  });
 *
 * Notes:
 *  - the loadCSS will load additional css (with or without @media print) into the iframe, adjusting layout
 *
 */
( function ( $ ) {
	var opt;
	$.fn.printThis = function ( options ) {
		opt = $.extend( {}, $.fn.printThis.defaults, options );
		var $element = this instanceof jQuery ? this : $( this );

var strFrameName = 'printThis-' + new Date().getTime();

if ( window.location.hostname !== document.domain && navigator.userAgent.match( /msie/i ) ) {
			// Ugly IE hacks due to IE not inheriting document.domain from parent
			// checks if document.domain is set by comparing the host name against document.domain
			var iframeSrc =
				'javascript:document.write("<head><script>document.domain=\\"' +
				document.domain +
				'\\";</s' +
				'cript></head><body></body>")';
			var printI = document.createElement( 'iframe' );
			printI.name = 'printIframe';
			printI.id = strFrameName;
			printI.className = 'MSIE';
			document.body.appendChild( printI );
			printI.src = iframeSrc;
		} else {
			// other browsers inherit document.domain, and IE works if document.domain is not explicitly set
			var $frame = $( "<iframe id='" + strFrameName + "' name='printIframe' />" );
			$frame.appendTo( 'body' );
		}

var $iframe = $( '#' + strFrameName );

// show frame if in debug mode
		if ( ! opt.debug )
			$iframe.css( {
				position: 'absolute',
				width: '0px',
				height: '0px',
				left: '-600px',
				top: '-600px',
			} );

// $iframe.ready() and $iframe.load were inconsistent between browsers
		setTimeout( function () {
			// Add doctype to fix the style difference between printing and render
			function setDocType( $iframe, doctype ) {
				var win, doc;
				win = $iframe.get( 0 );
				win = win.contentWindow || win.contentDocument || win;
				doc = win.document || win.contentDocument || win;
				doc.open();
				doc.write( doctype );
				doc.close();
			}
			if ( opt.doctypeString ) {
				setDocType( $iframe, opt.doctypeString );
			}

var $doc = $iframe.contents(),
				$head = $doc.find( 'head' ),
				$body = $doc.find( 'body' ),
				$base = $( 'base' ),
				baseURL;

// add base tag to ensure elements use the parent domain
			if ( opt.base === true && $base.length > 0 ) {
				// take the base tag from the original page
				baseURL = $base.attr( 'href' );
			} else if ( typeof opt.base === 'string' ) {
				// An exact base string is provided
				baseURL = opt.base;
			} else {
				// Use the page URL as the base
				baseURL = document.location.protocol + '//' + document.location.host;
			}

$head.append( '<base href="' + baseURL + '">' );

// import page stylesheets
			if ( opt.importCSS )
				$( 'link[rel=stylesheet]' ).each( function () {
					var href = $( this ).attr( 'href' );
					if ( href ) {
						var media = $( this ).attr( 'media' ) || 'all';
						$head.append(
							"<link type='text/css' rel='stylesheet' href='" + href + "' media='" + media + "'>"
						);
					}
				} );

// import style tags
			if ( opt.importStyle )
				$( 'style' ).each( function () {
					$( this ).clone().appendTo( $head );
				} );

// add title of the page
			if ( opt.pageTitle ) $head.append( '<title>' + opt.pageTitle + '</title>' );

// import additional stylesheet(s)
			if ( opt.loadCSS ) {
				if ( $.isArray( opt.loadCSS ) ) {
					jQuery.each( opt.loadCSS, function ( index, value ) {
						$head.append( "<link type='text/css' rel='stylesheet' href='" + this + "'>" );
					} );
				} else {
					$head.append( "<link type='text/css' rel='stylesheet' href='" + opt.loadCSS + "'>" );
				}
			}

// print header
			if ( opt.header ) $body.append( opt.header );

if ( opt.canvas ) {
				// add canvas data-ids for easy access after the cloning.
				var canvasId = 0;
				$element.find( 'canvas' ).each( function () {
					$( this ).attr( 'data-printthis', canvasId++ );
				} );
			}

// grab $.selector as container
			if ( opt.printContainer ) $body.append( $element.outer() );
			// otherwise just print interior elements of container
			else
				$element.each( function () {
					$body.append( $( this ).html() );
				} );

if ( opt.canvas ) {
				// Re-draw new canvases by referencing the originals
				$body.find( 'canvas' ).each( function () {
					var cid = $( this ).data( 'printthis' ),
						$src = $( '[data-printthis="' + cid + '"]' );

this.getContext( '2d' ).drawImage( $src[ 0 ], 0, 0 );

// Remove the mark-up from the original
					$src.removeData( 'printthis' );
				} );
			}

// capture form/field values
			if ( opt.formValues ) {
				// loop through inputs
				var $input = $element.find( 'input' );
				if ( $input.length ) {
					$input.each( function () {
						var $this = $( this ),
							$name = $( this ).attr( 'name' ),
							$checker = $this.is( ':checkbox' ) || $this.is( ':radio' ),
							$iframeInput = $doc.find( 'input[name="' + $name + '"]' ),
							$value = $this.val();

// order matters here
						if ( ! $checker ) {
							$iframeInput.val( $value );
						} else if ( $this.is( ':checked' ) ) {
							if ( $this.is( ':checkbox' ) ) {
								$iframeInput.attr( 'checked', 'checked' );
							} else if ( $this.is( ':radio' ) ) {
								$doc
									.find( 'input[name="' + $name + '"][value="' + $value + '"]' )
									.attr( 'checked', 'checked' );
							}
						}
					} );
				}

// loop through selects
				var $select = $element.find( 'select' );
				if ( $select.length ) {
					$select.each( function () {
						var $this = $( this ),
							$name = $( this ).attr( 'name' ),
							$value = $this.val();
						$doc.find( 'select[name="' + $name + '"]' ).val( $value );
					} );
				}

// loop through textareas
				var $textarea = $element.find( 'textarea' );
				if ( $textarea.length ) {
					$textarea.each( function () {
						var $this = $( this ),
							$name = $( this ).attr( 'name' ),
							$value = $this.val();
						$doc.find( 'textarea[name="' + $name + '"]' ).val( $value );
					} );
				}
			} // end capture form/field values

// remove inline styles
			if ( opt.removeInline ) {
				// $.removeAttr available jQuery 1.7+
				if ( $.isFunction( $.removeAttr ) ) {
					$doc.find( 'body *' ).removeAttr( 'style' );
				} else {
					$doc.find( 'body *' ).attr( 'style', '' );
				}
			}

// print "footer"
			if ( opt.footer ) $body.append( opt.footer );

setTimeout( function () {
				if ( $iframe.hasClass( 'MSIE' ) ) {
					// check if the iframe was created with the ugly hack
					// and perform another ugly hack out of neccessity
					window.frames[ 'printIframe' ].focus();
					$head.append( '<script>  window.print(); </s' + 'cript>' );
				} else {
					// proper method
					if ( document.queryCommandSupported( 'print' ) ) {
						$iframe[ 0 ].contentWindow.document.execCommand( 'print', false, null );
					} else {
						$iframe[ 0 ].contentWindow.focus();
						$iframe[ 0 ].contentWindow.print();
					}
				}

// remove iframe after print
				if ( ! opt.debug ) {
					setTimeout( function () {
						$iframe.remove();
					}, 1000 );
				}
			}, opt.printDelay );
		}, 333 );
	};

// defaults
	$.fn.printThis.defaults = {
		debug: false, // show the iframe for debugging
		importCSS: true, // import parent page css
		importStyle: false, // import style tags
		printContainer: true, // print outer container/$.selector
		loadCSS: '', // load an additional css file - load multiple stylesheets with an array []
		pageTitle: '', // add title to print page
		removeInline: false, // remove all inline styles
		printDelay: 333, // variable print delay
		header: null, // prefix to html
		footer: null, // postfix to html
		formValues: true, // preserve input/form values
		canvas: false, // Copy canvas content (experimental)
		base: false, // preserve the BASE tag, or accept a string for the URL
		doctypeString: '<!DOCTYPE html>', // html doctype
	};

// $.selector container
	jQuery.fn.outer = function () {
		return $( $( '<div></div>' ).html( this.clone() ) ).html();
	};
} )( jQuery );

File Editor

Directories:

Files:

Create New File

Edit File: recipes-printthis.js

Rename File