http://www.praha8.cz/jq/print/jquery.print-preview.js

1/*!
2* jQuery Print Preview Plugin v1.0.2
3*
4* Copyright 2011, Tim Connell
5* Licensed under the GPL Version 2 license
6* http://www.gnu.org/licenses/gpl-2.0.html
7*
8* Date: Wed Jan 25 00:00:00 2012 -000
9*
10* @author Ezra Pool <[email protected]>
11* @version 1.0.2
12* @since jQuery 1.7
13*/
14var mask, size, $print_modal, $print_controls;
15(function ($) {
16
17    // Initialization
18    $.fn.printPreview = function () {
19        this.each(function () {
20            $(this).bind('click', function (e) {
21                e.preventDefault();
22                if (!$('#print-modal').length) {
23                    $.printPreview.loadPrintPreview();
24                }
25            });
26        });
27        return this;
28    };
29
30    // Private functions
31    
32    $.printPreview = {
33        loadPrintPreview: function () {
34            // Declare DOM objects
35            $print_modal = $('<div id="print-modal"></div>');
36            $print_controls = $('<div id="print-modal-controls">' +
37'<a href="#" class="print" title="Print page">Print page</a>' +
38'<a href="#" class="close" title="Close print preview">Close</a>').hide();
39            var $print_frame = $('<iframe id="print-modal-content" scrolling="no" border="0" frameborder="0" name="print-frame" />');
40
41            // Raise print preview window from the dead, zooooooombies
42            $print_modal
43.hide()
44.append($print_controls)
45.append($print_frame)
46.appendTo('body');
47
48            // The frame lives
49            var print_frame_ref = $print_frame.get(0).contentDocument;
50
51            print_frame_ref.open();
52            print_frame_ref.write('<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">' +
53'<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">' +
54'<head><title>' + document.title + '</title></head>' +
55'<body></body>' +
56'</html>');
57            print_frame_ref.close();
58
59            // Grab contents and apply stylesheet
60            var $iframe_head = $('head link[media*=print], head link[media=all]').clone(),
61$iframe_body = $('body > *:not(#print-modal)').clone();
62            $iframe_head.each(function () {
63                $(this).attr('media', 'all');
64            });
65            if (!$.browser.msie && !($.browser.version < 7)) {
66                $('head', print_frame_ref).append($iframe_head);
67                $('body', print_frame_ref).append($iframe_body);
68            }
69            else {
70                $('body > *:not(#print-modal)').clone().each(function () {
71                    $('body', print_frame_ref).append(this.outerHTML);
72                });
73                $('head link[media*=print], head link[media=all]').each(function () {
74                    $('head', print_frame_ref).append($(this).clone().attr('media', 'all')[0].outerHTML);
75                });
76            }
77
78            // Disable all links
79            $('a', print_frame_ref).bind('click.printPreview', function (e) {
80                e.preventDefault();
81            });
82
83            // Introduce print styles
84            $('head').append('<style type="text/css">' +
85'@media print {' +
86'/* -- Print Preview --*/' +
87'#print-modal-mask,' +
88'#print-modal {' +
89'display: none !important;' +
90'}' +
91'}' +
92'</style>'
93);
94
95            // Load mask
96            $.printPreview.loadMask();
97
98            // Disable scrolling
99            $('body').css({
100                overflowY: 'hidden',
101                height: '100%'
102            });
103
104            $('img').on('load', print_frame_ref, function () {
105                $print_frame.height($print_frame.contents().height());
106            })
107
108            // Position modal
109            starting_position = $(window).height() + $(window).scrollTop();
110            var css = {
111                top: starting_position,
112                height: '100%',
113                overflowY: 'auto',
114                zIndex: 10000,
115                display: 'block'
116            }
117            $print_modal
118.css(css)
119.animate({
120    top: $(window).scrollTop()
121}, 400, 'linear', function () {
122    $print_controls.fadeIn('slow').focus();
123});
124
125            $print_frame.height($print_frame.contents().height());
126
127            // Bind closure
128            $('a', $print_controls).bind('click', function (e) {
129                e.preventDefault();
130                if ($(this).hasClass('print')) {
131                    window.print();
132                }
133                else {
134                    $.printPreview.destroyPrintPreview();
135                }
136            });
137        },
138
139        destroyPrintPreview: function () {
140            $print_controls.fadeOut(100);
141            $print_modal.animate({
142                top: $(window).scrollTop() - $(window).height(),
143                opacity: 1
144            }, 400, 'linear', function () {
145                $print_modal.remove();
146                $('body').css({
147                    overflowY: 'auto',
148                    height: 'auto'
149                });
150            });
151            $mask.fadeOut('slow', function () {
152                $mask.remove();
153            });
154

155            $(document).unbind("keydown.printPreview.mask");
156            $mask.unbind("click.printPreview.mask");
157            $(window).unbind("resize.printPreview.mask");
158        },
159
160        /* -- Mask Functions --*/
161        loadMask: function () {
162            size = $.printPreview.sizeUpMask();
163            $mask = $('<div id="print-modal-mask" />').appendTo($('body'));
164            $mask.css({
165                position: 'absolute',
166                top: 0,
167                left: 0,
168                width: size[0],
169                height: size[1],
170                display: 'none',
171                opacity: 0,
172                zIndex: 9999,
173                backgroundColor: '#000'
174            });
175
176            $mask.css({
177                display: 'block'
178            }).fadeTo('400', 0.75);
179
180            $(window).bind("resize.printPreview.mask", function () {
181                $.printPreview.updateMaskSize();
182            });
183
184            $mask.bind("click.printPreview.mask", function (e) {
185                $.printPreview.destroyPrintPreview();
186            });
187
188            $(document).bind("keydown.printPreview.mask", function (e) {
189                if (e.keyCode == 27) {
190                    $.printPreview.destroyPrintPreview();
191                }
192            });
193        },
194
195        sizeUpMask: function () {
196            if ($.browser.msie) {
197                // if there are no scrollbars then use window.height
198                var d = $(document).height(), w = $(window).height();
199                return [
200window.innerWidth || // ie7+
201document.documentElement.clientWidth || // ie6
202document.body.clientWidth, // ie6 quirks mode
203d - w < 20 ? w : d
204];
205            } else {
206                return [$(document).width(), $(document).height()];
207            }
208        },
209
210        updateMaskSize: function () {
211            var size = $.printPreview.sizeUpMask();
212            $mask.css({
213                width: size[0],
214                height: size[1]
215            });
216        }
217    }
218})(jQuery);