Close event new/edit dialog when clicking outside the dialog

diff --git a/apps/calendar/css/style.css b/apps/calendar/css/style.css
index d01bd65bc3e3c6b47bbd279ba5e8c87a63471399..06892e896b1ff13cd4b049cfc3cd37ab0173bbe9 100644 (file)
--- 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 ad44c5d4bc041b174fd04105abde42e9d43e2c9c..31277b716be01bcbc0c6080cbe6f154ec97708c3 100644 (file)
--- 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 aedfeda9cb48f37b3f9894ab7ad26e0a38e39504..c5717640fb5efa8d8249813c069abaeed1609000 100644 (file)
--- 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 7fbb75756cd9cb3f4b432c2311bd3eb0c3b6aec9..8c6053dc88a8c5efb2a0c2c074c37fc259a8d0f9 100644 (file)
--- 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 4c3024e1debb147ab1ba6b1f663e6a9105a52714..f80854177d6044236d66652b038150888e66bd6f 100644 (file)
--- 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 cff8d4412b292a25ba29424b2540b9d78682e422..2c8ba7b907d0849d7c1e665d235bee7a40f5a551 100644 (file)
--- 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>