Merge pull request #46 from alexcloutier/feature/DragNDropCalendars
Improve drag'n'drop of events in multi-column viewpull/47/head
commit
11920f592c
|
@ -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;
|
||||
|
|
|
@ -191,7 +191,7 @@
|
|||
NSMutableDictionary *calendar;
|
||||
unsigned int count, foldersCount;
|
||||
NSString *folderName, *fDisplayName;
|
||||
NSNumber *isActive;
|
||||
BOOL *isActive;
|
||||
|
||||
co = [self clientObject];
|
||||
folders = [co subFolders];
|
||||
|
|
|
@ -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">
|
||||
|
|
|
@ -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"
|
||||
|
|
|
@ -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;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
|
File diff suppressed because it is too large
Load Diff
|
@ -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;
|
||||
|
@ -246,12 +251,18 @@ SOGoEventDragEventCoordinates.prototype = {
|
|||
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;
|
||||
}
|
||||
|
@ -322,6 +333,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();
|
||||
|
@ -516,11 +539,30 @@ 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
|
||||
|
@ -1345,8 +1460,23 @@ SOGoEventDragController.prototype = {
|
|||
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);
|
||||
}
|
||||
};
|
||||
|
|
|
@ -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);
|
||||
|
||||
|
|
Binary file not shown.
After Width: | Height: | Size: 413 B |
Loading…
Reference in New Issue