MediaWiki:Common.js: Difference between revisions

/* Any JavaScript here will be loaded for all users on every page load. */
/* Schönes Tooltip-System auf Basis von alt-Attributen
   Funktioniert sicher mit Citizen & MediaWiki UI */

(function() {
  'use strict';

  const tooltip = document.createElement('div');
  tooltip.id = 'mw-smart-tooltip';
  Object.assign(tooltip.style, {
    position: 'absolute',
    zIndex: 999999,
    background: 'rgba(20,20,20,0.95)',
    color: '#fff',
    padding: '8px 12px',
    borderRadius: '6px',
    fontSize: '13px',
    lineHeight: '1.4',
    maxWidth: '220px',
    wordWrap: 'break-word',
    pointerEvents: 'none',
    opacity: '0',
    transition: 'opacity 0.2s, transform 0.15s',
  });
  document.body.appendChild(tooltip);

  // Pfeil erstellen
  const arrow = document.createElement('div');
  Object.assign(arrow.style, {
    position: 'absolute',
    width: '0',
    height: '0',
    borderLeft: '6px solid transparent',
    borderRight: '6px solid transparent',
    borderTop: '6px solid rgba(20,20,20,0.95)',
    pointerEvents: 'none',
  });
  tooltip.appendChild(arrow);

  let activeEl = null;
  let storedTitle = null;

  function showTooltip(e) {
    const el = e.target.closest('[title]');
    if (!el) return;
    storedTitle = el.getAttribute('title');
    if (!storedTitle) return;

    activeEl = el;
    el.removeAttribute('title'); // Native verhindern
    tooltip.textContent = storedTitle;
    tooltip.appendChild(arrow); // Pfeil wieder anhängen
    tooltip.style.opacity = '1';

    positionTooltip(el);
    el.addEventListener('mouseleave', hideTooltip, { once: true });
    el.addEventListener('mousemove', e => {}, { passive: true }); // optional, falls du hover-updates brauchst
  }

  function hideTooltip() {
    if (!activeEl) return;
    tooltip.style.opacity = '0';
    activeEl.setAttribute('title', storedTitle);
    activeEl = null;
    storedTitle = null;
  }

  function positionTooltip(el) {
    const rect = el.getBoundingClientRect();
    const ttRect = tooltip.getBoundingClientRect();
    const spacing = 6;

    let top, left;
    const spaceAbove = rect.top;
    const spaceBelow = window.innerHeight - rect.bottom;
    const spaceRight = window.innerWidth - rect.right;
    const spaceLeft = rect.left;

    // Standard: Tooltip über dem Element
    let position = 'top';

    if (spaceBelow > ttRect.height + spacing) position = 'bottom';
    else if (spaceRight > ttRect.width + spacing) position = 'right';
    else if (spaceLeft > ttRect.width + spacing) position = 'left';

    switch(position) {
      case 'top':
        top = rect.top - ttRect.height - spacing;
        left = rect.left + rect.width/2 - ttRect.width/2;
        Object.assign(arrow.style, {
          top: '100%',
          left: '50%',
          transform: 'translateX(-50%)',
          borderTopColor: 'rgba(20,20,20,0.95)',
          borderBottom: 'none',
        });
        break;
      case 'bottom':
        top = rect.bottom + spacing;
        left = rect.left + rect.width/2 - ttRect.width/2;
        Object.assign(arrow.style, {
          top: '-6px',
          left: '50%',
          transform: 'translateX(-50%) rotate(180deg)',
          borderTopColor: 'rgba(20,20,20,0.95)',
          borderBottom: 'none',
        });
        break;
      case 'right':
        top = rect.top + rect.height/2 - ttRect.height/2;
        left = rect.right + spacing;
        Object.assign(arrow.style, {
          top: '50%',
          left: '-6px',
          transform: 'translateY(-50%) rotate(90deg)',
          borderTopColor: 'rgba(20,20,20,0.95)',
          borderBottom: 'none',
        });
        break;
      case 'left':
        top = rect.top + rect.height/2 - ttRect.height/2;
        left = rect.left - ttRect.width - spacing;
        Object.assign(arrow.style, {
          top: '50%',
          left: '100%',
          transform: 'translateY(-50%) rotate(-90deg)',
          borderTopColor: 'rgba(20,20,20,0.95)',
          borderBottom: 'none',
        });
        break;
    }

    // Kollision mit Viewport korrigieren
    if (left < 4) left = 4;
    if (left + ttRect.width > window.innerWidth - 4)
      left = window.innerWidth - ttRect.width - 4;
    if (top < 4) top = 4;
    if (top + ttRect.height > window.innerHeight - 4)
      top = window.innerHeight - ttRect.height - 4;

    tooltip.style.top = top + 'px';
    tooltip.style.left = left + 'px';
  }

  document.addEventListener('mouseover', showTooltip);
})();