17,097
edits
MediaWiki:Common.js: Difference between revisions
From Melvor Idle
Sticky headers: Try using mutation observers, as on load events don't resolve the issue (they fire after the issue occurs?)
No edit summary |
(Sticky headers: Try using mutation observers, as on load events don't resolve the issue (they fire after the issue occurs?)) |
||
| Line 522: | Line 522: | ||
/* Sets the top property for stickyHeader tables */ | /* Sets the top property for stickyHeader tables */ | ||
function setStickyHeaderTop() { | function setStickyHeaderTop(addObservers) { | ||
var observer = null; | |||
var observerCfg = { attributes: true, childList: false, subtree: false }; | |||
if (addObservers) { | |||
observer = new MutationObserver( | |||
function(mutationList, observer) { | |||
for (var i = 0; i < mutationList.length; i++) { | |||
var mutation = mutationList[i]; | |||
if ((mutation.type === 'attributes') && (mutation.attributeName === 'offsetHeight')) { | |||
setStickyHeaderTop(false); | |||
} | |||
} | |||
}); | |||
} | |||
var stickyTables = document.getElementsByClassName('stickyHeader'); | var stickyTables = document.getElementsByClassName('stickyHeader'); | ||
var headStyles = getComputedStyle(document.getElementById('mw-header-container')); | var headStyles = getComputedStyle(document.getElementById('mw-header-container')); | ||
| Line 535: | Line 548: | ||
if (firstRow.length > 0) { | if (firstRow.length > 0) { | ||
firstHeight = firstRow[0].offsetHeight; | firstHeight = firstRow[0].offsetHeight; | ||
if (addObservers) { | |||
observer.observe(firstRow[0], observerCfg); | |||
} | |||
var firstHeaders = firstRow[0].getElementsByTagName('th'); | var firstHeaders = firstRow[0].getElementsByTagName('th'); | ||
for (var j = 0; j < firstHeaders.length; j++) { | for (var j = 0; j < firstHeaders.length; j++) { | ||
| Line 570: | Line 586: | ||
} | } | ||
// Initialize sticky header positions | // Initialize sticky header positions | ||
setStickyHeaderTop(); | setStickyHeaderTop(true); | ||
// Reset sticky header positions when the window resizes, as this may | // Reset sticky header positions when the window resizes, as this may | ||
// affect visibility of fixed elements at the top of the page | // affect visibility of fixed elements at the top of the page | ||
$(window).resize(setStickyHeaderTop); | $(window).resize(function() { setStickyHeaderTop(false); }); | ||
// Reset sticky header positions | // Reset sticky header positions if the offsetHeight attribute changes | ||
// Without this, headers may have an incorrect offset | // Without this, headers may have an incorrect offset | ||
} | } | ||
}); | }); | ||
