// This file is part of Moodle - http://moodle.org/
//
// Moodle is free software: you can redistribute it and/or modify
// it under the terms of the GNU General Public License as published by
// the Free Software Foundation, either version 3 of the License, or
// (at your option) any later version.
//
// Moodle is distributed in the hope that it will be useful,
// but WITHOUT ANY WARRANTY; without even the implied warranty of
// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
// GNU General Public License for more details.
//
// You should have received a copy of the GNU General Public License
// along with Moodle. If not, see <http://www.gnu.org/licenses/>.
/**
* A javascript module to handle calendar drag and drop in the calendar
* month view.
*
* @module core_calendar/month_view_drag_drop
* @copyright 2017 Ryan Wyllie <ryan@moodle.com>
* @license http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later
*/
define([
'jquery',
'core/notification',
'core/str',
'core_calendar/events',
'core_calendar/drag_drop_data_store'
],
function(
$,
Notification,
Str,
CalendarEvents,
DataStore
) {
var SELECTORS = {
ROOT: "[data-region='calendar']",
DRAGGABLE: '[draggable="true"][data-region="event-item"]',
DROP_ZONE: '[data-drop-zone="month-view-day"]',
WEEK: '[data-region="month-view-week"]',
};
var INVALID_DROP_ZONE_CLASS = 'bg-faded';
var INVALID_HOVER_CLASS = 'bg-danger text-white';
var VALID_HOVER_CLASS = 'bg-primary text-white';
var ALL_CLASSES = INVALID_DROP_ZONE_CLASS + ' ' + INVALID_HOVER_CLASS + ' ' + VALID_HOVER_CLASS;
/* @var {bool} registered If the event listeners have been added */
var registered = false;
/**
* Get the correct drop zone element from the given javascript
* event.
*
* @param {event} e The javascript event
* @return {object|null}
*/
var getDropZoneFromEvent = function(e) {
var dropZone = $(e.target).closest(SELECTORS.DROP_ZONE);
return (dropZone.length) ? dropZone : null;
};
/**
* Determine if the given dropzone element is within the acceptable
* time range.
*
* The drop zone timestamp is midnight on that day so we should check
* that the event's acceptable timestart value
*
* @param {object} dropZone The drop zone day from the calendar
* @return {bool}
*/
var isValidDropZone = function(dropZone) {
var dropTimestamp = dropZone.attr('data-day-timestamp');
var minTimestart = DataStore.getMinTimestart();
var maxTimestart = DataStore.getMaxTimestart();
if (minTimestart && minTimestart > dropTimestamp) {
return false;
}
if (maxTimestart && maxTimestart < dropTimestamp) {
return false;
}
return true;
};
/**
* Get the error string to display for a given drop zone element
* if it is invalid.
*
* @param {object} dropZone The drop zone day from the calendar
* @return {string}
*/
var getDropZoneError = function(dropZone) {
var dropTimestamp = dropZone.attr('data-day-timestamp');
var minTimestart = DataStore.getMinTimestart();
var maxTimestart = DataStore.getMaxTimestart();
if (minTimestart && minTimestart > dropTimestamp) {
return DataStore.getMinError();
}
if (maxTimestart && maxTimestart < dropTimestamp) {
return DataStore.getMaxError();
}
return null;
};
/**
* Remove all of the styling from each of the drop zones in the calendar.
*/
var clearAllDropZonesState = function() {
$(SELECTORS.ROOT).find(SELECTORS.DROP_ZONE).each(function(index, dropZone) {
dropZone = $(dropZone);
dropZone.removeClass(ALL_CLASSES);
});
};
/**
* Update the hover state for the event in the calendar to reflect
* which days the event will be moved to.
*
* If the drop zone is not being hovered then it will apply some
* styling to reflect whether the drop zone is a valid or invalid
* drop place for the current dragging event.
*
* This funciton supports events spanning multiple days and will
* recurse to highlight (or remove highlight) each of the days
* that the event will be moved to.
*
* For example: An event with a duration of 3 days will have
* 3 days highlighted when it's dragged elsewhere in the calendar.
* The current drag target and the 2 days following it (including
* wrapping to the next week if necessary).
*
* @param {string|object} dropZone The drag target element
* @param {bool} hovered If the target is hovered or not
* @param {Number} count How many days to highlight (default to duration)
*/
var updateHoverState = function(dropZone, hovered, count) {
if (typeof count === 'undefined') {
// This is how many days we need to highlight.
count = DataStore.getDurationDays();
}
var valid = isValidDropZone(dropZone);
dropZone.removeClass(ALL_CLASSES);
if (hovered) {
if (valid) {
dropZone.addClass(VALID_HOVER_CLASS);
} else {
dropZone.addClass(INVALID_HOVER_CLASS);
}
} else {
dropZone.removeClass(VALID_HOVER_CLASS + ' ' + INVALID_HOVER_CLASS);
if (!valid) {
dropZone.addClass(INVALID_DROP_ZONE_CLASS);
}
}
count--;
// If we've still got days to highlight then we should
// find the next day.
if (count > 0) {
var nextDropZone = dropZone.next();
// If there are no more days in this week then we
// need to move down to the next week in the calendar.
if (!nextDropZone.length) {
var nextWeek = dropZone.closest(SELECTORS.WEEK).next();
if (nextWeek.length) {
nextDropZone = nextWeek.children(SELECTORS.DROP_ZONE).first();
}
}
// If we found another day then let's recursively
// update it's hover state.
if (nextDropZone.length) {
updateHoverState(nextDropZone, hovered, count);
}
}
};
/**
* Find all of the calendar event drop zones in the calendar and update the display
* for the user to indicate which zones are valid and invalid.
*/
var updateAllDropZonesState = function() {
$(SELECTORS.ROOT).find(SELECTORS.DROP_ZONE).each(function(index, dropZone) {
dropZone = $(dropZone);
if (!isValidDropZone(dropZone)) {
updateHoverState(dropZone, false);
}
});
};
/**
* Set up the module level variables to track which event is being
* dragged and how many days it spans.
*
* @param {event} e The dragstart event
*/
var dragstartHandler = function(e) {
var target = $(e.target);
var draggableElement = target.closest(SELECTORS.DRAGGABLE);
if (!draggableElement.length) {
return;
}
var eventElement = draggableElement.find('[data-event-id]');
var eventId = eventElement.attr('data-event-id');
var minTimestart = draggableElement.attr('data-min-day-timestamp');
var maxTimestart = draggableElement.attr('data-max-day-timestamp');
var minError = draggableElement.attr('data-min-day-error');
var maxError = draggableElement.attr('data-max-day-error');
var eventsSelector = SELECTORS.ROOT + ' [data-event-id="' + eventId + '"]';
var duration = $(eventsSelector).length;
DataStore.setEventId(eventId);
DataStore.setDurationDays(duration);
if (minTimestart) {
DataStore.setMinTimestart(minTimestart);
}
if (maxTimestart) {
DataStore.setMaxTimestart(maxTimestart);
}
if (minError) {
DataStore.setMinError(minError);
}
if (maxError) {
DataStore.setMaxError(maxError);
}
e.dataTransfer.effectAllowed = "move";
e.dataTransfer.dropEffect = "move";
// Firefox requires a value to be set here or the drag won't
// work and the dragover handler won't fire.
e.dataTransfer.setData('text/plain', eventId);
e.dropEffect = "move";
updateAllDropZonesState();
};
/**
* Update the hover state of the target day element when
* the user is dragging an event over it.
*
* This will add a visual indicator to the calendar UI to
* indicate which day(s) the event will be moved to.
*
* @param {event} e The dragstart event
*/
var dragoverHandler = function(e) {
// Ignore dragging of non calendar events.
if (!DataStore.hasEventId()) {
return;
}
e.preventDefault();
var dropZone = getDropZoneFromEvent(e);
if (!dropZone) {
return;
}
updateHoverState(dropZone, true);
};
/**
* Update the hover state of the target day element that was
* previously dragged over but has is no longer a drag target.
*
* This will remove the visual indicator from the calendar UI
* that was added by the dragoverHandler.
*
* @param {event} e The dragstart event
*/
var dragleaveHandler = function(e) {
// Ignore dragging of non calendar events.
if (!DataStore.hasEventId()) {
return;
}
var dropZone = getDropZoneFromEvent(e);
if (!dropZone) {
return;
}
updateHoverState(dropZone, false);
e.preventDefault();
};
/**
* Determines the event element, origin day, and destination day
* once the user drops the calendar event. These three bits of data
* are provided as the payload to the "moveEvent" calendar javascript
* event that is fired.
*
* This will remove the visual indicator from the calendar UI
* that was added by the dragoverHandler.
*
* @param {event} e The dragstart event
*/
var dropHandler = function(e) {
// Ignore dragging of non calendar events.
if (!DataStore.hasEventId()) {
return;
}
var dropZone = getDropZoneFromEvent(e);
if (!dropZone) {
DataStore.clearAll();
clearAllDropZonesState();
return;
}
if (isValidDropZone(dropZone)) {
var eventId = DataStore.getEventId();
var eventElementSelector = SELECTORS.ROOT + ' [data-event-id="' + eventId + '"]';
var eventElement = $(eventElementSelector);
var origin = null;
if (eventElement.length) {
origin = eventElement.closest(SELECTORS.DROP_ZONE);
}
$('body').trigger(CalendarEvents.moveEvent, [eventId, origin, dropZone]);
} else {
// If the drop zone is not valid then there is not need for us to
// try to process it. Instead we can just show an error to the user.
var message = getDropZoneError(dropZone);
Str.get_string('errorinvaliddate', 'calendar').then(function(string) {
Notification.exception({
name: string,
message: message || string
});
});
}
DataStore.clearAll();
clearAllDropZonesState();
e.preventDefault();
};
/**
* Clear the data store and remove the drag indicators from the UI
* when the drag event has finished.
*/
var dragendHandler = function() {
DataStore.clearAll();
clearAllDropZonesState();
};
/**
* Re-render the drop zones in the new month to highlight
* which areas are or aren't acceptable to drop the calendar
* event.
*/
var calendarMonthChangedHandler = function() {
updateAllDropZonesState();
};
return {
/**
* Initialise the event handlers for the drag events.
*/
init: function() {
if (!registered) {
// These handlers are only added the first time the module
// is loaded because we don't want to have a new listener
// added each time the "init" function is called otherwise we'll
// end up with lots of stale handlers.
document.addEventListener('dragstart', dragstartHandler, false);
document.addEventListener('dragover', dragoverHandler, false);
document.addEventListener('dragleave', dragleaveHandler, false);
document.addEventListener('drop', dropHandler, false);
document.addEventListener('dragend', dragendHandler, false);
$('body').on(CalendarEvents.monthChanged, calendarMonthChangedHandler);
registered = true;
}
},
};
});