grade/report/grader/amd/src/stickycolspan.js

  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/>.
  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.  */
  24. import {SELECTORS as stickyFooterSelectors, eventTypes as stickyFooterEvents} from 'core/sticky-footer';
  26. const SELECTORS = {
  27.     GRADEPARENT: '.gradeparent',
  28.     STUDENTHEADER: '#studentheader',
  29.     TABLEHEADER: 'th.header',
  30.     BEHAT: 'body.behat-site',
  31.     USERDROPDOWN: '.userrow th .dropdown',
  32.     LASTROW: '.lastrow',
  33. };
  35. /**
  36.  * Initialize module
  37.  */
  38. export const init = () => {
  39.     // The sticky positioning attributed to the user column cells affects the stacking context and makes the dropdowns
  40.     // within these cells to be cut off. To solve this problem, whenever one of these action menus (dropdowns) is opened
  41.     // we need to manually bump up the z-index value of the parent container element and revert once closed.
  42.     document.querySelectorAll(SELECTORS.USERDROPDOWN).forEach((dropdown) => {
  43.         dropdown.addEventListener('show.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.add('actions-menu-active');
  46.         });
  47.         dropdown.addEventListener('hide.bs.dropdown', (e) => {
  48.             e.target.closest(SELECTORS.TABLEHEADER).classList.remove('actions-menu-active');
  49.         });
  50.     });
  52.     defineLastRowIntersectionObserver(true);
  53.     // Add an event listener to the sticky footer toggled event to re-define the average row intersection observer
  54.     // accordingly. This is needed as on narrow screens when scrolling vertically the sticky footer is enabled and
  55.     // disabled dynamically.
  56.     document.addEventListener(stickyFooterEvents.stickyFooterStateChanged, (e) => {
  57.         defineLastRowIntersectionObserver(e.detail.enabled);
  58.     });
  60.     if (!document.querySelector(SELECTORS.BEHAT)) {
  61.         const grader = document.querySelector(SELECTORS.GRADEPARENT);
  62.         const tableHeaders = grader.querySelectorAll(SELECTORS.TABLEHEADER);
  63.         const studentHeader = grader.querySelector(SELECTORS.STUDENTHEADER);
  64.         const leftOffset = getComputedStyle(studentHeader).getPropertyValue('left');
  65.         const rightOffset = getComputedStyle(studentHeader).getPropertyValue('right');
  67.         tableHeaders.forEach((tableHeader) => {
  68.             if (tableHeader.colSpan > 1) {
  69.                 const addOffset = (tableHeader.offsetWidth - studentHeader.offsetWidth);
  70.                 if (window.right_to_left()) {
  71.                     tableHeader.style.right = 'calc(' + rightOffset + ' - ' + addOffset + 'px )';
  72.                 } else {
  73.                     tableHeader.style.left = 'calc(' + leftOffset + ' - ' + addOffset + 'px )';
  74.                 }
  75.             }
  76.         });
  77.     }
  78. };
  80. /**
  81.  * Define the intersection observer that will make sure that the last row is properly pinned.
  82.  *
  83.  * In certain scenarios, such as when both 'Overall average' and 'Range' are set not to be shown in the Grader report,
  84.  * a user row will end up being the last row in the Grader report table. In this particular case, we want to avoid
  85.  * pinning the last row.
  86.  *
  87.  * @param {boolean} stickyFooterEnabled Whether the page shows a sticky footer or not.
  88.  */
  89. const defineLastRowIntersectionObserver = (stickyFooterEnabled) => {
  90.     const lastRow = document.querySelector(SELECTORS.LASTROW);
  91.     // Ensure that the last row is not a user row before defining the intersection observer.
  92.     if (!lastRow.classList.contains('userrow')) {
  93.         const stickyFooterHeight = stickyFooterEnabled ?
  94.             document.querySelector(stickyFooterSelectors.STICKYFOOTER).offsetHeight : null;
  95.         // Register an observer that will bump up the z-index value of the last row when it's pinned to prevent the row
  96.         // being cut-off by the user column cells or other components within the report table that have higher z-index
  97.         // values. If the page has a sticky footer, we need to make sure that the bottom root margin of the observer
  98.         // subtracts the height of the sticky footer to prevent the row being cut-off by the footer.
  99.         const intersectionObserver = new IntersectionObserver(
  100.             ([e]) => lastRow.classList.toggle('pinned', e.intersectionRatio < 1),
  101.             {
  102.                 rootMargin: stickyFooterHeight ? `0px 0px -${stickyFooterHeight}px 0px` : "0px",
  103.                 threshold: [1]
  104.             }
  105.         );
  106.         intersectionObserver.observe(lastRow.querySelector('th'));
  107.     }
  108. };