Ensure properly encoded popup title
[infodrom.org/service.infodrom.org] / src / Infodrom / calendar / index.wml
1 #include <infodrom.style>
2
3 <future>
4 <page func="Infodrom Oldenburg" title="Termine">
5 <script type="text/javascript" src="<root_prefix>jquery.editable.js"></script>
6
7 <style type="text/css">
8 @media only screen and (max-device-width: 400px) {
9     div.view {
10         margin-left: 100px;
11     }
12 }
13
14 @media only screen and (max-device-width: 980px) {
15      button {
16         width: 3em;
17     }
18 }
19
20 div.view {
21     float:right;
22     margin-top:-30px;
23 }
24 div.clear {
25     clear: both;
26     margin-bottom: 3px;
27 }
28 table#calendar tr.row:hover {
29     background: yellow;
30 }
31 table#calendar tr.newkw td {
32     border-top: 1px solid #999;
33 }
34 table#calendar tr.month {
35     background: #a7efff;
36 }
37 table#calendar tr.current {
38     background: orange;
39 }
40 div.bimonth div.monthcolumn {
41     float: left;
42     width: 50%;
43 }
44 div.onemonth div.monthcolumn {
45     float: left;
46     width: 100%;
47 }
48 div.head {
49     font-weight: bold;
50     border-bottom: 1px solid #ccc;
51     text-align: center;
52 }
53 div.day {
54     position: relative;
55     border-bottom: 1px solid #ccc;
56 }
57 div.sunday {
58     border-bottom: 1px solid black;
59 }
60 div.today {
61     background: #90ee90;
62 }
63 div div.wday {
64     width: 1.6em;
65     margin-right: 2px;
66     float: left;
67 }
68 div div.date {
69     width: 1.6em;
70     margin-right: 2px;
71     float: left;
72 }
73 div.kw {
74     position: absolute;
75     top: 0px;
76     right: 1px;
77     color: #999;
78 }
79 div.month table thead td.title {
80   background: #b0e2ff;
81 }
82 div.month table tbody td {
83     height: 100px;
84     vertical-align: top;
85     position: relative;
86 }
87 div.month table tbody td.empty {
88     background: #ddd;
89 }
90 div.month table tbody td span {
91     font-size: 90%;
92 }
93
94 div#termine span {
95     padding-left: 1px;
96     padding-right: 1px;
97 }
98
99 span.menu_title {
100     padding-left: 2px;
101     padding-right: 2px;
102     background: #e0e0e0;
103     font-weight: bold;
104     border-bottom: 1px solid #8f8f8f;
105     display: block;
106 }
107 div.menu {
108     background: #fffb71;
109     position: absolute;
110     border: 1px solid #8f8f8f;
111     z-index: 10;
112 }
113 span.menu {
114     padding-left: 2px;
115     padding-right: 2px;
116     display: block;
117     cursor: default;
118 }
119 span.menu:hover {
120     background: #96ccff;
121 }
122
123 div.popup_body div#log div.caltitle {
124     border-top: 0px !important;
125 }
126 div.logl {
127     float: left;
128     width: 120px;
129 }
130 div.logr {
131     float: left;
132 }
133 div.popup_body div#log div.row0,
134 div.popup_body div#log div.row1 {
135     margin: 0;
136     padding: 0;
137     font-size: 90%;
138     border-top: 1px solid #ccc;
139 }
140 div.popup_body div#log div.row0
141 {
142     background: #eee;
143 }
144 </style>
145
146 <?php
147   $textbrowser = strpos($_SERVER['HTTP_USER_AGENT'], 'Lynx/') !== false || strpos($_SERVER['HTTP_USER_AGENT'], 'w3m/') !== false;
148 ?>
149
150 <input type="hidden" id="thismonth">
151 <div id="termine">
152 <?php
153   if ($textbrowser || (isset($_GET['month']) && $_GET['month'] == 'normal')) {
154 ?>
155 <table id="calendar" width="100%" class="smallfont border" cellspacing="0" summary="">
156 <tr class="head">
157 <th width="5%">KW</th>
158 <th width="20%">Datum</th>
159 <th width="55%">Beschreibung</th>
160 <th width="20%">Location</th>
161 </tr>
162
163 <?php
164   setlocale('LC_TIME', 'de_DE');
165   $now = date('Y-m-d H:i:s');
166   $pivot = date('Y-m-d H:i:s', time()+(7*24*60*60));
167
168   $item = new Calendar();
169   $month = '';
170
171   if (empty($_GET['year'])) {
172     $from = time();
173     $to = false;
174   } else {
175     $from = mktime(0,0,0,1,1,intval($_GET['year']));
176     $to = mktime(0,0,0,1,1,intval($_GET['year'])+1) - 1;
177   }
178   $kw = '';
179   foreach ($item->getItems($from, $to) as $row) {
180     $start = new DateTime($row->dtstart);
181     $newmonth = $start->format('F Y');
182     if ($month != $newmonth) {
183       $month = $newmonth;
184       if ($textbrowser)
185           printf('<tr><td colspan="4">&nbsp;</td></tr>');
186       printf('<tr class="month" month="%s"><td colspan="4">%s</td></tr>',
187              $start->format('Y-m'), $month);
188       $kw = '';
189     }
190
191     $tooltip = '';
192     if (strlen($row->description))
193       $tooltip = sprintf(' title="%s"', htmlspecialchars($row->description));
194
195     $class = 'row';
196     if ($row->dtstart >= $now && $row->dtstart < $pivot)
197       $class .= ' current';
198     if (strlen($kw) && $kw != $row->kw)
199       $class .= ' newkw';
200       
201     $item = new Calendar_Item($row->dav_id);
202     printf('<tr id="%d" class="%s"><td>%s</td><td>%s</td><td>%s</td><td>%s</td></tr>',
203            $row->dav_id,
204            $class,
205            $kw != $row->kw ? $row->kw : '&nbsp;',
206            Calendar::formatTimespan($row->dtstart, $row->dtend),
207            utf8_decode($item->toSpan()),
208            utf8_decode($row->location));
209     $kw = $row->kw;
210   }
211
212 ?>
213
214 </table>
215 <?php
216   } // $textbrowser || month == 'monat'
217 ?>
218 </div>
219 <div class="clear"></div>
220
221 <div id="menu" class="menu" style="display:none;">
222 <span class="menu_title" onmouseup="\$(this).parent().hide()">Titel</span>
223 <span class="menu" onmouseup="add_comment()">Comment</span>
224 <span class="menu" onmouseup="show_log()">Protocol</span>
225 <span class="menu" onmouseup="colorise()">Color</span>
226 <span class="menu" onmouseup="menu_close()">close</span>
227 </div>
228
229 <select name="colorpicker" style="display:none;">
230   <option value="#5484ed">Bold blue</option>
231   <option value="#a4bdfc">Blue</option>
232   <option value="#63b8ff">Steel blue</option>
233   <option value="#87ceeb">Sky blue</option>
234   <option value="#46d6db">Turquoise</option>
235   <option value="#7ae7bf">Light green</option>
236   <option value="#c0ff3e">Olive</option>
237   <option value="#7bd148">Green</option>
238   <option value="#51b749">Bold green</option>
239   <option value="#ffff00">Yellow</option>
240   <option value="#fbd75b">Yellow</option>
241   <option value="#ffb878">Orange</option>
242   <option value="#f4a460">Sandy brown</option>
243   <option value="#ff6a6a">IndianRed</option>
244   <option value="#ffa500">Orange</option>
245   <option value="#ff8247">Sienna</option>
246   <option value="#ff887c">Red</option>
247   <option value="#dc2127">Bold red</option>
248   <option value="#ff7f00">Dark orange</option>
249   <option value="#ee82ee">Violett</option>
250   <option value="#dbadff">Purple</option>
251   <option value="#ff00ff">Magenta</option>
252   <option value="#d4d4d4">Gray</option>
253   <option value="#e1e1e1">Gray</option>
254   <option value="#ededed">Light gray</option>
255 </select>
256
257 <protect><script type="text/javascript">
258 var POPUP_TITLE_COMMENT = '<?php echo utf8_encode('Bemerkung hinzuf├╝gen'); ?>';
259 function menu_close()
260 {
261     $('div#menu').hide();
262 }
263
264 function dom_enhance()
265 {
266     var html = ['<div class="view">',
267                 '<button id="prev" style="display:none;"><img src="'+site_url('pix/left.png')+'" /></button>',
268                 '&nbsp;&nbsp;',
269                 '<button id="sync" style="display:none;"><img src="'+site_url('pix/sync.png')+'" /></button>',
270                 '&nbsp;&nbsp;',
271                 '<button id="next" style="display:none;"><img src="'+site_url('pix/right.png')+'" /></button>',
272                 '&nbsp;&nbsp;',
273                 '<select id="month" style="display:none;">',
274                 '<option value="">jetzt</option>',
275                 '</select>',
276                 '&nbsp;&nbsp;',
277                 '<select id="view">',
278                 '<option value="normal">Normal</option>',
279                 '<option value="bimonth">2 Monate</option>',
280                 '<option value="onemonth">1 Monat</option>',
281                 '<option value="month">Monat</option>',
282                 '</select>',
283                 '</div>'];
284
285     $(html.join('')).insertAfter('h3');
286     $.invoke('Calendar/Months');
287 }
288
289 var logwindow = false;
290 function show_log()
291 {
292     menu_close()
293
294     if (!logwindow) {
295         logwindow = new Popup('Protocol', '460px', false, '<div id="log"></div>');
296         logwindow.centerPopup();
297     } else {
298         logwindow.openPopup();
299     }
300
301     $.invoke('Calendar_Item/Log', {id: $('div#menu').attr('dav_id')}, function(data){
302         if (!is_mobile())
303             make_editable('div#log div.editable');
304     });
305 }
306
307 var commentwindow = false;
308 function add_comment()
309 {
310     menu_close()
311
312     if (!commentwindow) {
313         var html = ['<form id="comment">',
314                     '<input type="hidden" name="id">',
315                     '<label for="name">Name</label>',
316                     '<input name="name" style="width: 296px;">',
317                     '<label for="url">Link</label>',
318                     '<input name="url" style="width: 296px;">',
319                     '<label for="comment">Bemerkung</label>',
320                     '<textarea name="comment" style="width: 296px; height:65px;"></textarea>',
321                     '<div style="text-align: center; margin-top: 5px;"><input type="submit" value="Speichern"></div>',
322                     '</form>'];
323         commentwindow = new Popup(POPUP_TITLE_COMMENT, '300px', false, html.join(''));
324         commentwindow.centerPopup();
325         $('form#comment input[type="submit"]').click(function(e){
326             $.invoke('Calendar_Item/AddLog', $('form#comment').serialize(), function(data){
327                 commentwindow.closePopup();
328             });
329             return false;
330         });
331     } else {
332         commentwindow.openPopup();
333     }
334     $('form#comment input,form#comment textarea').not('form#comment input[type="submit"]').val('');
335     $('form#comment input[name="id"]').val($('div#menu').attr('dav_id'));
336     $('form#comment input[name="name"]').focus();
337 }
338
339 var incolorise = false;
340 function colorise()
341 {
342     menu_close()
343
344     $('select[name="colorpicker"]').simplecolorpicker({
345         picker: false
346     }).change(function(e) {
347         if (incolorise) return;
348         incolorise = true;
349
350         var color = $('select[name="colorpicker"]').val();
351         var id = $('div#menu').attr('dav_id');
352
353         $('span[dav_id="'+id+'"]').css('background-color', color);
354
355         $.invoke('Calendar_Item/SetColor', {id: id, color: color}, function(data){
356             incolorise = false;
357         });
358
359         $('select[name="colorpicker"]').simplecolorpicker('destroy');
360         $('select[name="colorpicker"]').hide();
361     });
362 }
363
364 function month_actions(data)
365 {
366     $('#termine span').contextmenu(function(e){
367         $('select[name="colorpicker"]').simplecolorpicker('destroy');
368         $('select[name="colorpicker"]').hide();
369         $('div#menu').attr('dav_id', $(this).attr('dav_id'));
370         $('div#menu').positionOn($(this), 'center').show();
371         return false;
372     });
373     $('#termine span').click(function(e){
374         $('div#menu').attr('dav_id', $(this).attr('dav_id'));
375         show_log();
376     });
377
378     $('select#month').val($('#thismonth').val());
379 }
380
381 $(function(){
382     dom_enhance();
383     month_actions();
384     $('#view').val('normal').change(function(e){
385         if ($('#view').val() == 'normal') {
386             document.location.href = document.location.href.split('?')[0] + '?month=normal';
387         } else if ($('#view').val() == 'bimonth') {
388             $('#month,div.view button').show();
389             $.invoke('Calendar/BiMonth', {month: $('#thismonth').val()}, month_actions);
390         } else if ($('#view').val() == 'onemonth') {
391             $('#month,div.view button').show();
392             $.invoke('Calendar/OneMonth', {month: $('#thismonth').val()}, month_actions);
393         } else if ($('#view').val() == 'month') {
394             $('#month,div.view button').show();
395             $.invoke('Calendar/Month', {month: $('#thismonth').val()}, month_actions);
396         }
397     });
398     $('#month').change(function(e){
399         if ($('#view').val() == 'bimonth') {
400             $.invoke('Calendar/BiMonth', {month: $('#month').val()}, month_actions);
401         } else if ($('#view').val() == 'month') {
402             $.invoke('Calendar/Month', {month: $('#month').val()}, month_actions);
403         }
404
405     });
406     $('div.view button').click(function(e){
407         var direction = null
408         if ($(this).attr('id') != 'sync')
409             direction = $(this).attr('id') == 'prev' ? 'prev' : 'next';
410         if ($('#view').val() == 'bimonth') {
411             $.invoke('Calendar/BiMonth',
412                      {month: $('#thismonth').val(),
413                       direction: direction}, month_actions);
414         } else if ($('#view').val() == 'onemonth') {
415             $.invoke('Calendar/OneMonth',
416                      {month: $('#thismonth').val(),
417                       direction: direction}, month_actions);
418         } else if ($('#view').val() == 'month') {
419             $.invoke('Calendar/Month',
420                      {month: $('#thismonth').val(),
421                       direction: direction}, month_actions);
422         }
423     });
424     if (document.location.href.indexOf('month=normal') == -1) {
425         if (is_mobile()) {
426             $('<meta name="viewport" content="width=device-width, initial-scale=0.75" />').insertAfter('title');
427             $('#view').val('onemonth');
428             $.invoke('Calendar/OneMonth', {month: '<?=date('Y-m')?>'}, month_actions);
429             $('select#view').hide();
430         } else {
431             $('#view').val('bimonth');
432             $.invoke('Calendar/BiMonth', {month: '<?=date('Y-m')?>'}, month_actions);
433         }
434     }
435     $('#month,div.view button').show();
436 });
437 </script></protect>
438 </page>
439
440 # Local variables:
441 # mode: text
442 # mode: auto-fill
443 # mode: iso-accents
444 # end: