Proyectos de Subversion Moodle

Rev

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

Rev 1 Rev 1441
Línea 20... Línea 20...
20 
 * @copyright 2021 Bas Brands
 20 
 * @copyright 2021 Bas Brands
21 
 * @license http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later
 21 
 * @license http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later
22 
 * @since 4.0
 22 
 * @since 4.0
23 
 */
 23 
 */
Línea 24... Línea 24...
24 
 
 24 
 
25 
import $ from 'jquery';
 25 
import Collapse from 'theme_boost/bootstrap/collapse';
Línea 26... Línea 26...
26 
import Pending from 'core/pending';
 26 
import Pending from 'core/pending';
27 
 
 27 
 
28 
const SELECTORS = {
 28 
const SELECTORS = {
Línea 41... Línea 41...
41 
 * Initialises the form section collapse / expand action.
 41 
 * Initialises the form section collapse / expand action.
42 
 *
 42 
 *
43 
 * @param {string} collapsesections the collapse/expand link id.
 43 
 * @param {string} collapsesections the collapse/expand link id.
44 
 */
 44 
 */
45 
export const init = collapsesections => {
 45 
export const init = collapsesections => {
46 
    // All jQuery in this code can be replaced when MDL-71979 is integrated (move to Bootstrap 5).
 - 
 
47 
    const pendingPromise = new Pending('core_form/collapsesections');
 46 
    const pendingPromise = new Pending('core_form/collapsesections');
48 
    const collapsemenu = document.querySelector(collapsesections);
 47 
    const collapsemenu = document.querySelector(collapsesections);
Línea 49... Línea 48...
49 
 
 48 
 
50 
    const formParent = collapsemenu.closest(SELECTORS.FORM);
 49 
    const formParent = collapsemenu.closest(SELECTORS.FORM);
- 
 
 50 
    const formContainers = formParent.querySelectorAll(SELECTORS.FORMCONTAINER);
Línea 51... Línea 51...
51 
    const formContainers = formParent.querySelectorAll(SELECTORS.FORMCONTAINER);
 51 
    [...formContainers].map(formContainer => new Collapse(formContainer, {toggle: false}));
52 
 
 52 
 
53 
    collapsemenu.addEventListener('keydown', e => {
 53 
    collapsemenu.addEventListener('keydown', e => {
54 
        if (e.key === 'Enter' || e.key === ' ') {
 54 
        if (e.key === 'Enter' || e.key === ' ') {
Línea 75... Línea 75...
75 
        collapsemenu.setAttribute('aria-expanded', true);
 75 
        collapsemenu.setAttribute('aria-expanded', true);
76 
    }
 76 
    }
Línea 77... Línea 77...
77 
 
 77 
 
78 
    // When the collapse menu is toggled, update each form container to match.
 78 
    // When the collapse menu is toggled, update each form container to match.
79 
    collapsemenu.addEventListener('click', () => {
 - 
 
80 
        let action = 'hide';
 79 
    collapsemenu.addEventListener('click', () => {
- 
 
 80 
        if (collapsemenu.classList.contains(CLASSES.COLLAPSED)) {
- 
 
 81 
            const pendingPromiseToggle = new Pending('core_form/collapsesections:toggle-on');
- 
 
 82 
            formContainers.forEach((container, index, array) => {
- 
 
 83 
                Collapse.getInstance(container).show();
- 
 
 84 
                if (index === array.length - 1) {
81 
        if (collapsemenu.classList.contains(CLASSES.COLLAPSED)) {
 85 
                    pendingPromiseToggle.resolve();
- 
 
 86 
                }
- 
 
 87 
            });
- 
 
 88 
        } else {
- 
 
 89 
            const pendingPromiseToggle = new Pending('core_form/collapsesections:toggle-off');
- 
 
 90 
            formContainers.forEach((container, index, array) => {
- 
 
 91 
                Collapse.getInstance(container).hide();
- 
 
 92 
                if (index === array.length - 1) {
- 
 
 93 
                    pendingPromiseToggle.resolve();
- 
 
 94 
                }
82 
            action = 'show';
 95 
            });
83 
        }
 - 
 
84 
 
 - 
 
85 
        formContainers.forEach(container => $(container).collapse(action));
 96 
        }
Línea 86... Línea 97...
86 
    });
 97 
    });
87 
 
 98 
 
88 
    // Ensure collapse menu button adds aria-controls attribute referring to each collapsible element.
 99 
    // Ensure collapse menu button adds aria-controls attribute referring to each collapsible element.
Línea 92... Línea 103...
92 
        return element.id;
 103 
        return element.id;
93 
    });
 104 
    });
94 
    collapsemenu.setAttribute('aria-controls', collapseElementIds.join(' '));
 105 
    collapsemenu.setAttribute('aria-controls', collapseElementIds.join(' '));
Línea 95... Línea 106...
95 
 
 106 
 
- 
 
 107 
    // When any form container is toggled, re-calculate collapse menu state.
- 
 
 108 
    const collapseTriggerList = document.querySelectorAll(SELECTORS.FORMCONTAINER);
96 
    // When any form container is toggled, re-calculate collapse menu state.
 109 
    [...collapseTriggerList].forEach(collapseTriggerEl => {
97 
    $(SELECTORS.FORMCONTAINER).on('hidden.bs.collapse', () => {
 110 
        collapseTriggerEl.addEventListener('hidden.bs.collapse', () => {
98 
        const allCollapsed = [...formContainers].every(container => !container.classList.contains(CLASSES.SHOW));
 111 
            const allCollapsed = [...formContainers].every(container => !container.classList.contains(CLASSES.SHOW));
99 
        if (allCollapsed) {
 112 
            if (allCollapsed) {
100 
            collapsemenu.classList.add(CLASSES.COLLAPSED);
 113 
                collapsemenu.classList.add(CLASSES.COLLAPSED);
101 
            collapsemenu.setAttribute('aria-expanded', false);
 114 
                collapsemenu.setAttribute('aria-expanded', false);
102 
        }
 115 
            }
103 
    });
 116 
        });
104 
    $(SELECTORS.FORMCONTAINER).on('shown.bs.collapse', () => {
 117 
        collapseTriggerEl.addEventListener('shown.bs.collapse', () => {
105 
        const allExpanded = [...formContainers].every(container => container.classList.contains(CLASSES.SHOW));
 118 
            const allExpanded = [...formContainers].every(container => container.classList.contains(CLASSES.SHOW));
106 
        if (allExpanded) {
 119 
            if (allExpanded) {
107 
            collapsemenu.classList.remove(CLASSES.COLLAPSED);
 120 
                collapsemenu.classList.remove(CLASSES.COLLAPSED);
- 
 
 121 
                collapsemenu.setAttribute('aria-expanded', true);
108 
            collapsemenu.setAttribute('aria-expanded', true);
 122 
            }
109 
        }
 123 
        });
110 
    });
 124 
    });
111 
    pendingPromise.resolve();
 125 
    pendingPromise.resolve();