Anonymous

MediaWiki:Common.js: Difference between revisions

From Melvor Idle

MediaWiki:Common.js (view source)

Revision as of 17:10, 23 July 2023

1,957 bytes removed ,  23 July 2023
Attempt to correct issue where sticky headers may not be initialized correctly before the page fully loads
(Remove dark mode JS - Managed entirely through CSS & notice has already been present for months)
(Attempt to correct issue where sticky headers may not be initialized correctly before the page fully loads)
Line 523: Line 523:
/* Sets the top property for stickyHeader tables */
/* Sets the top property for stickyHeader tables */
function setStickyHeaderTop() {
function setStickyHeaderTop() {
  const stickyTables = document.getElementsByClassName('stickyHeader');
var stickyTables = document.getElementsByClassName('stickyHeader');
  const headStyles = getComputedStyle(document.getElementById('mw-header-container'));
var headStyles = getComputedStyle(document.getElementById('mw-header-container'));
  var headHeight = document.getElementById('mw-header-container').offsetHeight;
var headHeight = document.getElementById('mw-header-container').offsetHeight;
  if (headStyles !== undefined && headStyles.position === 'static') {
if (headStyles !== undefined && headStyles.position === 'static') {
    headHeight = 0;
headHeight = 0;
  }
}
  for (var i = 0; i < stickyTables.length; i++) {
for (var i = 0; i < stickyTables.length; i++) {
    const firstRow = stickyTables[i].getElementsByClassName('headerRow-0');
var firstRow = stickyTables[i].getElementsByClassName('headerRow-0');
    const secondRow = stickyTables[i].getElementsByClassName('headerRow-1');
var secondRow = stickyTables[i].getElementsByClassName('headerRow-1');
    var firstHeight = 0;
var firstHeight = 0;
    if (firstRow.length > 0) {
if (firstRow.length > 0) {
      firstHeight = firstRow[0].offsetHeight;
firstHeight = firstRow[0].offsetHeight;
      const 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++) {
        firstHeaders[j].style.top = headHeight + 'px';
firstHeaders[j].style.top = headHeight + 'px';
      }
}
      if (secondRow.length > 0) {
if (secondRow.length > 0) {
        const secondHeaders = secondRow[0].getElementsByTagName('th');
var secondHeaders = secondRow[0].getElementsByTagName('th');
        var secondHeight = headHeight + firstHeight - 1;
var secondHeight = headHeight + firstHeight - 1;
        for (var j = 0; j < secondHeaders.length; j++) {
for (var j = 0; j < secondHeaders.length; j++) {
          secondHeaders[j].style.top = secondHeight + 'px';
secondHeaders[j].style.top = secondHeight + 'px';
        }
}
      }
}
    }
}
  }
}
}
 
const darkModeSchemeQuery = window.matchMedia('(prefers-color-scheme: dark)');
const darkModeNoticeDismissed = (localStorage.getItem('mi-darkMode-noticeDismissed') === null ? 'false' : localStorage.getItem('mi-darkMode-noticeDismissed')) !== 'false';
const darkModeActive = (localStorage.getItem('darkMode') === null ? 'false' : localStorage.getItem('darkMode')) !== 'false';
var darkModeNoticeElem = undefined;
 
function darkModeNoticeVisible(show) {
darkModeNoticeElem.innerHTML = darkModeNoticeHTML();
darkModeNoticeElem.style.display = (show ? 'block' : 'none');
}
 
function darkModeNoticeToggle() {
// If the legacy dark mode flag & the user's scheme preference conflict, then display a notice,
// but only if the user hasn't already acknowledged that notice
const visibility = !darkModeNoticeDismissed && ((darkModeActive && !darkModeSchemeQuery.matches) || (!darkModeActive && darkModeSchemeQuery.matches))
darkModeNoticeVisible(visibility);
}
 
function darkModeNoticeDismiss() {
localStorage.setItem('mi-darkMode-noticeDismissed', 'true');
darkModeNoticeVisible(false);
// Returning false prevents default onclick behaviour
return false;
}
 
function darkModeNoticeHTML() {
const schemeDesiredText = (darkModeActive ? 'dark' : 'light');
return 'Themes on the wiki have changed. To continue using ' + schemeDesiredText + ' mode please change your device or browser theme settings:<br/><a class="external text" href="https://support.google.com/chrome/answer/9275525?co=GENIE.Platform%3DAndroid&oco=1">Android</a> • <a class="external text" href="https://support.apple.com/en-gb/HT210332">iPhone & iPad</a> • <a class="external text" href="https://support.apple.com/en-gb/HT208976">Mac</a> • <a class="external text" href="https://support.google.com/chrome/answer/9275525?co=GENIE.Platform%3DDesktop&oco=1">Chrome</a> • <a class="external text" href="https://support.mozilla.org/en-US/kb/change-web-appearance-settings-firefox">Firefox</a> • <a class="external text" href="https://support.microsoft.com/en-gb/microsoft-edge/use-the-dark-theme-in-microsoft-edge-9b74617b-f542-77ed-033b-1a5cfb17a2df">Edge</a><br/><div style="text-align:right"><a href="#" onclick="darkModeNoticeDismiss();">Dismiss this message</a></div>';
}
}


$(document).ready(function () {
$(document).ready(function () {
// Table sticky headers
// Table sticky headers
const elemSticky = document.getElementsByClassName('stickyHeader');
var elemSticky = document.getElementsByClassName('stickyHeader');
if (elemSticky.length > 0) {
if (elemSticky.length > 0) {
// Sticky headers do not function well when Tabber containers/article tags.
// Sticky headers do not function well when Tabber containers/article tags.
// Therefore identify any stickyHeader tables within these containers  
// Therefore identify any stickyHeader tables within these containers  
//  and remove the stickyHeader class
//  and remove the stickyHeader class
const elemArticle = document.getElementsByTagName('article');
var elemArticle = document.getElementsByTagName('article');
if (elemArticle.length > 0) {
if (elemArticle.length > 0) {
for (var kS = 0; kS < elemSticky.length; kS++) {
for (var kS = 0; kS < elemSticky.length; kS++) {
for (var kA = 0; kA < elemArticle.length; kA++) {
for (var kA = 0; kA < elemArticle.length; kA++) {
const eSticky = elemSticky[kS];
var eSticky = elemSticky[kS];
const eArticle = elemArticle[kA];
var eArticle = elemArticle[kA];
if (eArticle.contains(eSticky)) {
if (eArticle.contains(eSticky)) {
eSticky.classList.remove('stickyHeader');
eSticky.classList.remove('stickyHeader');
Line 598: Line 569:
}
}
}
}
// Initialize sticky header positions
setStickyHeaderTop();
setStickyHeaderTop();
// Reset sticky header positions when the window resizes, as this may
// affect visibility of fixed elements at the top of the page
$(window).resize(setStickyHeaderTop);
$(window).resize(setStickyHeaderTop);
// Reset sticky header positions once the page is fully loaded.
// Without this, headers may have an incorrect offset
window.addEventListener('load', function(event) { setStickyHeaderTop(); });
}
}
});
});
Retrieved from "https://testwiki.melvoridle.com/w/Special:MobileDiff/61628"