Proyectos de Subversion Moodle

Rev

Rev 1 | Mostrar el archivo completo | | | Autoría | Ultima modificación | Ver Log |

Rev 1 Rev 1441
Línea 23... Línea 23...
23 
 
 23 
 
24 
import $ from 'jquery';
 24 
import $ from 'jquery';
25 
import Templates from 'core/templates';
 25 
import Templates from 'core/templates';
26 
import {addIconToContainer} from 'core/loadingicon';
 26 
import {addIconToContainer} from 'core/loadingicon';
- 
 
 27 
import Notification from 'core/notification';
27 
import Notification from 'core/notification';
 28 
import {prependPageTitle} from 'core/page_title';
28 
import Pending from 'core/pending';
 29 
import Pending from 'core/pending';
29 
import {getStrings} from 'core/str';
 30 
import {getString} from 'core/str';
30 
import {getContent} from 'core/local/repository/dynamic_tabs';
 31 
import {getContent} from 'core/local/repository/dynamic_tabs';
Línea 31... Línea 32...
31 
import {isAnyWatchedFormDirty, resetAllFormDirtyStates} from 'core_form/changechecker';
 32 
import {isAnyWatchedFormDirty, resetAllFormDirtyStates} from 'core_form/changechecker';
32 
 
 33 
 
33 
const SELECTORS = {
 34 
const SELECTORS = {
34 
    dynamicTabs: '.dynamictabs',
 35 
    dynamicTabs: '.dynamictabs',
35 
    activeTab: '.dynamictabs .nav-link.active',
 36 
    activeTab: '.dynamictabs .nav-link.active',
36 
    allActiveTabs: '.dynamictabs .nav-link[data-toggle="tab"]:not(.disabled)',
 37 
    allActiveTabs: '.dynamictabs .nav-link[data-bs-toggle="tab"]:not(.disabled)',
37 
    tabContent: '.dynamictabs .tab-pane [data-tab-content]',
 38 
    tabContent: '.dynamictabs .tab-pane [data-tab-content]',
38 
    tabToggle: 'a[data-toggle="tab"]',
 39 
    tabToggle: 'a[data-bs-toggle="tab"]',
Línea 39... Línea 40...
39 
    tabPane: '.dynamictabs .tab-pane',
 40 
    tabPane: '.dynamictabs .tab-pane',
40 
};
 41 
};
- 
 
 42 
 
- 
 
 43 
SELECTORS.forTabName = tabName => `.dynamictabs [data-tab-content="${tabName}"]`;
Línea 41... Línea 44...
41 
 
 44 
SELECTORS.forTabId = tabName => `.dynamictabs [data-bs-toggle="tab"][href="#${tabName}"]`;
42 
SELECTORS.forTabName = tabName => `.dynamictabs [data-tab-content="${tabName}"]`;
 45 
 
43 
SELECTORS.forTabId = tabName => `.dynamictabs [data-toggle="tab"][href="#${tabName}"]`;
 46 
let watchedFormDirtyNotification = false;
44 
 
 47 
 
45 
/**
 48 
/**
46 
 * Initialises the tabs view on the page (only one tabs view per page is supported)
 - 
 
- 
 
 49 
 * Initialises the tabs view on the page (only one tabs view per page is supported)
47 
 */
 50 
 */
48 
export const init = () => {
 51 
export const init = () => {
49 
    const tabToggle = $(SELECTORS.tabToggle);
 52 
    const tabToggles = document.querySelectorAll(SELECTORS.tabToggle);
50 
 
 53 
    tabToggles.forEach(tabToggle => {
51 
    // Listen to click, warn user if they are navigating away with unsaved form changes.
 54 
        // Listen to click, warn user if they are navigating away with unsaved form changes.
- 
 
 55 
        tabToggle.addEventListener('show.bs.tab', (event) => {
- 
 
 56 
            if (isAnyWatchedFormDirty()) {
- 
 
 57 
                event.preventDefault();
- 
 
 58 
                event.stopPropagation();
52 
    tabToggle.on('click', (event) => {
 59 
 
- 
 
 60 
                // Prevent double execution of event listener.
- 
 
 61 
                if (!watchedFormDirtyNotification) {
- 
 
 62 
                    watchedFormDirtyNotification = true;
- 
 
 63 
 
- 
 
 64 
                    Notification.saveCancelPromise(
- 
 
 65 
                        getString('changesmade'),
- 
 
 66 
                        getString('changesmadereallygoaway'),
- 
 
 67 
                        getString('confirm'),
- 
 
 68 
                        {triggerElement: tabToggle}
53 
        if (!isAnyWatchedFormDirty()) {
 69 
                    ).then(() => {
54 
            return;
 70 
                        // Reset form dirty state on confirmation, re-trigger the event.
- 
 
 71 
                        resetAllFormDirtyStates();
- 
 
 72 
                        tabToggle.dispatchEvent(new Event('click', {bubbles: true}));
- 
 
 73 
                        return;
- 
 
 74 
                    }).catch(() => {
- 
 
 75 
                        // User cancelled the dialogue.
Línea 55... Línea 76...
55 
        }
 76 
                    }).finally(() => {
56 
 
 - 
 
57 
        event.preventDefault();
 - 
 
58 
        event.stopPropagation();
 - 
 
59 
 
 - 
 
60 
        getStrings([
 - 
 
61 
            {key: 'changesmade', component: 'moodle'},
 - 
 
62 
            {key: 'changesmadereallygoaway', component: 'moodle'},
 - 
 
63 
            {key: 'confirm', component: 'moodle'},
 - 
 
64 
        ]).then(([strChangesMade, strChangesMadeReally, strConfirm]) =>
 77 
                        watchedFormDirtyNotification = false;
65 
            // Reset form dirty state on confirmation, re-trigger the event.
 - 
 
66 
            Notification.confirm(strChangesMade, strChangesMadeReally, strConfirm, null, () => {
 - 
 
Línea 67... Línea -...
67 
                resetAllFormDirtyStates();
 - 
 
68 
                $(event.target).trigger(event.type);
 - 
 
69 
            })
 - 
 
70 
        ).catch(Notification.exception);
 - 
 
71 
    });
 78 
                    });
72 
 
 79 
                }
73 
    // This code listens to Bootstrap events 'show.bs.tab' and 'shown.bs.tab' which is triggered using JQuery and
 80 
 
74 
    // can not be converted yet to native events.
 81 
                return;
75 
    tabToggle
 82 
            }
76 
        .on('show.bs.tab', function() {
 83 
 
77 
            // Clean content from previous tab.
 84 
            // Clean content from previous tab.
- 
 
 85 
            const previousTabName = getActiveTabName();
78 
            const previousTabName = getActiveTabName();
 86 
            if (previousTabName) {
79 
            if (previousTabName) {
 87 
                const previousTab = document.querySelector(SELECTORS.forTabName(previousTabName));
80 
                const previousTab = document.querySelector(SELECTORS.forTabName(previousTabName));
 88 
                previousTab.textContent = '';
81 
                previousTab.textContent = '';
 89 
            }
82 
            }
 90 
        });
83 
        })
 - 
 
84 
        .on('shown.bs.tab', function() {
 91 
 
- 
 
 92 
        tabToggle.addEventListener('shown.bs.tab', () => {
Línea 85... Línea 93...
85 
            const tab = $($(this).attr('href'));
 93 
            const tabPane = document.getElementById(tabToggle.getAttribute('href').replace(/^#/, ''));
86 
            if (tab.length !== 1) {
 94 
            if (tabPane) {
87 
                return;
 95 
                loadTab(tabPane.id);
88 
            }
 96 
            }
Línea 137... Línea 145...
137 
        return;
 145 
        return;
138 
    }
 146 
    }
Línea 139... Línea 147...
139 
 
 147 
 
Línea -... Línea 148...
- 
 
 148 
    const pendingPromise = new Pending('core/dynamic_tabs:loadTab:' + tabName);
- 
 
 149 
 
- 
 
 150 
    const tabLabelledBy = document.getElementById(tab.getAttribute('aria-labelledby'));
140 
    const pendingPromise = new Pending('core/dynamic_tabs:loadTab:' + tabName);
 151 
    prependPageTitle(tabLabelledBy.innerText);
141 
 
 152 
 
142 
    addIconToContainer(tab)
 153 
    addIconToContainer(tab)
143 
    .then(() => {
 154 
    .then(() => {
144 
        let tabArgs = {...tab.dataset};
 155 
        let tabArgs = {...tab.dataset};