mirror of
https://github.com/moodle/moodle.git
synced 2025-01-19 06:18:28 +01:00
Merge branch 'MDL-80270-main' of https://github.com/mihailges/moodle
This commit is contained in:
commit
9bdc0a2669
@ -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
@ -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);
|
||||
}
|
||||
};
|
||||
|
@ -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,
|
||||
|
@ -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,
|
||||
|
@ -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,
|
||||
|
Loading…
x
Reference in New Issue
Block a user