Proyectos de Subversion Moodle

// This file is part of Moodle - https://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 to display and manage reactions and difficulty tracks on course page.

 * @copyright  2020 Quentin Fombaron, 2021 Astor Bizard

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

 */

define(['jquery', 'core/ajax', 'core/notification'], function($, ajax, notification) {

    /**

     * Call a function each time a course section is loaded.

     * @param {Function} call Function to call.

     */

    function callOnModulesListLoad(call) {

        call();

        // The following listener is needed for the Tiles course format, where sections are loaded on demand.

        $(document).ajaxComplete(function(event, xhr, settings) {

            if (typeof (settings.data) !== 'string') {

                return;

            }

            try {

                var data = JSON.parse(settings.data);

                if (data.length == 0 || typeof (data[0].methodname) === 'undefined') {

                    return;

                }

                if (data[0].methodname == 'format_tiles_get_single_section_page_html' // Tile load.

                    || data[0].methodname == 'format_tiles_log_tile_click') { // Tile load, cached.

                    call();

                }

            } catch (e) {

                // Something went wrong, it may not even be JSON. It is fine, this means it was not the call we were expecting.

                return;

            }

        });

    }

    /**

     * Set up difficulty tracks on course modules.

     * @param {Array} difficultyLevels Array of difficulty tracks, one entry for each course module.

     * @param {Array} trackColors Tracks colors, from block plugin configuration.

     * @param {Number|null} cmid The course module ID, if this page is a module view.

     */

    function setUpDifficultyTracks(difficultyLevels, trackColors, cmid) {

        difficultyLevels.forEach(function(module) {

            var difficultyLevel = parseInt(module.difficultyLevel);

            var title = '';

            if (difficultyLevel > 0) {

                var track = ['greentrack', 'bluetrack', 'redtrack', 'blacktrack'][difficultyLevel - 1];

                title = M.util.get_string(track, 'block_point_view');

            }

            var $track = $('<div>', {

                'class': 'block_point_view track',

                'title': title,

                'style': 'background-color: ' + trackColors[difficultyLevel] + ';'

            });

            // Decide where to put the track.

            var $container = $('#module-' + module.id + ' .activitytitle');

            if ($container.closest('.activity-grid').length) {

                // Moodle 4.3+.

                $container = $container.closest('.activity-grid');

            }

            if ($container.length === 0) {

                // This seems to be a label.

                $container = $('#module-' + module.id + ' .activity-item .description,' +

                                '#module-' + module.id + ' .activity-item .activity-altcontent').first();

            }

            // Add the track.

            if ($container.find('.block_point_view.track').length === 0) {

                $container.prepend($track);

            }

            // If there is indentation, move the track after it.

            $container.find('.mod-indent').after($track);

            if (cmid === module.id) {

                // This is a module page, add the track to the title.

                $('.page-context-header').prepend($track);

            }

        });

    }

    /**

     * Get a jQuery object in reaction zone for given module ID.

     * @param {Number} moduleId Module ID.

     * @param {String} selector (optional) Sub-selector.

     * @return {jQuery} If selector was provided, the corresponding jQuery object within the reaction zone.

     *  If not, the reaction zone jQuery object.

     */

    function $get(moduleId, selector) {

        var $element = $('#module-' + moduleId + ' .block_point_view.reactions-container');

        if (typeof (selector) === 'undefined') {

            return $element;

        } else {

            return $element.find(selector);

        }

    }

    // Enumeration of the possible reactions.

    var Reactions = {

            none: 0,

            easy: 1,

            better: 2,

            hard: 3

    };

    // Array of Reaction of the user for the activity.

    var reactionVotedArray = {};

    /**

     * Set up difficulty tracks on course modules.

     * @param {Number} courseId Course ID.

     * @param {Array} modulesWithReactions Array of reactions state, one entry for each course module with reactions enabled.

     * @param {String} reactionsHtml HTML fragment for reactions.

     * @param {Array} pixSrc Array of pictures sources for group images.

     * @param {Number|null} cmid The course module ID, if this page is a module view.

     */

    function setUpReactions(courseId, modulesWithReactions, reactionsHtml, pixSrc, cmid) {

        // For each selected module, create a reaction zone.

        modulesWithReactions.forEach(function(module) {

            var moduleId = parseInt(module.cmid);

            var uservote = parseInt(module.uservote);

            // Initialise reactionVotedArray.

            reactionVotedArray[moduleId] = uservote;

            if (module.cmid === cmid) {

                // Simulate an activity row on course page (so we treat it the same for what's next).

                $('<div id="module-' + moduleId + '" class="activity-wrapper mr-5" style="width: 165px;">')

                .insertAfter($('.header-actions-container'))

                .prepend('<div class="activity-instance">');

            }

            if ($('#module-' + moduleId).length === 1 && $get(moduleId).length === 0) {

                // Add the reaction zone to the module.

                var $module = $('#module-' + moduleId);

                if ($module.is('.modtype_label')) {

                    // Label.

                    $module.find('.description, .activity-grid').first().before(reactionsHtml);

                } else if ($module.find('.tiles-activity-container').length) {

                    // Tiles format.

                    $module.find('.tiles-activity-container').after(reactionsHtml);

                } else {

                    $module.find('.activity-instance').after(reactionsHtml);

                }

                // Setup reaction change.

                var reactionsLock = false;

                $get(moduleId, '.reaction img')

                .click(function() {

                    // Use a mutex to avoid query / display inconsistencies.

                    // This is not a perfect mutex, but is actually enough for our needs.

                    if (reactionsLock === false) {

                        reactionsLock = true;

                        reactionChange(courseId, moduleId, $(this).data('reactionname'))

                        .always(function() {

                            reactionsLock = false;

                            updateGroupImgAndNb(moduleId, pixSrc);

                        });

                    }

                });

                // Initialize reactions state.

                $get(moduleId, '.reactionnb').each(function() {

                    var reactionName = $(this).data('reactionname');

                    var reactionNb = parseInt(module['total' + reactionName]);

                    updateReactionNb(moduleId, reactionName, reactionNb, uservote === Reactions[reactionName]);

                });

                updateGroupImgAndNb(moduleId, pixSrc);

                // Setup animations.

                setupReactionsAnimation(moduleId, pixSrc);

            }

        });

    }

    /**

     * Manage a reaction change (user added, removed or updated their vote).

     * @param {Number} courseId Course ID.

     * @param {Number} moduleId Module ID.

     * @param {String} reactionName The reaction being clicked.

     * @returns {Promise} A promise, result of the change operations (ajax call and UI update).

     */

    function reactionChange(courseId, moduleId, reactionName) {

        var reactionSelect = Reactions[reactionName];

        var previousReaction = reactionVotedArray[moduleId];

        // If the reaction being clicked is the current one, it is a vote remove.

        var newVote = (reactionSelect === previousReaction) ? Reactions.none : reactionSelect;

        return ajax.call([

            {

                methodname: 'block_point_view_update_db',

                args: {

                    func: 'update',

                    courseid: courseId,

                    cmid: moduleId,

                    vote: newVote

                }

            }

        ])[0]

        .done(function() {

            reactionVotedArray[moduleId] = newVote; // Set current reaction.

            if (previousReaction !== Reactions.none) {

                // User canceled their vote (or updated to another one).

                var previousReactionName = ['', 'easy', 'better', 'hard'][previousReaction];

                updateReactionNb(moduleId, previousReactionName, -1, false);

            }

            if (newVote !== Reactions.none) {

                // User added or updated their vote.

                updateReactionNb(moduleId, reactionName, +1, true); // Add new vote.

            }

        })

        .fail(notification.exception);

    }

    /**

     * Update the reactions group image and total number according to current votes.

     * @param {Number} moduleId Module ID.

     * @param {Array} pix Array of pictures sources for group images.

     */

    function updateGroupImgAndNb(moduleId, pix) {

        // Build group image name.

        var groupImg = 'group_';

        var totalNb = 0;

        $get(moduleId, '.reactionnb').each(function() {

            var reactionNb = parseInt($(this).text());

            if (reactionNb > 0) {

                groupImg += $(this).data('reactionname').toUpperCase().charAt(0); // Add E, B or H.

            }

            totalNb += reactionNb;

        });

        // Modify the image source of the reaction group.

        $get(moduleId, '.group_img').attr('src', pix[groupImg]);

        // Update the total number of votes.

        var $groupNbWrapper = $get(moduleId, '.group_nb');

        var $groupNb = $groupNbWrapper.find('span');

        $groupNb

        .text(totalNb)

        .attr('title', M.util.get_string('totalreactions', 'block_point_view', totalNb));

        $groupNbWrapper

        .toggleClass('invisible', totalNb === 0)

        .toggleClass('voted', reactionVotedArray[moduleId] !== Reactions.none);

        // Adjust the size to fit within a fixed space (useful for the green dot).

        var digits = Math.min(('' + totalNb).length, 5);

        $groupNb.css({

            'right': Math.max(0.25 * (digits - 2), 0) + 'em',

            'transform': 'scaleX(' + (1.0 + 0.03 * digits * digits - 0.35 * digits + 0.34) + ')'

        });

    }

    /**

     * Update a reaction number of votes.

     * @param {Number} moduleId Module ID.

     * @param {String} reactionName The reaction to update the number of.

     * @param {Number} diff Difference to apply (e.g. +1 for adding a vote, -1 for removing a vote).

     * @param {Boolean} isSelected Whether the reaction we are updating is the one now selected by user.

     */

    function updateReactionNb(moduleId, reactionName, diff, isSelected) {

        var $reactionNb = $get(moduleId, '.reactionnb[data-reactionname="' + reactionName + '"]');

        var nbReaction = parseInt($reactionNb.text()) + diff;

        $reactionNb

        .text(nbReaction)

        .toggleClass('nbselected', isSelected);

        $get(moduleId, '.reaction img[data-reactionname="' + reactionName + '"]')

        .toggleClass('novote', nbReaction === 0);

    }

    /**

     * Set up animations to swap between reactions preview and vote interface.

     * @param {Number} moduleId Module ID.

     */

    function setupReactionsAnimation(moduleId) {

        // Helpers to resize images for animations.

        var reactionImageSizeForRatio = function(ratio) {

            return {

                top: 15 - (10 * ratio),

                left: 10 - (10 * ratio),

                height: 20 * ratio

            };

        };

        var groupImageSizeForRatio = function(ratio) {

            return {

                left: -10 + (10 * ratio),

                height: 20 * ratio

            };

        };

        // Animation sequence to hide reactions preview and show vote interface.

        var showReactions = function(moduleId) {

            $get(moduleId, '.reactions').removeClass('invisible');

            $get(moduleId, '.group_img')

            .css({'pointer-events': 'none'})

            .animate(groupImageSizeForRatio(0), 300)

            .hide(0);

            $get(moduleId, '.group_nb').delay(200).hide(300);

            $('#module-' + moduleId + ' button[data-action="toggle-manual-completion"],' +

              '#module-' + moduleId + ' .activity-info .automatic-completion-conditions > span.badge:first-of-type,' +

              '#module-' + moduleId + ' .activity-information [data-region="completionrequirements"]')

            .delay(200).queue(function(next) {

                // Use opacity transition for a smooth hiding.

                $(this).css({

                    opacity: 0,

                    transition: 'opacity 0.3s ease-in-out'

                });

                next();

            }).delay(300).queue(function(next) {

                // Actually make the element invisible to avoid accidental clicking on transparent element.

                $(this).addClass('invisible');

                next();

            });

            ['easy', 'better', 'hard'].forEach(function(reaction, index) {

                var delay = 50 + 150 * index; // Easy: 50, better: 200, hard: 350.

                $get(moduleId, '.reaction img[data-reactionname="' + reaction + '"]')

                .delay(delay).animate(reactionImageSizeForRatio(1), 300)

                .css({'pointer-events': 'auto'});

                $get(moduleId, '.reactionnb[data-reactionname="' + reaction + '"]')

                .delay(delay + 300)

                .queue(function(next) {

                    $(this).removeClass('invisible');

                    next();

                });

            });

        };

        // Animation sequence to hide vote interface and show reaction preview.

        var hideReactions = function(moduleId) {

            ['hard', 'better', 'easy'].forEach(function(reaction, index) {

                var delay = 50 + 250 * index; // Hard: 50, better: 300, easy: 550.

                $get(moduleId, '.reaction img[data-reactionname="' + reaction + '"]')

                .css({'pointer-events': 'none'})

                .delay(delay).animate(reactionImageSizeForRatio(0), 500);

                $get(moduleId, '.reactionnb[data-reactionname="' + reaction + '"]')

                .delay(delay)

                .queue(function(next) {

                    $(this).addClass('invisible');

                    next();

                });

            });

            // Show the reaction group image with nice animation.

            $get(moduleId, '.group_img')

            .delay(500)

            .show(0)

            .animate(groupImageSizeForRatio(1), 300)

            .queue(function(next) {

                $get(moduleId, '.reactions').addClass('invisible');

                next();

            })

            .css({'pointer-events': 'auto'});

            $get(moduleId, '.group_nb').delay(600).show(0);

            $('#module-' + moduleId + ' button[data-action="toggle-manual-completion"],' +

              '#module-' + moduleId + ' .activity-info .automatic-completion-conditions > span.badge:first-of-type,' +

              '#module-' + moduleId + ' .activity-information [data-region="completionrequirements"]')

            .delay(600).queue(function(next) {

                $(this).removeClass('invisible');

                // Use opacity transition for a smooth showing back.

                $(this).css({

                    opacity: 1,

                    transition: 'opacity 0.3s ease-in-out'

                });

                next();

            });

        };

        // Setup some timeouts and locks to trigger animations.

        var reactionsVisible = false;

        var groupTimeout = null;

        var reactionsTimeout = null;

        var triggerHideReactions = function() {

            reactionsTimeout = null;

            reactionsVisible = false;

            hideReactions(moduleId);

        };

        var triggerShowReactions = function() {

            groupTimeout = null;

            reactionsVisible = true;

            showReactions(moduleId);

            clearTimeout(reactionsTimeout);

            reactionsTimeout = setTimeout(triggerHideReactions, 2000); // Hide reactions after 2 seconds if mouse is already out.

        };

        // Reactions preview interactions.

        $get(moduleId, '.group_img')

        .mouseover(function() {

            $(this).stop().animate(groupImageSizeForRatio(1.15), 100); // Widen image a little on hover.

            groupTimeout = setTimeout(triggerShowReactions, 300); // Show vote interface after 0.3s hover.

        })

        .mouseout(function() {

            if (!reactionsVisible) {

                // Cancel mouseover actions.

                clearTimeout(groupTimeout);

                $(this).stop().animate(groupImageSizeForRatio(1), 100);

            }

        })

        .click(triggerShowReactions); // Show vote interface instantly on click.

        // Reactions images interactions.

        $get(moduleId, '.reaction img')

        .mouseover(function() {

            $(this).stop().animate(reactionImageSizeForRatio(2), 100); // Widen image a little on hover.

        })

        .mouseout(function() {

            $(this).stop().animate(reactionImageSizeForRatio(1), 100);

        });

        // Vote interface zone interactions

        $get(moduleId, '.reactions')

        .mouseout(function() {

            clearTimeout(reactionsTimeout);

            reactionsTimeout = setTimeout(triggerHideReactions, 1000); // Hide vote interface after 1s out of it.

        })

        .mouseover(function() {

            clearTimeout(reactionsTimeout);

        });

    }

    return {

        init: function(courseId) {

            // Wait that the DOM is fully loaded.

            $(function() {

                var blockData = $('.block_point_view[data-blockdata]').data('blockdata');

                var cmid = null; // If this page is a course module view, retrieve the module ID.

                document.body.classList.forEach(function(bodyClass) {

                    var matches = bodyClass.match(/cmid-(\d+)/);

                    cmid = matches ? matches[1] : cmid;

                });

                callOnModulesListLoad(function() {

                    setUpDifficultyTracks(blockData.difficultylevels, blockData.trackcolors, cmid);

                    setUpReactions(courseId, blockData.moduleswithreactions, blockData.reactionstemplate, blockData.pix, cmid);

                });

            });

        }

    };

});