* Calendar: Add new feature to the calendar app, in order to be able to sort calendars in day and week views

calendar/inc/class.calendar_uiviews.inc.php

@@ -897,6 +897,7 @@ class calendar_uiviews extends calendar_ui
 			$headerCounter = 0;
 			foreach($this->_get_planner_users(false) as $uid => $label)
 			{
+				$content .= '<div data-sortable-id="'.$uid.'">';
 				$search_params['users'] = $uid;
 				$content .= '<b>'.$label."</b>\n";
 				$content .= $this->close_button($uid);
@@ -907,7 +908,9 @@ class calendar_uiviews extends calendar_ui
 				{
 					$content .= $navHeader;
 				}
+				$content .= '</div>';
 			}
+			$content = '<div class="cal_is_sortable">'.$content.'</div>';
 		}
 
 		$content = $navHeader.$content;
@@ -1396,7 +1399,7 @@ class calendar_uiviews extends calendar_ui
 	{
 		if ($this->debug > 1 || $this->debug==='dayColWidget') $this->bo->debug_message('uiviews::dayColWidget(%1,%2,left=%3,width=%4,)',False,$day_ymd,$events,$pleft,$pwidth);
 
-		$html = $indent.'<div id="calColumn'.$this->calColumnCounter++.'" class="calendar_calDayCol" style="left: '.$pleft.
+		$html = $indent.'<div id="calColumn'.$this->calColumnCounter++.'" class="calendar_calDayCol" '.'data-sortable-id="'.$owner.'" style="left: '.$pleft.
 			'%;width: '.$pwidth.'%;">'."\n";
 
 		// Creation of the header-column with date, evtl. holiday-names and a matching background-color
@@ -2289,8 +2292,12 @@ class calendar_uiviews extends calendar_ui
 				$users[$user] = $this->bo->participant_name($user);
 			}
 		}
+		// Only sort users in planner views
+		if ($enum_groups)
+		{
 			asort($users);
 			asort($resources);
+		}
 		
 		return $users+$resources;
 	}

calendar/js/app.js

@@ -225,7 +225,7 @@ app.classes.calendar = AppJS.extend(
 		var that = this;
 
 		//Draggable & Resizable selector
-		jQuery("div[id^='drag_']")
+		var $drag = jQuery("div[id^='drag_']")
 					//draggable event handler
 					.draggable
 					({
@@ -295,7 +295,7 @@ app.classes.calendar = AppJS.extend(
 							var resizeHelper = event.target.getAttribute('data-resize').split("|")[3];
 							if (resizeHelper == 'WD' || resizeHelper == 'WDS')
 							{
-						$j(this).resizable('destroy');
+								jQuery(this).resizable('destroy');
 							}
 						},
 
@@ -364,7 +364,7 @@ app.classes.calendar = AppJS.extend(
 					});
 
 		//Droppable selector
-		jQuery("div[id^='drop_']")
+		var $drop = jQuery("div[id^='drop_']")
 					//Droppable event handler
 					.droppable
 					({
@@ -427,7 +427,7 @@ app.classes.calendar = AppJS.extend(
 					});
 
 		//jQuery Calendar Event selector
-		jQuery("body")
+		var $iframeBody = jQuery("body")
 			//mouseover event handler for calendar tooltip
 			.on("mouseover", "div[data-tooltip]",function(){
 				var $ttp = jQuery(this);
@@ -530,8 +530,7 @@ app.classes.calendar = AppJS.extend(
 					}
 				}
 
-				var eventInfo =
+				var eventInfo = {
-					{
 					date: timestamp[0],
 					hour: timestamp[1],
 					minute: timestamp[2]
@@ -539,7 +538,7 @@ app.classes.calendar = AppJS.extend(
 
 				if (typeof ownerId !='undefined' && ownerId != 0)
 				{
-					$j(eventInfo).extend(eventInfo,{owner: ownerId});
+					jQuery(eventInfo).extend(eventInfo,{owner: ownerId});
 				}
 
 				that.egw.open(null, 'calendar', 'add', eventInfo , '_blank');
@@ -552,6 +551,74 @@ app.classes.calendar = AppJS.extend(
 					that.egw.open_link(link,'_blank',windowSize);
 					return false;
 			});
+
+		//******************************** Calendar Sortable ************************
+		// Calender current state
+		var state = this.getState();
+
+		if (state && state.view === "day"
+				&& typeof state.owner != 'undefined'
+				&& typeof state.owner == 'string' && state.owner.split(',').length > 1)
+		{
+			$iframeBody.find('#calendar_calDayCols')
+					.addClass('cal_is_sortable')
+					.css({"white-space":"nowrap"})
+					.children().each(function(){
+						// Change day view columns position in order to get sortable placeholder working
+						jQuery(this).css({position:"relative",display:"inline-block", left:"none"});
+			});
+		}
+
+		$iframeBody.find('.cal_is_sortable').sortable ({
+				cancel: "#divAppboxHeader, .calendar_calWeekNavHeader, .calendar_plannerHeader",
+				placeholder: "srotable_cal_wk_ph",
+				axis:"y",
+				revert: true,
+				helper:"clone",
+				create: function ()
+				{
+					var $sortItem = jQuery(this);
+					var options = {};
+					switch (state.view)
+					{
+						case "day":
+							options = {
+								placeholder:"srotable_cal_day_ph",
+								axis:"x"
+							};
+							$sortItem.sortable('option', options);
+							break;
+						case "week":
+							options = {
+								placeholder:"srotable_cal_wk_ph",
+								axis:"y"
+							};
+							$sortItem.sortable('option', options);
+							break;
+						default:
+							$sortItem.sortable('destroy');
+					}
+				},
+				start: function ()
+				{
+					$drag.draggable('disable');
+					$drop.droppable('disable');
+				},
+				stop: function ()
+				{
+					$drag.draggable('enable');
+					$drop.droppable('enable');
+				},
+				update: function ()
+				{
+					if (state && typeof state.owner !== 'undefined')
+					{
+						var sortedArr = jQuery(this).sortable('toArray', {attribute:"data-sortable-id"});
+						state.owner = sortedArr.join(',');
+						that.setState({state:state});
+					}
+				}
+			});
 	},
 
 	/**
@@ -564,16 +631,16 @@ app.classes.calendar = AppJS.extend(
 	 */
 	resizeHelper: function(_X,_Y)
 	{
-		var drops = jQuery("div[id^='drop_']");
+		var $drops = jQuery("div[id^='drop_']");
 		var top = Math.round(_Y);
 		var left = Math.round(_X);
-		for (var i=0;i < drops.length;i++)
+		for (var i=0;i < $drops.length;i++)
 		{
-			if (top >= Math.round(drops[i].getBoundingClientRect().top)
+			if (top >= Math.round($drops[i].getBoundingClientRect().top)
-					&& top <= Math.round(drops[i].getBoundingClientRect().bottom)
+					&& top <= Math.round($drops[i].getBoundingClientRect().bottom)
-					&& left >= Math.round(drops[i].getBoundingClientRect().left)
+					&& left >= Math.round($drops[i].getBoundingClientRect().left)
-					&& left <= Math.round(drops[i].getBoundingClientRect().right))
+					&& left <= Math.round($drops[i].getBoundingClientRect().right))
-				return drops[i];
+				return $drops[i];
 		}
 		return false;
 	},

calendar/templates/default/app.css

@@ -650,3 +650,19 @@ img.calendar_print_button, img.calendar_print_appicon {
 	height: 24px;
 	width: 24px;
 }
+
+/*Sortable views*/
+.srotable_cal_wk_ph {
+	border: 2px	dashed gray;
+	height: 230px;
+	width: 99%;
+	background-color: #ece2f7;
+}
+.srotable_cal_day_ph {
+	position: relative;
+	width: 33.333333%;
+	height: 99%;
+	border: 2px	dashed gray;
+	background-color: #ece2f7;
+	display: inline-block;
+}

calendar/templates/pixelegg/app.css

@@ -11,7 +11,7 @@
  * @package calendar
  * @version $Id$
  */
-/* $Id: app.css 48463 2014-09-04 13:37:46Z ralfbecker $ */
+/* $Id: app.css 49287 2014-11-04 15:34:51Z hnategh $ */
 /*Media print classes*/
 @media print {
   .th td,
@@ -660,6 +660,21 @@ img.calendar_print_appicon {
   height: 24px;
   width: 24px;
 }
+/*Sortable views*/
+.srotable_cal_wk_ph {
+  border: 2px	dashed gray;
+  height: 230px;
+  width: 99%;
+  background-color: #ece2f7;
+}
+.srotable_cal_day_ph {
+  position: relative;
+  width: 33.333333%;
+  height: 99%;
+  border: 2px	dashed gray;
+  background-color: #ece2f7;
+  display: inline-block;
+}
 /*generell*/
 .egw_fw_content_browser_iframe img[src$="svg"] {
   background-color: #828282 !important;
@@ -1386,40 +1401,6 @@ e.g. the div with class calendar_calTimeGrid is generated by the timeGridWidget
   font-size: 8pt;
   text-align: left;
 }
-/* contains (multiple) dayCol's
- */
-.calendar_calDayCols,
-.calendar_calDayCols12h,
-.calendar_calDayColsNoGrid {
-  position: absolute;
-  top: 0px;
-  /*	bottom: 0px; does NOT work in IE, IE needs height: 100%! */
-  height: 100%;
-  left: 45px;
-  right: 0px;
-}
-/* 12h timeformat with am/pm
- */
-.calendar_calDayCols12h {
-  left: 65px;
-}
-/* no time grid --> no time column
- */
-.calendar_calDayColsNoTime {
-  left: 0px;
-}
-/* contains (multiple) eventCol's
- */
-.calendar_calDayCol {
-  position: absolute;
-  top: 0px;
-  height: 100%;
-  /* set via inline style on runtime:
-     *  left:
-     *  width:
-     */
-  border-left: 1px solid silver;
-}
 /* Calendar Id #
 */
 #calendar-edit_id:before {
@@ -1452,9 +1433,6 @@ e.g. the div with class calendar_calTimeGrid is generated by the timeGridWidget
 .calendar_calGridHeader {
   border: none;
 }
-.calendar_calDayColHeader img {
-  vertical-align: middle;
-}
 /*header for the weekCol*/
 .calendar_calWeekNavHeader,
 .calendar_calMonthNavHeader {

calendar/templates/pixelegg/app.less

@@ -848,39 +848,6 @@ e.g. the div with class calendar_calTimeGrid is generated by the timeGridWidget
     text-align: left;
 }
 
-/* contains (multiple) dayCol's
- */
-.calendar_calDayCols,.calendar_calDayCols12h,.calendar_calDayColsNoGrid{
-    position: absolute;
-    top: 0px;
-    /*	bottom: 0px; does NOT work in IE, IE needs height: 100%! */
-    height: 100%;
-    left: 45px;
-    right: 0px;
-}
-/* 12h timeformat with am/pm
- */
-.calendar_calDayCols12h{
-    left: 65px;
-}
-/* no time grid --> no time column
- */
-.calendar_calDayColsNoTime{
-    left: 0px;
-}
-
-/* contains (multiple) eventCol's
- */
-.calendar_calDayCol{
-    position: absolute;
-    top: 0px;
-    height: 100%;
-    /* set via inline style on runtime:
-     *  left:
-     *  width:
-     */
-    border-left: 1px solid silver;
-}
 /* Calendar Id #
 */
 #calendar-edit_id:before { content:"#"}
@@ -915,10 +882,6 @@ e.g. the div with class calendar_calTimeGrid is generated by the timeGridWidget
 .calendar_calGridHeader{ border: none; }
 
 
-.calendar_calDayColHeader img {
-    vertical-align: middle;
-}
-
  /*header for the weekCol*/
 
 .calendar_calWeekNavHeader,.calendar_calMonthNavHeader{