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

/**

 * Module for viewing a discussion.

 *

 * @module     mod_forum/discussion

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

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

 */

define(

[

    'jquery',

    'core/custom_interaction_events',

    'mod_forum/selectors',

    'core/pubsub',

    'mod_forum/forum_events',

    'core/str',

    'core/notification',

],

function(

    $,

    CustomEvents,

    Selectors,

    PubSub,

    ForumEvents,

    String,

    Notification

) {

    /**

     * Set the focus on the previous post in the list. Previous post is calculated

     * based on position in list as viewed top to bottom.

     *

     * @param {Object} currentPost The post that currently has focus

     */

    var focusPreviousPost = function(currentPost) {

        // See if there is a previous sibling post.

        var prevPost = currentPost.prev(Selectors.post.post);

        if (prevPost.length) {

            // The previous post might have replies that appear visually between

            // it and the current post (see nested view) so if that's the case

            // then the last reply will be the previous post in the list.

            var replyPost = prevPost.find(Selectors.post.post).last();

            if (replyPost.length) {

                // Focus the last reply.

                replyPost.focus();

            } else {

                // No replies so we can focus straight on the sibling.

                prevPost.focus();

            }

        } else {

            // If there are no siblings then jump up the tree to the parent

            // post and focus the first parent post we find.

            currentPost.parents(Selectors.post.post).first().focus();

        }

    };

    /**

     * Set the focus on the next post in the list. Previous post is calculated

     * based on position in list as viewed top to bottom.

     *

     * @param {Object} currentPost The post that currently has focus

     */

    var focusNextPost = function(currentPost) {

        // The next post in the visual list would be the first reply to this one

        // so let's see if we have one.

        var replyPost = currentPost.find(Selectors.post.post).first();

        if (replyPost.length) {

            // Got a reply.

            replyPost.focus();

        } else {

            // If we don't have a reply then the next post in the visual list would

            // be a sibling post (replying to the same parent).

            var siblingPost = currentPost.next(Selectors.post.post);

            if (siblingPost.length) {

                siblingPost.focus();

            } else {

                // No siblings either. That means we're the lowest level reply in a thread

                // so we need to walk back up the tree of posts and find an ancestor post that

                // has a sibling post we can focus.

                var parentPosts = currentPost.parents(Selectors.post.post).toArray();

                for (var i = 0; i < parentPosts.length; i++) {

                    var ancestorSiblingPost = $(parentPosts[i]).next(Selectors.post.post);

                    if (ancestorSiblingPost.length) {

                        ancestorSiblingPost.focus();

                        break;

                    }

                }

            }

        }

    };

    /**

     * Check if the element is inside the in page reply section.

     *

     * @param {Object} element The element to check

     * @return {Boolean}

     */

    var isElementInInPageReplySection = function(element) {

        var inPageReply = $(element).closest(Selectors.post.inpageReplyContent);

        return inPageReply.length ? true : false;

    };

    /**

     * Initialise the keyboard accessibility controls for the discussion.

     *

     * @param {Object} root The discussion root element

     */

    var initAccessibilityKeyboardNav = function(root) {

        var posts = root.find(Selectors.post.post);

        // Take each post action out of the tab index.

        posts.each(function(index, post) {

            var actions = $(post).find(Selectors.post.action);

            var firstAction = actions.first();

            actions.attr('tabindex', '-1');

            firstAction.attr('tabindex', 0);

        });

        CustomEvents.define(root, [

            CustomEvents.events.up,

            CustomEvents.events.down,

            CustomEvents.events.next,

            CustomEvents.events.previous,

            CustomEvents.events.home,

            CustomEvents.events.end,

        ]);

        root.on(CustomEvents.events.up, function(e, data) {

            var activeElement = document.activeElement;

            if (isElementInInPageReplySection(activeElement)) {

                // Focus is currently inside the in page reply section so don't move focus

                // to another post.

                return;

            }

            var focusPost = $(activeElement).closest(Selectors.post.post);

            if (focusPost.length) {

                focusPreviousPost(focusPost);

            } else {

                root.find(Selectors.post.post).first().focus();

            }

            data.originalEvent.preventDefault();

        });

        root.on(CustomEvents.events.down, function(e, data) {

            var activeElement = document.activeElement;

            if (isElementInInPageReplySection(activeElement)) {

                // Focus is currently inside the in page reply section so don't move focus

                // to another post.

                return;

            }

            var focusPost = $(activeElement).closest(Selectors.post.post);

            if (focusPost.length) {

                focusNextPost(focusPost);

            } else {

                root.find(Selectors.post.post).first().focus();

            }

            data.originalEvent.preventDefault();

        });

        root.on(CustomEvents.events.home, function(e, data) {

            if (isElementInInPageReplySection(document.activeElement)) {

                // Focus is currently inside the in page reply section so don't move focus

                // to another post.

                return;

            }

            root.find(Selectors.post.post).first().focus();

            data.originalEvent.preventDefault();

        });

        root.on(CustomEvents.events.end, function(e, data) {

            if (isElementInInPageReplySection(document.activeElement)) {

                // Focus is currently inside the in page reply section so don't move focus

                // to another post.

                return;

            }

            root.find(Selectors.post.post).last().focus();

            data.originalEvent.preventDefault();

        });

        root.on(CustomEvents.events.next, Selectors.post.action, function(e, data) {

            var currentAction = $(e.target);

            var container = currentAction.closest(Selectors.post.actionsContainer);

            var actions = container.find(Selectors.post.action);

            var nextAction = currentAction.next(Selectors.post.action);

            actions.attr('tabindex', '-1');

            if (!nextAction.length) {

                nextAction = actions.first();

            }

            nextAction.attr('tabindex', 0);

            nextAction.focus();

            data.originalEvent.preventDefault();

        });

        root.on(CustomEvents.events.previous, Selectors.post.action, function(e, data) {

            var currentAction = $(e.target);

            var container = currentAction.closest(Selectors.post.actionsContainer);

            var actions = container.find(Selectors.post.action);

            var nextAction = currentAction.prev(Selectors.post.action);

            actions.attr('tabindex', '-1');

            if (!nextAction.length) {

                nextAction = actions.last();

            }

            nextAction.attr('tabindex', 0);

            nextAction.focus();

            data.originalEvent.preventDefault();

        });

        root.on(CustomEvents.events.home, Selectors.post.action, function(e, data) {

            var currentAction = $(e.target);

            var container = currentAction.closest(Selectors.post.actionsContainer);

            var actions = container.find(Selectors.post.action);

            var firstAction = actions.first();

            actions.attr('tabindex', '-1');

            firstAction.attr('tabindex', 0);

            firstAction.focus();

            e.stopPropagation();

            data.originalEvent.preventDefault();

        });

        root.on(CustomEvents.events.end, Selectors.post.action, function(e, data) {

            var currentAction = $(e.target);

            var container = currentAction.closest(Selectors.post.actionsContainer);

            var actions = container.find(Selectors.post.action);

            var lastAction = actions.last();

            actions.attr('tabindex', '-1');

            lastAction.attr('tabindex', 0);

            lastAction.focus();

            e.stopPropagation();

            data.originalEvent.preventDefault();

        });

        PubSub.subscribe(ForumEvents.SUBSCRIPTION_TOGGLED, function(data) {

            var subscribed = data.subscriptionState;

            var updateMessage = subscribed ? 'discussionsubscribed' : 'discussionunsubscribed';

            String.get_string(updateMessage, "forum")

                .then(function(s) {

                    return Notification.addNotification({

                        message: s,

                        type: "info"

                    });

                })

                .catch(Notification.exception);

        });

    };

    return {

        init: function(root) {

            initAccessibilityKeyboardNav(root);

        }

    };

});