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

/**

 * Javascript to initialise the Recently accessed courses block.

 *

 * @module     block_recentlyaccessedcourses/main

 * @copyright  2018 Victor Deniz <victor@moodle.com>

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

 */

define(

    [

        'jquery',

        'core/custom_interaction_events',

        'core/notification',

        'core/pubsub',

        'core/paged_content_paging_bar',

        'core/templates',

        'core_course/events',

        'core_course/repository',

        'core/aria',

    ],

    function(

        $,

        CustomEvents,

        Notification,

        PubSub,

        PagedContentPagingBar,

        Templates,

        CourseEvents,

        CoursesRepository,

        Aria

    ) {

        // Constants.

        var NUM_COURSES_TOTAL = 10;

        var SELECTORS = {

            BLOCK_CONTAINER: '[data-region="recentlyaccessedcourses"]',

            CARD_CONTAINER: '[data-region="card-deck"]',

            COURSE_IS_FAVOURITE: '[data-region="is-favourite"]',

            CONTENT: '[data-region="view-content"]',

            EMPTY_MESSAGE: '[data-region="empty-message"]',

            LOADING_PLACEHOLDER: '[data-region="loading-placeholder"]',

            PAGING_BAR: '[data-region="paging-bar"]',

            PAGING_BAR_NEXT: '[data-control="next"]',

            PAGING_BAR_PREVIOUS: '[data-control="previous"]'

        };

        // Module variables.

        var contentLoaded = false;

        var allCourses = [];

        var visibleCoursesId = null;

        var cardWidth = null;

        var viewIndex = 0;

        var availableVisibleCards = 1;

        /**

         * Show the empty message when no course are found.

         *

         * @param {object} root The root element for the courses view.

         */

        var showEmptyMessage = function(root) {

            root.find(SELECTORS.EMPTY_MESSAGE).removeClass('hidden');

            root.find(SELECTORS.LOADING_PLACEHOLDER).addClass('hidden');

            root.find(SELECTORS.CONTENT).addClass('hidden');

        };

        /**

         * Show the empty message when no course are found.

         *

         * @param {object} root The root element for the courses view.

         */

        var showContent = function(root) {

            root.find(SELECTORS.CONTENT).removeClass('hidden');

            root.find(SELECTORS.EMPTY_MESSAGE).addClass('hidden');

            root.find(SELECTORS.LOADING_PLACEHOLDER).addClass('hidden');

        };

        /**

         * Show the paging bar.

         *

         * @param {object} root The root element for the courses view.

         */

        var showPagingBar = function(root) {

            var pagingBar = root.find(SELECTORS.PAGING_BAR);

            pagingBar.css('opacity', 1);

            pagingBar.css('visibility', 'visible');

            Aria.unhide(pagingBar);

        };

        /**

         * Hide the paging bar.

         *

         * @param {object} root The root element for the courses view.

         */

        var hidePagingBar = function(root) {

            var pagingBar = root.find(SELECTORS.PAGING_BAR);

            pagingBar.css('opacity', 0);

            pagingBar.css('visibility', 'hidden');

            Aria.hide(pagingBar);

        };

        /**

         * Show the favourite indicator for the given course (if it's in the list).

         *

         * @param {object} root The root element for the courses view.

         * @param {number} courseId The id of the course to be favourited.

         */

        var favouriteCourse = function(root, courseId) {

            allCourses.forEach(function(course) {

                if (course.attr('data-course-id') == courseId) {

                    course.find(SELECTORS.COURSE_IS_FAVOURITE).removeClass('hidden');

                }

            });

        };

        /**

         * Hide the favourite indicator for the given course (if it's in the list).

         *

         * @param {object} root The root element for the courses view.

         * @param {number} courseId The id of the course to be unfavourited.

         */

        var unfavouriteCourse = function(root, courseId) {

            allCourses.forEach(function(course) {

                if (course.attr('data-course-id') == courseId) {

                    course.find(SELECTORS.COURSE_IS_FAVOURITE).addClass('hidden');

                }

            });

        };

        /**

         * Render the a list of courses.

         *

         * @param {array} courses containing array of courses.

         * @return {promise} Resolved with list of rendered courses as jQuery objects.

         */

        var renderAllCourses = function(courses) {

            var showcoursecategory = $(SELECTORS.BLOCK_CONTAINER).data('displaycoursecategory');

            var promises = courses.map(function(course) {

                course.showcoursecategory = showcoursecategory;

                return Templates.render('block_recentlyaccessedcourses/course-card', course);

            });

            return $.when.apply(null, promises).then(function() {

                var renderedCourses = [];

                promises.forEach(function(promise) {

                    promise.then(function(html) {

                        renderedCourses.push($(html));

                        return;

                    })

                    .catch(Notification.exception);

                });

                return renderedCourses;

            });

        };

        /**

         * Fetch user's recently accessed courses and reload the content of the block.

         *

         * @param {int} userid User whose courses will be shown

         * @returns {promise} The updated content for the block.

         */

        var loadContent = function(userid) {

            return CoursesRepository.getLastAccessedCourses(userid, NUM_COURSES_TOTAL)

                .then(function(courses) {

                    return renderAllCourses(courses);

                });

        };

        /**

         * Recalculate the number of courses that should be visible.

         *

         * @param {object} root The root element for the courses view.

         */

        var recalculateVisibleCourses = function(root) {

            var container = root.find(SELECTORS.CONTENT).find(SELECTORS.CARD_CONTAINER);

            var availableWidth = parseFloat(root.css('width'));

            var numberOfCourses = allCourses.length;

            var start = 0;

            if (!cardWidth) {

                container.html(allCourses[0]);

                // Render one card initially to calculate the width of the cards

                // including the margins.

                cardWidth = allCourses[0].outerWidth(true);

            }

            availableVisibleCards = Math.floor(availableWidth / cardWidth);

            if (viewIndex + availableVisibleCards < numberOfCourses) {

                start = viewIndex;

            } else {

                var overflow = (viewIndex + availableVisibleCards) - numberOfCourses;

                start = viewIndex - overflow;

                start = start >= 0 ? start : 0;

            }

            // At least show one card.

            if (availableVisibleCards === 0) {

                availableVisibleCards = 1;

            }

            var coursesToShow = allCourses.slice(start, start + availableVisibleCards);

            // Create an id for the list of courses we expect to be displayed.

            var newVisibleCoursesId = coursesToShow.reduce(function(carry, course) {

                return carry + course.attr('data-course-id');

            }, '');

            // Centre the courses if we have an overflow of courses.

            if (allCourses.length > coursesToShow.length) {

                container.addClass('justify-content-center');

                container.removeClass('justify-content-start');

            } else {

                container.removeClass('justify-content-center');

                container.addClass('justify-content-start');

            }

            // Don't bother updating the DOM unless the visible courses have changed.

            if (visibleCoursesId != newVisibleCoursesId) {

                var pagingBar = root.find(PagedContentPagingBar.rootSelector);

                container.html(coursesToShow);

                visibleCoursesId = newVisibleCoursesId;

                if (availableVisibleCards >= allCourses.length) {

                    hidePagingBar(root);

                } else {

                    showPagingBar(root);

                    if (viewIndex === 0) {

                        PagedContentPagingBar.disablePreviousControlButtons(pagingBar);

                    } else {

                        PagedContentPagingBar.enablePreviousControlButtons(pagingBar);

                    }

                    if (viewIndex + availableVisibleCards >= allCourses.length) {

                        PagedContentPagingBar.disableNextControlButtons(pagingBar);

                    } else {

                        PagedContentPagingBar.enableNextControlButtons(pagingBar);

                    }

                }

            }

        };

        /**

         * Register event listeners for the block.

         *

         * @param {object} root The root element for the recentlyaccessedcourses block.

         */

        var registerEventListeners = function(root) {

            var resizeTimeout = null;

            var drawerToggling = false;

            PubSub.subscribe(CourseEvents.favourited, function(courseId) {

                favouriteCourse(root, courseId);

            });

            PubSub.subscribe(CourseEvents.unfavorited, function(courseId) {

                unfavouriteCourse(root, courseId);

            });

            PubSub.subscribe('nav-drawer-toggle-start', function() {

                if (!contentLoaded || !allCourses.length || drawerToggling) {

                    // Nothing to recalculate.

                    return;

                }

                drawerToggling = true;

                var recalculationCount = 0;

                // This function is going to recalculate the number of courses while

                // the nav drawer is opening or closes (up to a maximum of 5 recalcs).

                var doRecalculation = function() {

                    setTimeout(function() {

                        recalculateVisibleCourses(root);

                        recalculationCount++;

                        if (recalculationCount < 5 && drawerToggling) {

                            // If we haven't done too many recalculations and the drawer

                            // is still toggling then recurse.

                            doRecalculation();

                        }

                    }, 100);

                };

                // Start the recalculations.

                doRecalculation(root);

            });

            PubSub.subscribe('nav-drawer-toggle-end', function() {

                drawerToggling = false;

            });

            $(window).on('resize', function() {

                if (!contentLoaded || !allCourses.length) {

                    // Nothing to reclculate.

                    return;

                }

                // Resize events fire rapidly so recalculating the visible courses each

                // time can be expensive. Let's debounce them,

                if (!resizeTimeout) {

                    resizeTimeout = setTimeout(function() {

                        resizeTimeout = null;

                        recalculateVisibleCourses(root);

                    // The recalculateVisibleCourses function will execute at a rate of 15fps.

                    }, 66);

                }

            });

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

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

                var button = $(e.target).closest(SELECTORS.PAGING_BAR_NEXT);

                if (!button.hasClass('disabled')) {

                    viewIndex = viewIndex + availableVisibleCards;

                    recalculateVisibleCourses(root);

                }

                data.originalEvent.preventDefault();

            });

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

                var button = $(e.target).closest(SELECTORS.PAGING_BAR_PREVIOUS);

                if (!button.hasClass('disabled')) {

                    viewIndex = viewIndex - availableVisibleCards;

                    viewIndex = viewIndex < 0 ? 0 : viewIndex;

                    recalculateVisibleCourses(root);

                }

                data.originalEvent.preventDefault();

            });

        };

        /**

         * Get and show the recent courses into the block.

         *

         * @param {int} userid User from which the courses will be obtained

         * @param {object} root The root element for the recentlyaccessedcourses block.

         */

        var init = function(userid, root) {

            root = $(root);

            registerEventListeners(root);

            loadContent(userid)

                .then(function(renderedCourses) {

                    allCourses = renderedCourses;

                    contentLoaded = true;

                    if (allCourses.length) {

                        showContent(root);

                        recalculateVisibleCourses(root);

                    } else {

                        showEmptyMessage(root);

                    }

                    return;

                })

                .catch(Notification.exception);

        };

        return {

            init: init

        };

    });