Proyectos de Subversion Moodle

// 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 message drawer.

 *

 * @module     core_message/message_drawer

 * @copyright  2018 Ryan Wyllie <ryan@moodle.com>

 * @license    http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later

 */

define(

[

    'jquery',

    'core/custom_interaction_events',

    'core/pubsub',

    'core_message/message_drawer_view_contact',

    'core_message/message_drawer_view_contacts',

    'core_message/message_drawer_view_conversation',

    'core_message/message_drawer_view_group_info',

    'core_message/message_drawer_view_overview',

    'core_message/message_drawer_view_search',

    'core_message/message_drawer_view_settings',

    'core_message/message_drawer_router',

    'core_message/message_drawer_routes',

    'core_message/message_drawer_events',

    'core_message/message_drawer_helper',

    'core/pending',

    'core/drawer',

    'core/toast',

    'core/str',

    'core/config',

    'core/ajax',

    'core/local/aria/focuslock',

    'core/modal_backdrop',

    'core/templates',

    'core/local/aria/selectors',

],

function(

    $,

    CustomEvents,

    PubSub,

    ViewContact,

    ViewContacts,

    ViewConversation,

    ViewGroupInfo,

    ViewOverview,

    ViewSearch,

    ViewSettings,

    Router,

    Routes,

    Events,

    Helper,

    Pending,

    Drawer,

    Toast,

    Str,

    Config,

    Ajax,

    FocusLock,

    ModalBackdrop,

    Templates,

    AriaSelectors,

) {

    var SELECTORS = {

        DRAWER: '[data-region="right-hand-drawer"]',

        PANEL_BODY_CONTAINER: '[data-region="panel-body-container"]',

        PANEL_HEADER_CONTAINER: '[data-region="panel-header-container"]',

        VIEW_CONTACT: '[data-region="view-contact"]',

        VIEW_CONTACTS: '[data-region="view-contacts"]',

        VIEW_CONVERSATION: '[data-region="view-conversation"]',

        VIEW_CONVERSATION_WITH_ID: '[data-region="view-conversation"][data-conversation-id]',

        VIEW_CONVERSATION_WITH_USER: '[data-region="view-conversation"][data-other-user-id]',

        VIEW_GROUP_INFO: '[data-region="view-group-info"]',

        VIEW_OVERVIEW: '[data-region="view-overview"]',

        VIEW_SEARCH: '[data-region="view-search"]',

        VIEW_SETTINGS: '[data-region="view-settings"]',

        ROUTES: '[data-route]',

        ROUTES_BACK: '[data-route-back]',

        HEADER_CONTAINER: '[data-region="header-container"]',

        BODY_CONTAINER: '[data-region="body-container"]',

        FOOTER_CONTAINER: '[data-region="footer-container"]',

        CLOSE_BUTTON: '[data-action="closedrawer"]',

        MESSAGE_INDEX: '[data-region="message-index"]',

        MESSAGE_TEXT_AREA: '[data-region="send-message-txt"]',

    };

    /**

     * Get elements for route.

     *

     * @param {String} namespace Unique identifier for the Routes

     * @param {Object} root The message drawer container.

     * @param {string} selector The route container.

     *

     * @return {array} elements Found route container objects.

     */

    var getParametersForRoute = function(namespace, root, selector) {

        var header = root.find(SELECTORS.HEADER_CONTAINER).find(selector);

        if (!header.length) {

            header = root.find(SELECTORS.PANEL_HEADER_CONTAINER).find(selector);

        }

        var body = root.find(SELECTORS.BODY_CONTAINER).find(selector);

        if (!body.length) {

            body = root.find(SELECTORS.PANEL_BODY_CONTAINER).find(selector);

        }

        var footer = root.find(SELECTORS.FOOTER_CONTAINER).find(selector);

        return [

            namespace,

            header.length ? header : null,

            body.length ? body : null,

            footer.length ? footer : null

        ];

    };

    var routes = [

        [Routes.VIEW_CONTACT, SELECTORS.VIEW_CONTACT, ViewContact.show, ViewContact.description],

        [Routes.VIEW_CONTACTS, SELECTORS.VIEW_CONTACTS, ViewContacts.show, ViewContacts.description],

        [Routes.VIEW_CONVERSATION, SELECTORS.VIEW_CONVERSATION, ViewConversation.show, ViewConversation.description],

        [Routes.VIEW_GROUP_INFO, SELECTORS.VIEW_GROUP_INFO, ViewGroupInfo.show, ViewGroupInfo.description],

        [Routes.VIEW_OVERVIEW, SELECTORS.VIEW_OVERVIEW, ViewOverview.show, ViewOverview.description],

        [Routes.VIEW_SEARCH, SELECTORS.VIEW_SEARCH, ViewSearch.show, ViewSearch.description],

        [Routes.VIEW_SETTINGS, SELECTORS.VIEW_SETTINGS, ViewSettings.show, ViewSettings.description]

    ];

    /**

     * Create routes.

     *

     * @param {String} namespace Unique identifier for the Routes

     * @param {Object} root The message drawer container.

     */

    var createRoutes = function(namespace, root) {

        routes.forEach(function(route) {

            Router.add(namespace, route[0], getParametersForRoute(namespace, root, route[1]), route[2], route[3]);

        });

    };

    let backdropPromise = null;

    /**

     * Set the focus on the drawer.

     *

     * This method also creates or destroy any necessary backdrop zone and focus trap.

     *

     * @param {Object} root The message drawer container.

     * @param {Boolean} hasFocus Whether the drawer has focus or not.

     */

    var setFocus = function(root, hasFocus) {

        var drawerRoot = Drawer.getDrawerRoot(root);

        if (!drawerRoot.length) {

            return;

        }

        if (!backdropPromise) {

            backdropPromise = Templates.render('core/modal_backdrop', {})

                .then(html => new ModalBackdrop(html));

        }

        const backdropWithAdjustments = backdropPromise.then(modalBackdrop => {

            const messageDrawerZIndex = window.getComputedStyle(drawerRoot[0]).zIndex;

            if (messageDrawerZIndex) {

                modalBackdrop.setZIndex(messageDrawerZIndex - 1);

            }

            modalBackdrop.getAttachmentPoint().get(0).addEventListener('click', e => {

                PubSub.publish(Events.HIDE, {});

                e.preventDefault();

            });

            return modalBackdrop;

        });

        if (hasFocus) {

            FocusLock.trapFocus(root[0]);

            // eslint-disable-next-line promise/catch-or-return

            backdropWithAdjustments.then(modalBackdrop => {

                if (modalBackdrop) {

                    modalBackdrop.show();

                    const pageWrapper = document.getElementById('page');

                    pageWrapper.style.overflow = 'hidden';

                    // Set the focus on the close button so when we press enter, it closes the drawer as it did before

                    var closeButton = root.find(SELECTORS.CLOSE_BUTTON);

                    if (closeButton.length) {

                        closeButton.focus();

                    }

                }

                return modalBackdrop;

            });

        } else {

            // eslint-disable-next-line promise/catch-or-return

            backdropWithAdjustments.then(modalBackdrop => {

                if (modalBackdrop) {

                    FocusLock.untrapFocus();

                    var button = $(SELECTORS.DRAWER).attr('data-origin');

                    if (button) {

                        $('#' + button).focus();

                    }

                    modalBackdrop.hide();

                    const pageWrapper = document.getElementById('page');

                    pageWrapper.style.overflow = 'visible';

                }

                return modalBackdrop;

            });

        }

    };

    /**

     * Show the message drawer.

     *

     * @param {string} namespace The route namespace.

     * @param {Object} root The message drawer container.

     */

    var show = function(namespace, root) {

        if (!root.attr('data-shown')) {

            Router.go(namespace, Routes.VIEW_OVERVIEW);

            root.attr('data-shown', true);

        }

        var drawerRoot = Drawer.getDrawerRoot(root);

        if (drawerRoot.length) {

            setFocus(root, true);

            Drawer.show(drawerRoot);

        }

    };

    /**

     * Hide the message drawer.

     *

     * @param {Object} root The message drawer container.

     */

    var hide = function(root) {

        var drawerRoot = Drawer.getDrawerRoot(root);

        if (drawerRoot.length) {

            setFocus(root, false);

            Drawer.hide(drawerRoot);

        }

    };

    /**

     * Check if the drawer is visible.

     *

     * @param {Object} root The message drawer container.

     * @return {boolean}

     */

    var isVisible = function(root) {

        var drawerRoot = Drawer.getDrawerRoot(root);

        if (drawerRoot.length) {

            return Drawer.isVisible(drawerRoot);

        }

        return true;

    };

    /**

     * Set Jump from button

     *

     * @param {String} buttonid The originating button id

     */

    var setJumpFrom = function(buttonid) {

        $(SELECTORS.DRAWER).attr('data-origin', buttonid);

    };

    /**

     * Store an unsent message.

     *

     * Don't store this if the user has already seen the unsent message.

     * This avoids spamming and ensures the user is only reminded once per unsent message.

     * If the unsent message is sent, this attribute is removed and notification is possible again (see sendMessage).

     */

    const storeUnsentMessage = async() => {

        const messageTextArea = document.querySelector(SELECTORS.MESSAGE_TEXT_AREA);

        if (messageTextArea.value.trim().length > 0 && !messageTextArea.hasAttribute('data-unsent-message-viewed')) {

            let message = messageTextArea.value;

            let conversationid = 0;

            let otheruserid = 0;

            // We don't always have a conversation to link the unsent message to, so let's check for that.

            const conversationId = document.querySelector(SELECTORS.VIEW_CONVERSATION_WITH_ID);

            if (conversationId) {

                const conversationWithId = messageTextArea.closest(SELECTORS.VIEW_CONVERSATION_WITH_ID);

                conversationid = conversationWithId.getAttribute('data-conversation-id');

            }

            // Store the 'other' user id if it is there. This can be used to create conversations.

            const conversationUser = document.querySelector(SELECTORS.VIEW_CONVERSATION_WITH_USER);

            if (conversationUser) {

                const conversationWithUser = messageTextArea.closest(SELECTORS.VIEW_CONVERSATION_WITH_USER);

                otheruserid = conversationWithUser.getAttribute('data-other-user-id');

            }

            setStoredUnsentMessage(message, conversationid, otheruserid);

        }

    };

    /**

     * Get the stored unsent message from the session via web service.

     *

     * @returns {Promise}

     */

    const getStoredUnsentMessage = () => Ajax.call([{

        methodname: 'core_message_get_unsent_message',

        args: {}

    }])[0];

    /**

     * Set the unsent message value in the session via web service.

     *

     * SendBeacon is used here because this is called on 'beforeunload'.

     *

     * @param {string} message The message string.

     * @param {number} conversationid The conversation id.

     * @param {number} otheruserid The other user id.

     * @returns {Promise}

     */

    const setStoredUnsentMessage = (message, conversationid, otheruserid) => {

        const method = 'core_message_set_unsent_message';

        const requestUrl = new URL(`${Config.wwwroot}/lib/ajax/service.php`);

        requestUrl.searchParams.set('sesskey', Config.sesskey);

        requestUrl.searchParams.set('info', method);

        navigator.sendBeacon(requestUrl, JSON.stringify([{

            index: 0,

            methodname: method,

            args: {

                message: message,

                conversationid: conversationid,

                otheruserid: otheruserid,

            }

        }]));

    };

    /**

     * Check for an unsent message.

     *

     * @param {String} uniqueId Unique identifier for the Routes.

     * @param {Object} root The message drawer container.

     */

    const getUnsentMessage = async(uniqueId, root) => {

        let type;

        let messageRoot;

        // We need to check if we are on the message/index page.

        // This logic is needed to handle the two message widgets here and ensure we are targetting the right one.

        const messageIndex = document.querySelector(SELECTORS.MESSAGE_INDEX);

        if (messageIndex !== null) {

            type = 'index';

            messageRoot = document.getElementById(`message-index-${uniqueId}`);

            if (!messageRoot) {

                // This is not the correct widget.

                return;

            }

        } else {

            type = 'drawer';

            messageRoot = document.getElementById(`message-drawer-${uniqueId}`);

        }

        const storedMessage = await getStoredUnsentMessage();

        const messageTextArea = messageRoot.querySelector(SELECTORS.MESSAGE_TEXT_AREA);

        if (storedMessage.message && messageTextArea !== null) {

            showUnsentMessage(messageTextArea, storedMessage, type, uniqueId, root);

        }

    };

    /**

     * Show an unsent message.

     *

     * There are two message widgets on the message/index page.

     * Because of that, we need to try and target the correct widget.

     *

     * @param {String} textArea The textarea element.

     * @param {Object} stored The stored message content.

     * @param {String} type Is this from the drawer or index page?

     * @param {String} uniqueId Unique identifier for the Routes.

     * @param {Object} root The message drawer container.

     */

    const showUnsentMessage = (textArea, stored, type, uniqueId, root) => {

        // The user has already been notified.

        if (textArea.hasAttribute('data-unsent-message-viewed')) {

            return;

        }

        // Depending on the type, show the conversation with the data we have available.

        // A conversation can be continued if there is a conversationid.

        // If the user was messaging a new non-contact, we won't have a conversationid yet.

        // In that case, we use the otheruserid value to start a conversation with them.

        switch (type) {

            case 'index':

                // Show the conversation in the main panel on the message/index page.

                if (stored.conversationid) {

                    Router.go(uniqueId, Routes.VIEW_CONVERSATION, stored.conversationid, 'frompanel');

                // There was no conversation id, let's get a conversation going using the user id.

                } else if (stored.otheruserid) {

                    Router.go(uniqueId, Routes.VIEW_CONVERSATION, null, 'create', stored.otheruserid);

                }

                break;

            case 'drawer':

                // Open the drawer and show the conversation.

                if (stored.conversationid) {

                    let args = {

                        conversationid: stored.conversationid

                    };

                    Helper.showConversation(args);

                // There was no conversation id, let's get a conversation going using the user id.

                } else if (stored.otheruserid) {

                    show(uniqueId, root);

                    Router.go(uniqueId, Routes.VIEW_CONVERSATION, null, 'create', stored.otheruserid);

                }

                break;

        }

        // Populate the text area.

        textArea.value = stored.message;

        textArea.setAttribute('data-unsent-message-viewed', 1);

        // Notify the user.

        Toast.add(Str.get_string('unsentmessagenotification', 'core_message'));

    };

    /**

     * Listen to and handle events for routing, showing and hiding the message drawer.

     *

     * @param {string} namespace The route namespace.

     * @param {Object} root The message drawer container.

     * @param {bool} alwaysVisible Is this messaging app always shown?

     */

    var registerEventListeners = function(namespace, root, alwaysVisible) {

        CustomEvents.define(root, [CustomEvents.events.activate, CustomEvents.events.escape]);

        var paramRegex = /^data-route-param-?(\d*)$/;

        root.on(CustomEvents.events.activate, SELECTORS.ROUTES, function(e, data) {

            var element = $(e.target).closest(SELECTORS.ROUTES);

            var route = element.attr('data-route');

            var attributes = [];

            for (var i = 0; i < element[0].attributes.length; i++) {

                attributes.push(element[0].attributes[i]);

            }

            var paramAttributes = attributes.filter(function(attribute) {

                var name = attribute.nodeName;

                var match = paramRegex.test(name);

                return match;

            });

            paramAttributes.sort(function(a, b) {

                var aParts = paramRegex.exec(a.nodeName);

                var bParts = paramRegex.exec(b.nodeName);

                var aIndex = aParts.length > 1 ? aParts[1] : 0;

                var bIndex = bParts.length > 1 ? bParts[1] : 0;

                if (aIndex < bIndex) {

                    return -1;

                } else if (bIndex < aIndex) {

                    return 1;

                } else {

                    return 0;

                }

            });

            var params = paramAttributes.map(function(attribute) {

                return attribute.nodeValue;

            });

            var routeParams = [namespace, route].concat(params);

            Router.go.apply(null, routeParams);

            data.originalEvent.preventDefault();

        });

        root.on(CustomEvents.events.activate, SELECTORS.ROUTES_BACK, function(e, data) {

            Router.back(namespace);

            data.originalEvent.preventDefault();

        });

        // Close the message drawer if the drawer is visible and the click happened outside the drawer and the toggle button.

        $(document).on(CustomEvents.events.activate, e => {

            var drawer = $(e.target).closest(SELECTORS.DRAWER);

            var toggleButtonId = $(SELECTORS.DRAWER)?.attr('data-origin');

            var toggleButton = '';

            if (toggleButtonId !== undefined && toggleButtonId) {

                toggleButton = $(e.target).closest("#" + toggleButtonId);

            }

            if (!drawer.length && !toggleButton.length && isVisible(root)) {

                // Determine if the element that was clicked is focusable.

                var focusableElement = $(e.target).closest(AriaSelectors.elements.focusable);

                if (focusableElement.length) {

                    // We need to move the focus to the clicked element after the drawer is hidden,

                    // so we need to clear the `data-origin` attribute first.

                    $(SELECTORS.DRAWER).attr('data-origin', '');

                }

                // Hide the drawer.

                hide(root);

                // Move the focus to the clicked element if it is focusable.

                if (focusableElement.length) {

                    focusableElement.focus();

                }

            }

        });

        // These are theme-specific to help us fix random behat fails.

        // These events target those events defined in BS3 and BS4 onwards.

        root[0].querySelectorAll('.collapse').forEach((collapse) => {

            collapse.addEventListener('hide.bs.collapse', (e) => {

                var pendingPromise = new Pending();

                e.target.addEventListener('hidden.bs.collapse', function() {

                    pendingPromise.resolve();

                }, {once: true});

            });

        });

        root[0].querySelectorAll('.collapse').forEach((collapse) => {

            collapse.addEventListener('show.bs.collapse', (e) => {

                var pendingPromise = new Pending();

                e.target.addEventListener('shown.bs.collapse', function() {

                    pendingPromise.resolve();

                }, {once: true});

            });

        });

        $(SELECTORS.JUMPTO).focus(function() {

            var firstInput = root.find(SELECTORS.CLOSE_BUTTON);

            if (firstInput.length) {

                firstInput.focus();

            } else {

                $(SELECTORS.HEADER_CONTAINER).find(SELECTORS.ROUTES_BACK).focus();

            }

        });

        $(SELECTORS.DRAWER).focus(function() {

            var button = $(this).attr('data-origin');

            if (button) {

                $('#' + button).focus();

            }

        });

        if (!alwaysVisible) {

            PubSub.subscribe(Events.SHOW, function() {

                show(namespace, root);

            });

            PubSub.subscribe(Events.HIDE, function() {

                hide(root);

            });

            PubSub.subscribe(Events.TOGGLE_VISIBILITY, function(buttonid) {

                const buttonElement = document.getElementById(buttonid);

                if (isVisible(root)) {

                    hide(root);

                    buttonElement?.setAttribute('aria-expanded', false);

                    $(SELECTORS.JUMPTO).attr('tabindex', -1);

                } else {

                    show(namespace, root);

                    buttonElement?.setAttribute('aria-expanded', true);

                    setJumpFrom(buttonid);

                    $(SELECTORS.JUMPTO).attr('tabindex', 0);

                }

            });

            root.on(CustomEvents.events.escape, function() {

                PubSub.publish(Events.HIDE, {});

            });

        }

        PubSub.subscribe(Events.SHOW_CONVERSATION, function(args) {

            setJumpFrom(args.buttonid);

            show(namespace, root);

            Router.go(namespace, Routes.VIEW_CONVERSATION, args.conversationid);

        });

        var closebutton = root.find(SELECTORS.CLOSE_BUTTON);

        closebutton.on(CustomEvents.events.activate, function(e, data) {

            data.originalEvent.preventDefault();

            setFocus(root, false);

            var button = $(SELECTORS.DRAWER).attr('data-origin');

            if (button) {

                $('#' + button).focus();

            }

            PubSub.publish(Events.TOGGLE_VISIBILITY, button);

        });

        PubSub.subscribe(Events.CREATE_CONVERSATION_WITH_USER, function(args) {

            setJumpFrom(args.buttonid);

            show(namespace, root);

            Router.go(namespace, Routes.VIEW_CONVERSATION, null, 'create', args.userid);

        });

        PubSub.subscribe(Events.SHOW_SETTINGS, function() {

            show(namespace, root);

            Router.go(namespace, Routes.VIEW_SETTINGS);

        });

        PubSub.subscribe(Events.PREFERENCES_UPDATED, function(preferences) {

            var filteredPreferences = preferences.filter(function(preference) {

                return preference.type == 'message_entertosend';

            });

            var enterToSendPreference = filteredPreferences.length ? filteredPreferences[0] : null;

            if (enterToSendPreference) {

                var viewConversationFooter = root.find(SELECTORS.FOOTER_CONTAINER).find(SELECTORS.VIEW_CONVERSATION);

                viewConversationFooter.attr('data-enter-to-send', enterToSendPreference.value);

            }

        });

        // If our textarea is modified, remove the attribute which indicates the user has seen the unsent message notification.

        // This will allow the user to be notified again.

        const textArea = document.querySelector(SELECTORS.MESSAGE_TEXT_AREA);

        if (textArea) {

            textArea.addEventListener('keyup', function() {

                textArea.removeAttribute('data-unsent-message-viewed');

            });

        }

        // Catch any unsent messages and store them.

        window.addEventListener('beforeunload', storeUnsentMessage);

    };

    /**

     * Initialise the message drawer.

     *

     * @param {Object} root The message drawer container.

     * @param {String} uniqueId Unique identifier for the Routes

     * @param {bool} alwaysVisible Should we show the app now, or wait for the user?

     * @param {Object} route

     */

    var init = function(root, uniqueId, alwaysVisible, route) {

        root = $(root);

        createRoutes(uniqueId, root);

        registerEventListeners(uniqueId, root, alwaysVisible);

        if (alwaysVisible) {

            show(uniqueId, root);

            if (route) {

                var routeParams = route.params || [];

                routeParams = [uniqueId, route.path].concat(routeParams);

                Router.go.apply(null, routeParams);

            }

        }

        // Mark the drawer as ready.

        Helper.markDrawerReady();

        // Get and show any unsent message.

        getUnsentMessage(uniqueId, root);

    };

    return {

        init: init,

    };

});