Açıklama Yok

recipes-printthis.js 9.4KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291
  1. /*
  2. * printThis v1.9.0
  3. * @desc Printing plug-in for jQuery
  4. * @author Jason Day
  5. *
  6. * Resources (based on) :
  7. * jPrintArea: http://plugins.jquery.com/project/jPrintArea
  8. * jqPrint: https://github.com/permanenttourist/jquery.jqprint
  9. * Ben Nadal: http://www.bennadel.com/blog/1591-Ask-Ben-Print-Part-Of-A-Web-Page-With-jQuery.htm
  10. *
  11. * Licensed under the MIT licence:
  12. * http://www.opensource.org/licenses/mit-license.php
  13. *
  14. * (c) Jason Day 2015
  15. *
  16. * Usage:
  17. *
  18. * $("#mySelector").printThis({
  19. * debug: false, * show the iframe for debugging
  20. * importCSS: true, * import page CSS
  21. * importStyle: false, * import style tags
  22. * printContainer: true, * grab outer container as well as the contents of the selector
  23. * loadCSS: "path/to/my.css", * path to additional css file - us an array [] for multiple
  24. * pageTitle: "", * add title to print page
  25. * removeInline: false, * remove all inline styles from print elements
  26. * printDelay: 333, * variable print delay
  27. * header: null, * prefix to html
  28. * footer: null, * postfix to html
  29. * base: false, * preserve the BASE tag, or accept a string for the URL
  30. * formValues: true * preserve input/form values
  31. * canvas: false * copy canvas elements (experimental)
  32. * doctypeString: '...' * enter a different doctype for older markup
  33. * });
  34. *
  35. * Notes:
  36. * - the loadCSS will load additional css (with or without @media print) into the iframe, adjusting layout
  37. *
  38. */
  39. ( function ( $ ) {
  40. var opt;
  41. $.fn.printThis = function ( options ) {
  42. opt = $.extend( {}, $.fn.printThis.defaults, options );
  43. var $element = this instanceof jQuery ? this : $( this );
  44. var strFrameName = 'printThis-' + new Date().getTime();
  45. if ( window.location.hostname !== document.domain && navigator.userAgent.match( /msie/i ) ) {
  46. // Ugly IE hacks due to IE not inheriting document.domain from parent
  47. // checks if document.domain is set by comparing the host name against document.domain
  48. var iframeSrc =
  49. 'javascript:document.write("<head><script>document.domain=\\"' +
  50. document.domain +
  51. '\\";</s' +
  52. 'cript></head><body></body>")';
  53. var printI = document.createElement( 'iframe' );
  54. printI.name = 'printIframe';
  55. printI.id = strFrameName;
  56. printI.className = 'MSIE';
  57. document.body.appendChild( printI );
  58. printI.src = iframeSrc;
  59. } else {
  60. // other browsers inherit document.domain, and IE works if document.domain is not explicitly set
  61. var $frame = $( "<iframe id='" + strFrameName + "' name='printIframe' />" );
  62. $frame.appendTo( 'body' );
  63. }
  64. var $iframe = $( '#' + strFrameName );
  65. // show frame if in debug mode
  66. if ( ! opt.debug )
  67. $iframe.css( {
  68. position: 'absolute',
  69. width: '0px',
  70. height: '0px',
  71. left: '-600px',
  72. top: '-600px',
  73. } );
  74. // $iframe.ready() and $iframe.load were inconsistent between browsers
  75. setTimeout( function () {
  76. // Add doctype to fix the style difference between printing and render
  77. function setDocType( $iframe, doctype ) {
  78. var win, doc;
  79. win = $iframe.get( 0 );
  80. win = win.contentWindow || win.contentDocument || win;
  81. doc = win.document || win.contentDocument || win;
  82. doc.open();
  83. doc.write( doctype );
  84. doc.close();
  85. }
  86. if ( opt.doctypeString ) {
  87. setDocType( $iframe, opt.doctypeString );
  88. }
  89. var $doc = $iframe.contents(),
  90. $head = $doc.find( 'head' ),
  91. $body = $doc.find( 'body' ),
  92. $base = $( 'base' ),
  93. baseURL;
  94. // add base tag to ensure elements use the parent domain
  95. if ( opt.base === true && $base.length > 0 ) {
  96. // take the base tag from the original page
  97. baseURL = $base.attr( 'href' );
  98. } else if ( typeof opt.base === 'string' ) {
  99. // An exact base string is provided
  100. baseURL = opt.base;
  101. } else {
  102. // Use the page URL as the base
  103. baseURL = document.location.protocol + '//' + document.location.host;
  104. }
  105. $head.append( '<base href="' + baseURL + '">' );
  106. // import page stylesheets
  107. if ( opt.importCSS )
  108. $( 'link[rel=stylesheet]' ).each( function () {
  109. var href = $( this ).attr( 'href' );
  110. if ( href ) {
  111. var media = $( this ).attr( 'media' ) || 'all';
  112. $head.append(
  113. "<link type='text/css' rel='stylesheet' href='" + href + "' media='" + media + "'>"
  114. );
  115. }
  116. } );
  117. // import style tags
  118. if ( opt.importStyle )
  119. $( 'style' ).each( function () {
  120. $( this ).clone().appendTo( $head );
  121. } );
  122. // add title of the page
  123. if ( opt.pageTitle ) $head.append( '<title>' + opt.pageTitle + '</title>' );
  124. // import additional stylesheet(s)
  125. if ( opt.loadCSS ) {
  126. if ( $.isArray( opt.loadCSS ) ) {
  127. jQuery.each( opt.loadCSS, function ( index, value ) {
  128. $head.append( "<link type='text/css' rel='stylesheet' href='" + this + "'>" );
  129. } );
  130. } else {
  131. $head.append( "<link type='text/css' rel='stylesheet' href='" + opt.loadCSS + "'>" );
  132. }
  133. }
  134. // print header
  135. if ( opt.header ) $body.append( opt.header );
  136. if ( opt.canvas ) {
  137. // add canvas data-ids for easy access after the cloning.
  138. var canvasId = 0;
  139. $element.find( 'canvas' ).each( function () {
  140. $( this ).attr( 'data-printthis', canvasId++ );
  141. } );
  142. }
  143. // grab $.selector as container
  144. if ( opt.printContainer ) $body.append( $element.outer() );
  145. // otherwise just print interior elements of container
  146. else
  147. $element.each( function () {
  148. $body.append( $( this ).html() );
  149. } );
  150. if ( opt.canvas ) {
  151. // Re-draw new canvases by referencing the originals
  152. $body.find( 'canvas' ).each( function () {
  153. var cid = $( this ).data( 'printthis' ),
  154. $src = $( '[data-printthis="' + cid + '"]' );
  155. this.getContext( '2d' ).drawImage( $src[ 0 ], 0, 0 );
  156. // Remove the mark-up from the original
  157. $src.removeData( 'printthis' );
  158. } );
  159. }
  160. // capture form/field values
  161. if ( opt.formValues ) {
  162. // loop through inputs
  163. var $input = $element.find( 'input' );
  164. if ( $input.length ) {
  165. $input.each( function () {
  166. var $this = $( this ),
  167. $name = $( this ).attr( 'name' ),
  168. $checker = $this.is( ':checkbox' ) || $this.is( ':radio' ),
  169. $iframeInput = $doc.find( 'input[name="' + $name + '"]' ),
  170. $value = $this.val();
  171. // order matters here
  172. if ( ! $checker ) {
  173. $iframeInput.val( $value );
  174. } else if ( $this.is( ':checked' ) ) {
  175. if ( $this.is( ':checkbox' ) ) {
  176. $iframeInput.attr( 'checked', 'checked' );
  177. } else if ( $this.is( ':radio' ) ) {
  178. $doc
  179. .find( 'input[name="' + $name + '"][value="' + $value + '"]' )
  180. .attr( 'checked', 'checked' );
  181. }
  182. }
  183. } );
  184. }
  185. // loop through selects
  186. var $select = $element.find( 'select' );
  187. if ( $select.length ) {
  188. $select.each( function () {
  189. var $this = $( this ),
  190. $name = $( this ).attr( 'name' ),
  191. $value = $this.val();
  192. $doc.find( 'select[name="' + $name + '"]' ).val( $value );
  193. } );
  194. }
  195. // loop through textareas
  196. var $textarea = $element.find( 'textarea' );
  197. if ( $textarea.length ) {
  198. $textarea.each( function () {
  199. var $this = $( this ),
  200. $name = $( this ).attr( 'name' ),
  201. $value = $this.val();
  202. $doc.find( 'textarea[name="' + $name + '"]' ).val( $value );
  203. } );
  204. }
  205. } // end capture form/field values
  206. // remove inline styles
  207. if ( opt.removeInline ) {
  208. // $.removeAttr available jQuery 1.7+
  209. if ( $.isFunction( $.removeAttr ) ) {
  210. $doc.find( 'body *' ).removeAttr( 'style' );
  211. } else {
  212. $doc.find( 'body *' ).attr( 'style', '' );
  213. }
  214. }
  215. // print "footer"
  216. if ( opt.footer ) $body.append( opt.footer );
  217. setTimeout( function () {
  218. if ( $iframe.hasClass( 'MSIE' ) ) {
  219. // check if the iframe was created with the ugly hack
  220. // and perform another ugly hack out of neccessity
  221. window.frames[ 'printIframe' ].focus();
  222. $head.append( '<script> window.print(); </s' + 'cript>' );
  223. } else {
  224. // proper method
  225. if ( document.queryCommandSupported( 'print' ) ) {
  226. $iframe[ 0 ].contentWindow.document.execCommand( 'print', false, null );
  227. } else {
  228. $iframe[ 0 ].contentWindow.focus();
  229. $iframe[ 0 ].contentWindow.print();
  230. }
  231. }
  232. // remove iframe after print
  233. if ( ! opt.debug ) {
  234. setTimeout( function () {
  235. $iframe.remove();
  236. }, 1000 );
  237. }
  238. }, opt.printDelay );
  239. }, 333 );
  240. };
  241. // defaults
  242. $.fn.printThis.defaults = {
  243. debug: false, // show the iframe for debugging
  244. importCSS: true, // import parent page css
  245. importStyle: false, // import style tags
  246. printContainer: true, // print outer container/$.selector
  247. loadCSS: '', // load an additional css file - load multiple stylesheets with an array []
  248. pageTitle: '', // add title to print page
  249. removeInline: false, // remove all inline styles
  250. printDelay: 333, // variable print delay
  251. header: null, // prefix to html
  252. footer: null, // postfix to html
  253. formValues: true, // preserve input/form values
  254. canvas: false, // Copy canvas content (experimental)
  255. base: false, // preserve the BASE tag, or accept a string for the URL
  256. doctypeString: '<!DOCTYPE html>', // html doctype
  257. };
  258. // $.selector container
  259. jQuery.fn.outer = function () {
  260. return $( $( '<div></div>' ).html( this.clone() ) ).html();
  261. };
  262. } )( jQuery );