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';

  // Tooltip erstellen
  const tooltip = document.createElement('div');
  tooltip.id = 'citizen-tooltip';
  Object.assign(tooltip.style, {
    position: 'absolute',
    zIndex: 999999,
    padding: '10px 14px',
    borderRadius: '8px',
    maxWidth: '240px',
    wordWrap: 'break-word',
    fontSize: '13px',
    lineHeight: '1.4',
    pointerEvents: 'none',
    opacity: '0',
    transition: 'opacity 0.25s, transform 0.15s',
    boxShadow: '0 4px 12px rgba(0,0,0,0.3)',
    backdropFilter: 'blur(6px)',
    color: '#fff',
  });
  document.body.appendChild(tooltip);

  // Pfeil erstellen
  const arrow = document.createElement('div');
  Object.assign(arrow.style, {
    position: 'absolute',
    width: '0',
    height: '0',
    borderLeft: '7px solid transparent',
    borderRight: '7px solid transparent',
    borderTop: '7px solid #000', // Farbe wird unten angepasst
    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');
    tooltip.textContent = storedTitle;
    tooltip.appendChild(arrow);
    tooltip.style.opacity = '0';

    // Dark/Light Mode automatisch
    const isDark = document.body.classList.contains('skin-dark') || document.documentElement.classList.contains('skin-dark');
    tooltip.style.backgroundColor = isDark ? 'rgba(25,25,25,0.95)' : 'rgba(250,250,250,0.95)';
    tooltip.style.color = isDark ? '#fff' : '#111';
    arrow.style.borderTopColor = tooltip.style.backgroundColor;

    requestAnimationFrame(() => {
      positionTooltip(el);
      tooltip.style.opacity = '1';
    });

    el.addEventListener('mouseleave', hideTooltip, { once: true });
  }

  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 = 8;

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

    // Default oben
    let position = 'top';
    if (spaceAbove < ttRect.height + spacing && spaceBelow > ttRect.height + spacing) position = 'bottom';
    if (spaceRight > ttRect.width + spacing && rect.left < 50) position = 'right'; // linke Sidebar
    if (spaceLeft > ttRect.width + spacing && rect.right > window.innerWidth - 50) position = 'left'; // rechte Sidebar

    let top, 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%) rotate(0deg)'
        });
        break;
      case 'bottom':
        top = rect.bottom + spacing;
        left = rect.left + rect.width/2 - ttRect.width/2;
        Object.assign(arrow.style, {
          top: '-7px',
          left: '50%',
          transform: 'translateX(-50%) rotate(180deg)'
        });
        break;
      case 'right':
        top = rect.top + rect.height/2 - ttRect.height/2;
        left = rect.right + spacing;
        Object.assign(arrow.style, {
          top: '50%',
          left: '-7px',
          transform: 'translateY(-50%) rotate(90deg)'
        });
        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)'
        });
        break;
    }

    // Clamp an Viewport
    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 + window.scrollY}px`;
    tooltip.style.left = `${left + window.scrollX}px`;
  }

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