Close event new/edit dialog when clicking outside the dialog

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>