Merge branch 'MDL-80270-main' of https://github.com/mihailges/moodle

This commit is contained in:
Ilya Tregubov 2024-01-24 13:44:02 +08:00
commit 9bdc0a2669
6 changed files with 41 additions and 29 deletions

View File

@ -5,6 +5,6 @@ define("gradereport_grader/stickycolspan",["exports","jquery","core/sticky-foote
* @module gradereport_grader/stickycolspan
* @copyright 2022 Bas Brands <bas@moodle.com>
* @license http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later
*/Object.defineProperty(_exports,"__esModule",{value:!0}),_exports.init=void 0,_jquery=(obj=_jquery)&&obj.__esModule?obj:{default:obj};const SELECTORS_GRADEPARENT=".gradeparent",SELECTORS_STUDENTHEADER="#studentheader",SELECTORS_TABLEHEADER="th.header",SELECTORS_BEHAT="body.behat-site",SELECTORS_USERDROPDOWN=".userrow th .dropdown",SELECTORS_AVERAGEROWHEADER=".lastrow th";_exports.init=()=>{if((0,_jquery.default)(SELECTORS_USERDROPDOWN).on("show.bs.dropdown hide.bs.dropdown",(e=>{e.target.closest(SELECTORS_TABLEHEADER).classList.toggle("actions-menu-active")})),defineAverageRowIntersectionObserver(!0),document.addEventListener(_stickyFooter.eventTypes.stickyFooterStateChanged,(e=>{defineAverageRowIntersectionObserver(e.detail.enabled)})),!document.querySelector(SELECTORS_BEHAT)){const grader=document.querySelector(SELECTORS_GRADEPARENT),tableHeaders=grader.querySelectorAll(SELECTORS_TABLEHEADER),studentHeader=grader.querySelector(SELECTORS_STUDENTHEADER),leftOffset=getComputedStyle(studentHeader).getPropertyValue("left"),rightOffset=getComputedStyle(studentHeader).getPropertyValue("right");tableHeaders.forEach((tableHeader=>{if(tableHeader.colSpan>1){const addOffset=tableHeader.offsetWidth-studentHeader.offsetWidth;window.right_to_left()?tableHeader.style.right="calc("+rightOffset+" - "+addOffset+"px )":tableHeader.style.left="calc("+leftOffset+" - "+addOffset+"px )"}}))}};const defineAverageRowIntersectionObserver=stickyFooterEnabled=>{const stickyFooterHeight=stickyFooterEnabled?document.querySelector(_stickyFooter.SELECTORS.STICKYFOOTER).offsetHeight:null;new IntersectionObserver((_ref=>{let[e]=_ref;return e.target.closest("tr").classList.toggle("pinned",e.intersectionRatio<1)}),{rootMargin:stickyFooterHeight?"0px 0px -".concat(stickyFooterHeight,"px 0px"):"0px",threshold:[1]}).observe(document.querySelector(SELECTORS_AVERAGEROWHEADER))}}));
*/Object.defineProperty(_exports,"__esModule",{value:!0}),_exports.init=void 0,_jquery=(obj=_jquery)&&obj.__esModule?obj:{default:obj};const SELECTORS_GRADEPARENT=".gradeparent",SELECTORS_STUDENTHEADER="#studentheader",SELECTORS_TABLEHEADER="th.header",SELECTORS_BEHAT="body.behat-site",SELECTORS_USERDROPDOWN=".userrow th .dropdown",SELECTORS_LASTROW=".lastrow";_exports.init=()=>{if((0,_jquery.default)(SELECTORS_USERDROPDOWN).on("show.bs.dropdown hide.bs.dropdown",(e=>{e.target.closest(SELECTORS_TABLEHEADER).classList.toggle("actions-menu-active")})),defineLastRowIntersectionObserver(!0),document.addEventListener(_stickyFooter.eventTypes.stickyFooterStateChanged,(e=>{defineLastRowIntersectionObserver(e.detail.enabled)})),!document.querySelector(SELECTORS_BEHAT)){const grader=document.querySelector(SELECTORS_GRADEPARENT),tableHeaders=grader.querySelectorAll(SELECTORS_TABLEHEADER),studentHeader=grader.querySelector(SELECTORS_STUDENTHEADER),leftOffset=getComputedStyle(studentHeader).getPropertyValue("left"),rightOffset=getComputedStyle(studentHeader).getPropertyValue("right");tableHeaders.forEach((tableHeader=>{if(tableHeader.colSpan>1){const addOffset=tableHeader.offsetWidth-studentHeader.offsetWidth;window.right_to_left()?tableHeader.style.right="calc("+rightOffset+" - "+addOffset+"px )":tableHeader.style.left="calc("+leftOffset+" - "+addOffset+"px )"}}))}};const defineLastRowIntersectionObserver=stickyFooterEnabled=>{const lastRow=document.querySelector(SELECTORS_LASTROW);if(!lastRow.classList.contains("userrow")){const stickyFooterHeight=stickyFooterEnabled?document.querySelector(_stickyFooter.SELECTORS.STICKYFOOTER).offsetHeight:null;new IntersectionObserver((_ref=>{let[e]=_ref;return e.target.classList.toggle("pinned",e.intersectionRatio<1)}),{rootMargin:stickyFooterHeight?"0px 0px -".concat(stickyFooterHeight,"px 0px"):"0px",threshold:[1]}).observe(lastRow)}}}));
//# sourceMappingURL=stickycolspan.min.js.map

File diff suppressed because one or more lines are too long

View File

@ -30,7 +30,7 @@ const SELECTORS = {
TABLEHEADER: 'th.header',
BEHAT: 'body.behat-site',
USERDROPDOWN: '.userrow th .dropdown',
AVERAGEROWHEADER: '.lastrow th',
LASTROW: '.lastrow',
};
/**
@ -45,12 +45,12 @@ export const init = () => {
e.target.closest(SELECTORS.TABLEHEADER).classList.toggle('actions-menu-active');
});
defineAverageRowIntersectionObserver(true);
defineLastRowIntersectionObserver(true);
// Add an event listener to the sticky footer toggled event to re-define the average row intersection observer
// accordingly. This is needed as on narrow screens when scrolling vertically the sticky footer is enabled and
// disabled dynamically.
document.addEventListener(stickyFooterEvents.stickyFooterStateChanged, (e) => {
defineAverageRowIntersectionObserver(e.detail.enabled);
defineLastRowIntersectionObserver(e.detail.enabled);
});
if (!document.querySelector(SELECTORS.BEHAT)) {
@ -74,22 +74,31 @@ export const init = () => {
};
/**
* Define the intersection observer that will make sure that the average overall row is properly pinned.
* Define the intersection observer that will make sure that the last row is properly pinned.
*
* In certain scenarios, such as when both 'Overall average' and 'Range' are set not to be shown in the Grader report,
* a user row will end up being the last row in the Grader report table. In this particular case, we want to avoid
* pinning the last row.
*
* @param {boolean} stickyFooterEnabled Whether the page shows a sticky footer or not.
*/
const defineAverageRowIntersectionObserver = (stickyFooterEnabled) => {
const stickyFooterHeight = stickyFooterEnabled ? document.querySelector(stickyFooterSelectors.STICKYFOOTER).offsetHeight : null;
// Register an observer that will bump up the z-index value of the average overall row when it's pinned to prevent
// the row being cut-off by the user column cells or other components within the report table that have higher
// z-index values. If the page has a sticky footer, we need to make sure that the bottom root margin of the observer
// subtracts the height of the sticky footer to prevent the row being cut-off by the footer.
const intersectionObserver = new IntersectionObserver(
([e]) => e.target.closest('tr').classList.toggle('pinned', e.intersectionRatio < 1),
{
rootMargin: stickyFooterHeight ? `0px 0px -${stickyFooterHeight}px 0px` : "0px",
threshold: [1]
}
);
intersectionObserver.observe(document.querySelector(SELECTORS.AVERAGEROWHEADER));
const defineLastRowIntersectionObserver = (stickyFooterEnabled) => {
const lastRow = document.querySelector(SELECTORS.LASTROW);
// Ensure that the last row is not a user row before defining the intersection observer.
if (!lastRow.classList.contains('userrow')) {
const stickyFooterHeight = stickyFooterEnabled ?
document.querySelector(stickyFooterSelectors.STICKYFOOTER).offsetHeight : null;
// Register an observer that will bump up the z-index value of the last row when it's pinned to prevent the row
// being cut-off by the user column cells or other components within the report table that have higher z-index
// values. If the page has a sticky footer, we need to make sure that the bottom root margin of the observer
// subtracts the height of the sticky footer to prevent the row being cut-off by the footer.
const intersectionObserver = new IntersectionObserver(
([e]) => e.target.classList.toggle('pinned', e.intersectionRatio < 1),
{
rootMargin: stickyFooterHeight ? `0px 0px -${stickyFooterHeight}px 0px` : "0px",
threshold: [1]
}
);
intersectionObserver.observe(lastRow);
}
};

View File

@ -620,12 +620,15 @@
}
tr.lastrow {
position: sticky;
// Hack used by the observer to help detecting when the sticky 'Overall average' row is pinned. */
bottom: -1px;
&.pinned {
z-index: 4;
&:not(.userrow) {
position: sticky;
// Hack used by the observer to help detecting when the sticky last row is pinned. */
bottom: -1px;
&.pinned {
z-index: 4;
}
}
td,

View File

@ -35828,11 +35828,11 @@ p.arrow_button {
.path-grade-report-grader .gradeparent tr.userrow th.actions-menu-active {
z-index: 3;
}
.path-grade-report-grader .gradeparent tr.lastrow {
.path-grade-report-grader .gradeparent tr.lastrow:not(.userrow) {
position: sticky;
bottom: -1px;
}
.path-grade-report-grader .gradeparent tr.lastrow.pinned {
.path-grade-report-grader .gradeparent tr.lastrow:not(.userrow).pinned {
z-index: 4;
}
.path-grade-report-grader .gradeparent tr.lastrow td,

View File

@ -35828,11 +35828,11 @@ p.arrow_button {
.path-grade-report-grader .gradeparent tr.userrow th.actions-menu-active {
z-index: 3;
}
.path-grade-report-grader .gradeparent tr.lastrow {
.path-grade-report-grader .gradeparent tr.lastrow:not(.userrow) {
position: sticky;
bottom: -1px;
}
.path-grade-report-grader .gradeparent tr.lastrow.pinned {
.path-grade-report-grader .gradeparent tr.lastrow:not(.userrow).pinned {
z-index: 4;
}
.path-grade-report-grader .gradeparent tr.lastrow td,