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

/**

 * Dynamic Tabs UI element with AJAX loading of tabs content

 *

 * @module      core/dynamic_tabs

 * @copyright   2021 David Matamoros <davidmc@moodle.com> based on code from Marina Glancy

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

 */

import $ from 'jquery';

import Templates from 'core/templates';

import {addIconToContainer} from 'core/loadingicon';

import Notification from 'core/notification';

import {prependPageTitle} from 'core/page_title';

import Pending from 'core/pending';

import {getString} from 'core/str';

import {getContent} from 'core/local/repository/dynamic_tabs';

import {isAnyWatchedFormDirty, resetAllFormDirtyStates} from 'core_form/changechecker';

const SELECTORS = {

    dynamicTabs: '.dynamictabs',

    activeTab: '.dynamictabs .nav-link.active',

    allActiveTabs: '.dynamictabs .nav-link[data-bs-toggle="tab"]:not(.disabled)',

    tabContent: '.dynamictabs .tab-pane [data-tab-content]',

    tabToggle: 'a[data-bs-toggle="tab"]',

    tabPane: '.dynamictabs .tab-pane',

};

SELECTORS.forTabName = tabName => `.dynamictabs [data-tab-content="${tabName}"]`;

SELECTORS.forTabId = tabName => `.dynamictabs [data-bs-toggle="tab"][href="#${tabName}"]`;

let watchedFormDirtyNotification = false;

/**

 * Initialises the tabs view on the page (only one tabs view per page is supported)

 */

export const init = () => {

    const tabToggles = document.querySelectorAll(SELECTORS.tabToggle);

    tabToggles.forEach(tabToggle => {

        // Listen to click, warn user if they are navigating away with unsaved form changes.

        tabToggle.addEventListener('show.bs.tab', (event) => {

            if (isAnyWatchedFormDirty()) {

                event.preventDefault();

                event.stopPropagation();

                // Prevent double execution of event listener.

                if (!watchedFormDirtyNotification) {

                    watchedFormDirtyNotification = true;

                    Notification.saveCancelPromise(

                        getString('changesmade'),

                        getString('changesmadereallygoaway'),

                        getString('confirm'),

                        {triggerElement: tabToggle}

                    ).then(() => {

                        // Reset form dirty state on confirmation, re-trigger the event.

                        resetAllFormDirtyStates();

                        tabToggle.dispatchEvent(new Event('click', {bubbles: true}));

                        return;

                    }).catch(() => {

                        // User cancelled the dialogue.

                    }).finally(() => {

                        watchedFormDirtyNotification = false;

                    });

                }

                return;

            }

            // Clean content from previous tab.

            const previousTabName = getActiveTabName();

            if (previousTabName) {

                const previousTab = document.querySelector(SELECTORS.forTabName(previousTabName));

                previousTab.textContent = '';

            }

        });

        tabToggle.addEventListener('shown.bs.tab', () => {

            const tabPane = document.getElementById(tabToggle.getAttribute('href').replace(/^#/, ''));

            if (tabPane) {

                loadTab(tabPane.id);

            }

        });

    });

    if (!openTabFromHash()) {

        const tabs = document.querySelector(SELECTORS.allActiveTabs);

        if (tabs) {

            openTab(tabs.getAttribute('aria-controls'));

        } else {

            // We may hide tabs if there is only one available, just load the contents of the first tab.

            const tabPane = document.querySelector(SELECTORS.tabPane);

            if (tabPane) {

                tabPane.classList.add('active', 'show');

                loadTab(tabPane.getAttribute('id'));

            }

        }

    }

};

/**

 * Returns id/name of the currently active tab

 *

 * @return {String|null}

 */

const getActiveTabName = () => {

    const element = document.querySelector(SELECTORS.activeTab);

    return element?.getAttribute('aria-controls') || null;

};

/**

 * Returns the id/name of the first tab

 *

 * @return {String|null}

 */

const getFirstTabName = () => {

    const element = document.querySelector(SELECTORS.tabContent);

    return element?.dataset.tabContent || null;

};

/**

 * Loads contents of a tab using an AJAX request

 *

 * @param {String} tabName

 */

const loadTab = (tabName) => {

    // If tabName is not specified find the active tab, or if is not defined, the first available tab.

    tabName = tabName ?? getActiveTabName() ?? getFirstTabName();

    const tab = document.querySelector(SELECTORS.forTabName(tabName));

    if (!tab) {

        return;

    }

    const pendingPromise = new Pending('core/dynamic_tabs:loadTab:' + tabName);

    const tabLabelledBy = document.getElementById(tab.getAttribute('aria-labelledby'));

    prependPageTitle(tabLabelledBy.innerText);

    addIconToContainer(tab)

    .then(() => {

        let tabArgs = {...tab.dataset};

        delete tabArgs.tabClass;

        delete tabArgs.tabContent;

        return getContent(tab.dataset.tabClass, JSON.stringify(tabArgs));

    })

    .then(response => Promise.all([

        $.parseHTML(response.javascript, null, true).map(node => node.innerHTML).join("\n"),

        Templates.renderForPromise(response.template, JSON.parse(response.content)),

    ]))

    .then(([responseJs, {html, js}]) => Templates.replaceNodeContents(tab, html, js + responseJs))

    .then(() => pendingPromise.resolve())

    .catch(Notification.exception);

};

/**

 * Return the tab given the tab name

 *

 * @param {String} tabName

 * @return {HTMLElement}

 */

const getTab = (tabName) => {

    return document.querySelector(SELECTORS.forTabId(tabName));

};

/**

 * Return the tab pane given the tab name

 *

 * @param {String} tabName

 * @return {HTMLElement}

 */

const getTabPane = (tabName) => {

    return document.getElementById(tabName);

};

/**

 * Open the tab on page load. If this script loads before theme_boost/tab we need to open tab ourselves

 *

 * @param {String} tabName

 * @return {Boolean}

 */

const openTab = (tabName) => {

    const tab = getTab(tabName);

    if (!tab) {

        return false;

    }

    loadTab(tabName);

    tab.classList.add('active');

    getTabPane(tabName).classList.add('active', 'show');

    return true;

};

/**

 * If there is a location hash that is the same as the tab name - open this tab.

 *

 * @return {Boolean}

 */

const openTabFromHash = () => {

    const hash = document.location.hash;

    if (hash.match(/^#\w+$/g)) {

        return openTab(hash.replace(/^#/g, ''));

    }

    return false;

};