MediaWiki:Common.js: Difference between revisions

From SWCCG Wiki
Jump to navigation Jump to search
hover hires
chrome zoom popup
Line 1: Line 1:
/* Keep the logo in the sidebar. Park search at the left of the header (right of the logo).
/* Logo stays in the sidebar. Search sits at the left of the header.
   Card thumbs: show 88px for page load; on hover swap to the full GEMP/holotable image. */
   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 () {
   function ready(fn) {
   function originalFromImg(img) {
     if (document.readyState !== 'loading') {
     var src = img.getAttribute('src') || img.src || '';
      fn();
    var ss = img.getAttribute('srcset') || '';
     } else {
    var m = src.match(/\/images\/thumb\/([^/]+\/[^/]+\/[^/?#]+)\/\d+px-/);
       document.addEventListener('DOMContentLoaded', fn);
     if (m) {
       return '/images/' + m[1];
     }
     }
  }
     m = ss.match(/\/images\/thumb\/([^/]+\/[^/]+\/[^/?#]+)\//);
 
  function originalFromThumb(src) {
     var m = src.match(/\/images\/thumb\/([^/]+\/[^/]+\/[^/]+)\/\d+px-/);
     if (m) {
     if (m) {
       return '/images/' + m[1];
       return '/images/' + m[1];
     }
     }
     return src;
    m = src.match(/\/images\/[^/]+\/[^/]+\/Premiere-[LD]-[^/?#]+/i);
    if (m) {
      return m[0];
    }
     return src.split(' ')[0];
   }
   }


   function hiresFromFile(src) {
   function bindZoom(root) {
     var m = src.match(/Premiere-(L|D)-([^/?#]+)\.(?:gif|png)/i);
     var pop = document.getElementById('swccg-card-zoom');
    if (!m) {
    if (!pop) {
       return null;
      pop = document.createElement('img');
      pop.id = 'swccg-card-zoom';
      pop.alt = '';
      document.body.appendChild(pop);
    }
    var links = (root || document).querySelectorAll('table.card-thumbs 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 = 300;
          var h = 420;
          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]);
     }
     }
    var side = m[1].toUpperCase() === 'L' ? 'Light' : 'Dark';
    var base = m[2].replace(/\.gif$/i, '').replace(/\.png$/i, '');
    return 'https://res.starwarsccg.org/cards/Premiere-' + side + '/hires/' + base + '.png';
   }
   }


   ready(function () {
   function moveSearch() {
     var search = document.getElementById('p-search');
     var search = document.getElementById('p-search');
     var head = document.getElementById('mw-head');
     var head = document.getElementById('mw-head');
Line 34: Line 71:
       head.insertBefore(search, head.firstChild);
       head.insertBefore(search, head.firstChild);
     }
     }
  }


    var imgs = document.querySelectorAll('table.card-thumbs img');
  function start() {
     for (var i = 0; i < imgs.length; i++) {
     moveSearch();
      (function (img) {
    bindZoom(document);
        var thumb = img.currentSrc || img.src;
  }
        var full = hiresFromFile(thumb) || originalFromThumb(thumb);
 
        img.addEventListener('mouseenter', function () {
  if (window.mw && mw.hook) {
          if (img.src !== full) {
    mw.hook('wikipage.content').add(function () {
            img.setAttribute('data-thumb', thumb);
      start();
            img.src = full;
    });
            img.classList.add('zoomed');
  }
          }
  if (document.readyState === 'loading') {
        });
    document.addEventListener('DOMContentLoaded', start);
        img.addEventListener('mouseleave', function () {
  } else {
          var t = img.getAttribute('data-thumb');
    start();
          if (t) {
   }
            img.src = t;
          }
          img.classList.remove('zoomed');
        });
      })(imgs[i]);
    }
   });
})();
})();

Revision as of 01:38, 21 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 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');
    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 = 300;
          var h = 420;
          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);
  }

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