Commit c56dd950 authored by Ryan Wyllie's avatar Ryan Wyllie
Browse files

MDL-60058 calendar: add visual indicator to UI for valid drop zones

parent f4c21561
File suppressed by a .gitattributes entry or the file's encoding is unsupported.
File suppressed by a .gitattributes entry or the file's encoding is unsupported.
File suppressed by a .gitattributes entry or the file's encoding is unsupported.
......@@ -30,6 +30,14 @@ define([], function() {
var eventId = null;
/* @var {int|null} durationDays How many days the event spans */
var durationDays = null;
/* @var {int|null} minTimestart The earliest valid timestart */
var minTimestart = null;
/* @var {int|null} maxTimestart The latest valid tiemstart */
var maxTimestart = null;
/* @var {string|null} minError Error message for min timestamp violation */
var minError = null;
/* @var {string|null} maxError Error message for max timestamp violation */
var maxError = null;
/**
* Store the id of the event being dragged.
......@@ -76,12 +84,108 @@ define([], function() {
return durationDays;
};
/**
* Store the minimum timestart valid for an event being dragged.
*
* @param {int} timestamp The unix timstamp
*/
var setMinTimestart = function(timestamp) {
minTimestart = timestamp;
};
/**
* Get the minimum valid timestart.
*
* @return {int|null}
*/
var getMinTimestart = function() {
return minTimestart;
};
/**
* Check if a minimum timestamp is set.
*
* @return {bool}
*/
var hasMinTimestart = function() {
return minTimestart !== null;
};
/**
* Store the maximum timestart valid for an event being dragged.
*
* @param {int} timestamp The unix timstamp
*/
var setMaxTimestart = function(timestamp) {
maxTimestart = timestamp;
};
/**
* Get the maximum valid timestart.
*
* @return {int|null}
*/
var getMaxTimestart = function() {
return maxTimestart;
};
/**
* Check if a maximum timestamp is set.
*
* @return {bool}
*/
var hasMaxTimestart = function() {
return maxTimestart !== null;
};
/**
* Store the error string to display if trying to drag an event
* earlier than the minimum allowed date.
*
* @param {string} message The error message
*/
var setMinError = function(message) {
minError = message;
};
/**
* Get the error message for a minimum time start violation.
*
* @return {string|null}
*/
var getMinError = function() {
return minError;
};
/**
* Store the error string to display if trying to drag an event
* later than the maximum allowed date.
*
* @param {string} message The error message
*/
var setMaxError = function(message) {
maxError = message;
};
/**
* Get the error message for a maximum time start violation.
*
* @return {string|null}
*/
var getMaxError = function() {
return maxError;
};
/**
* Reset all of the stored values.
*/
var clearAll = function() {
setEventId(null);
setDurationDays(null);
setMinTimestart(null);
setMaxTimestart(null);
setMinError(null);
setMaxError(null);
};
return {
......@@ -90,6 +194,16 @@ define([], function() {
hasEventId: hasEventId,
setDurationDays: setDurationDays,
getDurationDays: getDurationDays,
setMinTimestart: setMinTimestart,
getMinTimestart: getMinTimestart,
hasMinTimestart: hasMinTimestart,
setMaxTimestart: setMaxTimestart,
getMaxTimestart: getMaxTimestart,
hasMaxTimestart: hasMaxTimestart,
setMinError: setMinError,
getMinError: getMinError,
setMaxError: setMaxError,
getMaxError: getMaxError,
clearAll: clearAll
};
});
......@@ -119,6 +119,11 @@ define([
* @param {event} e The dragover event
*/
var dragoverHandler = function(e) {
// Ignore dragging of non calendar events.
if (!DataStore.hasEventId()) {
return;
}
e.preventDefault();
var target = getTargetFromEvent(e);
......@@ -153,6 +158,11 @@ define([
* @param {event} e The dragstart event
*/
var dragleaveHandler = function(e) {
// Ignore dragging of non calendar events.
if (!DataStore.hasEventId()) {
return;
}
var target = getTargetFromEvent(e);
if (!target) {
......@@ -176,6 +186,11 @@ define([
* @param {event} e The drop event
*/
var dropHandler = function(e) {
// Ignore dragging of non calendar events.
if (!DataStore.hasEventId()) {
return;
}
removeDropZoneIndicator();
var target = getTargetFromEvent(e);
......
......@@ -25,11 +25,15 @@
*/
define([
'jquery',
'core/notification',
'core/str',
'core_calendar/events',
'core_calendar/drag_drop_data_store'
],
function(
$,
Notification,
Str,
CalendarEvents,
DataStore
) {
......@@ -40,7 +44,10 @@ define([
DROP_ZONE: '[data-drop-zone="month-view-day"]',
WEEK: '[data-region="month-view-week"]',
};
var HOVER_CLASS = 'bg-primary text-white';
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;
......@@ -56,10 +63,73 @@ define([
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.
......@@ -79,10 +149,22 @@ define([
count = DataStore.getDurationDays();
}
var valid = isValidDropZone(dropZone);
dropZone.removeClass(ALL_CLASSES);
if (hovered) {
dropZone.addClass(HOVER_CLASS);
if (valid) {
dropZone.addClass(VALID_HOVER_CLASS);
} else {
dropZone.addClass(INVALID_HOVER_CLASS);
}
} else {
dropZone.removeClass(HOVER_CLASS);
dropZone.removeClass(VALID_HOVER_CLASS + ' ' + INVALID_HOVER_CLASS);
if (!valid) {
dropZone.addClass(INVALID_DROP_ZONE_CLASS);
}
}
count--;
......@@ -110,6 +192,21 @@ define([
}
};
/**
* 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.
......@@ -117,27 +214,49 @@ define([
* @param {event} e The dragstart event
*/
var dragstartHandler = function(e) {
var eventElement = $(e.target).closest(SELECTORS.DRAGGABLE);
var target = $(e.target);
var draggableElement = target.closest(SELECTORS.DRAGGABLE);
if (!eventElement.length) {
if (!draggableElement.length) {
return;
}
eventElement = eventElement.find('[data-event-id]');
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();
};
/**
......@@ -150,6 +269,11 @@ define([
* @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);
......@@ -171,6 +295,11 @@ define([
* @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) {
......@@ -193,30 +322,66 @@ define([
* @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;
}
var eventId = DataStore.getEventId();
var eventElementSelector = SELECTORS.ROOT + ' [data-event-id="' + eventId + '"]';
var eventElement = $(eventElementSelector);
var origin = null;
var destination = $(e.target).closest(SELECTORS.DROP_ZONE);
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);
}
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
});
});
}
updateHoverState(dropZone, false);
$('body').trigger(CalendarEvents.moveEvent, [eventId, origin, destination]);
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.
......@@ -231,6 +396,8 @@ define([
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;
}
},
......
......@@ -26,6 +26,7 @@ namespace core_calendar\external;
defined('MOODLE_INTERNAL') || die();
use \core_calendar\local\event\container;
use \core_course\external\course_summary_exporter;
use \renderer_base;
require_once($CFG->dirroot . '/course/lib.php');
......@@ -57,6 +58,22 @@ class calendar_event_exporter extends event_exporter_base {
$values['popupname'] = [
'type' => PARAM_RAW,
];
$values['mindaytimestamp'] = [
'type' => PARAM_INT,
'optional' => true
];
$values['mindayerror'] = [
'type' => PARAM_TEXT,
'optional' => true
];
$values['maxdaytimestamp'] = [
'type' => PARAM_INT,
'optional' => true
];
$values['maxdayerror'] = [
'type' => PARAM_TEXT,
'optional' => true
];
return $values;
}
......@@ -89,9 +106,9 @@ class calendar_event_exporter extends event_exporter_base {
} else {
// TODO MDL-58866 We do not have any way to find urls for events outside of course modules.
$course = $event->get_course()->get('id') ?: SITEID;
$url = course_get_url($course);
}
$values['url'] = $url->out(false);
$values['islastday'] = false;
$today = $this->related['type']->timestamp_to_date_array($this->related['today']);
......@@ -153,6 +170,10 @@ class calendar_event_exporter extends event_exporter_base {
$values['calendareventtype'] = $this->get_calendar_event_type();
if ($event->get_course_module()) {
$values = array_merge($values, $this->get_module_timestamp_limits($event));
}
return $values;
}
......@@ -184,4 +205,111 @@ class calendar_event_exporter extends event_exporter_base {
return $type;
}
/**
* Return the set of minimum and maximum date timestamp values
* for the given event.
*
* @param event_interface $event
* @return array
*/
protected function get_module_timestamp_limits($event) {
$values = [];
$mapper = container::get_event_mapper();
$starttime = $event->get_times()->get_start_time();
list($min, $max) = component_callback(
'mod_' . $event->get_course_module()->get('modname'),
'core_calendar_get_valid_event_timestart_range',
[$mapper->from_event_to_legacy_event($event)],
[null, null]
);
if ($min) {
$values = array_merge($values, $this->get_module_timestamp_min_limit($starttime, $min));
}
if ($max) {
$values = array_merge($values, $this->get_module_timestamp_max_limit($starttime, $max));
}
return $values;
}
/**
* Get the correct minimum midnight day limit based on the event start time
* and the module's minimum timestamp limit.
*
* @param DateTimeInterface $starttime The event start time
* @param array $min The module's minimum limit for the event
*/
protected function get_module_timestamp_min_limit(\DateTimeInterface $starttime, $min) {
// We need to check that the minimum valid time is earlier in the
// day than the current event time so that if the user drags and drops
// the event to this day (which changes the date but not the time) it
// will result in a valid time start for the event.
//
// For example:
// An event that starts on 2017-01-10 08:00 with a minimum cutoff
// of 2017-01-05 09:00 means that 2017-01-05 is not a valid start day
// for the drag and drop because it would result in the event start time
// being set to 2017-01-05 08:00, which is invalid. Instead the minimum
// valid start day would be 2017-01-06.
$values = [];
$timestamp = $min[0];
$errorstring = $min[1];
$mindate = (new \DateTimeImmutable())->setTimestamp($timestamp);
$minstart = $mindate->setTime(
$starttime->format('H'),
$starttime->format('i'),
$starttime->format('s')
);
$midnight = usergetmidnight($timestamp);
if ($mindate <= $minstart) {
$values['mindaytimestamp'] = $midnight;
} else {
$tomorrow = (new \DateTime())->setTimestamp($midnight)->modify('+1 day');
$values['mindaytimestamp'] = $tomorrow->getTimestamp();
}
// Get the human readable error message to display if the min day
// timestamp is violated.
$values['mindayerror'] = $errorstring;
return $values;