diff options
author | Bart Visscher <bartv@thisnet.nl> | 2011-09-16 16:02:21 +0400 |
---|---|---|
committer | Bart Visscher <bartv@thisnet.nl> | 2011-09-16 16:02:21 +0400 |
commit | 0fde26c86c0e9f7f6738f68b29d6e61a8d8c2ac6 (patch) | |
tree | 29a2b0098de27b64ce0ba51bc975f85923cf0c0d /apps/calendar | |
parent | 2353f02d9a3d7ba3465ca918b71b34ffd0747d3f (diff) |
Close event new/edit dialog when clicking outside the dialog
Diffstat (limited to 'apps/calendar')
-rw-r--r-- | apps/calendar/css/style.css | 6 | ||||
-rw-r--r-- | apps/calendar/js/calendar.js | 79 | ||||
-rw-r--r-- | apps/calendar/templates/calendar.php | 12 | ||||
-rw-r--r-- | apps/calendar/templates/part.editevent.php | 34 | ||||
-rw-r--r-- | apps/calendar/templates/part.eventform.php | 12 | ||||
-rw-r--r-- | apps/calendar/templates/part.newevent.php | 34 |
6 files changed, 77 insertions, 100 deletions
diff --git a/apps/calendar/css/style.css b/apps/calendar/css/style.css index d01bd65bc3e..06892e896b1 100644 --- a/apps/calendar/css/style.css +++ b/apps/calendar/css/style.css @@ -62,3 +62,9 @@ .event_popup {width: 280px; height: 40px; padding: 10px;} input[type="button"].active {color: #0098E4} +#fromtime, #totime { +color:#333; +} +#fromtime.disabled, #totime.disabled { +color:#A9A9A9; +} diff --git a/apps/calendar/js/calendar.js b/apps/calendar/js/calendar.js index ad44c5d4bc0..31277b716be 100644 --- a/apps/calendar/js/calendar.js +++ b/apps/calendar/js/calendar.js @@ -274,18 +274,52 @@ Calendar={ .data('event_info', event) .hover(this.createEventPopup, this.hideEventPopup) - .click(this.editEventPopup); + .click(this.editEvent); eventcontainer.append(event_holder); }, - editEventPopup:function(event){ + newEvent:function(selector, time){ + var date_info = $(selector).data('date_info'); + var dayofmonth = date_info.getDate(); + var month = date_info.getMonth(); + var year = date_info.getFullYear(); + if(dayofmonth <= 9){ + dayofmonth = '0' + dayofmonth; + } + month++; + if(month <= 9){ + month = '0' + month; + } + var date = String(dayofmonth) + String(month) + String(year); + if($('#event').dialog('isOpen') == true){ + // TODO: save event + $('#event').dialog('destroy').remove(); + }else{ + $('#dialog_holder').load(oc_webroot + '/apps/calendar/ajax/neweventform.php?d=' + date + '&t=' + time, function(){ + $('#event').dialog({ + width : 500, + close : function(event, ui) { + $(this).dialog('destroy').remove(); + } + }); + }); + } + }, + editEvent:function(event){ event.stopPropagation(); var event_data = $(this).data('event_info'); var id = event_data.id; - if(oc_cal_opendialog == 0){ - $("#dialog_holder").load(oc_webroot + "/apps/calendar/ajax/editeventform.php?id="+id); - oc_cal_opendialog = 1; + if($('#event').dialog('isOpen') == true){ + // TODO: save event + $('#event').dialog('destroy').remove(); }else{ - alert(t("calendar", "You can't open more than one dialog per site!")); + $('#dialog_holder').load(oc_webroot + '/apps/calendar/ajax/editeventform.php?id=' + id, function(){ + $('#event').dialog({ + width : 500, + close : function(event, ui) { + $(this).dialog('destroy').remove(); + } + }); + }); } }, createEventPopup:function(e){ @@ -334,6 +368,19 @@ Calendar={ Calendar.Date.current = new Date(); Calendar.UI.updateView(); }, + lockTime:function(){ + if($('#allday_checkbox').is(':checked')) { + $("#fromtime").attr('disabled', true) + .addClass('disabled'); + $("#totime").attr('disabled', true) + .addClass('disabled'); + } else { + $("#fromtime").attr('disabled', false) + .removeClass('disabled'); + $("#totime").attr('disabled', false) + .removeClass('disabled'); + } + }, Calendar:{ overview:function(){ if(oc_cal_opendialog == 0){ @@ -756,26 +803,6 @@ $(document).ready(function(){ Calendar.UI.loadEvents(); var oc_cal_opendialog = 0; -function oc_cal_newevent(selector, time){ - var date_info = $(selector).data('date_info'); - var dayofmonth = date_info.getDate(); - var month = date_info.getMonth(); - var year = date_info.getFullYear(); - if(dayofmonth <= 9){ - dayofmonth = "0" + dayofmonth; - } - month++; - if(month <= 9){ - month = "0" + month; - } - var date = String(dayofmonth) + String(month) + String(year); - if(oc_cal_opendialog == 0){ - $("#dialog_holder").load(oc_webroot + "/apps/calendar/ajax/neweventform.php?d=" + date + "&t=" + time); - oc_cal_opendialog = 1; - }else{ - alert(t("calendar", "You can't open more than one dialog per site!")); - } -} function validate_event_form(url){ var post = $( "#event_form" ).serialize(); diff --git a/apps/calendar/templates/calendar.php b/apps/calendar/templates/calendar.php index aedfeda9cb4..c5717640fb5 100644 --- a/apps/calendar/templates/calendar.php +++ b/apps/calendar/templates/calendar.php @@ -71,14 +71,14 @@ $weekdays = array('monday', 'tuesday', 'wednesday', 'thursday', 'friday', 'satur <thead> <tr> <th class="calendar_time"><?php echo $l->t("Time");?></th> - <th id="onedayview_today" class="calendar_row" onclick="oc_cal_newevent('#onedayview_today');"></th> + <th id="onedayview_today" class="calendar_row" onclick="Calendar.UI.newEvent('#onedayview_today');"></th> </tr> </thead> <tbody> <?php foreach($hours as $time => $time_label): ?> <tr> <td class="calendar_time"><?php echo $time_label ?></td> - <td class="calendar_row <?php echo $time ?>" onclick="oc_cal_newevent('#onedayview_today', '<?php echo $time ?>');"></td> + <td class="calendar_row <?php echo $time ?>" onclick="Calendar.UI.newEvent('#onedayview_today', '<?php echo $time ?>');"></td> </tr> <?php endforeach; ?> </tbody> @@ -90,7 +90,7 @@ $weekdays = array('monday', 'tuesday', 'wednesday', 'thursday', 'friday', 'satur <tr> <th class="calendar_time"><?php echo $l->t("Time");?></th> <?php foreach($weekdays as $weekdaynr => $weekday): ?> - <th class="calendar_row <?php echo $weekday ?> <?php echo $weekdaynr > 4 ? 'weekend_thead' : '' ?>" onclick="oc_cal_newevent('#oneweekview th.<?php echo $weekday ?>');"></th> + <th class="calendar_row <?php echo $weekday ?> <?php echo $weekdaynr > 4 ? 'weekend_thead' : '' ?>" onclick="Calendar.UI.newEvent('#oneweekview th.<?php echo $weekday ?>');"></th> <?php endforeach; ?> </tr> </thead> @@ -99,7 +99,7 @@ $weekdays = array('monday', 'tuesday', 'wednesday', 'thursday', 'friday', 'satur <tr> <td class="calendar_time"><?php echo $time_label?></td> <?php foreach($weekdays as $weekdaynr => $weekday): ?> - <td class="<?php echo $weekday ?> <?php echo $time ?> calendar_row <?php echo $weekdaynr > 4 ? 'weekend_row' : '' ?>" onclick="oc_cal_newevent('#oneweekview th.<?php echo $weekday ?>', '<?php echo $time ?>');"></td> + <td class="<?php echo $weekday ?> <?php echo $time ?> calendar_row <?php echo $weekdaynr > 4 ? 'weekend_row' : '' ?>" onclick="Calendar.UI.newEvent('#oneweekview th.<?php echo $weekday ?>', '<?php echo $time ?>');"></td> <?php endforeach; ?> </tr> <?php endforeach; ?> @@ -121,7 +121,7 @@ $weekdays = array('monday', 'tuesday', 'wednesday', 'thursday', 'friday', 'satur <tr class="week_<?php echo $week ?>"> <td class="calw"></td> <?php foreach($weekdays as $weekdaynr => $weekday): ?> - <td class="day <?php echo $weekday ?> <?php echo $weekdaynr > 4 ? 'weekend' : '' ?>" onclick="oc_cal_newevent('#fourweeksview .week_<?php echo $week ?> .<?php echo $weekday ?>')"> + <td class="day <?php echo $weekday ?> <?php echo $weekdaynr > 4 ? 'weekend' : '' ?>" onclick="Calendar.UI.newEvent('#fourweeksview .week_<?php echo $week ?> .<?php echo $weekday ?>')"> <div class="dateinfo"></div> <div class="events"></div> </td> @@ -144,7 +144,7 @@ $weekdays = array('monday', 'tuesday', 'wednesday', 'thursday', 'friday', 'satur <?php foreach(range(1, 6) as $week): ?> <tr class="week_<?php echo $week ?>"> <?php foreach($weekdays as $weekdaynr => $weekday): ?> - <td class="day <?php echo $weekday ?> <?php echo $weekdaynr > 4 ? 'weekend' : '' ?>" onclick="oc_cal_newevent('#onemonthview .week_<?php echo $week ?> .<?php echo $weekday ?>')"> + <td class="day <?php echo $weekday ?> <?php echo $weekdaynr > 4 ? 'weekend' : '' ?>" onclick="Calendar.UI.newEvent('#onemonthview .week_<?php echo $week ?> .<?php echo $weekday ?>')"> <div class="dateinfo"></div> <div class="events"></div> </td> diff --git a/apps/calendar/templates/part.editevent.php b/apps/calendar/templates/part.editevent.php index 7fbb75756cd..8c6053dc88a 100644 --- a/apps/calendar/templates/part.editevent.php +++ b/apps/calendar/templates/part.editevent.php @@ -1,4 +1,4 @@ -<div id="editevent" title="<?php echo $l->t("Edit an event");?>"> +<div id="event" title="<?php echo $l->t("Edit an event");?>"> <form id="event_form"> <input type="hidden" name="id" value="<?php echo $_['id'] ?>"> <?php echo $this->inc("part.eventform"); ?> @@ -8,35 +8,3 @@ </span> </form> </div> -<script type="text/javascript"> - $( "#editevent" ).dialog({ - width : 500, - close : function() { - oc_cal_opendialog = 0; - var lastchild = document.getElementById("body-user").lastChild - while(lastchild.id != "lightbox"){ - document.getElementById("body-user").removeChild(lastchild); - lastchild = document.getElementById("body-user").lastChild; - } - } - }); - $( "#from" ).datepicker({ - dateFormat : 'dd-mm-yy' - }); - $( "#to" ).datepicker({ - dateFormat : 'dd-mm-yy' - }); - function lock_time() { - if(document.getElementById("totime").disabled == true) { - document.getElementById("fromtime").disabled = false; - document.getElementById("totime").disabled = false; - $("#fromtime").css('color', "#333"); - $("#totime").css('color', "#333"); - } else { - document.getElementById("fromtime").disabled = true; - document.getElementById("totime").disabled = true; - $("#fromtime").css('color', "#A9A9A9"); - $("#totime").css('color', "#A9A9A9"); - } - } -</script> diff --git a/apps/calendar/templates/part.eventform.php b/apps/calendar/templates/part.eventform.php index 4c3024e1deb..f80854177d6 100644 --- a/apps/calendar/templates/part.eventform.php +++ b/apps/calendar/templates/part.eventform.php @@ -39,8 +39,7 @@ <tr> <th width="75px"></th> <td> - <input onclick="lock_time();" type="checkbox"<?php if($_['allday']){echo 'checked="checked"';} ?> id="allday_checkbox" name="allday"> - <?php if($_['allday']){echo '<script type="text/javascript">document.getElementById("fromtime").disabled = true;document.getElementById("totime").disabled = true;document.getElementById("fromtime").style.color = "#A9A9A9";document.getElementById("totime").style.color = "#A9A9A9";</script>';}?> + <input onclick="Calendar.UI.lockTime();" type="checkbox"<?php if($_['allday']){echo 'checked="checked"';} ?> id="allday_checkbox" name="allday"> <label for="allday_checkbox"><?php echo $l->t("All Day Event");?></label></td> </tr> <tr> @@ -86,3 +85,12 @@ <td><textarea style="width:350px;height: 150px;" placeholder="<?php echo $l->t("Description of the Event");?>" name="description"><?php echo $_['description'] ?></textarea></td> </tr> </table> +<script type="text/javascript"> + Calendar.UI.lockTime(); + $( "#from" ).datepicker({ + dateFormat : 'dd-mm-yy' + }); + $( "#to" ).datepicker({ + dateFormat : 'dd-mm-yy' + }); +</script> diff --git a/apps/calendar/templates/part.newevent.php b/apps/calendar/templates/part.newevent.php index cff8d4412b2..2c8ba7b907d 100644 --- a/apps/calendar/templates/part.newevent.php +++ b/apps/calendar/templates/part.newevent.php @@ -1,4 +1,4 @@ -<div id="newevent" title="<?php echo $l->t("Create a new event");?>"> +<div id="event" title="<?php echo $l->t("Create a new event");?>"> <form id="event_form"> <?php echo $this->inc("part.eventform"); ?> <div style="width: 100%;text-align: center;color: #FF1D1D;" id="errorbox"></div> @@ -7,35 +7,3 @@ </span> </form> </div> -<script type="text/javascript"> - $("#newevent").dialog({ - width : 500, - close : function() { - oc_cal_opendialog = 0; - var lastchild = document.getElementById("body-user").lastChild - while(lastchild.id != "lightbox"){ - document.getElementById("body-user").removeChild(lastchild); - lastchild = document.getElementById("body-user").lastChild; - } - } - }); - $( "#from" ).datepicker({ - dateFormat : 'dd-mm-yy' - }); - $( "#to" ).datepicker({ - dateFormat : 'dd-mm-yy' - }); - function lock_time() { - if(document.getElementById("totime").disabled == true) { - document.getElementById("fromtime").disabled = false; - document.getElementById("totime").disabled = false; - $("#fromtime").css('color', "#333"); - $("#totime").css('color', "#333"); - } else { - document.getElementById("fromtime").disabled = true; - document.getElementById("totime").disabled = true; - $("#fromtime").css('color', "#A9A9A9"); - $("#totime").css('color', "#A9A9A9"); - } - } -</script> |