MediaWiki:Common.js: Unterschied zwischen den Versionen

Version vom 25. Februar 2026, 17:57 Uhr

/* Das folgende JavaScript wird für alle Benutzer geladen. */

$('body').scrollspy({
    target: '.bs-docs-sidebar',
    offset: 40
});

/* Simple image lightbox with zoom and download */
(function() {
  var overlay = document.createElement('div');
  overlay.id = 'img-lightbox';
  overlay.style.cssText = 'display:none;position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.85);z-index:10000;justify-content:center;align-items:center;flex-direction:column;';

  var imgWrap = document.createElement('div');
  imgWrap.style.cssText = 'position:relative;max-width:90%;max-height:calc(100% - 60px);overflow:auto;display:flex;justify-content:center;align-items:center;cursor:grab;';

  var img = document.createElement('img');
  img.style.cssText = 'max-width:100%;max-height:85vh;border-radius:4px;box-shadow:0 4px 30px rgba(0,0,0,0.5);transition:transform 0.2s;transform-origin:center center;';
  imgWrap.appendChild(img);
  overlay.appendChild(imgWrap);

  // Toolbar
  var toolbar = document.createElement('div');
  toolbar.style.cssText = 'display:flex;gap:12px;padding:10px;align-items:center;';
  var btnStyle = 'background:rgba(255,255,255,0.15);color:white;border:none;padding:6px 14px;border-radius:4px;cursor:pointer;font-size:14px;';

  var zoomIn = document.createElement('button');
  zoomIn.innerHTML = '🔍+ Zoom in';
  zoomIn.style.cssText = btnStyle;
  var zoomOut = document.createElement('button');
  zoomOut.innerHTML = '🔍− Zoom out';
  zoomOut.style.cssText = btnStyle;
  var zoomReset = document.createElement('button');
  zoomReset.innerHTML = '↺ Reset';
  zoomReset.style.cssText = btnStyle;
  var download = document.createElement('a');
  download.innerHTML = '⬇ Download';
  download.style.cssText = btnStyle + 'text-decoration:none;display:inline-block;';
  download.download = '';
  var closeBtn = document.createElement('button');
  closeBtn.innerHTML = '✕ Close';
  closeBtn.style.cssText = btnStyle;

  toolbar.appendChild(zoomIn);
  toolbar.appendChild(zoomOut);
  toolbar.appendChild(zoomReset);
  toolbar.appendChild(download);
  toolbar.appendChild(closeBtn);
  overlay.appendChild(toolbar);
  document.body.appendChild(overlay);

  var scale = 1;
  function setZoom(s) {
    scale = Math.max(0.25, Math.min(s, 5));
    img.style.transform = 'scale(' + scale + ')';
    if (scale > 1) {
      img.style.maxWidth = 'none';
      img.style.maxHeight = 'none';
      imgWrap.style.cursor = 'grab';
      imgWrap.style.overflow = 'auto';
    } else {
      img.style.maxWidth = '100%';
      img.style.maxHeight = '85vh';
      imgWrap.style.overflow = 'hidden';
    }
  }

  zoomIn.addEventListener('click', function(e) { e.stopPropagation(); setZoom(scale * 1.4); });
  zoomOut.addEventListener('click', function(e) { e.stopPropagation(); setZoom(scale / 1.4); });
  zoomReset.addEventListener('click', function(e) { e.stopPropagation(); setZoom(1); });
  closeBtn.addEventListener('click', function() { overlay.style.display = 'none'; });

  // Close on overlay background click (not on image/toolbar)
  overlay.addEventListener('click', function(e) {
    if (e.target === overlay) overlay.style.display = 'none';
  });

  // Mouse wheel zoom
  imgWrap.addEventListener('wheel', function(e) {
    e.preventDefault();
    setZoom(scale * (e.deltaY < 0 ? 1.15 : 0.87));
  }, { passive: false });

  // Keyboard
  document.addEventListener('keydown', function(e) {
    if (overlay.style.display !== 'flex') return;
    if (e.key === 'Escape') overlay.style.display = 'none';
    if (e.key === '+' || e.key === '=') setZoom(scale * 1.3);
    if (e.key === '-') setZoom(scale / 1.3);
    if (e.key === '0') setZoom(1);
  });

  // Intercept image clicks
  document.addEventListener('click', function(e) {
    var link = e.target.closest('.image, a.mw-file-description');
    if (!link) return;
    var thumb = link.querySelector('img');
    if (!thumb) return;

    e.preventDefault();
    e.stopPropagation();

    var thumbSrc = thumb.getAttribute('src') || '';
    var fullSrc;
    if (thumbSrc.indexOf('/thumb/') !== -1) {
      fullSrc = thumbSrc.replace('/thumb/', '/').replace(/\/[^\/]+$/, '');
    } else {
      fullSrc = thumbSrc;
    }

    img.src = fullSrc;
    download.href = fullSrc;
    download.download = fullSrc.split('/').pop();
    scale = 1;
    img.style.transform = 'scale(1)';
    img.style.maxWidth = '100%';
    img.style.maxHeight = '85vh';
    imgWrap.style.overflow = 'hidden';
    overlay.style.display = 'flex';
  });
})();