MediaWiki:Common.js: Difference between revisions

Revision as of 00:10, 24 September 2026

/* Logo stays in the sidebar. Search sits at the left of the header.
   Card list: 200px thumbs for load; hover shows a fixed popup of the full 745px GEMP image.
   Chrome/Edge ignore src changes while srcset is set, so we never swap the thumb src. */
(function () {
  function originalFromImg(img) {
    var src = img.getAttribute('src') || img.src || '';
    var ss = img.getAttribute('srcset') || '';
    var m = src.match(/\/images\/thumb\/([^/]+\/[^/]+\/[^/?#]+)\/\d+px-/);
    if (m) {
      return '/images/' + m[1];
    }
    m = ss.match(/\/images\/thumb\/([^/]+\/[^/]+\/[^/?#]+)\//);
    if (m) {
      return '/images/' + m[1];
    }
    m = src.match(/\/images\/[^/]+\/[^/]+\/Premiere-[LD]-[^/?#]+/i);
    if (m) {
      return m[0];
    }
    return src.split(' ')[0];
  }

  
  function bindCardLinks(root) {
    var pop = document.getElementById('swccg-card-zoom');
    if (!pop) {
      pop = document.createElement('img');
      pop.id = 'swccg-card-zoom';
      pop.alt = '';
      document.body.appendChild(pop);
    }
    var nodes = (root || document).querySelectorAll('span.swccg-card-link[data-card-image]');
    for (var i = 0; i < nodes.length; i++) {
      if (nodes[i].getAttribute('data-zoom-bound')) {
        continue;
      }
      nodes[i].setAttribute('data-zoom-bound', '1');
      (function (el) {
        el.addEventListener('mouseenter', function () {
          var full = el.getAttribute('data-card-image');
          if (!full) {
            return;
          }
          pop.src = full;
          var r = el.getBoundingClientRect();
          var w = 450;
          var h = 630;
          var left = r.right + 10;
          if (left + w > window.innerWidth - 8) {
            left = Math.max(8, r.left - w - 10);
          }
          var top = r.top;
          if (top + h > window.innerHeight - 8) {
            top = Math.max(8, window.innerHeight - h - 8);
          }
          pop.style.left = left + 'px';
          pop.style.top = top + 'px';
          pop.classList.add('is-on');
        });
        el.addEventListener('mouseleave', function () {
          pop.classList.remove('is-on');
        });
      })(nodes[i]);
    }
  }

  function bindZoom(root) {
    var pop = document.getElementById('swccg-card-zoom');
    if (!pop) {
      pop = document.createElement('img');
      pop.id = 'swccg-card-zoom';
      pop.alt = '';
      document.body.appendChild(pop);
    }
    var links = (root || document).querySelectorAll('table.card-thumbs a, .card-portrait a');
    for (var i = 0; i < links.length; i++) {
      if (links[i].getAttribute('data-zoom-bound')) {
        continue;
      }
      links[i].setAttribute('data-zoom-bound', '1');
      (function (a) {
        var img = a.querySelector('img');
        if (!img) {
          return;
        }
        a.addEventListener('mouseenter', function () {
          var full = originalFromImg(img);
          pop.src = full;
          var r = img.getBoundingClientRect();
          var w = 450;
          var h = 630;
          var left = r.right + 10;
          if (left + w > window.innerWidth - 8) {
            left = Math.max(8, r.left - w - 10);
          }
          var top = r.top;
          if (top + h > window.innerHeight - 8) {
            top = Math.max(8, window.innerHeight - h - 8);
          }
          pop.style.left = left + 'px';
          pop.style.top = top + 'px';
          pop.classList.add('is-on');
        });
        a.addEventListener('mouseleave', function () {
          pop.classList.remove('is-on');
        });
      })(links[i]);
    }
  }

  function moveSearch() {
    var search = document.getElementById('p-search');
    var head = document.getElementById('mw-head');
    if (search && head && search.parentNode !== head) {
      head.insertBefore(search, head.firstChild);
    }
  }

  function start() {
    moveSearch();
    bindZoom(document);
    bindCardLinks(document);
  }

  if (window.mw && mw.hook) {
    mw.hook('wikipage.content').add(function () {
      start();
    });
  }
  if (document.readyState === 'loading') {
    document.addEventListener('DOMContentLoaded', start);
  } else {
    start();
  }
})();