SWAMPy

✎ CARVE FLESH

EDITING: notification_area_control_area.js

// 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;
});

CANCEL

Name	Type	Size	Modified	Actions
↩ ..	DIR	—	—
📄 notification_area_content_area.js	JS	6.5 KB	2026-02-11 01:44	EDIT
📄 notification_area_control_area.js	JS	14.7 KB	2026-02-11 01:44	EDIT
📄 notification_area_events.js	JS	1.1 KB	2026-02-11 01:44	EDIT
📄 notification_popover_controller.js	JS	16.4 KB	2026-02-11 01:44	EDIT
📄 notification_repository.js	JS	3.3 KB	2026-02-11 01:44	EDIT