0012126: Use canvas print only for sheet print
[tine20] / tine20 / Calendar / js / Printer / DaysView.js
1 Tine.Calendar.Printer.EventRenderer
2 Tine.Calendar.Printer.DaysViewRenderer = Ext.extend(Tine.Calendar.Printer.BaseRenderer, {
3     paperHeight: 200, 
4     
5     printMode: 'sheet',
6     
7     generateBody: function(view) {
8         var mode = Ext.util.Format.capitalize(this.printMode),
9             method = 'generate' + mode + 'HTML';
10         
11         return this[method](view);
12     },
13     
14     /**
15      * Returns the HTML that will be placed into the <head> element of th print window.
16      * @param {Ext.Component} component The component to render
17      * @return {String} The HTML fragment to place inside the print window's <head> element
18      */
19     getAdditionalHeaders: function(component) {
20         var calendarCSS = Tine.clientVersion.buildType.match(/DEBUG|RELEASE/) ? 
21             '@import url(Calendar/css/Calendar-FAT.css);' : (
22             
23             '@import url(Calendar/css/daysviewpanel.css);' +
24             '@import url(Calendar/css/Calendar.css);'
25         );
26             
27         var head = 
28             '<style type="text/css" title="text/css" media="screen,print">' +
29                 '@import url(library/ExtJS/resources/css/ext-all.css);' +
30                 calendarCSS +
31             '</style>';
32         
33         return head;
34     },
35
36     onBeforePrint: function(document, view) {
37         if (this.printMode == 'sheet') {
38             this.useHtml2Canvas = true;
39
40             if (view.cropDayTime) {
41                 var node = document.getElementById(this.panelId),
42                     cropper = node.getElementsByClassName('cal-daysviewpanel-cropper')[0],
43                     dayStartPx = view.getTimeOffset(view.dayStart);
44
45                 cropper.scrollTop = dayStartPx;
46             }
47         }
48     },
49
50     generateSheetHTML: function(view) {
51         var node = view.el.dom.cloneNode(true),
52             daysViewPanel = node.firstChild,
53             header = node.getElementsByClassName('cal-daysviewpanel-wholedayheader-scroller')[0],
54             scroller = node.getElementsByClassName('cal-daysviewpanel-scroller')[0],
55             cropper = node.getElementsByClassName('cal-daysviewpanel-cropper')[0],
56             body = node.getElementsByClassName('cal-daysviewpanel-body')[0],
57             dayStartPx = view.getTimeOffset(view.dayStart),
58             fullHeight = view.getTimeOffset(view.startDate.add(Date.DAY, 1).add(Date.MINUTE, -1)),
59             cropHeight = view.dayEndPx - dayStartPx + 20,
60             scrollerHeight = view.cropDayTime ? cropHeight : fullHeight;
61
62         daysViewPanel.id = this.panelId = Ext.id();
63
64         // resize header/scroller to fullsize
65         // @TODO: if you have a lot of allDayEvents, your scroller gets smaller,
66         //        this might be confusing in print
67         header.style.height = Math.max(header.firstChild.style.height, header.style.height);
68         scroller.style.width = null;
69
70         return this.generateTitle(view) + node.innerHTML;
71     },
72     
73     generateGridHTML: function(view) {
74         var daysHtml = this.splitDays(view.store, view.startDate, view.numOfDays),
75             body = [];
76         
77         body.push(this.generateTitle(view));
78         
79         if (view.numOfDays === 1) {
80             body.push(String.format('<div class="cal-print-day-singleday">{0}</div>', daysHtml[0]));
81         } else if (view.numOfDays < 9) {
82             if (view.numOfDays == 7 && view.startDate.format('w') == 1) {
83                 // iso week
84                 body.push(this.generateIsoWeek(daysHtml));
85             } else {
86                 body.push(String.format('<table>{0}</table>', this.generateCalRows(daysHtml, 2)));
87             }
88         } else {
89             body.push(String.format('<table>{0}</table>', this.generateCalRows(daysHtml, 2, true)));
90         }
91         
92         return body.join("\n");
93     },
94     
95     getTitle: function(view) {
96         if (view.numOfDays == 1) {
97             return String.format(view.dayFormatString + ' {3}', view.startDate.format('l'), view.startDate.format('j'), view.startDate.format('F'), view.startDate.format('Y'));
98         } else {
99             var endDate = view.startDate.add(Date.DAY, view.numOfDays -1),
100                 startDayOfMonth = view.startDate.format('j. '),
101                 startMonth = view.startDate.format('F '),
102                 startYear = view.startDate.format('Y '),
103                 endDayOfMonth = endDate.format('j. '),
104                 endMonth = endDate.format('F '),
105                 endYear = endDate.format('Y '),
106                 week = view.numOfDays == 7 ? String.format(view.app.i18n._('Week {0} :'), view.startDate.add(Date.DAY, 1).getWeekOfYear()) + ' ' : '';
107                 
108                 if (startYear === endYear) startYear = '';
109                 if (startMonth === endMonth) startMonth = '';
110                 
111                 return week + startDayOfMonth + startMonth + startYear + ' - ' + endDayOfMonth + endMonth + endYear;
112         }
113     },
114   
115     generateIsoWeek: function(daysHtml) {
116         var height = this.paperHeight/4;
117         return ['<table>',
118             '<tr style="height: ' + height + 'mm;">',
119                 '<td class="cal-print-daycell" width="50%">', daysHtml[0], '</td>',
120                 '<td class="cal-print-daycell" width="50%">', daysHtml[3], '</td>',
121             '</tr>', 
122             '<tr style="height: ' + height + 'mm;">',
123                 '<td class="cal-print-daycell" width="50%">', daysHtml[1], '</td>',
124                 '<td class="cal-print-daycell" width="50%">', daysHtml[4], '</td>',
125             '</tr>', 
126             '<tr style="height: ' + height + 'mm;">',
127                 '<td class="cal-print-daycell" width="50%">', daysHtml[2], '</td>',
128                 '<td class="cal-print-daycell" width="50%">',
129                     '<table style="padding: 0;">',
130                         '<tr style="height: ' + height/2 + 'mm;">',
131                             '<td class="cal-print-daycell" width="100%" style="padding: 0;">', daysHtml[5], '</td>',
132                         '</tr>',
133                         '<tr style="height: ' + height/2 + 'mm;">',
134                             '<td class="cal-print-daycell" width="100%" style="padding: 0;">', daysHtml[6], '</td>',
135                         '</tr>', 
136                     '</table>',
137             '</tr>', 
138         '</table>'].join("\n");
139     }
140 });