6af1e34de2575371d6b492656897b772b20d84b2
[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             if (view.cropDayTime) {
39                 var node = document.getElementById(this.panelId),
40                     cropper = node.getElementsByClassName('cal-daysviewpanel-cropper')[0],
41                     dayStartPx = view.getTimeOffset(view.dayStart);
42
43                 cropper.scrollTop = dayStartPx;
44             }
45         }
46     },
47
48     generateSheetHTML: function(view) {
49         var node = view.el.dom.cloneNode(true),
50             daysViewPanel = node.firstChild,
51             header = node.getElementsByClassName('cal-daysviewpanel-wholedayheader-scroller')[0],
52             scroller = node.getElementsByClassName('cal-daysviewpanel-scroller')[0],
53             cropper = node.getElementsByClassName('cal-daysviewpanel-cropper')[0],
54             body = node.getElementsByClassName('cal-daysviewpanel-body')[0],
55             dayStartPx = view.getTimeOffset(view.dayStart),
56             fullHeight = view.getTimeOffset(view.startDate.add(Date.DAY, 1).add(Date.MINUTE, -1)),
57             cropHeight = view.dayEndPx - dayStartPx + 20,
58             scrollerHeight = view.cropDayTime ? cropHeight : fullHeight;
59
60         daysViewPanel.id = this.panelId = Ext.id();
61
62         // resize header/scroller to fullsize
63         // @TODO: if you have a lot of allDayEvents, your scroller gets smaller,
64         //        this might be confusing in print
65         header.style.height = Math.max(header.firstChild.style.height, header.style.height);
66         scroller.style.width = null;
67
68         return this.generateTitle(view) + node.innerHTML;
69     },
70     
71     generateGridHTML: function(view) {
72         var daysHtml = this.splitDays(view.store, view.startDate, view.numOfDays),
73             body = [];
74         
75         body.push(this.generateTitle(view));
76         
77         if (view.numOfDays === 1) {
78             body.push(String.format('<div class="cal-print-day-singleday">{0}</div>', daysHtml[0]));
79         } else if (view.numOfDays < 9) {
80             if (view.numOfDays == 7 && view.startDate.format('w') == 1) {
81                 // iso week
82                 body.push(this.generateIsoWeek(daysHtml));
83             } else {
84                 body.push(String.format('<table>{0}</table>', this.generateCalRows(daysHtml, 2)));
85             }
86         } else {
87             body.push(String.format('<table>{0}</table>', this.generateCalRows(daysHtml, 2, true)));
88         }
89         
90         return body.join("\n");
91     },
92     
93     getTitle: function(view) {
94         if (view.numOfDays == 1) {
95             return String.format(view.dayFormatString + ' {3}', view.startDate.format('l'), view.startDate.format('j'), view.startDate.format('F'), view.startDate.format('Y'));
96         } else {
97             var endDate = view.startDate.add(Date.DAY, view.numOfDays -1),
98                 startDayOfMonth = view.startDate.format('j. '),
99                 startMonth = view.startDate.format('F '),
100                 startYear = view.startDate.format('Y '),
101                 endDayOfMonth = endDate.format('j. '),
102                 endMonth = endDate.format('F '),
103                 endYear = endDate.format('Y '),
104                 week = view.numOfDays == 7 ? String.format(view.app.i18n._('Week {0} :'), view.startDate.add(Date.DAY, 1).getWeekOfYear()) + ' ' : '';
105                 
106                 if (startYear === endYear) startYear = '';
107                 if (startMonth === endMonth) startMonth = '';
108                 
109                 return week + startDayOfMonth + startMonth + startYear + ' - ' + endDayOfMonth + endMonth + endYear;
110         }
111     },
112   
113     generateIsoWeek: function(daysHtml) {
114         var height = this.paperHeight/4;
115         return ['<table>',
116             '<tr style="height: ' + height + 'mm;">',
117                 '<td class="cal-print-daycell" width="50%">', daysHtml[0], '</td>',
118                 '<td class="cal-print-daycell" width="50%">', daysHtml[3], '</td>',
119             '</tr>', 
120             '<tr style="height: ' + height + 'mm;">',
121                 '<td class="cal-print-daycell" width="50%">', daysHtml[1], '</td>',
122                 '<td class="cal-print-daycell" width="50%">', daysHtml[4], '</td>',
123             '</tr>', 
124             '<tr style="height: ' + height + 'mm;">',
125                 '<td class="cal-print-daycell" width="50%">', daysHtml[2], '</td>',
126                 '<td class="cal-print-daycell" width="50%">',
127                     '<table style="padding: 0;">',
128                         '<tr style="height: ' + height/2 + 'mm;">',
129                             '<td class="cal-print-daycell" width="100%" style="padding: 0;">', daysHtml[5], '</td>',
130                         '</tr>',
131                         '<tr style="height: ' + height/2 + 'mm;">',
132                             '<td class="cal-print-daycell" width="100%" style="padding: 0;">', daysHtml[6], '</td>',
133                         '</tr>', 
134                     '</table>',
135             '</tr>', 
136         '</table>'].join("\n");
137     }
138 });