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