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