LupusNobilis
/
sogo
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Merge pull request #46 from alexcloutier/feature/DragNDropCalendars 

Improve drag'n'drop of events in multi-column view
pull/47/head
Francis Lachapelle 2014-07-21 11:00:27 -04:00
parent f3ded6ce2a 28e6bb8b9d
commit 11920f592c
9 changed files with 1096 additions and 773 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

31
UI/Scheduler/UIxAppointmentActions.m
View File

@ -23,6 +23,7 @@
#import <Foundation/NSCalendarDate.h>
#import <Foundation/NSDictionary.h>
#import <Foundation/NSString.h>
#import <Foundation/NSArray.h>
#import <NGObjWeb/NSException+HTTP.h>
#import <NGObjWeb/SoPermissions.h>
@ -52,19 +53,25 @@
WOResponse *response;
WORequest *rq;
SOGoAppointmentObject *co;
SoSecurityManager *sm;
iCalEvent *event;
NSCalendarDate *start, *newStart, *end, *newEnd;
NSTimeInterval newDuration;
SOGoUserDefaults *ud;
NSString *daysDelta, *startDelta, *durationDelta;
NSString *daysDelta, *startDelta, *durationDelta, *destionationCalendar;
NSArray *calendarsID;
NSTimeZone *tz;
NSException *ex;
SOGoAppointmentFolder *targetCalendar, *sourceCalendar;
SOGoAppointmentFolders *folders;
rq = [context request];
daysDelta = [rq formValueForKey: @"days"];
startDelta = [rq formValueForKey: @"start"];
durationDelta = [rq formValueForKey: @"duration"];
destionationCalendar = [rq formValueForKey: @"destination"];
if ([daysDelta length] > 0
|| [startDelta length] > 0 || [durationDelta length] > 0)
{
@ -105,10 +112,30 @@
}
if ([event hasRecurrenceRules])
[event updateRecurrenceRulesUntilDate: end];
[event updateRecurrenceRulesUntilDate: end];
[event setLastModified: [NSCalendarDate calendarDate]];
ex = [co saveComponent: event];
// This condition will be executed only if the event is moved from a calendar to another. If destionationCalendar == 0; there is no calendar change
if (![destionationCalendar isEqualToString:@"0"])
{
folders = [[self->context activeUser] calendarsFolderInContext: self->context];
sourceCalendar = [co container];
targetCalendar = [folders lookupName:[destionationCalendar stringValue] inContext: self->context acquire: 0];
// The event was moved to a different calendar.
sm = [SoSecurityManager sharedSecurityManager];
if (![sm validatePermission: SoPerm_DeleteObjects
onObject: sourceCalendar
inContext: context])
{
if (![sm validatePermission: SoPerm_AddDocumentsImagesAndFiles
onObject: targetCalendar
inContext: context])
ex = [co moveToFolder: targetCalendar];
}
}
if (ex)
{
NSDictionary *jsonResponse;

2
UI/Scheduler/UIxCalDayTable.m
View File

@ -191,7 +191,7 @@
NSMutableDictionary *calendar;
unsigned int count, foldersCount;
NSString *folderName, *fDisplayName;
NSNumber *isActive;
BOOL *isActive;
co = [self clientObject];
folders = [co subFolders];

4
UI/Templates/SchedulerUI/UIxCalDayTable.wox
View File

@ -33,7 +33,7 @@
<div class="days">
<var:foreach list="calendarsToDisplay" item="currentCalendar">
<var:foreach list="daysToDisplay" item="currentTableDay">
<div var:class="dayClasses" var:day="currentTableDay.shortDateString" var:id="currentAllDayId" hour="allday"><!-- space --></div>
<div var:class="dayClasses" var:day="currentTableDay.shortDateString" var:id="currentAllDayId" var:calendar="currentCalendar.folder" hour="allday"><!-- space --></div>
</var:foreach>
</var:foreach>
</div>
@ -75,7 +75,7 @@
<var:if condition="isMultiColumnView">
<var:foreach list="calendarsToDisplay" item="currentCalendar">
<var:foreach list="daysToDisplay" item="currentTableDay">
<div var:class="dayClasses" var:id="currentDayId" var:day-number="currentDayNumber" var:day="currentTableDay.shortDateString">
<div var:class="dayClasses" var:id="currentDayId" var:day-number="currentDayNumber" var:calendar="currentCalendar.folder" var:day="currentTableDay.shortDateString">
<div class="hourCells">
<var:foreach list="hoursToDisplay" item="currentTableHour">
<div var:class="clickableHourCellClass" var:day="currentTableDay.shortDateString" var:hour="currentAppointmentHour">

3
UI/Templates/SchedulerUI/UIxCalMainView.wox
View File

@ -9,7 +9,7 @@
className="UIxPageFrame"
const:userDefaultsKeys="SOGoCalendarCategoriesColors,SOGoDefaultCalendar"
const:userSettingsKeys="Calendar,ShowCompletedTasks"
const:jsFiles="SchedulerUIDnD.js"
const:jsFiles="SchedulerUIDnD.js,jquery-ui.js"
title="title">
<script type="text/javascript">
var firstDayOfWeek = <var:string value="firstDayOfWeek"/>;
@ -34,6 +34,7 @@
<div class="preload" style="visibility: hidden;">
<img rsrc:src="event-gradient.png"/>
</div>
<img rsrc:src="event7.png" id="DnDLeftPanelImage" style="visibility: hidden;"/>
<div class="menu" id="monthListMenu">
<ul>
<var:foreach list="monthMenuItems" item="monthMenuItem"

29
UI/WebServerResources/SchedulerUI.css
View File

@ -1297,14 +1297,12 @@ DIV#daysView DIV.event.lasts96
DIV.event > DIV.eventInside
{ position: absolute;
overflow: hidden;
width:100%;
top: 0px;
bottom: 0px;
-webkit-border-radius: 2px;
border-radius: 2px; }
DIV.eventInside {
width:100%;
}
border-radius: 2px;
cursor:move; }
DIV.eventInside SPAN.location
{ font-size: smaller; }
@ -1442,7 +1440,8 @@ DIV.event.draggable:hover DIV.rightDragGrip
#daysView DIV.eventDragGhost > DIV.eventInside
{ padding: 0px;
border-left: 1px solid #555;
border-right: 1px solid #555; }
border-right: 1px solid #555;
}
#daysView DIV.eventDragGhost.startGhost > DIV.eventInside
{ border-top: 1px solid #555; }
@ -1536,6 +1535,24 @@ DIV#calendarContent .alert-box span {
border:1px solid #8ed9f6;
}
DIV#dragDropVisual
{
background-image: url(event7.png);
background-repeat: no-repeat;
background-position: 4px 2px;
width: 5px;
height: 20px;
padding-left: 24px;
padding-top: 5px;
}
#DnDLeftPanelImage
{
position:absolute;
z-index:1;
left:0;
top:0;
}

1610
UI/WebServerResources/SchedulerUI.js
View File

File diff suppressed because it is too large Load Diff

187
UI/WebServerResources/SchedulerUIDnD.js
View File

@ -8,6 +8,7 @@ var SOGoEventDragDayLength = 24 * 4; /* quarters */
var SOGoEventDragHandleSize = 8; /* handles for dragging mode */
var SOGoEventDragHorizontalOffset = 3;
var SOGoEventDragVerticalOffset = 3;
var calendarID = [], activeCalendars = [];
/* singleton */
var _sogoEventDragUtilities = null;
@ -218,10 +219,7 @@ SOGoEventDragEventCoordinates.prototype = {
initFromEventCellMultiDay: function(eventCell) {
var classNames = eventCell.className.split(" ");
for (var i = 0;
(this.start == -1 || this.duration == -1)
&& i < classNames.length;
i++) {
for (var i = 0; (this.start == -1 || this.duration == -1) && i < classNames.length; i++) {
var className = classNames[i];
if (className.startsWith("starts")) {
this.start = parseInt(className.substr(6));
@ -231,12 +229,19 @@ SOGoEventDragEventCoordinates.prototype = {
}
}
var dayNumber = -1;
var dayNode = eventCell.parentNode.parentNode;
var classNames = dayNode.className.split(" ");
for (var i = 0; dayNumber == -1 && i < classNames.length; i++) {
var className = classNames[i];
if (className.startsWith("day") && className.length > 3) {
dayNumber = parseInt(className.substr(3));
if (currentView == "multicolumndayview") {
calendarID[0] = dayNode.getAttribute("calendar");
var dayNumber = this._updateMulticolumnViewDayNumber(calendarID);
}
else {
var classNames = dayNode.className.split(" ");
for (var i = 0; dayNumber == -1 && i < classNames.length; i++) {
var className = classNames[i];
if (className.startsWith("day") && className.length > 3) {
dayNumber = parseInt(className.substr(3));
}
}
}
this.dayNumber = dayNumber;
@ -244,14 +249,20 @@ SOGoEventDragEventCoordinates.prototype = {
initFromEventCellMultiDayAllDay: function(eventCell) {
this.start = 0;
this.duration = SOGoEventDragDayLength;
var dayNode = eventCell.parentNode;
var classNames = dayNode.className.split(" ");
var dayNumber = -1;
for (var i = 0; dayNumber == -1 && i < classNames.length; i++) {
var className = classNames[i];
if (className.startsWith("day") && className.length > 3) {
dayNumber = parseInt(className.substr(3));
if (currentView == "multicolumndayview") {
calendarID[0] = dayNode.getAttribute("calendar");
var dayNumber = this._updateMulticolumnViewDayNumber(calendarID);
}
else {
var classNames = dayNode.className.split(" ");
var dayNumber = -1;
for (var i = 0; dayNumber == -1 && i < classNames.length; i++) {
var className = classNames[i];
if (className.startsWith("day") && className.length > 3) {
dayNumber = parseInt(className.substr(3));
}
}
}
this.dayNumber = dayNumber;
@ -294,8 +305,8 @@ SOGoEventDragEventCoordinates.prototype = {
current.setEventType(this.eventType);
current.initFromEventCell(eventCells[i]);
if (this.dayNumber == -1 || current.dayNumber < this.dayNumber) {
this.dayNumber = current.dayNumber;
this.start = current.start;
this.dayNumber = current.dayNumber;
this.start = current.start;
}
this.duration += current.duration;
}
@ -321,6 +332,19 @@ SOGoEventDragEventCoordinates.prototype = {
return "" + hours + ":" + mins;
},
_updateMulticolumnViewDayNumber: function(calendarID) {
var calendarList = $("calendarList").getElementsByTagName("li");
for (var j = 0; j < calendarList.length ; j++) {
if ($("calendarList").getElementsByTagName("li")[j].down().checked)
activeCalendars.push($("calendarList").getElementsByTagName("li")[j].getAttribute("id").substr(1));
}
for (var k = 0; k < activeCalendars.length; k++) {
if (activeCalendars[k] == calendarID[0]) {
return k;
}
}
},
getStartTime: function() {
return this._quartersToHM(this.start);
@ -504,8 +528,7 @@ SOGoEventDragGhostController.prototype = {
this.currentPointerCoordinates = newCoordinates;
if (this.originalPointerCoordinates) {
if (!newCoordinates)
this.currentPointerCoordinates
= this.originalPointerCoordinates.clone();
this.currentPointerCoordinates = this.originalPointerCoordinates.clone();
this._updateCoordinates();
if (this.ghosts) {
this._updateGhosts();
@ -515,12 +538,31 @@ SOGoEventDragGhostController.prototype = {
}
}
},
_updateMulticolumnViewDayNumber_SEDGC: function() {
var calendarID_SEDGC = this.folderClass.substr(14);
var calendarList = $("calendarList").getElementsByTagName("li");
activeCalendars = [];
for (var j = 0; j < calendarList.length ; j++) {
if ($("calendarList").getElementsByTagName("li")[j].down().checked)
activeCalendars.push($("calendarList").getElementsByTagName("li")[j].getAttribute("id").substr(1));
}
for (var k = 0; k < activeCalendars.length; k++) {
if (activeCalendars[k] == calendarID_SEDGC) {
this.currentCoordinates.dayNumber = k;
break;
}
}
},
_updateCoordinates: function SEDGC__updateCoordinates() {
var delta = this.currentPointerCoordinates
.getDelta(this.originalPointerCoordinates);
var deltaQuarters = delta.x * SOGoEventDragDayLength + delta.y;
this.currentCoordinates.dayNumber = this.originalCoordinates.dayNumber;
if (currentView == "multicolumndayview")
this._updateMulticolumnViewDayNumber_SEDGC();
else
this.currentCoordinates.dayNumber = this.originalCoordinates.dayNumber;
// log("dragMode: " + this.dragMode);
if (this.dragMode == "move-event") {
@ -565,6 +607,10 @@ SOGoEventDragGhostController.prototype = {
var deltaDays = Math.floor(this.currentCoordinates.start
/ SOGoEventDragDayLength);
this.currentCoordinates.start -= deltaDays * SOGoEventDragDayLength;
// This dayNumber needs to be updated with the calendar number.
if (currentView == "multicolumndayview")
this._updateMulticolumnViewDayNumber_SEDGC();
this.currentCoordinates.dayNumber += deltaDays;
}
},
@ -925,6 +971,45 @@ SOGoScrollController.prototype = {
}
};
function SOGoEventDragLeftPanelController() {
}
SOGoEventDragLeftPanelController.prototype = {
updateLeftPanelVisual : null,
dropCalendar : null,
DnDLeftPanelImage : $("DnDLeftPanelImage"),
setLeftPanelVisual: function SEDLPC_setLeftPanelVisual() {
var that = this;
this.updateLeftPanelVisual = $("leftPanel").on("mousemove", function(e){
that.DnDLeftPanelImage.style.left = e.pageX + "px";
that.DnDLeftPanelImage.style.top = e.pageY + "px";
});
this.updateLeftPanelVisual.stop();
},
updateFromPointerHandler: function SEDLPC_updateFromPointerHandler() {
// Highlight the calendar hover
$$('#calendarList li').each(function(e) {
e.removeClassName('genericHoverClass');
});
var hoverCalendar = $(event).findElement('#calendarList li');
if (hoverCalendar)
hoverCalendar.addClassName('genericHoverClass');
this.dropCalendar = hoverCalendar;
},
startEvent: function SEDLPC_startEvent() {
this.DnDLeftPanelImage.style.visibility = 'visible';
this.updateLeftPanelVisual.start();
},
stopEvent: function SEDLPC_stopEvent() {
this.DnDLeftPanelImage.style.visibility = 'hidden';
this.updateLeftPanelVisual.stop();
}
}
function SOGoEventDragController() {
}
@ -939,6 +1024,7 @@ SOGoEventDragController.prototype = {
draggingModeAreas: null,
ghostController: null,
leftPanelController: null,
hasSelected: false,
dragHasStarted: false,
@ -959,6 +1045,7 @@ SOGoEventDragController.prototype = {
this.eventCells = eventCells;
this.ghostController = new SOGoEventDragGhostController();
this.leftPanelController = new SOGoEventDragLeftPanelController();
this._determineEventInvitation(eventCells[0]);
this._determineEventType(eventCells[0]);
this._prepareEventType();
@ -966,6 +1053,7 @@ SOGoEventDragController.prototype = {
this.ghostController.setTitle(this.title);
this.ghostController.setLocation(this.location);
this.ghostController.setFolderClass(this.folderClass);
this.leftPanelController.setLeftPanelVisual();
this.onDragStartBound = this.onDragStart.bindAsEventListener(this);
for (var i = 0; i < eventCells.length; i++) {
@ -1036,8 +1124,16 @@ SOGoEventDragController.prototype = {
this.ghostController.initWithCoordinates(coordinates);
if (!this.eventCells) {
var folder = getSelectedFolder();
var folderID = folder.readAttribute("id").substr(1);
if (currentView == "multicolumndayview") {
if (target.getAttribute("calendar"))
var folderID = target.getAttribute("calendar");
else
var folderID = target.up("[calendar]").getAttribute("calendar");
}
else {
var folder = getSelectedFolder();
var folderID = folder.readAttribute("id").substr(1);
}
this.ghostController.setFolderClass("calendarFolder" + folderID);
}
this.ghostController.setDragMode(this._determineDragMode());
@ -1296,6 +1392,7 @@ SOGoEventDragController.prototype = {
Event.stopObserving(document.body, "mousemove", this.onDragModeBound);
this.onDragStopBound = null;
this.onDragModeBound = null;
this.leftPanelController.stopEvent();
var utilities = SOGoEventDragUtilities();
if (this.dragHasStarted) {
@ -1311,7 +1408,25 @@ SOGoEventDragController.prototype = {
.currentCoordinates
.getDelta(this.ghostController
.originalCoordinates);
this.updateDropCallback(this, this.eventCells, delta);
if (this.leftPanelController.dropCalendar != null) {
$$('#calendarList li').each(function(e) {
e.removeClassName('genericHoverClass');
});
calendarID[0] = this.folderClass.substr(14);
calendarID[1] = this.leftPanelController.dropCalendar.getAttribute("id").substr(1);
delta.start = 0;
if (calendarID[0] != calendarID[1])
this.updateDropCallback(this, this.eventCells, delta, calendarID);
}
else if (currentView == "multicolumndayview" && delta.dayNumber != 0) {
var position = activeCalendars.indexOf(calendarID[0]);
position += delta.dayNumber;
calendarID[1] = activeCalendars[position];
this.updateDropCallback(this, this.eventCells, delta, calendarID);
}
else
this.updateDropCallback(this, this.eventCells, delta, 0);
} else {
var eventContainerNodes = utilities.getEventContainerNodes();
var dayNode = eventContainerNodes[this.ghostController
@ -1343,10 +1458,25 @@ SOGoEventDragController.prototype = {
this.pointerHandler.updateFromEvent(event);
if (this.scrollController)
this.scrollController.updateFromPointerHandler();
if (this.dragHasStarted) {
this.ghostController.updateFromPointerHandler();
} else {
var newCoordinates = this.ghostController.pointerHandler.getEventViewCoordinates();
if (newCoordinates == null && this.leftPanelController != null) {
if (this.ghostController.ghosts) {
this.ghostController.hideGhosts();
this.leftPanelController.startEvent();
}
this.leftPanelController.updateFromPointerHandler();
}
else {
if (this.ghostController.ghosts == null) {
this.ghostController.showGhosts();
this.leftPanelController.stopEvent();
}
this.ghostController.updateFromPointerHandler();
}
}
else {
var distance = this.pointerHandler.getDistance();
if (distance > 3) {
$("eventDialog").hide();
@ -1361,7 +1491,6 @@ SOGoEventDragController.prototype = {
this.ghostController.updateFromPointerHandler();
}
}
Event.stop(event);
}
};

3
UI/WebServerResources/UIxOccurenceDialog.js
View File

@ -11,10 +11,9 @@ function onThisButtonClick(event) {
else if (action == 'delete')
window.opener.performEventDeletion(calendarFolder, componentName,
recurrenceName);
else if (action == 'adjust') {
else if (action == 'adjust')
window.opener.performEventAdjustment(calendarFolder, componentName,
recurrenceName, queryParameters);
}
else
window.alert("Invalid action: " + action);

BIN
UI/WebServerResources/event7.png 100644
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 413 B