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

/**
 * When returning to Moodle let the user select which course to add the resource to.
 *
 * @module     tool_moodlenet/select_page
 * @copyright  2020 Mathew May <mathew.solutions>
 * @license    http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later
 */

define([
    'core/ajax',
    'core/templates',
    'tool_moodlenet/selectors',
    'core/notification'
], function(
    Ajax,
    Templates,
    Selectors,
    Notification
) {
    /**
     * @var {string} The id corresponding to the import.
     */
    var importId;

    /**
     * Set up the page.
     *
     * @method init
     * @param {string} importIdString the string ID of the import.
     */
    var init = function(importIdString) {
        importId = importIdString;
        var page = document.querySelector(Selectors.region.selectPage);
        registerListenerEvents(page);
        addCourses(page);
    };

    /**
     * Renders the 'no-courses' template.
     *
     * @param {HTMLElement} areaReplace the DOM node to replace.
     * @returns {Promise}
     */
    var renderNoCourses = function(areaReplace) {
        return Templates.renderPix('courses', 'tool_moodlenet').then(function(img) {
            return img;
        }).then(function(img) {
            var temp = document.createElement('div');
            temp.innerHTML = img.trim();
            return Templates.render('core_course/no-courses', {
                nocoursesimg: temp.firstChild.src
            });
        }).then(function(html, js) {
            Templates.replaceNodeContents(areaReplace, html, js);
            areaReplace.classList.add('mx-auto');
            areaReplace.classList.add('w-25');
            return;
        });
    };

    /**
     * Render the course cards for those supplied courses.
     *
     * @param {HTMLElement} areaReplace the DOM node to replace.
     * @param {Array<courses>} courses the courses to render.
     * @returns {Promise}
     */
    var renderCourses = function(areaReplace, courses) {
        return Templates.render('tool_moodlenet/view-cards', {
            courses: courses
        }).then(function(html, js) {
            Templates.replaceNodeContents(areaReplace, html, js);
            areaReplace.classList.remove('mx-auto');
            areaReplace.classList.remove('w-25');
            return;
        });
    };

    /**
     * For a given input, the page & what to replace fetch courses and manage icons too.
     *
     * @method searchCourses
     * @param {string} inputValue What to search for
     * @param {HTMLElement} page The whole page element for our page
     * @param {HTMLElement} areaReplace The Element to replace the contents of
     */
    var searchCourses = function(inputValue, page, areaReplace) {
        var searchIcon = page.querySelector(Selectors.region.searchIcon);
        var clearIcon = page.querySelector(Selectors.region.clearIcon);

        if (inputValue !== '') {
            searchIcon.classList.add('d-none');
            clearIcon.parentElement.classList.remove('d-none');
        } else {
            searchIcon.classList.remove('d-none');
            clearIcon.parentElement.classList.add('d-none');
        }
        var args = {
            searchvalue: inputValue,
        };
        Ajax.call([{
            methodname: 'tool_moodlenet_search_courses',
            args: args
        }])[0].then(function(result) {
            if (result.courses.length === 0) {
                return renderNoCourses(areaReplace);
            } else {
                // Add the importId to the course link
                result.courses.forEach(function(course) {
                    course.viewurl += '&id=' + importId;
                });
                return renderCourses(areaReplace, result.courses);
            }
        }).catch(Notification.exception);
    };

    /**
     * Add the event listeners to our page.
     *
     * @method registerListenerEvents
     * @param {HTMLElement} page The whole page element for our page
     */
    var registerListenerEvents = function(page) {
        var input = page.querySelector(Selectors.region.searchInput);
        var courseArea = page.querySelector(Selectors.region.courses);
        var clearIcon = page.querySelector(Selectors.region.clearIcon);
        clearIcon.addEventListener('click', function() {
            input.value = '';
            searchCourses('', page, courseArea);
        });

        input.addEventListener('input', debounce(function() {
            searchCourses(input.value, page, courseArea);
        }, 300));
    };

    /**
     * Fetch the courses to show the user. We use the same WS structure & template as the search for consistency.
     *
     * @method addCourses
     * @param {HTMLElement} page The whole page element for our course page
     */
    var addCourses = function(page) {
        var courseArea = page.querySelector(Selectors.region.courses);
        searchCourses('', page, courseArea);
    };

    /**
     * Define our own debounce function as Moodle 3.7 does not have it.
     *
     * @method debounce
     * @from underscore.js
     * @copyright 2009-2020 Jeremy Ashkenas, DocumentCloud and Investigative Reporters & Editors
     * @licence MIT
     * @param {function} func The function we want to keep calling
     * @param {number} wait Our timeout
     * @param {boolean} immediate Do we want to apply the function immediately
     * @return {function}
     */
    var debounce = function(func, wait, immediate) {
        var timeout;
        return function() {
            var context = this;
            var args = arguments;
            var later = function() {
                timeout = null;
                if (!immediate) {
                    func.apply(context, args);
                }
            };
            var callNow = immediate && !timeout;
            clearTimeout(timeout);
            timeout = setTimeout(later, wait);
            if (callNow) {
                func.apply(context, args);
            }
        };
    };
    return {
        init: init,
    };
});