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

(js) Fix DnD in multicolumn calendars view

pull/186/head
Francis Lachapelle 2015-12-15 22:55:02 -05:00
parent 3404ae8105
commit 8ff6fc8c1f
5 changed files with 83 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -95,6 +95,7 @@
var:sg-day-number="currentDayNumber"
var:sg-day="currentTableDay.shortDateString"
var:sg-day-string="currentTableDay.iso8601DateString"
sg-calendar="{{view.id}}"
ng-repeat="view in calendar.views">
<div class="hourCells">
<var:foreach list="hoursToDisplay" item="currentTableHour">

9
UI/WebServerResources/js/Scheduler/CalendarListController.js
View File

@ -146,7 +146,7 @@
// Adjust component or create new component through drag'n'drop
function updateComponentFromGhost($event) {
var component, pointerHandler, coordinates, delta, params;
var component, pointerHandler, coordinates, delta, params, calendarNumber, activeCalendars;
component = Component.$ghost.component;
pointerHandler = Component.$ghost.pointerHandler;
@ -170,6 +170,13 @@
start: delta.start * 15,
duration: delta.duration * 15
};
if (pointerHandler.originalCalendar && delta.dayNumber !== 0) {
// The day number actually represents the destination calendar among the active calendars
calendarNumber = pointerHandler.currentEventCoordinates.dayNumber;
activeCalendars = _.filter(Calendar.$findAll(), { active: 1 });
params.destination = activeCalendars[calendarNumber].id;
params.days = 0;
}
if (component.isException || !component.occurrenceId)
// Component is an exception to a recurrence or is not recurrent;
// Immediately perform the adjustments

21
UI/WebServerResources/js/Scheduler/sgCalendarDay.directive.js
View File

@ -27,7 +27,8 @@
scope: {
day: '@sgDay',
dayNumber: '@sgDayNumber',
dayString: '@sgDayString'
dayString: '@sgDayString',
calendar: '@sgCalendar'
},
controller: sgCalendarDayController
};
@ -36,13 +37,27 @@
/**
* @ngInject
*/
sgCalendarDayController.$inject = ['$scope'];
function sgCalendarDayController($scope) {
sgCalendarDayController.$inject = ['$scope', 'Calendar'];
function sgCalendarDayController($scope, Calendar) {
// Expose some scope variables to the controller
// See the sgCalendarDayTable directive
this.day = $scope.day;
this.dayNumber = $scope.dayNumber;
this.dayString = $scope.dayString;
this.calendarData = function() {
var pid, index, activeCalendars;
if ($scope.calendar) {
// A calendar is associated to the day; identify its index among active calendars
pid = $scope.calendar;
activeCalendars = _.filter(Calendar.$findAll(), { active: 1 });
index = _.findIndex(activeCalendars, function(calendar) {
return calendar.id == pid;
});
return { pid: pid, index: index };
}
return null;
};
}
angular

28
UI/WebServerResources/js/Scheduler/sgCalendarGhost.directive.js
View File

@ -24,11 +24,12 @@
};
function link(scope, iElement, attrs, ctrls) {
var domElement, calendarDayCtrl, scrollViewCtrl;
var domElement, calendarDayCtrl, scrollViewCtrl, calendarNumber, originalCalendarNumber;
domElement = iElement[0];
calendarDayCtrl = ctrls[0];
scrollViewCtrl = ctrls[1];
calendarNumber = -1;
iElement.addClass('sg-event--ghost md-whiteframe-3dp ng-hide');
@ -45,10 +46,24 @@
});
function initGhost() {
var pid, calendarData;
// Expose ghost block to the scope
scope.block = Component.$ghost;
calendarData = calendarDayCtrl.calendarData();
if (calendarData) {
// A calendar is associated to the day; this is a special multicolumn day view
calendarNumber = calendarData.index;
pid = calendarData.pid;
originalCalendarNumber = scope.block.pointerHandler.originalCalendar.index;
}
if (!pid)
pid = scope.block.component.pid;
// Set background color
iElement.addClass('bg-folder' + scope.block.component.pid);
iElement.addClass('bg-folder' + pid);
}
function hideGhost() {
@ -91,7 +106,14 @@
delete scope.startHour;
delete scope.endHour;
if (currentDay > -1 && currentDay == calendarDayCtrl.dayNumber) {
if (currentDay > -1 && // pointer is inside viewport
((calendarNumber < 0 && // day is not associated to a calendar
currentDay == calendarDayCtrl.dayNumber) || // pointer is inside ghost's day
currentDay == calendarNumber && // pointer is inside ghost's calendar
(originalCalendarNumber == calendarNumber || // still inside original calendar
!scope.block.component.isException) // not an exception, event can be moved to a
// different calendar
)) {
// This ghost block (day) is the first of the dragging event
showGhost = true;
if (!isRelative) {

37
UI/WebServerResources/js/Scheduler/sgDraggableCalendarBlock.directive.js
View File

@ -113,12 +113,14 @@
}
function dragStart(ev) {
var block, dragMode, eventType, isHourCell, isMonthly, startDate, newData, newComponent, pointerHandler;
var block, dragMode, eventType, isHourCell, isMonthly, startDate, newData, newComponent, pointerHandler, calendarData;
isHourCell = element.hasClass('clickableHourCell');
isMonthly = (element[0].parentNode.tagName == 'SG-CALENDAR-MONTH-DAY') ||
element.hasClass('clickableDayCell');
calendarData = calendarDayCtrl.calendarData();
if (scope.block && scope.block.component) {
// Move or resize existing component
block = scope.block;
@ -130,7 +132,7 @@
calendarDayCtrl.dayString.substring(11,16));
newData = {
type: 'appointment',
pid: Calendar.$defaultCalendar(),
pid: calendarData? calendarData.pid : Calendar.$defaultCalendar(),
summary: l('New Event'),
startDate: startDate,
isAllDay: isHourCell? 0 : 1
@ -160,12 +162,16 @@
pointerHandler = Component.$ghost.pointerHandler;
pointerHandler.prepareWithEventType(eventType);
pointerHandler.initFromBlock(block);
if (calendarData)
// When the day is associated to a calendar, the day number becomes the calendar index
// among the active calendars
pointerHandler.initFromCalendar(calendarData);
// Update Component.$ghost
Component.$ghost.starthour = block.starthour;
Component.$ghost.component = block.component;
$log.debug('emit calendar:dragstart');
$log.debug('emit calendar:dragstart ' + eventType + ' ' + dragMode);
$rootScope.$emit('calendar:dragstart');
}
@ -196,7 +202,7 @@
}
// Unmark all blocks as being dragged
if (block)
if (block && block.component)
_.forEach(block.component.blocks, function(b) {
b.dragging = false;
});
@ -271,6 +277,10 @@
this.dayNumber = block.component.blocks[0].dayNumber;
},
initFromCalendar: function(calendarNumber) {
this.dayNumber = calendarNumber;
},
getDelta: function(otherCoordinates) {
var delta = new SOGoEventDragEventCoordinates();
delta.dayNumber = (this.dayNumber - otherCoordinates.dayNumber);
@ -331,6 +341,8 @@
originalEventCoordinates: null,
currentEventCoordinates: null,
originalCalendar: null,
dragHasStarted: false,
// Function to return the day and quarter coordinates of the pointer cursor
@ -349,6 +361,12 @@
this.originalCoordinates = this.currentCoordinates.clone();
},
initFromCalendar: function SEDPH_initFromCalendar(calendarData) {
this.originalCalendar = calendarData;
this.currentEventCoordinates.initFromCalendar(calendarData.index);
this.originalEventCoordinates.initFromCalendar(calendarData.index);
},
// Method continuously called while dragging
updateFromEvent: function SEDPH_updateFromEvent(event) {
// Event here is a DOM event, not a calendar event!
@ -509,9 +527,16 @@
var daysOffset = view.daysOffset;
coordinates.x = Math.floor((pxCoordinates.x - daysOffset) / dayWidth);
var minX = 0;
var maxX = Calendar.$view.maxX;
if (coordinates.x < 0)
coordinates.x = 0;
if (this.dragMode != 'move-event') {
var calendarData = calendarDayCtrl.calendarData();
if (calendarData)
// Resizing an event can't span a different day when in multicolumn view
minX = maxX = calendarData.index;
}
if (coordinates.x < minX)
coordinates.x = minX;
else if (coordinates.x > maxX)
coordinates.x = maxX;
coordinates.y = 0;