MediaWiki:Common.js: Unterschied zwischen den Versionen

Version vom 12. Oktober 2025, 22:21 Uhr

/* Das folgende JavaScript wird für alle Benutzer geladen. */
/* ADOS Whisky-Ratings – RatePage Frontend (ES5, Widgets + Stats + Summary, Doppel-Init-Schutz; ANON VOTING ERLAUBT) */
mw.loader.using(['mediawiki.api', 'mediawiki.user']).then(function () {

  // ---------- kleine Hilfsfunktion ----------
  function get(obj, path) {
    var cur = obj, i;
    for (i = 0; i < path.length; i++) {
      if (!cur || typeof cur !== 'object') return undefined;
      cur = cur[path[i]];
    }
    return cur;
  }

  // ---------- Bootstrapping ----------
  function boot(root) {
    var scope = root || document;
    var i, nodes;

    nodes = scope.querySelectorAll('.whisky-rating__item');
    for (i = 0; i < nodes.length; i++) setupWidget(nodes[i]);

    initMetaOnly(scope);

    nodes = scope.querySelectorAll('[data-ratepage-summary="true"]');
    for (i = 0; i < nodes.length; i++) renderSummary(nodes[i]);
  }

  if (document.readyState === 'loading') {
    document.addEventListener('DOMContentLoaded', function(){ boot(document); });
  } else {
    boot(document);
  }
  mw.hook('wikipage.content').add(function($content){
    if ($content && $content[0]) boot($content[0]);
  });

  // ---------- Interaktives Widget ----------
  function setupWidget(box) {
    if (box.getAttribute('data-rating-init') === '1') return;
    box.setAttribute('data-rating-init', '1');

    var pageId  = mw.config.get('wgArticleId');
    var contest = box.dataset.ratepageContest || undefined;
    var scale   = parseInt(box.dataset.ratepageScale || '10', 10);

    var widget  = box.querySelector('.whisky-rating__widget');
    var meta    = box.querySelector('.whisky-rating__meta');

    while (widget.firstChild) widget.removeChild(widget.firstChild);

    // Anonyme NICHT blockieren – nur optionaler Hinweis
    var isAnon  = mw.user.isAnon();
    if (isAnon && meta && !meta.textContent) {
      meta.textContent = 'Bewerte diesen Whisky!';
    }

    var buttons = [];
    var i;
    for (i = 1; i <= scale; i++) {
      (function(iVal){
        var btn = document.createElement('button');
        btn.type = 'button';
        btn.className = 'whisky-glass';
        btn.setAttribute('aria-label', iVal + ' von ' + scale);
        btn.setAttribute('aria-pressed', 'false');

        // Immer klickbar – egal ob anonym oder eingeloggt
        btn.title = iVal + ' / ' + scale;
        btn.addEventListener('mouseenter', function(){ highlight(iVal); });
        btn.addEventListener('mouseleave', function(){ highlight(current); });
        btn.addEventListener('click',      function(){ vote(iVal); });
        btn.addEventListener('keydown',    function(e){
          if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); vote(iVal); }
          if (e.key === 'ArrowRight' && iVal < scale) buttons[iVal].focus();
          if (e.key === 'ArrowLeft'  && iVal > 1)     buttons[iVal-2].focus();
        });

        widget.appendChild(btn);
        buttons.push(btn);
      })(i);
    }

    var current = 0;
    highlight(current);

    function highlight(n) {
      var j;
      for (j = 0; j < buttons.length; j++) {
        var active = (j < n);
        buttons[j].classList.toggle('is-active', active);
        buttons[j].setAttribute('aria-pressed', active ? 'true' : 'false');
      }
    }

    function updateStats() {
      var api = new mw.Api();
      api.get({
        action: 'query',
        prop: 'pagerating',
        pageids: pageId,
        prcontest: contest || undefined,
        format: 'json',
        errorformat: 'plaintext'
      }).done(function (data) {
        try {
          var pages = get(data, ['query','pages']) || {};
          var keys = []; for (var k in pages) if (Object.prototype.hasOwnProperty.call(pages, k)) keys.push(k);
          var pid = keys.length ? keys[0] : String(pageId);
          var page = pages[pid] || {};
          var pr = page.pagerating;

          if (!meta) return;

          if (!pr) {
            if (!meta.textContent) meta.textContent = 'Noch keine Bewertungen';
            return;
          }

          if (typeof pr.canSee !== 'undefined' && pr.canSee === 0) {
            meta.textContent = 'Bewertungen sind verborgen.';
          } else {
            var hist = pr.pageRating || {};
            var total = 0, sum = 0;
            for (var key in hist) {
              if (Object.prototype.hasOwnProperty.call(hist, key)) {
                var s = parseInt(key, 10), c = parseInt(hist[key], 10);
                if (!isNaN(s) && !isNaN(c)) { total += c; sum += s * c; }
              }
            }
            meta.textContent = total
              ? ('Ø ' + (Math.round((sum/total)*10)/10) + ' (' + total + ' Stimmen)')
              : 'Noch keine Bewertungen';
          }

          if (pr.userVote) {
            current = pr.userVote;
            highlight(current);
          }

          if (typeof pr.canVote !== 'undefined' && pr.canVote === 0) {
            // Serverseitig verboten → hier deaktivieren
            box.classList.add('whisky-rating--disabled');
            var gls = widget.querySelectorAll('.whisky-glass');
            for (var i2 = 0; i2 < gls.length; i2++) gls[i2].disabled = true;
            if (meta.textContent.indexOf('nicht abstimmen') === -1) {
              meta.textContent += (meta.textContent ? ' • ' : '') + 'Du darfst hier nicht abstimmen.';
            }
          }
        } catch (e) {
          if (window.console && console.error) console.error(e);
          if (meta && !meta.textContent) meta.textContent = 'Bewertungen konnten nicht geladen werden.';
        }
      }).fail(function (xhr) {
        if (window.console && console.error) console.error('Pagerating-Load-Error', xhr);
        if (meta && !meta.textContent) meta.textContent = 'Bewertungen konnten nicht geladen werden.';
      });
    }

    function vote(value) {
      var api = new mw.Api();
      if (meta) meta.textContent = 'Wird gespeichert …';

      var saved = false;
      var failTimer = setTimeout(function () {
        if (!saved && meta) meta.textContent = 'Speichern dauert ungewöhnlich lange … bitte Seite neu laden.';
      }, 8000);

      api.postWithToken('csrf', {
        action: 'ratepage',
        pageid: pageId,
        answer: value,
        contest: contest || undefined,
        format: 'json'
      }).done(function () {
        saved = true;
        clearTimeout(failTimer);
        current = value;
        highlight(current);
        if (meta) meta.textContent = 'Danke! Deine Bewertung: ' + value + ' / ' + scale;
        updateStats();
      }).fail(function (xhr) {
        clearTimeout(failTimer);
        var msg = 'Unbekannter Fehler';
        try {
          var j = xhr && xhr.responseJSON ? xhr.responseJSON : xhr;
          if (j && j.error) {
            msg = (j.error.code ? j.error.code + ': ' : '') + (j.error.info || '');
          }
        } catch(e){}
        if (window.console && console.error) console.error('RatePage-API-Fehler:', xhr);
        if (meta) meta.textContent = 'Speichern fehlgeschlagen: ' + msg;
      });
    }

    updateStats();
  }

  // ---------- Meta-only ----------
  function initMetaOnly(scope) {
    var root = scope || document;
    var nodes = root.querySelectorAll('.whisky-rating__meta-only');
    var i;
    for (i = 0; i < nodes.length; i++) (function(box){
      if (box.getAttribute('data-meta-init') === '1') return;
      box.setAttribute('data-meta-init', '1');

      var pageId = parseInt(box.dataset.ratepagePageid || mw.config.get('wgArticleId'), 10);
      var contest = box.dataset.ratepageContest || undefined;

      new mw.Api().get({
        action: 'query',
        prop: 'pagerating',
        pageids: pageId,
        prcontest: contest || undefined,
        format: 'json'
      }).done(function (data) {
        var pages = get(data, ['query','pages']) || {};
        var keys = []; for (var k in pages) if (Object.prototype.hasOwnProperty.call(pages,k)) keys.push(k);
        var pid = keys.length ? keys[0] : String(pageId);
        var pr = pages[pid] && pages[pid].pagerating;
        if (!pr) { box.textContent = ''; return; }
        if (typeof pr.canSee !== 'undefined' && pr.canSee === 0) { box.textContent = 'Bewertung verborgen'; return; }
        var hist = pr.pageRating || {};
        var total = 0, sum = 0;
        for (var key in hist) {
          if (Object.prototype.hasOwnProperty.call(hist, key)) {
            var s = Number(key), c = Number(hist[key]);
            if (s && c) { total += c; sum += s * c; }
          }
        }
        box.textContent = total ? ('Ø ' + (Math.round((sum/total)*10)/10) + ' (' + total + ' Stimmen)') : 'Noch keine Bewertungen';
      });
    })(nodes[i]);
  }

  // ---------- Summary inkl. Gesamt + Balken ----------
  function renderSummary(container) {
    if (container.getAttribute('data-summary-init') === '1') return;
    container.setAttribute('data-summary-init', '1');

    var pageId   = mw.config.get('wgArticleId');
    var raw      = container.dataset.ratepageContests || 'NASE,GESCHMACK,ABGANG';
    var parts    = raw.split(',');
    var i;

    for (i = 0; i < parts.length; i++) parts[i] = parts[i].replace(/^\s+|\s+$/g, '');

    var nameToId = { 'nase':'NASE', 'geschmack':'GESCHMACK', 'abgang':'ABGANG', 'gesamteindruck':'GESAMTEINDRUCK' };
    var contests = [];
    var seen = {};
    for (i = 0; i < parts.length; i++) {
      var key = parts[i]; if (!key) continue;
      var norm = key.toLowerCase();
      var id = nameToId[norm] ? nameToId[norm] : key;
      if (!seen[id]) { contests.push(id); seen[id] = true; }
    }

    var labels = { NASE: 'Nase', GESCHMACK: 'Geschmack', ABGANG: 'Abgang', GESAMTEINDRUCK: 'Gesamteindruck' };
    container.textContent = 'Lade Bewertungen …';

    function fetchContest(contest) {
      return new mw.Api().get({
        action: 'query',
        prop: 'pagerating',
        pageids: pageId,
        prcontest: contest,
        format: 'json',
        errorformat: 'plaintext'
      }).then(function (data) {
        var pages = get(data, ['query','pages']) || {};
        var keys = []; for (var k in pages) if (Object.prototype.hasOwnProperty.call(pages,k)) keys.push(k);
        var pid = keys.length ? keys[0] : String(pageId);
        var pr = pages[pid] && pages[pid].pagerating;

        if (!pr || (typeof pr.canSee !== 'undefined' && pr.canSee === 0)) {
          return { contest: contest, label: (labels[contest] || contest), avg: null, total: 0 };
        }
        var hist = pr.pageRating || {};
        var total = 0, sum = 0;
        for (var key in hist) {
          if (Object.prototype.hasOwnProperty.call(hist, key)) {
            var s = Number(key), c = Number(hist[key]);
            if (s && c) { total += c; sum += s * c; }
          }
        }
        var avg = total ? Math.round((sum / total) * 10) / 10 : null;
        return { contest: contest, label: (labels[contest] || contest), avg: avg, total: total };
      }, function () {
        return { contest: contest, label: (labels[contest] || contest), avg: null, total: 0, _error: true };
      });
    }

    var promises = [];
    for (i = 0; i < contests.length; i++) promises.push(fetchContest(contests[i]));

    Promise.all(promises).then(function (rows) {
      if (!rows || !rows.length) {
        container.textContent = 'Konnte Bewertungen nicht laden.';
        return;
      }

      var table = document.createElement('table');
      table.className = 'whisky-summary__table';

      var thead = document.createElement('thead');
      thead.innerHTML = '<tr><th>Kategorie</th><th>Ø</th><th>Stimmen</th></tr>';
      table.appendChild(thead);

      var tbody = document.createElement('tbody');

      // Zeilen mit Balken
      var r;
      for (r = 0; r < rows.length; r++) {
        var row = rows[r];
        var totalText = row.total ? String(row.total) : '0';

        var tr = document.createElement('tr');

        var tdLabel = document.createElement('td');
        tdLabel.textContent = row.label;
        tr.appendChild(tdLabel);

        var tdAvg = document.createElement('td');
        if (row.avg !== null) {
          var wrap  = document.createElement('div');  wrap.className = 'whisky-bar';
          var track = document.createElement('div');  track.className = 'whisky-bar__track';
          var fill  = document.createElement('div');  fill.className  = 'whisky-bar__fill';
          fill.style.width = Math.max(0, Math.min(100, (row.avg/10)*100)) + '%';
          var val   = document.createElement('span'); val.className   = 'whisky-bar__value';
          val.textContent = (row.avg.toFixed ? row.avg.toFixed(1) : (Math.round(row.avg*10)/10));
          track.appendChild(fill); wrap.appendChild(track); wrap.appendChild(val); tdAvg.appendChild(wrap);
        } else {
          tdAvg.textContent = '–';
        }
        tr.appendChild(tdAvg);

        var tdCnt = document.createElement('td');
        tdCnt.textContent = totalText;
        tr.appendChild(tdCnt);

        tbody.appendChild(tr);
      }

      // Gesamt
      var present = 0, sumAvg = 0, totalVotes = 0;
      for (r = 0; r < rows.length; r++) {
        if (rows[r].avg !== null) { present++; sumAvg += rows[r].avg; }
        if (rows[r].total) totalVotes += rows[r].total;
      }
      var overall = (present > 0) ? Math.round((sumAvg / present) * 10) / 10 : null;
      var overallText = (overall !== null)
        ? (overall.toFixed ? overall.toFixed(1) : (Math.round(overall*10)/10))
        : '–';

      var trG = document.createElement('tr');

      var tdGL = document.createElement('td');
      tdGL.innerHTML = '<strong>Gesamt</strong>';
      trG.appendChild(tdGL);

      var tdGA = document.createElement('td');
      if (overall !== null) {
        var w  = document.createElement('div');  w.className = 'whisky-bar';
        var t  = document.createElement('div');  t.className = 'whisky-bar__track';
        var f  = document.createElement('div');  f.className = 'whisky-bar__fill';
        f.style.width = Math.max(0, Math.min(100, (overall/10)*100)) + '%';
        var v  = document.createElement('span'); v.className = 'whisky-bar__value';
        v.innerHTML = '<strong>' + overallText + '</strong>';
        t.appendChild(f); w.appendChild(t); w.appendChild(v); tdGA.appendChild(w);
      } else {
        tdGA.innerHTML = '<strong>–</strong>';
      }
      trG.appendChild(tdGA);

      var tdGD = document.createElement('td');
      tdGD.textContent = totalVotes;
      trG.appendChild(tdGD);

      tbody.appendChild(trG);

      table.appendChild(tbody);

      while (container.firstChild) container.removeChild(container.firstChild);
      container.appendChild(table);

      var badge = document.getElementById('whisky-overall-badge');
      if (badge && overall !== null) {
        badge.textContent = overallText;
      }
    }).catch(function(){
      container.textContent = 'Konnte Bewertungen nicht geladen werden.';
    });
  }

});


/* Fireworks Popup (v3) – animierter "ADOS"-Schriftzug mit Feuerwerk */
mw.loader.using(['mediawiki.util','jquery']).then(function(){
  (function($, mw){
    'use strict';

    var CONFIG = {
      enabled: true,
      id: 'fireworks_popup_v3',
      title: 'Neu: Abfüllungen bewerten 🎉',
      messageHTML:
        '<p>Ab sofort kannst du im Wiki <strong>jede Abfüllung bewerten</strong> – ' +
        'teile deine Meinung und hilf anderen bei der Auswahl!</p>',
      cta: { text: 'Jetzt bewerten', url: 'https://ados-wiki.de/index.php?title=Spezial:Zuf%C3%A4llige_Seite' },
      showOnNamespaces: 'all',
      dailyLimit: 1,
      escToClose: true,
      clickBackdropToClose: true
    };

    if (!CONFIG.enabled) return;

    var ns = mw.config.get('wgNamespaceNumber');
    if (CONFIG.showOnNamespaces !== 'all' &&
        $.isArray(CONFIG.showOnNamespaces) &&
        $.inArray(ns, CONFIG.showOnNamespaces) === -1) return;

    var isAnon = (mw.config.get('wgUserName') === null);
    function g(k){ try{return localStorage.getItem(k);}catch(e){return null;} }
    function s(k,v){ try{localStorage.setItem(k,v);}catch(e){} }
    var key = 'popup_' + CONFIG.id + (isAnon?':anon':':user');
    var today = (function(d){return d.getFullYear()+'-'+('0'+(d.getMonth()+1)).slice(-2)+'-'+('0'+d.getDate()).slice(-2);})(new Date());
    if (g(key) === today) return;
    function markSeen(){ s(key, today); }

    $(function(){
      var $overlay = $('<div>', {'class':'mw-popup-overlay'});
      var $modal = $('<div>', {'class':'mw-popup-modal','role':'dialog','aria-modal':'true','aria-labelledby':'mw-fw-title'});

      var $fwWrap = $('<div>', {'class':'mw-fw-canvas-wrap'});
      var $canvas = $('<canvas>', {'class':'mw-fw-canvas', 'aria-hidden':'true'});
      $fwWrap.append($canvas);

      var $title = $('<h2>', { id: 'mw-fw-title' }).text(CONFIG.title);
      var $content = $('<div>', {'class':'mw-popup-content'}).html(CONFIG.messageHTML);

      var $buttons = $('<div>', {'class':'mw-popup-button-row'});
      var $ok = $('<button>', {'class':'mw-popup-close', type:'button'}).text('OK');
      $buttons.append($ok);
      if (CONFIG.cta && CONFIG.cta.url) {
        $buttons.append($('<a>', {
          'class':'mw-popup-wiki-button',
          'href': CONFIG.cta.url,
          'target': '_blank',
          'rel': 'noopener'
        }).text(CONFIG.cta.text || 'Mehr'));
      }

      $modal.append($fwWrap, $title, $content, $buttons);
      $('body').append($overlay, $modal);

      function close(){
        stopFireworks();
        markSeen();
        $overlay.remove(); $modal.remove();
        $(document).off('keydown.mwfw');
      }
      $ok.on('click', close);
      if (CONFIG.clickBackdropToClose) $overlay.on('click', close);
      if (CONFIG.escToClose) {
        $(document).on('keydown.mwfw', function(e){
          var k = e.key || e.keyCode;
          if (k==='Escape' || k==='Esc' || k===27){ e.preventDefault(); close(); }
        });
      }

      // ==== Fireworks + animiertes ADOS ====
      var canvas = $canvas[0], ctx = canvas.getContext('2d');
      var dpr = Math.max(1, window.devicePixelRatio || 1);
      var w=0,h=0, raf=null, particles=[], startTime=0;
      var reduceMotion = window.matchMedia && window.matchMedia('(prefers-reduced-motion: reduce)').matches;

      function resize(){
        var rect = $fwWrap[0].getBoundingClientRect();
        w = Math.floor(rect.width * dpr);
        h = Math.floor(rect.height * dpr);
        canvas.width = w; canvas.height = h;
        canvas.style.width = rect.width+'px';
        canvas.style.height = rect.height+'px';
      }

      function rand(min,max){ return Math.random()*(max-min)+min; }
      function hsla(h,s,l,a){ return 'hsla('+h+','+s+'%,'+l+'%,'+a+')'; }

      function spawnBurst(x,y){
        var hue = Math.floor(rand(0,360));
        for (var i=0;i<80;i++){
          var angle = rand(0, Math.PI*2);
          var speed = rand(1.2, 3.2);
          particles.push({
            x:x, y:y,
            vx: Math.cos(angle)*speed,
            vy: Math.sin(angle)*speed,
            life: rand(45, 80),
            age: 0,
            hue: hue + rand(-15,15),
          });
        }
      }

      // animierter Schriftzug
      var adosPoints = [];
      function createTextPoints(){
        var tempCanvas = document.createElement('canvas');
        var tctx = tempCanvas.getContext('2d');
        tempCanvas.width = w; tempCanvas.height = h;
        tctx.fillStyle = '#fff';
        tctx.font = 'bold 120px "Segoe UI", Arial, sans-serif';
        tctx.textAlign = 'center';
        tctx.textBaseline = 'middle';
        tctx.fillText('ADOS', w/2, h/2);
        var img = tctx.getImageData(0, 0, w, h).data;
        for (var y=0; y<h; y+=6){
          for (var x=0; x<w; x+=6){
            var i = (y*w + x)*4;
            if (img[i+3] > 128){
              adosPoints.push({x:x, y:y, life:rand(50,100), age:0});
            }
          }
        }
      }

      function drawADOSParticles(){
        for (var i=0; i<adosPoints.length; i++){
          var p = adosPoints[i];
          p.age++;
          var alpha = Math.sin((p.age/p.life)*Math.PI);
          var hue = (p.age*3 + p.x/5) % 360;
          ctx.fillStyle = hsla(hue,100,60,alpha);
          ctx.beginPath();
          ctx.arc(p.x, p.y, 1.6, 0, Math.PI*2);
          ctx.fill();
        }
      }

      function tick(t){
        ctx.fillStyle = 'rgba(0,0,0,0.08)';
        ctx.globalCompositeOperation = 'source-over';
        ctx.fillRect(0,0,w,h);

        ctx.globalCompositeOperation = 'lighter';

        var next = [];
        for (var i=0;i<particles.length;i++){
          var p = particles[i];
          p.age++;
          p.vy += 0.02;
          p.vx *= 0.99; p.vy *= 0.99;
          p.x += p.vx*dpr; p.y += p.vy*dpr;
          var alpha = Math.max(0, 1 - p.age/p.life);
          if (alpha>0){
            ctx.beginPath();
            ctx.fillStyle = hsla(p.hue,100,60,alpha);
            ctx.arc(p.x,p.y,Math.max(0.5,2*alpha),0,Math.PI*2);
            ctx.fill();
            next.push(p);
          }
        }
        particles = next;

        var elapsed = t - startTime;
        if (elapsed < 4000) {
          drawADOSParticles();
        }

        // Feuerwerk nach 2s starten
        if (elapsed > 2000 && Math.random() < 0.08) {
          var bx = rand(w*0.15, w*0.85);
          var by = rand(h*0.2,  h*0.6);
          spawnBurst(bx, by);
        }

        raf = requestAnimationFrame(tick);
      }

      function startFireworks(){
        if (reduceMotion) return;
        resize();
        createTextPoints();
        startTime = performance.now();
        if (!raf) raf = requestAnimationFrame(tick);
        window.addEventListener('resize', resize);
      }
      function stopFireworks(){
        if (raf){ cancelAnimationFrame(raf); raf=null; }
        window.removeEventListener('resize', resize);
      }

      startFireworks();
      markSeen();
    });
  })(jQuery, mw);
});














/* Render star ratings from data-rating on .rating elements (0..5, step .5) */
mw.hook('wikipage.content').add(function($content){
  $content.find('.rating').each(function(){
    var el = this, val = parseFloat(el.getAttribute('data-rating') || '0');
    if (isNaN(val)) val = 0;
    // clamp 0..5
    val = Math.max(0, Math.min(5, val));
    // set CSS variable for width percentage (0..5 -> 0..5 stars)
    el.style.setProperty('--stars', (val).toString());
    el.setAttribute('aria-label', val + ' von 5 Sternen');
    el.setAttribute('title', val + ' von 5 Sternen');
  });
});