2015-11-06 21:12:24 +01:00
|
|
|
/* -*- Mode: javascript; indent-tabs-mode: nil; c-basic-offset: 2 -*- */
|
|
|
|
|
|
|
|
(function() {
|
|
|
|
/* jshint validthis: true */
|
|
|
|
'use strict';
|
|
|
|
|
|
|
|
/*
|
|
|
|
* sgCalendarScrollView - scrollable view that contains draggable elements
|
|
|
|
* @memberof SOGo.SchedulerUI
|
|
|
|
* @restrict attribute
|
|
|
|
* @param {string} sgCalendarScrollView - the view type (multiday, multiday-allday, or monthly)
|
|
|
|
*
|
|
|
|
* @example:
|
|
|
|
|
|
|
|
<md-content sg-calendar-scroll-view="multiday">
|
|
|
|
..
|
|
|
|
</md-content>
|
|
|
|
*/
|
2015-11-23 22:22:32 +01:00
|
|
|
sgCalendarScrollView.$inject = ['$rootScope', '$window', '$document', '$q', '$timeout', '$mdGesture', 'Calendar', 'Component', 'Preferences'];
|
|
|
|
function sgCalendarScrollView($rootScope, $window, $document, $q, $timeout, $mdGesture, Calendar, Component, Preferences) {
|
2015-11-06 21:12:24 +01:00
|
|
|
return {
|
|
|
|
restrict: 'A',
|
|
|
|
scope: {
|
|
|
|
type: '@sgCalendarScrollView'
|
|
|
|
},
|
|
|
|
controller: sgCalendarScrollViewController,
|
|
|
|
link: function(scope, element, attrs, controller) {
|
|
|
|
var view, scrollView, type, lastScroll, deregisterDragStart, deregisterDragStop;
|
|
|
|
|
|
|
|
scrollView = element[0];
|
|
|
|
type = scope.type; // multiday, multiday-allday, monthly, unknown?
|
|
|
|
lastScroll = 0;
|
|
|
|
|
|
|
|
// Listen to dragstart and dragend events
|
|
|
|
deregisterDragStart = $rootScope.$on('calendar:dragstart', onDragStart);
|
|
|
|
deregisterDragStop = $rootScope.$on('calendar:dragend', onDragEnd);
|
|
|
|
|
|
|
|
// Update the "view" object literal once the Angular template has been transformed
|
|
|
|
$timeout(initView);
|
|
|
|
|
|
|
|
// Deregister listeners when destroying the view
|
|
|
|
scope.$on('$destroy', function() {
|
|
|
|
deregisterDragStart();
|
|
|
|
deregisterDragStop();
|
|
|
|
element.off('mouseover', updateFromPointerHandler);
|
|
|
|
angular.element($window).off('resize', updateCoordinates);
|
|
|
|
});
|
|
|
|
|
|
|
|
function initView() {
|
|
|
|
var quarterHeight;
|
|
|
|
|
|
|
|
// Quarter height doesn't change if window is resize; compute it only once
|
|
|
|
quarterHeight = getQuarterHeight();
|
|
|
|
|
|
|
|
view = {
|
|
|
|
type: type,
|
|
|
|
quarterHeight: quarterHeight,
|
|
|
|
scrollStep: 6 * quarterHeight,
|
|
|
|
maxX: getMaxColumns(),
|
|
|
|
|
|
|
|
// Expose a reference of the view element
|
|
|
|
element: scrollView
|
|
|
|
};
|
|
|
|
|
|
|
|
// Compute coordinates of view element; recompute it on window resize
|
|
|
|
angular.element($window).on('resize', updateCoordinates);
|
|
|
|
updateCoordinates();
|
2015-11-23 22:22:32 +01:00
|
|
|
|
|
|
|
if (type != 'monthly')
|
|
|
|
// Scroll to the day start hour defined in the user's defaults
|
|
|
|
Preferences.ready().then(function() {
|
|
|
|
var time, hourCell, quartersOffset;
|
|
|
|
if (Preferences.defaults.SOGoDayStartTime) {
|
|
|
|
time = Preferences.defaults.SOGoDayStartTime.split(':');
|
|
|
|
hourCell = document.getElementById('hour' + parseInt(time[0]));
|
|
|
|
quartersOffset = parseInt(time[1]) * quarterHeight;
|
|
|
|
scrollView.scrollTop = hourCell.offsetTop + quartersOffset;
|
|
|
|
}
|
|
|
|
});
|
2015-11-06 21:12:24 +01:00
|
|
|
}
|
|
|
|
|
|
|
|
function getQuarterHeight() {
|
2015-11-20 19:30:26 +01:00
|
|
|
var hour0, hour23, height = null;
|
2015-11-06 21:12:24 +01:00
|
|
|
|
|
|
|
hour0 = document.getElementById('hour0');
|
|
|
|
hour23 = document.getElementById('hour23');
|
2015-11-20 19:30:26 +01:00
|
|
|
if (hour0 && hour23)
|
|
|
|
height = ((hour23.offsetTop - hour0.offsetTop) / (23 * 4));
|
2015-11-06 21:12:24 +01:00
|
|
|
|
|
|
|
return height;
|
|
|
|
}
|
|
|
|
|
2015-11-20 19:30:26 +01:00
|
|
|
function getDayDimensions(viewLeft) {
|
|
|
|
var width, height, leftOffset, topOffset, nodes, domRect, tileHeader;
|
2015-11-06 21:12:24 +01:00
|
|
|
|
2015-11-20 19:30:26 +01:00
|
|
|
height = width = leftOffset = topOffset = 0;
|
2015-11-06 21:12:24 +01:00
|
|
|
nodes = scrollView.getElementsByClassName('day0');
|
|
|
|
|
|
|
|
if (nodes.length > 0) {
|
|
|
|
domRect = nodes[0].getBoundingClientRect();
|
2015-11-20 19:30:26 +01:00
|
|
|
height = domRect.height;
|
2015-11-06 21:12:24 +01:00
|
|
|
width = domRect.width;
|
2015-11-20 19:30:26 +01:00
|
|
|
leftOffset = domRect.left - viewLeft;
|
|
|
|
tileHeader = nodes[0].getElementsByClassName('sg-calendar-tile-header');
|
|
|
|
if (tileHeader.length > 0)
|
|
|
|
topOffset = tileHeader[0].clientHeight;
|
2015-11-06 21:12:24 +01:00
|
|
|
}
|
|
|
|
|
2015-11-20 19:30:26 +01:00
|
|
|
return { height: height, width: width, offset: { left: leftOffset, top: topOffset } };
|
2015-11-06 21:12:24 +01:00
|
|
|
}
|
|
|
|
|
|
|
|
function getMaxColumns() {
|
|
|
|
var max = 0;
|
|
|
|
|
|
|
|
//if (type == 'multiday') {
|
|
|
|
max = scrollView.getElementsByClassName('day').length - 1;
|
|
|
|
//}
|
|
|
|
|
|
|
|
return max;
|
|
|
|
}
|
|
|
|
|
|
|
|
// View has been resized;
|
2015-11-20 19:30:26 +01:00
|
|
|
// Compute the view's origins (x, y), a day's dimensions and left margin.
|
2015-11-06 21:12:24 +01:00
|
|
|
function updateCoordinates() {
|
2015-11-20 19:30:26 +01:00
|
|
|
var domRect, dayDimensions;
|
2015-11-06 21:12:24 +01:00
|
|
|
|
|
|
|
domRect = scrollView.getBoundingClientRect();
|
2015-11-20 19:30:26 +01:00
|
|
|
dayDimensions = getDayDimensions(domRect.left);
|
2015-11-06 21:12:24 +01:00
|
|
|
|
|
|
|
angular.extend(view, {
|
|
|
|
coordinates: {
|
|
|
|
x: domRect.left,
|
|
|
|
y: domRect.top
|
|
|
|
},
|
2015-11-20 19:30:26 +01:00
|
|
|
dayHeight: dayDimensions.height,
|
|
|
|
dayWidth: dayDimensions.width,
|
|
|
|
daysOffset: dayDimensions.offset.left,
|
|
|
|
topOffset: dayDimensions.offset.top
|
2015-11-06 21:12:24 +01:00
|
|
|
});
|
|
|
|
}
|
|
|
|
|
|
|
|
function onDragStart() {
|
|
|
|
element.on('mouseover', updateFromPointerHandler);
|
|
|
|
updateFromPointerHandler();
|
|
|
|
}
|
|
|
|
|
|
|
|
function onDragEnd() {
|
|
|
|
element.off('mouseover', updateFromPointerHandler);
|
|
|
|
Calendar.$view = null;
|
|
|
|
}
|
|
|
|
|
|
|
|
// From SOGoScrollController.updateFromPointerHandler
|
|
|
|
function updateFromPointerHandler() {
|
|
|
|
var scrollStep, pointerHandler, pointerCoordinates, now, scrollY, minY, delta;
|
|
|
|
|
|
|
|
scrollStep = view.scrollStep;
|
|
|
|
pointerHandler = Component.$ghost.pointerHandler;
|
|
|
|
if (pointerHandler) {
|
2015-11-20 19:30:26 +01:00
|
|
|
pointerCoordinates = pointerHandler.getContainerBasedCoordinates(view);
|
|
|
|
|
|
|
|
if (pointerCoordinates) {
|
|
|
|
// Pointer is inside view; Adjust scrollbar if necessary
|
|
|
|
Calendar.$view = view;
|
|
|
|
now = new Date().getTime();
|
|
|
|
if (!lastScroll || now > lastScroll + 100) {
|
|
|
|
lastScroll = now;
|
|
|
|
scrollY = pointerCoordinates.y - scrollStep;
|
|
|
|
if (scrollY < 0) {
|
|
|
|
minY = -scrollView.scrollTop;
|
|
|
|
if (scrollY < minY)
|
|
|
|
scrollY = minY;
|
|
|
|
scrollView.scrollTop += scrollY;
|
|
|
|
}
|
|
|
|
else {
|
|
|
|
scrollY = pointerCoordinates.y + scrollStep;
|
|
|
|
delta = scrollY - scrollView.clientHeight;
|
|
|
|
if (delta > 0) {
|
|
|
|
scrollView.scrollTop += delta;
|
|
|
|
}
|
2015-11-06 21:12:24 +01:00
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
};
|
|
|
|
}
|
|
|
|
|
|
|
|
sgCalendarScrollViewController.$inject = ['$scope'];
|
|
|
|
function sgCalendarScrollViewController($scope) {
|
|
|
|
// Expose the view type to the controller
|
|
|
|
// See sgCalendarDayBlockGhost
|
|
|
|
this.type = $scope.type;
|
|
|
|
}
|
|
|
|
|
|
|
|
angular
|
|
|
|
.module('SOGo.SchedulerUI')
|
|
|
|
.directive('sgCalendarScrollView', sgCalendarScrollView);
|
|
|
|
})();
|