// 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/>.
/**
* Controls the notification area on the notification page.
*
* @module message_popup/notification_area_control_area
* @copyright 2016 Ryan Wyllie <ryan@moodle.com>
* @license http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later
*/
define(['jquery', 'core/templates', 'core/notification', 'core/custom_interaction_events',
'message_popup/notification_repository', 'message_popup/notification_area_events'],
function($, Templates, DebugNotification, CustomEvents, NotificationRepo, NotificationAreaEvents) {
var SELECTORS = {
CONTAINER: '[data-region="notification-area"]',
CONTENT: '[data-region="content"]',
NOTIFICATION: '[data-region="notification-content-item-container"]',
CAN_RECEIVE_FOCUS: 'input:not([type="hidden"]), a[href], button, textarea, select, [tabindex]',
};
var TEMPLATES = {
NOTIFICATION: 'message_popup/notification_content_item',
};
/**
* Constructor for ControlArea
*
* @class
* @param {object} root The root element for the content area
* @param {int} userId The user id of the current user
*/
var ControlArea = function(root, userId) {
this.root = $(root);
this.container = this.root.closest(SELECTORS.CONTAINER);
this.userId = userId;
this.content = this.root.find(SELECTORS.CONTENT);
this.offset = 0;
this.limit = 20;
this.initialLoad = false;
this.isLoading = false;
this.loadedAll = false;
this.notifications = {};
this.registerEventListeners();
};
/**
* Get the root element.
*
* @method getRoot
* @return {object} jQuery element
*/
ControlArea.prototype.getRoot = function() {
return this.root;
};
/**
* Get the container element (which the control area is within).
*
* @method getContainer
* @return {object} jQuery element
*/
ControlArea.prototype.getContainer = function() {
return this.container;
};
/**
* Get the user id.
*
* @method getUserId
* @return {int}
*/
ControlArea.prototype.getUserId = function() {
return this.userId;
};
/**
* Get the control area content element.
*
* @method getContent
* @return {object} jQuery element
*/
ControlArea.prototype.getContent = function() {
return this.content;
};
/**
* Get the offset value for paginated loading of the
* notifications.
*
* @method getOffset
* @return {int}
*/
ControlArea.prototype.getOffset = function() {
return this.offset;
};
/**
* Get the limit value for the paginated loading of the
* notifications.
*
* @method getLimit
* @return {int}
*/
ControlArea.prototype.getLimit = function() {
return this.limit;
};
/**
* Set the offset value for the paginated loading of the
* notifications.
*
* @method setOffset
* @param {int} value The new offset value
*/
ControlArea.prototype.setOffset = function(value) {
this.offset = value;
};
/**
* Set the limit value for the paginated loading of the
* notifications.
*
* @method setLimit
* @param {int} value The new limit value
*/
ControlArea.prototype.setLimit = function(value) {
this.limit = value;
};
/**
* Increment the offset by the limit amount.
*
* @method incrementOffset
*/
ControlArea.prototype.incrementOffset = function() {
this.offset += this.limit;
};
/**
* Flag the control area as loading.
*
* @method startLoading
*/
ControlArea.prototype.startLoading = function() {
this.isLoading = true;
this.getRoot().addClass('loading');
};
/**
* Remove the loading flag from the control area.
*
* @method stopLoading
*/
ControlArea.prototype.stopLoading = function() {
this.isLoading = false;
this.getRoot().removeClass('loading');
};
/**
* Check if the first load of notifications has been triggered.
*
* @method hasDoneInitialLoad
* @return {bool} true if first notification loaded, false otherwise
*/
ControlArea.prototype.hasDoneInitialLoad = function() {
return this.initialLoad;
};
/**
* Check if all of the notifications have been loaded.
*
* @method hasLoadedAllContent
* @return {bool}
*/
ControlArea.prototype.hasLoadedAllContent = function() {
return this.loadedAll;
};
/**
* Set the state of the loaded all content property.
*
* @method setLoadedAllContent
* @param {bool} val True if all content is loaded, false otherwise
*/
ControlArea.prototype.setLoadedAllContent = function(val) {
this.loadedAll = val;
};
/**
* Save a notification in the cache.
*
* @method setCacheNotification
* @param {object} notification A notification returned by a webservice
*/
ControlArea.prototype.setCacheNotification = function(notification) {
this.notifications[notification.id] = notification;
};
/**
* Retrieve a notification from the cache.
*
* @method getCacheNotification
* @param {int} id The id for the notification you wish to retrieve
* @return {object} A notification (as returned by a webservice)
*/
ControlArea.prototype.getCacheNotification = function(id) {
return this.notifications[id];
};
/**
* Find the notification element in the control area for the given id.
*
* @method getNotificationElement
* @param {int} id The notification id
* @return {(object|null)} jQuery element or null
*/
ControlArea.prototype.getNotificationElement = function(id) {
var element = this.getRoot().find(SELECTORS.NOTIFICATION + '[data-id="' + id + '"]');
return element.length == 1 ? element : null;
};
/**
* Scroll the notification element into view within the control area, if it
* isn't already visible.
*
* @method scrollNotificationIntoView
* @param {object} notificationElement The jQuery notification element
*/
ControlArea.prototype.scrollNotificationIntoView = function(notificationElement) {
var position = notificationElement.position();
var container = this.getRoot();
var relativeTop = position.top - container.scrollTop();
// If the element isn't in the view window.
if (relativeTop > container.innerHeight()) {
var height = notificationElement.outerHeight();
// Offset enough to make sure the notification will be in view.
height = height * 4;
var scrollTo = position.top - height;
container.scrollTop(scrollTo);
}
};
/**
* Show the full notification for the given notification element. The notification
* context is retrieved from the cache and send as data with an event to be
* rendered in the content area.
*
* @method showNotification
* @param {(int|object)} notificationElement The notification id or jQuery notification element
*/
ControlArea.prototype.showNotification = function(notificationElement) {
if (typeof notificationElement !== 'object') {
// Assume it's an ID if it's not an object.
notificationElement = this.getNotificationElement(notificationElement);
}
if (notificationElement && notificationElement.length) {
this.getRoot().find(SELECTORS.NOTIFICATION).removeClass('selected');
notificationElement.addClass('selected').find(SELECTORS.CAN_RECEIVE_FOCUS).focus();
var notificationId = notificationElement.attr('data-id');
var notification = this.getCacheNotification(notificationId);
this.scrollNotificationIntoView(notificationElement);
// Create a new version of the notification to send with the notification so
// this copy isn't modified.
this.getContainer().trigger(NotificationAreaEvents.showNotification, [$.extend({}, notification)]);
}
};
/**
* Send a request to mark the notification as read in the server and remove the unread
* status from the element.
*
* @method markNotificationAsRead
* @param {object} notificationElement The jQuery notification element
* @return {object} jQuery promise
*/
ControlArea.prototype.markNotificationAsRead = function(notificationElement) {
return NotificationRepo.markAsRead(notificationElement.attr('data-id')).done(function() {
notificationElement.removeClass('unread');
});
};
/**
* Render the notification data with the appropriate template and add it to the DOM.
*
* @method renderNotifications
* @param {array} notifications Array of notification data
* @return {object} jQuery promise that is resolved when all notifications have been
* rendered and added to the DOM
*/
ControlArea.prototype.renderNotifications = function(notifications) {
var promises = [];
var container = this.getContent();
$.each(notifications, function(index, notification) {
// Need to remove the contexturl so the item isn't rendered
// as a link.
var contextUrl = notification.contexturl;
delete notification.contexturl;
var promise = Templates.render(TEMPLATES.NOTIFICATION, notification)
.then(function(html, js) {
// Restore it for the cache.
notification.contexturl = contextUrl;
this.setCacheNotification(notification);
// Pass the Rendered content out.
return {html: html, js: js};
}.bind(this));
promises.push(promise);
}.bind(this));
return $.when.apply($, promises).then(function() {
// Each of the promises in the when will pass its results as an argument to the function.
// The order of the arguments will be the order that the promises are passed to when()
// i.e. the first promise's results will be in the first argument.
$.each(arguments, function(index, argument) {
container.append(argument.html);
Templates.runTemplateJS(argument.js);
});
return;
});
};
/**
* Load notifications from the server and render them.
*
* @method loadMoreNotifications
* @return {object} jQuery promise
*/
ControlArea.prototype.loadMoreNotifications = function() {
if (this.isLoading || this.hasLoadedAllContent()) {
return $.Deferred().resolve();
}
this.startLoading();
var request = {
limit: this.getLimit(),
offset: this.getOffset(),
useridto: this.getUserId(),
};
if (!this.initialLoad) {
// If this is the first load we may have been given a non-zero offset,
// in which case we need to load all notifications preceeding that offset
// to make sure the full list is rendered.
request.limit = this.getOffset() + this.getLimit();
request.offset = 0;
}
var promise = NotificationRepo.query(request).then(function(result) {
var notifications = result.notifications;
this.unreadCount = result.unreadcount;
this.setLoadedAllContent(!notifications.length || notifications.length < this.getLimit());
this.initialLoad = true;
if (notifications.length) {
this.incrementOffset();
return this.renderNotifications(notifications);
}
return false;
}.bind(this))
.always(function() {
this.stopLoading();
}.bind(this));
return promise;
};
/**
* Create the event listeners for the control area.
*
* @method registerEventListeners
*/
ControlArea.prototype.registerEventListeners = function() {
CustomEvents.define(this.getRoot(), [
CustomEvents.events.activate,
CustomEvents.events.scrollBottom,
CustomEvents.events.scrollLock,
CustomEvents.events.up,
CustomEvents.events.down,
]);
this.getRoot().on(CustomEvents.events.scrollBottom, function() {
this.loadMoreNotifications();
}.bind(this));
this.getRoot().on(CustomEvents.events.activate, SELECTORS.NOTIFICATION, function(e) {
var notificationElement = $(e.target).closest(SELECTORS.NOTIFICATION);
this.showNotification(notificationElement);
}.bind(this));
// Show the previous notification in the list.
this.getRoot().on(CustomEvents.events.up, SELECTORS.NOTIFICATION, function(e, data) {
var notificationElement = $(e.target).closest(SELECTORS.NOTIFICATION);
this.showNotification(notificationElement.prev());
data.originalEvent.preventDefault();
}.bind(this));
// Show the next notification in the list.
this.getRoot().on(CustomEvents.events.down, SELECTORS.NOTIFICATION, function(e, data) {
var notificationElement = $(e.target).closest(SELECTORS.NOTIFICATION);
this.showNotification(notificationElement.next());
data.originalEvent.preventDefault();
}.bind(this));
this.getContainer().on(NotificationAreaEvents.notificationShown, function(e, notification) {
if (!notification.read) {
var element = this.getNotificationElement(notification.id);
if (element) {
this.markNotificationAsRead(element);
}
var cachedNotification = this.getCacheNotification(notification.id);
if (cachedNotification) {
cachedNotification.read = true;
}
}
}.bind(this));
};
return ControlArea;
});