Proyectos de Subversion Moodle

Rev

| Ultima modificación | Ver Log |

Rev Autor Línea Nro. Línea
1 efrain 1
// This file is part of Moodle - http://moodle.org/
2
//
3
// Moodle is free software: you can redistribute it and/or modify
4
// it under the terms of the GNU General Public License as published by
5
// the Free Software Foundation, either version 3 of the License, or
6
// (at your option) any later version.
7
//
8
// Moodle is distributed in the hope that it will be useful,
9
// but WITHOUT ANY WARRANTY; without even the implied warranty of
10
// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
11
// GNU General Public License for more details.
12
//
13
// You should have received a copy of the GNU General Public License
14
// along with Moodle.  If not, see <http://www.gnu.org/licenses/>.
15
 
16
/**
17
 * Javascript module for fixing the position of sticky headers with multiple colspans
18
 *
19
 * @module      gradereport_grader/stickycolspan
20
 * @copyright   2022 Bas Brands <bas@moodle.com>
21
 * @license     http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later
22
 */
23
 
24
import $ from 'jquery';
25
import {SELECTORS as stickyFooterSelectors, eventTypes as stickyFooterEvents} from 'core/sticky-footer';
26
 
27
const SELECTORS = {
28
    GRADEPARENT: '.gradeparent',
29
    STUDENTHEADER: '#studentheader',
30
    TABLEHEADER: 'th.header',
31
    BEHAT: 'body.behat-site',
32
    USERDROPDOWN: '.userrow th .dropdown',
33
    LASTROW: '.lastrow',
34
};
35
 
36
/**
37
 * Initialize module
38
 */
39
export const init = () => {
40
    // The sticky positioning attributed to the user column cells affects the stacking context and makes the dropdowns
41
    // within these cells to be cut off. To solve this problem, whenever one of these action menus (dropdowns) is opened
42
    // we need to manually bump up the z-index value of the parent container element and revert once closed.
43
    $(SELECTORS.USERDROPDOWN).on('show.bs.dropdown hide.bs.dropdown', (e) => {
44
        // The closest heading element has sticky positioning which affects the stacking context in this case.
45
        e.target.closest(SELECTORS.TABLEHEADER).classList.toggle('actions-menu-active');
46
    });
47
 
48
    defineLastRowIntersectionObserver(true);
49
    // Add an event listener to the sticky footer toggled event to re-define the average row intersection observer
50
    // accordingly. This is needed as on narrow screens when scrolling vertically the sticky footer is enabled and
51
    // disabled dynamically.
52
    document.addEventListener(stickyFooterEvents.stickyFooterStateChanged, (e) => {
53
        defineLastRowIntersectionObserver(e.detail.enabled);
54
    });
55
 
56
    if (!document.querySelector(SELECTORS.BEHAT)) {
57
        const grader = document.querySelector(SELECTORS.GRADEPARENT);
58
        const tableHeaders = grader.querySelectorAll(SELECTORS.TABLEHEADER);
59
        const studentHeader = grader.querySelector(SELECTORS.STUDENTHEADER);
60
        const leftOffset = getComputedStyle(studentHeader).getPropertyValue('left');
61
        const rightOffset = getComputedStyle(studentHeader).getPropertyValue('right');
62
 
63
        tableHeaders.forEach((tableHeader) => {
64
            if (tableHeader.colSpan > 1) {
65
                const addOffset = (tableHeader.offsetWidth - studentHeader.offsetWidth);
66
                if (window.right_to_left()) {
67
                    tableHeader.style.right = 'calc(' + rightOffset + ' - ' + addOffset + 'px )';
68
                } else {
69
                    tableHeader.style.left = 'calc(' + leftOffset + ' - ' + addOffset + 'px )';
70
                }
71
            }
72
        });
73
    }
74
};
75
 
76
/**
77
 * Define the intersection observer that will make sure that the last row is properly pinned.
78
 *
79
 * In certain scenarios, such as when both 'Overall average' and 'Range' are set not to be shown in the Grader report,
80
 * a user row will end up being the last row in the Grader report table. In this particular case, we want to avoid
81
 * pinning the last row.
82
 *
83
 * @param {boolean} stickyFooterEnabled Whether the page shows a sticky footer or not.
84
 */
85
const defineLastRowIntersectionObserver = (stickyFooterEnabled) => {
86
    const lastRow = document.querySelector(SELECTORS.LASTROW);
87
    // Ensure that the last row is not a user row before defining the intersection observer.
88
    if (!lastRow.classList.contains('userrow')) {
89
        const stickyFooterHeight = stickyFooterEnabled ?
90
            document.querySelector(stickyFooterSelectors.STICKYFOOTER).offsetHeight : null;
91
        // Register an observer that will bump up the z-index value of the last row when it's pinned to prevent the row
92
        // being cut-off by the user column cells or other components within the report table that have higher z-index
93
        // values. If the page has a sticky footer, we need to make sure that the bottom root margin of the observer
94
        // subtracts the height of the sticky footer to prevent the row being cut-off by the footer.
95
        const intersectionObserver = new IntersectionObserver(
96
            ([e]) => lastRow.classList.toggle('pinned', e.intersectionRatio < 1),
97
            {
98
                rootMargin: stickyFooterHeight ? `0px 0px -${stickyFooterHeight}px 0px` : "0px",
99
                threshold: [1]
100
            }
101
        );
102
        intersectionObserver.observe(lastRow.querySelector('th'));
103
    }
104
};