mod/forum/amd/src/discussion_nested_v2.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/>.
/**
 * Module for viewing a discussion in nested v2 view.
 *
 * @module mod_forum/discussion_nested_v2
 * @copyright  2019 Ryan Wyllie <ryan@moodle.com>
 * @license    http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later
 */
import $ from 'jquery';
import AutoRows from 'core/auto_rows';
import CustomEvents from 'core/custom_interaction_events';
import * as FormChangeChecker from 'core_form/changechecker';
import Notification from 'core/notification';
import Templates from 'core/templates';
import Discussion from 'mod_forum/discussion';
import InPageReply from 'mod_forum/inpage_reply';
import LockToggle from 'mod_forum/lock_toggle';
import FavouriteToggle from 'mod_forum/favourite_toggle';
import Pin from 'mod_forum/pin_toggle';
import Selectors from 'mod_forum/selectors';
import Subscribe from 'mod_forum/subscription_toggle';
const ANIMATION_DURATION = 150;
/**
 * Get the closest post container element from the given element.
 *
 * @param {Object} element jQuery element to search from
 * @return {Object} jQuery element
 */
const getPostContainer = (element) => {
    return element.closest(Selectors.post.post);
};
/**
 * Get the closest post container element from the given element.
 *
 * @param {Object} element jQuery element to search from
 * @param {Number} id Id of the post to find.
 * @return {Object} jQuery element
 */
const getPostContainerById = (element, id) => {
    return element.find(`${Selectors.post.post}[data-post-id=${id}]`);
};
/**
 * Get the parent post container elements from the given element.
 *
 * @param {Object} element jQuery element to search from
 * @return {Object} jQuery element
 */
const getParentPostContainers = (element) => {
    return element.parents(Selectors.post.post);
};
/**
 * Get the post content container element from the post container element.
 *
 * @param {Object} postContainer jQuery element for the post container
 * @return {Object} jQuery element
 */
const getPostContentContainer = (postContainer) => {
    return postContainer.children().not(Selectors.post.repliesContainer).find(Selectors.post.forumCoreContent);
};
/**
 * Get the in page reply container element from the post container element.
 *
 * @param {Object} postContainer jQuery element for the post container
 * @return {Object} jQuery element
 */
const getInPageReplyContainer = (postContainer) => {
    return postContainer.children().filter(Selectors.post.inpageReplyContainer);
};
/**
 * Get the in page reply form element from the post container element.
 *
 * @param {Object} postContainer jQuery element for the post container
 * @return {Object} jQuery element
 */
const getInPageReplyForm = (postContainer) => {
    return getInPageReplyContainer(postContainer).find(Selectors.post.inpageReplyContent);
};
/**
 * Get the in page reply create (reply) button element from the post container element.
 *
 * @param {Object} postContainer jQuery element for the post container
 * @return {Object} jQuery element
 */
const getInPageReplyCreateButton = (postContainer) => {
    return getPostContentContainer(postContainer).find(Selectors.post.inpageReplyCreateButton);
};
/**
 * Get the replies visibility toggle container (show/hide replies button container) element
 * from the post container element.
 *
 * @param {Object} postContainer jQuery element for the post container
 * @return {Object} jQuery element
 */
const getRepliesVisibilityToggleContainer = (postContainer) => {
    return postContainer.children(Selectors.post.repliesVisibilityToggleContainer);
};
/**
 * Get the replies container element from the post container element.
 *
 * @param {Object} postContainer jQuery element for the post container
 * @return {Object} jQuery element
 */
const getRepliesContainer = (postContainer) => {
    return postContainer.children(Selectors.post.repliesContainer);
};
/**
 * Check if the post has any replies.
 *
 * @param {Object} postContainer jQuery element for the post container
 * @return {Bool}
 */
const hasReplies = (postContainer) => {
    return getRepliesContainer(postContainer).children().length > 0;
};
/**
 * Get the show replies button element from the replies visibility toggle container element.
 *
 * @param {Object} replyVisibilityToggleContainer jQuery element for the toggle container
 * @return {Object} jQuery element
 */
const getShowRepliesButton = (replyVisibilityToggleContainer) => {
    return replyVisibilityToggleContainer.find(Selectors.post.showReplies);
};
/**
 * Get the hide replies button element from the replies visibility toggle container element.
 *
 * @param {Object} replyVisibilityToggleContainer jQuery element for the toggle container
 * @return {Object} jQuery element
 */
const getHideRepliesButton = (replyVisibilityToggleContainer) => {
    return replyVisibilityToggleContainer.find(Selectors.post.hideReplies);
};
/**
 * Check if the replies are visible.
 *
 * @param {Object} postContainer jQuery element for the post container
 * @return {Bool}
 */
const repliesVisible = (postContainer) => {
    const repliesContainer = getRepliesContainer(postContainer);
    return repliesContainer.is(':visible');
};
/**
 * Show the post replies.
 *
 * @param {Object} postContainer jQuery element for the post container
 * @param {Number|null} postIdToSee Id of the post to scroll into view (if any)
 */
const showReplies = (postContainer, postIdToSee = null) => {
    const repliesContainer = getRepliesContainer(postContainer);
    const replyVisibilityToggleContainer = getRepliesVisibilityToggleContainer(postContainer);
    const showButton = getShowRepliesButton(replyVisibilityToggleContainer);
    const hideButton = getHideRepliesButton(replyVisibilityToggleContainer);
    showButton.addClass('hidden');
    hideButton.removeClass('hidden');
    repliesContainer.slideDown({
        duration: ANIMATION_DURATION,
        queue: false,
        complete: () => {
            if (postIdToSee) {
                const postContainerToSee = getPostContainerById(repliesContainer, postIdToSee);
                if (postContainerToSee.length) {
                    postContainerToSee[0].scrollIntoView();
                }
            }
        }
    }).css('display', 'none').fadeIn(ANIMATION_DURATION);
};
/**
 * Hide the post replies.
 *
 * @param {Object} postContainer jQuery element for the post container
 */
const hideReplies = (postContainer) => {
    const repliesContainer = getRepliesContainer(postContainer);
    const replyVisibilityToggleContainer = getRepliesVisibilityToggleContainer(postContainer);
    const showButton = getShowRepliesButton(replyVisibilityToggleContainer);
    const hideButton = getHideRepliesButton(replyVisibilityToggleContainer);
    showButton.removeClass('hidden');
    hideButton.addClass('hidden');
    repliesContainer.slideUp({
        duration: ANIMATION_DURATION,
        queue: false
    }).fadeOut(ANIMATION_DURATION);
};
/** Variable to hold the showInPageReplyForm function after it's built. */
let showInPageReplyForm = null;
/**
 * Build the showInPageReplyForm function with the given additional template context.
 *
 * @param {Object} additionalTemplateContext Additional render context for the in page reply template.
 * @return {Function}
 */
const buildShowInPageReplyFormFunction = (additionalTemplateContext) => {
    /**
     * Show the in page reply form in the given in page reply container. The form
     * display will be animated.
     *
     * @param {Object} postContainer jQuery element for the post container
     */
    return async(postContainer) => {
        const inPageReplyContainer = getInPageReplyContainer(postContainer);
        const repliesVisibilityToggleContainer = getRepliesVisibilityToggleContainer(postContainer);
        const inPageReplyCreateButton = getInPageReplyCreateButton(postContainer);
        if (!hasInPageReplyForm(inPageReplyContainer)) {
            try {
                const html = await renderInPageReplyTemplate(additionalTemplateContext, inPageReplyCreateButton, postContainer);
                Templates.appendNodeContents(inPageReplyContainer, html, '');
            } catch (e) {
                Notification.exception(e);
            }
            FormChangeChecker.watchForm(postContainer[0].querySelector('form'));
        }
        inPageReplyCreateButton.fadeOut(ANIMATION_DURATION, () => {
            const inPageReplyForm = getInPageReplyForm(postContainer);
            inPageReplyForm.slideDown({
                duration: ANIMATION_DURATION,
                queue: false,
                complete: () => {
                    inPageReplyForm.find('textarea').focus();
                }
            }).css('display', 'none').fadeIn(ANIMATION_DURATION);
            if (repliesVisibilityToggleContainer.length && hasReplies(postContainer)) {
                repliesVisibilityToggleContainer.fadeIn(ANIMATION_DURATION);
                hideReplies(postContainer);
            }
        });
    };
};
/**
 * Hide the in page reply form in the given in page reply container. The form
 * display will be animated.
 *
 * @param {Object} postContainer jQuery element for the post container
 * @param {Number|null} postIdToSee Id of the post to scroll into view (if any)
 */
const hideInPageReplyForm = (postContainer, postIdToSee = null) => {
    const inPageReplyForm = getInPageReplyForm(postContainer);
    const inPageReplyCreateButton = getInPageReplyCreateButton(postContainer);
    const repliesVisibilityToggleContainer = getRepliesVisibilityToggleContainer(postContainer);
    if (repliesVisibilityToggleContainer.length && hasReplies(postContainer)) {
        repliesVisibilityToggleContainer.fadeOut(ANIMATION_DURATION);
        if (!repliesVisible(postContainer)) {
            showReplies(postContainer, postIdToSee);
        }
    }
    inPageReplyForm.slideUp({
        duration: ANIMATION_DURATION,
        queue: false,
        complete: () => {
            inPageReplyCreateButton.fadeIn(ANIMATION_DURATION);
        }
    }).fadeOut(200);
};
/**
 * Check if the in page reply container contains the in page reply form.
 *
 * @param {Object} inPageReplyContainer jQuery element for the in page reply container
 * @return {Bool}
 */
const hasInPageReplyForm = (inPageReplyContainer) => {
    return inPageReplyContainer.find(Selectors.post.inpageReplyContent).length > 0;
};
/**
 * Render the template to generate the in page reply form HTML.
 *
 * @param {Object} additionalTemplateContext Additional render context for the in page reply template
 * @param {Object} button jQuery element for the reply button that was clicked
 * @param {Object} postContainer jQuery element for the post container
 * @return {Object} jQuery promise
 */
const renderInPageReplyTemplate = (additionalTemplateContext, button, postContainer) => {
    const postContentContainer = getPostContentContainer(postContainer);
    const currentSubject = postContentContainer.find(Selectors.post.forumSubject).text();
    const currentAuthorName = postContentContainer.find(Selectors.post.authorName).text();
    const context = {
        postid: postContainer.data('post-id'),
        "reply_url": button.attr('data-href'),
        sesskey: M.cfg.sesskey,
        parentsubject: currentSubject,
        parentauthorname: currentAuthorName,
        canreplyprivately: button.data('can-reply-privately'),
        postformat: InPageReply.CONTENT_FORMATS.MOODLE,
        ...additionalTemplateContext
    };
    return Templates.render('mod_forum/inpage_reply_v2', context);
};
/**
 * Increment the total reply count in the show/hide replies buttons for the post.
 *
 * @param {Object} postContainer jQuery element for the post container
 */
const incrementTotalReplyCount = (postContainer) => {
    getRepliesVisibilityToggleContainer(postContainer).find(Selectors.post.replyCount).each((index, element) => {
        const currentCount = parseInt(element.innerText, 10);
        element.innerText = currentCount + 1;
    });
};
/**
 * Create all of the event listeners for the discussion.
 *
 * @param {Object} root jQuery element for the discussion container
 */
const registerEventListeners = (root) => {
    CustomEvents.define(root, [CustomEvents.events.activate]);
    // Auto expanding text area for in page reply.
    AutoRows.init(root);
    // Reply button is clicked.
    root.on(CustomEvents.events.activate, Selectors.post.inpageReplyCreateButton, (e, data) => {
        data.originalEvent.preventDefault();
        const postContainer = getPostContainer($(e.currentTarget));
        showInPageReplyForm(postContainer);
    });
    // Cancel in page reply button.
    root.on(CustomEvents.events.activate, Selectors.post.inpageReplyCancelButton, (e, data) => {
        data.originalEvent.preventDefault();
        const postContainer = getPostContainer($(e.currentTarget));
        hideInPageReplyForm(postContainer);
    });
    // Show replies button clicked.
    root.on(CustomEvents.events.activate, Selectors.post.showReplies, (e, data) => {
        data.originalEvent.preventDefault();
        const postContainer = getPostContainer($(e.target));
        showReplies(postContainer);
    });
    // Hide replies button clicked.
    root.on(CustomEvents.events.activate, Selectors.post.hideReplies, (e, data) => {
        data.originalEvent.preventDefault();
        const postContainer = getPostContainer($(e.target));
        hideReplies(postContainer);
    });
    // Post created with in page reply.
    root.on(InPageReply.EVENTS.POST_CREATED, Selectors.post.inpageSubmitBtn, (e, newPostId) => {
        const currentTarget = $(e.currentTarget);
        const postContainer = getPostContainer(currentTarget);
        const postContainers = getParentPostContainers(currentTarget);
        hideInPageReplyForm(postContainer, newPostId);
        postContainers.each((index, container) => {
            incrementTotalReplyCount($(container));
        });
    });
};
/**
 * Initialise the javascript for the discussion in nested v2 display mode.
 *
 * @param {Object} root jQuery element for the discussion container
 * @param {Object} context Additional render context for the in page reply template
 */
export const init = (root, context) => {
    // Build the showInPageReplyForm function with the additional render context.
    showInPageReplyForm = buildShowInPageReplyFormFunction(context);
    // Add discussion event listeners.
    registerEventListeners(root);
    // Initialise default discussion javascript (keyboard nav etc).
    Discussion.init(root);
    // Add in page reply javascript.
    InPageReply.init(root);
    // Initialise the settings menu javascript.
    const discussionToolsContainer = root.find(Selectors.discussion.tools);
    LockToggle.init(discussionToolsContainer, false);
    FavouriteToggle.init(discussionToolsContainer, false, (toggleElement, response) => {
        const newTargetState = response.userstate.favourited ? 0 : 1;
        return toggleElement.data('targetstate', newTargetState);
    });
    Pin.init(discussionToolsContainer, false, (toggleElement, response) => {
        const newTargetState = response.pinned ? 0 : 1;
        return toggleElement.data('targetstate', newTargetState);
    });
    Subscribe.init(discussionToolsContainer, false, (toggleElement, response) => {
        const newTargetState = response.userstate.subscribed ? 0 : 1;
        toggleElement.data('targetstate', newTargetState);
    });
};