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

/**

 * Our basic form manager for when a user either enters

 * their profile url or just wants to browse.

 *

 * This file is a mishmash of JS functions we need for both the standalone (M3.7, M3.8)

 * plugin & Moodle 3.9 functions. The 3.9 Functions have a base understanding that certain

 * things exist i.e. directory structures for templates. When this feature goes 3.9+ only

 * The goal is that we can quickly gut all AMD modules into bare JS files and use ES6 guidelines.

 * Till then this will have to do.

 *

 * @module     tool_moodlenet/instance_form

 * @copyright  2020 Mathew May <mathew.solutions>

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

 */

define(['tool_moodlenet/validator',

        'tool_moodlenet/selectors',

        'core/loadingicon',

        'core/templates',

        'core/notification',

        'jquery'],

    function(Validator,

             Selectors,

             LoadingIcon,

             Templates,

             Notification,

             $) {

    /**

     * Add the event listeners to our form.

     *

     * @method registerListenerEvents

     * @param {HTMLElement} page The whole page element for our form area

     */

    var registerListenerEvents = function registerListenerEvents(page) {

        page.addEventListener('click', function(e) {

            // Our fake submit button / browse button.

            if (e.target.matches(Selectors.action.submit)) {

                var input = page.querySelector('[data-var="mnet-link"]');

                var overlay = page.querySelector(Selectors.region.spinner);

                var validationArea = document.querySelector(Selectors.region.validationArea);

                overlay.classList.remove('d-none');

                var spinner = LoadingIcon.addIconToContainerWithPromise(overlay);

                Validator.validation(input)

                    .then(function(result) {

                        spinner.resolve();

                        overlay.classList.add('d-none');

                        if (result.result) {

                            input.classList.remove('is-invalid'); // Just in case the class has been applied already.

                            input.classList.add('is-valid');

                            validationArea.innerText = result.message;

                            validationArea.classList.remove('text-danger');

                            validationArea.classList.add('text-success');

                            // Give the user some time to see their input is valid.

                            setTimeout(function() {

                                window.location = result.domain;

                            }, 1000);

                        } else {

                            input.classList.add('is-invalid');

                            validationArea.innerText = result.message;

                            validationArea.classList.add('text-danger');

                        }

                        return;

                }).catch();

            }

        });

    };

    /**

     * Given a user wishes to see the MoodleNet profile url form transition them there.

     *

     * @method chooserNavigateToMnet

     * @param {HTMLElement} showMoodleNet The chooser's area for ment

     * @param {Object} footerData Our footer object to render out

     * @param {jQuery} carousel Our carousel instance to manage

     * @param {jQuery} modal Our modal instance to manage

     */

    var chooserNavigateToMnet = function(showMoodleNet, footerData, carousel, modal) {

        showMoodleNet.innerHTML = '';

        // Add a spinner.

        var spinnerPromise = LoadingIcon.addIconToContainer(showMoodleNet);

        // Used later...

        var transitionPromiseResolver = null;

        var transitionPromise = new Promise(resolve => {

            transitionPromiseResolver = resolve;

        });

        $.when(

            spinnerPromise,

            transitionPromise

        ).then(function() {

                Templates.replaceNodeContents(showMoodleNet, footerData.customcarouseltemplate, '');

                return;

        }).catch(Notification.exception);

        // We apply our handlers in here to minimise plugin dependency in the Chooser.

        registerListenerEvents(showMoodleNet);

        // Move to the next slide, and resolve the transition promise when it's done.

        carousel.one('slid.bs.carousel', function() {

            transitionPromiseResolver();

        });

        // Trigger the transition between 'pages'.

        carousel.carousel(2);

        modal.setFooter(Templates.render('tool_moodlenet/chooser_footer_close_mnet', {}));

    };

    /**

     * Given a user no longer wishes to see the MoodleNet profile url form transition them from there.

     *

     * @method chooserNavigateFromMnet

     * @param {jQuery} carousel Our carousel instance to manage

     * @param {jQuery} modal Our modal instance to manage

     * @param {Object} footerData Our footer object to render out

     */

    var chooserNavigateFromMnet = function(carousel, modal, footerData) {

        // Trigger the transition between 'pages'.

        carousel.carousel(0);

        modal.setFooter(footerData.customfootertemplate);

    };

        /**

         * Create the custom listener that would handle anything in the footer.

         *

         * @param {Event} e The event being triggered.

         * @param {Object} footerData The data generated from the exporter.

         * @param {Object} modal The chooser modal.

         */

    var footerClickListener = function(e, footerData, modal) {

        if (e.target.matches(Selectors.action.showMoodleNet) || e.target.closest(Selectors.action.showMoodleNet)) {

            e.preventDefault();

            const carousel = $(modal.getBody()[0].querySelector(Selectors.region.carousel));

            const showMoodleNet = carousel.find(Selectors.region.moodleNet)[0];

            chooserNavigateToMnet(showMoodleNet, footerData, carousel, modal);

        }

        // From the help screen go back to the module overview.

        if (e.target.matches(Selectors.action.closeOption)) {

            const carousel = $(modal.getBody()[0].querySelector(Selectors.region.carousel));

            chooserNavigateFromMnet(carousel, modal, footerData);

        }

    };

    return {

        footerClickListener: footerClickListener

    };

});