mirror of
https://github.com/EGroupware/egroupware.git
synced 2024-12-17 12:10:49 +01:00
* Calendar: Add new feature to the calendar app, in order to be able to sort calendars in day and week views
This commit is contained in:
Hadi Nategh
parent
6ffc302835
commit
700d0d78e5
@ -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;
|
||||
}
|
||||
|
||||
@ -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)
|
||||
&& top <= Math.round(drops[i].getBoundingClientRect().bottom)
|
||||
&& left >= Math.round(drops[i].getBoundingClientRect().left)
|
||||
&& left <= Math.round(drops[i].getBoundingClientRect().right))
|
||||
return drops[i];
|
||||
if (top >= Math.round($drops[i].getBoundingClientRect().top)
|
||||
&& top <= Math.round($drops[i].getBoundingClientRect().bottom)
|
||||
&& left >= Math.round($drops[i].getBoundingClientRect().left)
|
||||
&& left <= Math.round($drops[i].getBoundingClientRect().right))
|
||||
return $drops[i];
|
||||
}
|
||||
return false;
|
||||
},
|
||||
|
||||
@ -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;
|
||||
}
|
||||
@ -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 {
|
||||
|
||||
@ -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{
|
||||
|
||||
Loading…
Reference in New Issue
Block a user