MediaWiki:Common.js: Difference between revisions

Revision as of 16:52, 10 November 2025

/* Any JavaScript here will be loaded for all users on every page load. */

/* DRUID */
$(function () {
    $(".druid-main-images-label").off("click");
    $(".druid-main-images-label").click(function () {
      var $parent = $(this).closest(".druid-container");
      $parent.find(".druid-toggleable").removeClass("focused");
      var i = $(this).attr("data-druid");
      $parent.find(".druid-toggleable[data-druid=" + i + "]").addClass("focused");
    });
  
    $(".druid-collapsible").off("click");
    $(".druid-collapsible").click(function () {
      var kind = $(this).attr("data-druid-section");
      $(this).toggleClass("druid-collapsible-collapsed");
      $(this)
        .closest(".druid-container")
        .find("[data-druid-section-row=" + kind + "]")
        .toggleClass("druid-collapsed");
    });
  });
  /* End DRUID */
  
  /* [[Template:Spoiler]] */
  $(function () {
      $('.spoiler-content')
      .off('click') // in case this code is loaded twice
      .on('click', function(e){
          $(this).toggleClass('show');
      }).find('a').on('click', function(e){
          e.stopPropagation();
      });
  
  });
  /* End Template:Spoiler */
  
  
  /* Link to imported modules from Lua code */
  $(function() {
      var config = mw.config.get([
          'wgCanonicalNamespace',
          'wgFormattedNamespaces'
      ]);
      if (config.wgCanonicalNamespace !== 'Module') {
          return;
      }
      var localizedNamespace = config.wgFormattedNamespaces[828];
      $('.s1, .s2, .s').each(function() {
          var $this = $(this);
          var html = $this.html();
          var quote = html[0];
          var isLongStringQuote = quote === '[';
          var quoteRE = new RegExp('^\\' + quote + '|\\' + quote + '$', 'g');
          if (isLongStringQuote) {
              quoteRE = /^\[\[|\]\]$/g;
          }
          var name = html.replace(quoteRE, '');
          var isEnglishPrefix = name.startsWith('Module:');
          var isLocalizedPrefix = name.startsWith(localizedNamespace + ':');
          var isDevPrefix = name.startsWith('Dev:');
          if (isEnglishPrefix || isLocalizedPrefix || isDevPrefix) {
              var attrs = {
                  href: mw.util.getUrl(name)
              };
              if (isDevPrefix) {
                  attrs.href = 'https://commons.wiki.gg/wiki/Module:' + mw.util.wikiUrlencode(name.replace('Dev:', ''));
                  attrs.target = '_blank';
                  attrs.rel = 'noopener';
              }
              var link = mw.html.element('a', attrs, name);
              var str = quote + link + quote;
              if (isLongStringQuote) {
                  str = '[[' + link + ']]';
              }
              $this.html(str);
          }
      });
  });
  
  /* dynamic gif displayer ONLY TOUCH IF YOU KNOW WHAT YOU ARE DOING */
  
  (function() {
      'use strict';
      
      console.log('Dynamic GIF Displayer: Script loading...');
      
      // Configuration
      const CONFIG = {
          containerClass: 'dynamic-gif-container',
          displayClass: 'gif-display-area',
          autoExpand: true,
          expandDelay: 200,
          collapseDelay: 1000
      };
      
      let expandTimer = null;
      let collapseTimer = null;
      let currentGif = null;
      
      function safeCreateError(message) {
          const div = document.createElement('div');
          div.className = 'gif-error';
          div.textContent = message;
          return div;
      }
      
      function safeCreatePlaceholder(message) {
          const div = document.createElement('div');
          div.className = 'gif-placeholder';
          div.textContent = message;
          return div;
      }
      
      function init() {
          console.log('Dynamic GIF Displayer: Initializing...');
          
          const containers = document.querySelectorAll('.' + CONFIG.containerClass);
          console.log('Dynamic GIF Displayer: Found', containers.length, 'containers');
          
          containers.forEach(container => {
              console.log('Dynamic GIF Displayer: Setting up container', container.id);
              setupContainer(container);
              attachTooltipListeners(container);
          });
      }
      
      function setupContainer(container) {
          const displayArea = container.querySelector('.' + CONFIG.displayClass);
          if (!displayArea) {
              console.error('Dynamic GIF Displayer: No display area found');
              return;
          }
          
          displayArea.addEventListener('mouseenter', () => {
              clearTimeout(collapseTimer);
          });
          
          displayArea.addEventListener('mouseleave', () => {
              scheduleCollapse(container);
          });
      }
      
      function attachTooltipListeners(container) {
          console.log('Dynamic GIF Displayer: Attaching tooltip listeners...');
          
          const gifMap = buildGifMap(container);
          console.log('Dynamic GIF Displayer: GIF map', gifMap);
          
          const tooltips = document.querySelectorAll('.advanced-tooltip');
          console.log('Dynamic GIF Displayer: Found', tooltips.length, 'tooltips');
          
          tooltips.forEach((tooltip) => {
              const skillTitle = tooltip.querySelector('.skill-title');
              if (!skillTitle) return;
              
              const skillName = skillTitle.textContent.trim();
              const gifUrl = gifMap[skillName];
              
              console.log('Dynamic GIF Displayer: Processing tooltip:', skillName, 'GIF:', gifUrl);
              
              if (gifUrl) {
                  // Remove old listeners if they exist
                  if (tooltip._gifHoverHandler) {
                      tooltip.removeEventListener('mouseenter', tooltip._gifHoverHandler);
                  }
                  if (tooltip._gifLeaveHandler) {
                      tooltip.removeEventListener('mouseleave', tooltip._gifLeaveHandler);
                  }
                  
                  tooltip._gifHoverHandler = () => handleTooltipHover(container, gifUrl, skillName);
                  tooltip._gifLeaveHandler = () => scheduleCollapse(container);
                  
                  tooltip.addEventListener('mouseenter', tooltip._gifHoverHandler);
                  tooltip.addEventListener('mouseleave', tooltip._gifLeaveHandler);
                  
                  console.log('Dynamic GIF Displayer: Attached listeners to', skillName);
              }
          });
      }
      
      function buildGifMap(container) {
          const gifMap = {};
          const listData = container.getAttribute('data-gif-list');
          
          if (!listData) {
              console.error('Dynamic GIF Displayer: No data-gif-list attribute found');
              return gifMap;
          }
          
          console.log('Dynamic GIF Displayer: Raw list data:', listData);
          
          const entries = listData.split(';').filter(e => e.trim());
          console.log('Dynamic GIF Displayer: Found', entries.length, 'entries');
          
          entries.forEach(entry => {
              const parts = entry.split(':');
              if (parts.length >= 2) {
                  const skillName = parts[0].trim();
                  const gifFile = parts.slice(1).join(':').trim();
                  
                  if (skillName && gifFile) {
                      let gifUrl;
                      if (typeof mw !== 'undefined' && mw.config) {
                          const scriptPath = mw.config.get('wgScriptPath') || '';
                          gifUrl = scriptPath + '/index.php?title=Special:Redirect/file/' + encodeURIComponent(gifFile);
                      } else {
                          gifUrl = '/index.php?title=Special:Redirect/file/' + encodeURIComponent(gifFile);
                      }
                      
                      gifMap[skillName] = gifUrl;
                      console.log('Dynamic GIF Displayer: Mapped "' + skillName + '" to', gifUrl);
                  }
              }
          });
          
          return gifMap;
      }
      
    function handleTooltipHover(container, gifUrl, skillName) {
        console.log('Dynamic GIF Displayer: Hovering', skillName);
        clearTimeout(collapseTimer);
        clearTimeout(expandTimer);
        
        // Immediate response for fast hovers
        expandTimer = setTimeout(() => {
            // Check if already showing this GIF to prevent redundant loads
            if (currentGif !== gifUrl) {
                showGif(container, gifUrl, skillName);
            }
        }, CONFIG.expandDelay);
    }
  
    function showGif(container, gifUrl, skillName) {
        console.log('Dynamic GIF Displayer: Showing GIF for', skillName, gifUrl);
        
        const displayArea = container.querySelector('.' + CONFIG.displayClass);
        if (!displayArea) return;
        
        const gifSize = container.getAttribute('data-gif-size') || '400';
        
        if (!container.classList.contains('expanded')) {
            container.classList.add('expanded');
            console.log('Dynamic GIF Displayer: Expanded container');
        }
        
        // Always update, even if same GIF (ensures display is correct)
        const imgContainer = displayArea.querySelector('.gif-image-container');
        const caption = displayArea.querySelector('.gif-caption');
        
        if (imgContainer) {
            // Only reload if different GIF
            if (currentGif !== gifUrl) {
                const placeholder = imgContainer.querySelector('.gif-placeholder');
                if (placeholder) {
                    placeholder.remove();
                }
                
                imgContainer.style.height = gifSize + 'px';
                imgContainer.style.minHeight = gifSize + 'px';
                
                const gifFilename = gifUrl.split('/').pop();
                const decodedFilename = decodeURIComponent(gifFilename);
                
                if (decodedFilename.toLowerCase() === 'blank' || decodedFilename.toLowerCase() === 'blank.gif') {
                    imgContainer.innerHTML = '';
                    imgContainer.appendChild(safeCreatePlaceholder('This node does not require a GIF due to its simplicity.'));
                    imgContainer.classList.remove('loading');
                    currentGif = gifUrl;
                } else {
                    // Cancel any existing image loads
                    const existingImg = imgContainer.querySelector('img');
                    if (existingImg && existingImg.src !== gifUrl) {
                        existingImg.onload = null;
                        existingImg.onerror = null;
                    }
                    
                    imgContainer.classList.add('loading');
                    
                    const img = document.createElement('img');
                    img.src = gifUrl;
                    img.alt = skillName;
                    img.style.maxHeight = gifSize + 'px';
                    
                    // Store reference for cancellation check
                    const loadingGif = gifUrl;
                    
                    img.onload = () => {
                        // Only update if this is still the desired GIF
                        if (currentGif === loadingGif || currentGif === null) {
                            imgContainer.innerHTML = '';
                            imgContainer.appendChild(img);
                            imgContainer.classList.remove('loading');
                            currentGif = gifUrl;
                            console.log('Dynamic GIF Displayer: GIF loaded successfully');
                        }
                    };
                    
                    img.onerror = () => {
                        if (currentGif === loadingGif || currentGif === null) {
                            imgContainer.innerHTML = '';
                            imgContainer.appendChild(safeCreateError('GIF not found: ' + decodedFilename));
                            imgContainer.classList.remove('loading');
                            currentGif = gifUrl;
                            console.error('Dynamic GIF Displayer: Failed to load GIF', gifUrl);
                        }
                    };
                }
            }
        }
        
        if (caption) {
            caption.textContent = skillName;
            caption.style.display = 'block';
        }
    }
      
      function scheduleCollapse(container) {
          // Keep the most recent GIF displayed instead of clearing it
          // GIF will only change when a different skill node is hovered
          clearTimeout(collapseTimer);
          console.log('Dynamic GIF Displayer: Keeping current GIF displayed');
      }
      
      window.toggleGifDisplay = function(containerId) {
          console.log('Dynamic GIF Displayer: Toggle clicked for', containerId);
          const container = document.getElementById(containerId);
          if (!container) {
              console.error('Dynamic GIF Displayer: Container not found', containerId);
              return;
          }
          
          clearTimeout(collapseTimer);
          
          if (container.style.display === 'none') {
              container.style.display = 'block';
          } else {
              container.style.display = 'none';
          }
          
          // Only clear the GIF when manually toggling the display off
          if (container.style.display === 'none') {
              const displayArea = container.querySelector('.' + CONFIG.displayClass);
              if (displayArea) {
                  const imgContainer = displayArea.querySelector('.gif-image-container');
                  const caption = displayArea.querySelector('.gif-caption');
                  
                  if (imgContainer) {
                      imgContainer.innerHTML = '';
                      imgContainer.appendChild(safeCreatePlaceholder('Hover over a skill node to see its demonstration'));
                      imgContainer.style.height = '';
                      imgContainer.style.minHeight = '';
                  }
                  
                  if (caption) {
                      caption.textContent = '';
                      caption.style.display = 'none';
                  }
              }
              
              container.classList.remove('expanded');
              currentGif = null;
          }
      };
      
      if (document.readyState === 'loading') {
          document.addEventListener('DOMContentLoaded', init);
      } else {
          init();
      }
      
      window.addEventListener('load', init);
      
      if (typeof mw !== 'undefined' && mw.hook) {
          mw.hook('wikipage.content').add(init);
      }
      
      const observer = new MutationObserver(function(mutations) {
          let shouldReinit = false;
          mutations.forEach(function(mutation) {
              if (mutation.addedNodes.length) {
                  mutation.addedNodes.forEach(function(node) {
                      if (node.nodeType === 1 && (
                          node.classList && node.classList.contains('advanced-tooltip') ||
                          node.querySelector && node.querySelector('.advanced-tooltip')
                      )) {
                          shouldReinit = true;
                      }
                  });
              }
          });
          if (shouldReinit) {
              console.log('Dynamic GIF Displayer: Content changed, reinitializing...');
              setTimeout(init, 100);
          }
      });
      
      observer.observe(document.body, {
          childList: true,
          subtree: true
      });
      
      console.log('Dynamic GIF Displayer: Script loaded');
})();

/* Make mp-links clickable anywhere in the box */
(function() {
    'use strict';
    
    function initMpLinksClick() {
        const mpLinkItems = document.querySelectorAll('.mp-links > ul > li');
        
        mpLinkItems.forEach(item => {
            // Remove any existing click handler
            if (item._clickHandlerAttached) return;
            
            item.addEventListener('click', function(e) {
                // Find the first anchor tag in this li
                const link = this.querySelector('a');
                if (link && e.target !== link) {
                    // Trigger a click on the link
                    link.click();
                }
            });
            
            item._clickHandlerAttached = true;
        });
    }
    
    // Initialize on page load
    if (document.readyState === 'loading') {
        document.addEventListener('DOMContentLoaded', initMpLinksClick);
    } else {
        initMpLinksClick();
    }
    
    // Reinitialize when content changes
    window.addEventListener('load', initMpLinksClick);
    
    if (typeof mw !== 'undefined' && mw.hook) {
        mw.hook('wikipage.content').add(initMpLinksClick);
    }
    
    // Watch for DOM changes
    const observer = new MutationObserver(function(mutations) {
        let shouldReinit = false;
        mutations.forEach(function(mutation) {
            if (mutation.addedNodes.length) {
                mutation.addedNodes.forEach(function(node) {
                    if (node.nodeType === 1 && (
                        node.classList && node.classList.contains('mp-links') ||
                        node.querySelector && node.querySelector('.mp-links')
                    )) {
                        shouldReinit = true;
                    }
                });
            }
        });
        if (shouldReinit) {
            setTimeout(initMpLinksClick, 100);
        }
    });
    
    observer.observe(document.body, {
        childList: true,
        subtree: true
    });
})();

(function() {
      'use strict';
      
      console.log('Tab GIF Display: Script loading...');
      
      // Configuration
      const CONFIG = {
          containerClass: 'tab-gif-container',
          displayClass: 'tab-gif-display-area',
          tabsClass: 'tab-gif-tabs',
          tabClass: 'tab-gif-tab',
          activeTabClass: 'tab-gif-active'
      };
      
      let currentContainers = new Map();
      let initAttempts = 0;
      const MAX_INIT_ATTEMPTS = 5;
      
      function safeCreateError(message) {
          const div = document.createElement('div');
          div.className = 'gif-error';
          div.textContent = message;
          return div;
      }
      
      function safeCreatePlaceholder(message) {
          const div = document.createElement('div');
          div.className = 'gif-placeholder';
          div.textContent = message;
          return div;
      }
      
      function init() {
          initAttempts++;
          console.log('Tab GIF Display: Initializing... (attempt ' + initAttempts + ')');
          
          const containers = document.querySelectorAll('.' + CONFIG.containerClass);
          console.log('Tab GIF Display: Found', containers.length, 'containers');
          
          if (containers.length === 0 && initAttempts < MAX_INIT_ATTEMPTS) {
              console.log('Tab GIF Display: No containers found yet, will retry...');
              setTimeout(init, 500);
              return;
          }
          
          let setupCount = 0;
          containers.forEach(container => {
              const containerId = container.id;
              console.log('Tab GIF Display: Checking container', containerId);
              
              if (!currentContainers.has(containerId)) {
                  console.log('Tab GIF Display: Setting up NEW container', containerId);
                  const success = setupContainer(container);
                  if (success) {
                      currentContainers.set(containerId, container);
                      setupCount++;
                  }
              } else {
                  console.log('Tab GIF Display: Container already initialized', containerId);
              }
          });
          
          console.log('Tab GIF Display: Successfully set up', setupCount, 'containers');
      }
      
      function setupContainer(container) {
          console.log('Tab GIF Display: setupContainer called for', container.id);
          
          const gifMap = buildGifMap(container);
          console.log('Tab GIF Display: GIF map built', gifMap);
          
          if (Object.keys(gifMap).length === 0) {
              console.error('Tab GIF Display: No GIFs found for container', container.id);
              const displayArea = container.querySelector('.' + CONFIG.displayClass);
              if (displayArea) {
                  const imgContainer = displayArea.querySelector('.gif-image-container');
                  if (imgContainer) {
                      imgContainer.innerHTML = '';
                      imgContainer.appendChild(safeCreateError('No GIFs configured. Check your list parameter.'));
                  }
              }
              return false;
          }
          
          createTabs(container, gifMap);
          
          // Display the first GIF by default
          const firstTabName = Object.keys(gifMap)[0];
          console.log('Tab GIF Display: Showing first tab:', firstTabName);
          showGif(container, gifMap[firstTabName], firstTabName);
          
          return true;
      }
      
      function buildGifMap(container) {
          const gifMap = {};
          const listData = container.getAttribute('data-gif-list');
          
          console.log('Tab GIF Display: Building map for container', container.id);
          console.log('Tab GIF Display: data-gif-list attribute:', listData);
          
          if (!listData) {
              console.error('Tab GIF Display: No data-gif-list attribute found on', container.id);
              return gifMap;
          }
          
          if (listData.trim() === '') {
              console.error('Tab GIF Display: data-gif-list is empty on', container.id);
              return gifMap;
          }
          
          const entries = listData.split(';').filter(e => e.trim());
          console.log('Tab GIF Display: Found', entries.length, 'entries in list');
          
          entries.forEach((entry, index) => {
              console.log('Tab GIF Display: Processing entry', index, ':', entry);
              const parts = entry.split(':');
              
              if (parts.length < 2) {
                  console.warn('Tab GIF Display: Invalid entry format (no colon):', entry);
                  return;
              }
              
              const tabName = parts[0].trim();
              const gifFile = parts.slice(1).join(':').trim();
              
              console.log('Tab GIF Display: Parsed - Tab:', tabName, 'File:', gifFile);
              
              if (!tabName) {
                  console.warn('Tab GIF Display: Empty tab name in entry:', entry);
                  return;
              }
              
              if (!gifFile) {
                  console.warn('Tab GIF Display: Empty gif file in entry:', entry);
                  return;
              }
              
              let gifUrl;
              if (typeof mw !== 'undefined' && mw.config) {
                  const scriptPath = mw.config.get('wgScriptPath') || '';
                  gifUrl = scriptPath + '/index.php?title=Special:Redirect/file/' + encodeURIComponent(gifFile);
              } else {
                  gifUrl = '/index.php?title=Special:Redirect/file/' + encodeURIComponent(gifFile);
              }
              
              gifMap[tabName] = gifUrl;
              console.log('Tab GIF Display: Mapped "' + tabName + '" to', gifUrl);
          });
          
          console.log('Tab GIF Display: Final map has', Object.keys(gifMap).length, 'entries');
          return gifMap;
      }
      
      function createTabs(container, gifMap) {
          const tabsContainer = container.querySelector('.' + CONFIG.tabsClass);
          if (!tabsContainer) {
              console.error('Tab GIF Display: No tabs container found in', container.id);
              return;
          }
          
          console.log('Tab GIF Display: Creating tabs in', container.id);
          
          tabsContainer.innerHTML = '';
          
          let isFirst = true;
          let tabCount = 0;
          
          Object.keys(gifMap).forEach(tabName => {
              const tab = document.createElement('button');
              tab.className = CONFIG.tabClass;
              tab.textContent = tabName;
              tab.setAttribute('data-tab-name', tabName);
              tab.type = 'button';
              
              if (isFirst) {
                  tab.classList.add(CONFIG.activeTabClass);
                  isFirst = false;
              }
              
              tab.addEventListener('click', () => {
                  console.log('Tab GIF Display: Tab clicked:', tabName);
                  handleTabClick(container, gifMap, tabName);
              });
              
              tabsContainer.appendChild(tab);
              tabCount++;
              console.log('Tab GIF Display: Created tab button for', tabName);
          });
          
          console.log('Tab GIF Display: Created', tabCount, 'tabs total');
      }
      
      function handleTabClick(container, gifMap, tabName) {
          console.log('Tab GIF Display: Handling tab click for', tabName);
          
          const tabs = container.querySelectorAll('.' + CONFIG.tabClass);
          tabs.forEach(tab => {
              if (tab.getAttribute('data-tab-name') === tabName) {
                  tab.classList.add(CONFIG.activeTabClass);
              } else {
                  tab.classList.remove(CONFIG.activeTabClass);
              }
          });
          
          const gifUrl = gifMap[tabName];
          showGif(container, gifUrl, tabName);
      }
      
      function showGif(container, gifUrl, tabName) {
          console.log('Tab GIF Display: Showing GIF for', tabName, '-', gifUrl);
          
          const displayArea = container.querySelector('.' + CONFIG.displayClass);
          if (!displayArea) {
              console.error('Tab GIF Display: No display area found');
              return;
          }
          
          const rawSize = container.getAttribute('data-gif-size') || '400';
          const gifSize = rawSize.replace(/[^0-9]/g, '') || '400';
          
          const imgContainer = displayArea.querySelector('.gif-image-container');
          const caption = displayArea.querySelector('.gif-caption');
          
          if (imgContainer) {
              const placeholder = imgContainer.querySelector('.gif-placeholder');
              if (placeholder) {
                  placeholder.remove();
              }
              
              imgContainer.style.height = gifSize + 'px';
              imgContainer.style.minHeight = gifSize + 'px';
              
              const gifFilename = gifUrl.split('/').pop();
              const decodedFilename = decodeURIComponent(gifFilename);
              
              if (decodedFilename.toLowerCase() === 'blank' || decodedFilename.toLowerCase() === 'blank.gif') {
                  imgContainer.innerHTML = '';
                  imgContainer.appendChild(safeCreatePlaceholder('No GIF available for this tab.'));
                  imgContainer.classList.remove('loading');
              } else {
                  const oldImg = imgContainer.querySelector('img');
                  
                  const img = document.createElement('img');
                  img.src = gifUrl;
                  img.alt = tabName;
                  img.style.maxHeight = gifSize + 'px';
                  img.style.opacity = '0';
                  img.style.position = 'absolute';
                  img.style.transition = 'opacity 0.2s ease';
                  
                  img.onload = () => {
                      if (oldImg) {
                          oldImg.style.transition = 'opacity 0.15s ease';
                          oldImg.style.opacity = '0';
                          setTimeout(() => {
                              imgContainer.innerHTML = '';
                              img.style.position = 'relative';
                              img.style.opacity = '1';
                              imgContainer.appendChild(img);
                              imgContainer.classList.remove('loading');
                          }, 150);
                      } else {
                          imgContainer.innerHTML = '';
                          img.style.position = 'relative';
                          img.style.opacity = '1';
                          imgContainer.appendChild(img);
                          imgContainer.classList.remove('loading');
                      }
                      console.log('Tab GIF Display: GIF loaded successfully');
                  };
                  
                  img.onerror = () => {
                      imgContainer.innerHTML = '';
                      imgContainer.appendChild(safeCreateError('GIF not found: ' + decodedFilename));
                      imgContainer.classList.remove('loading');
                      console.error('Tab GIF Display: Failed to load GIF', gifUrl);
                  };
                  
                  if (!oldImg) {
                      imgContainer.appendChild(img);
                      imgContainer.classList.add('loading');
                  }
              }
          }
          
          if (caption) {
              caption.textContent = tabName;
              caption.style.display = 'block';
          }
      }
      
      window.toggleTabGifDisplay = function(containerId) {
          console.log('Tab GIF Display: Toggle clicked for', containerId);
          const container = document.getElementById(containerId);
          if (!container) {
              console.error('Tab GIF Display: Container not found', containerId);
              return;
          }
          
          if (container.style.display === 'none') {
              container.style.display = 'block';
          } else {
              container.style.display = 'none';
          }
      };
      
      if (document.readyState === 'loading') {
          document.addEventListener('DOMContentLoaded', init);
      } else {
          init();
      }
      
      window.addEventListener('load', init);
      
      if (typeof mw !== 'undefined' && mw.hook) {
          mw.hook('wikipage.content').add(init);
      }
      
      const observer = new MutationObserver(function(mutations) {
          let shouldReinit = false;
          mutations.forEach(function(mutation) {
              if (mutation.addedNodes.length) {
                  mutation.addedNodes.forEach(function(node) {
                      if (node.nodeType === 1 && (
                          node.classList && node.classList.contains(CONFIG.containerClass) ||
                          node.querySelector && node.querySelector('.' + CONFIG.containerClass)
                      )) {
                          shouldReinit = true;
                      }
                  });
              }
          });
          if (shouldReinit) {
              console.log('Tab GIF Display: Content changed, reinitializing...');
              setTimeout(init, 100);
          }
      });
      
      observer.observe(document.body, {
          childList: true,
          subtree: true
      });
      
      console.log('Tab GIF Display: Script loaded and ready');
  })();
  
  (function () {
      const images = [
          'url(/wiki/Special:Redirect/file/Site-background-image.jpg)',
          'url(/wiki/Special:Redirect/file/Site-background-image2.jpg)',
          'url(/wiki/Special:Redirect/file/Site-background-image3.jpg)',
      ];
  
      // Pick deterministic daily seed
      const day = new Date().getDate();
  
      // Deterministic shuffle using day as seed
      function seededRandom(seed) {
          return Math.abs(Math.sin(seed)) % 1;
      }
  
      const pick1 = Math.floor(seededRandom(day) * images.length);
      let pick2 = Math.floor(seededRandom(day + 1) * images.length);
  
      if (pick2 === pick1) pick2 = (pick2 + 1) % images.length;
  
      document.body.style.backgroundImage = images[pick1];
  
      const footer = document.querySelector('.mw-footer');
      if (footer) footer.style.backgroundImage = images[pick2];
  })();