ADOS Wiki

MediaWiki:Common.js: Unterschied zwischen den Versionen

← Zum vorherigen VersionsunterschiedZum nächsten Versionsunterschied →
Keine Bearbeitungszusammenfassung
Keine Bearbeitungszusammenfassung
Zeile 739: Zeile 739:
// -------------------------------------
// -------------------------------------


/* Whisky News – Popup (v5)
/* Whisky News – Popup (v6)
   - Behält News (Titel + 2 Karten) bei
   - News (Titel + Intro + 2 Karten) bleiben erhalten
   - Oben Canvas mit einschenkendem Whiskyglas
   - Oben: Canvas mit sanft schwenkendem Whiskyglas
   - „Slàinte mhath“ Text-Overlay (fade-in/out)
   - Darunter: animierter Trinkspruch „Slàinte mhath“
*/
*/
mw.loader.using(['mediawiki.util','jquery']).then(function(){
mw.loader.using(['mediawiki.util','jquery']).then(function(){
Zeile 750: Zeile 750:
     var CONFIG = {
     var CONFIG = {
       enabled: true,
       enabled: true,
       id: 'wow_mannheim_whisky_news_v5',  // Version hochsetzen, damit alle es sehen
       id: 'wow_mannheim_whisky_news_v6',  // Version erhöhen, damit alle es sehen
       title: 'Whisky News: Messeabfüllungen – World of Whisky (Mannheim)',
       title: 'Whisky News: Messeabfüllungen – World of Whisky (Mannheim)',
       introHTML: '<p>Frisch zur Messe in Mannheim: Zwei limitierte Abfüllungen. Schau sie dir an und bewerte sie im Wiki!</p>',
       introHTML: '<p>Frisch zur Messe in Mannheim: Zwei limitierte Abfüllungen. Schau sie dir an und bewerte sie im Wiki!</p>',


       // <<< Bild-URLs bitte mit euren finalen Datei-Links ersetzen >>>
       // Karten (Bilder optional – URLs ggf. ersetzen)
       images: [
       images: [
         {
         {
           src: 'https://ados-wiki.de/images/2/2f/South_Islay_Single_Malt_13_year-old_%28Sherry_Octave_Cask_Finish%29.single.jpg',
           src: 'https://ados-wiki.de/images/2/2f/South_Islay_Single_Malt_13_year-old_%28Sherry_Octave_Cask_Finish%29.single.jpg', // TODO: ersetzen
           alt: 'South Islay 13y – Sherry Octave Cask Finish',
           alt: 'South Islay 13y – Sherry Octave Cask Finish',
           link: 'https://ados-wiki.de/wiki/South_Islay_Single_Malt_13_year-old_(Sherry_Octave_Cask_Finish)',
           link: 'https://ados-wiki.de/wiki/South_Islay_Single_Malt_13_year-old_(Sherry_Octave_Cask_Finish)',
Zeile 763: Zeile 763:
         },
         },
         {
         {
           src: 'https://ados-wiki.de/images/9/95/Tullibardine_13_year-old_%28Shiraz_Wine_Octave_Cask_Finish%29.single.jpg',
           src: 'https://ados-wiki.de/images/9/95/Tullibardine_13_year-old_%28Shiraz_Wine_Octave_Cask_Finish%29.single.jpg', // TODO: ersetzen
           alt: 'Tullibardine 13y – Shiraz Wine Octave Cask Finish',
           alt: 'Tullibardine 13y – Shiraz Wine Octave Cask Finish',
           link: 'https://ados-wiki.de/wiki/Tullibardine_13_year-old',
           link: 'https://ados-wiki.de/wiki/Tullibardine_13_year-old',
Zeile 770: Zeile 770:
       ],
       ],


       // Popup-Verhalten
       // Popup-Steuerung
      dailyLimit: 1,
       escToClose: true,
       escToClose: true,
       clickBackdropToClose: true,
       clickBackdropToClose: true,
      dailyLimit: 1,


       // Animation
       // Animations-/Text-Optionen
      targetFillPct: 0.60,    // finaler Füllstand
       toastText: 'Slàinte mhath'
      pourDurationMs: 2600,  // Einschenk-Dauer
       splashCount: 90,        // Spritzer
      slainteText: 'Slàinte mhath',
      slainteShowMs: 2600,    // so lange sichtbar
      slainteFadeMs: 800      // ausfaden
     };
     };


     if (!CONFIG.enabled) return;
     if (!CONFIG.enabled) return;


     // 1×/Tag
     // 1×/Tag je Nutzer
     var isAnon = (mw.config.get('wgUserName') === null);
     var isAnon = (mw.config.get('wgUserName') === null);
     function LSget(k){ try { return localStorage.getItem(k); } catch(e){ return null; } }
     function LSget(k){ try { return localStorage.getItem(k); } catch(e){ return null; } }
     function LSset(k,v){ try { localStorage.setItem(k,v); } catch(e){} }
     function LSset(k,v){ try { localStorage.setItem(k, v); } catch(e){} }
     var key = 'popup_' + CONFIG.id + (isAnon?':anon':':user');
     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());
     var today = (d => d.getFullYear()+'-'+('0'+(d.getMonth()+1)).slice(-2)+'-'+('0'+d.getDate()).slice(-2))(new Date());
     if (LSget(key) === today) return;
     if (LSget(key) === today) return;
     function markSeen(){ LSset(key, today); }
     function markSeen(){ LSset(key, today); }


     $(function(){
     $(function(){
       // Grundgerüst
       // Overlay + Modal
       var $overlay = $('<div>', {'class':'mw-popup-overlay'});
       var $overlay = $('<div>', {'class':'mw-popup-overlay'});
       var $modal = $('<div>', {'class':'mw-popup-modal','role':'dialog','aria-modal':'true','aria-labelledby':'mw-news-title'});
       var $modal = $('<div>', {
        'class':'mw-popup-modal',
        'role':'dialog',
        'aria-modal':'true',
        'aria-labelledby':'mw-news-title'
      });


      // Bühne oben: Whiskyglas im Canvas
       var $stage = $('<div>', {'class':'mw-fw-canvas-wrap'});
       var $stage = $('<div>', {'class':'mw-fw-canvas-wrap'});
       var $canvas = $('<canvas>', {'class':'mw-fw-canvas','aria-hidden':'true'});
       var $canvas = $('<canvas>', {'class':'mw-fw-canvas','aria-hidden':'true'});
       $stage.append($canvas);
       $stage.append($canvas);


       var $title = $('<h2>', { id:'mw-news-title' }).text(CONFIG.title);
      // Trinkspruch (CSS-animiert)
       var $toast = $('<div>', {'class':'mw-slainte-toast', id:'mw-news-title'}).text(CONFIG.toastText);
 
      // Titel + Intro (für Screenreader behalten wir aria-labelledby am Toast)
      var $title = $('<h2>').text(CONFIG.title);
       var $intro = $('<div>', {'class':'mw-popup-content'}).html(CONFIG.introHTML);
       var $intro = $('<div>', {'class':'mw-popup-content'}).html(CONFIG.introHTML);


      // Karten
       var $cards = $('<div>', {'class':'mw-wnews-cards'});
       var $cards = $('<div>', {'class':'mw-wnews-cards'});
       CONFIG.images.forEach(function(img){
       CONFIG.images.forEach(function(img){
         var $card = $('<a>', {'class':'mw-wnews-card','href':img.link,'target':'_blank','rel':'noopener'});
         var $card = $('<a>', {'class':'mw-wnews-card','href':img.link,'target':'_blank','rel':'noopener'});
        var $thumb = $('<div>', {'class':'mw-wnews-thumb'});
        if (img.src) $thumb.append($('<img>', {src: img.src, alt: img.alt, loading:'lazy'}));
         $card.append(
         $card.append(
           $('<div>', {'class':'mw-wnews-thumb'}).append($('<img>', {src: img.src, alt: img.alt, loading:'lazy'})),
           $thumb,
           $('<div>', {'class':'mw-wnews-meta'}).append(
           $('<div>', {'class':'mw-wnews-meta'}).append(
             $('<div>', {'class':'mw-wnews-title', text: img.alt}),
             $('<div>', {'class':'mw-wnews-title', text: img.alt}),
Zeile 820: Zeile 828:
       });
       });


      // Button
       var $btnRow = $('<div>', {'class':'mw-popup-button-row'});
       var $btnRow = $('<div>', {'class':'mw-popup-button-row'});
       var $ok = $('<button>', {'class':'mw-popup-close', type:'button'}).text('OK');
       var $ok = $('<button>', {'class':'mw-popup-close', type:'button'}).text('OK');
       $btnRow.append($ok);
       $btnRow.append($ok);


       $modal.append($stage, $title, $intro, $cards, $btnRow);
      // zusammenbauen
       $modal.append($stage, $toast, $title, $intro, $cards, $btnRow);
       $('body').append($overlay, $modal);
       $('body').append($overlay, $modal);


Zeile 842: Zeile 852:
       }
       }


       // ===== Canvas – Einschenken + „Slàinte mhath“ =====
       // ===== Canvas: sanft schwenkendes Whiskyglas =====
       var canvas = $canvas[0], ctx = canvas.getContext && canvas.getContext('2d');
       var canvas = $canvas[0], ctx = canvas.getContext && canvas.getContext('2d');
       var reduce = window.matchMedia && window.matchMedia('(prefers-reduced-motion: reduce)').matches;
       var reduce = window.matchMedia && window.matchMedia('(prefers-reduced-motion: reduce)').matches;
       var dpr=1, cw=0, ch=0, raf=null, started=false, ro, t0=0;
       var dpr=1, cw=0, ch=0, raf=null, t0=0, started=false, ro;
 
       var glass = {x:0,y:0,w:0,h:0,r:0};
       var glass = {x:0,y:0,w:0,h:0,r:0};
       var fillTopY, targetTopY, ampBase=0, amp=0, bubbles=[], splashes=[];
       var baseFill=0, amp=0;
      var pouring=true, slainteStart=0;


       function setSize(){
       function setSize(){
Zeile 855: Zeile 863:
         if (r.width <= 0 || r.height <= 0) return false;
         if (r.width <= 0 || r.height <= 0) return false;
         var newDpr = Math.max(1, window.devicePixelRatio || 1);
         var newDpr = Math.max(1, window.devicePixelRatio || 1);
         if (cw !== r.width || ch !== r.height || dpr !== newDpr){
         if (cw!==r.width || ch!==r.height || dpr!==newDpr){
           dpr = newDpr; cw = r.width; ch = r.height;
           dpr=newDpr; cw=r.width; ch=r.height;
           canvas.width = Math.floor(cw*dpr);
           canvas.width = Math.floor(cw*dpr);
           canvas.height = Math.floor(ch*dpr);
           canvas.height = Math.floor(ch*dpr);
           canvas.style.width = cw+'px';
           canvas.style.width = cw+'px';
           canvas.style.height = ch+'px';
           canvas.style.height = ch+'px';
           setupGlass();
           layout();
         }
         }
         return true;
         return true;
       }
       }
 
       function layout(){
       function setupGlass(){
         var w=canvas.width, h=canvas.height;
         var w = canvas.width, h = canvas.height;
         glass.x = w*0.18; glass.y = h*0.15; glass.w = w*0.64; glass.h = h*0.7;
         glass.x = w*0.18; glass.y = h*0.15; glass.w = w*0.64; glass.h = h*0.7;
         glass.r = Math.min(glass.w,glass.h)*0.08;
         glass.r = Math.min(glass.w,glass.h)*0.08;
         var baseEmpty = glass.y + glass.h*0.98;
         baseFill = glass.y + glass.h*0.58;
         fillTopY = baseEmpty;
         amp = Math.min(14*dpr, canvas.height*0.03);
        targetTopY = glass.y + glass.h*(1 - CONFIG.targetFillPct);
        ampBase = Math.min(14*dpr, canvas.height*0.03);
        amp = 0; bubbles=[]; splashes=[];
       }
       }


Zeile 889: Zeile 893:
         ctx.closePath();
         ctx.closePath();
         ctx.stroke();
         ctx.stroke();
         // Glanz
         // Glanzkante
         ctx.beginPath();
         ctx.beginPath();
         ctx.moveTo(glass.x+glass.w*0.15, glass.y+glass.h*0.1);
         ctx.moveTo(glass.x+glass.w*0.15, glass.y+glass.h*0.1);
Zeile 897: Zeile 901:
         ctx.restore();
         ctx.restore();
       }
       }
      function rand(min,max){ return Math.random()*(max-min)+min; }


       function drawLiquid(t){
       function drawLiquid(t){
         var grd = ctx.createLinearGradient(0, fillTopY-30*dpr, 0, glass.y+glass.h);
         var topY = baseFill + Math.sin(t*2.0)*amp*0.25 + Math.sin(t*0.7)*amp*0.15;
        grd.addColorStop(0, 'rgba(255,190,90,0.96)');
        grd.addColorStop(1, 'rgba(170,85,20,0.98)');


         // Clip ins Glas
         // Clip ins Glas
Zeile 916: Zeile 916:
         ctx.clip();
         ctx.clip();


         // Wellenoberfläche als Path
         // Whisky-Farbverlauf
         var topY = fillTopY + Math.sin(t*3.2)*amp*0.25;
         var grd = ctx.createLinearGradient(0, topY-30*dpr, 0, glass.y+glass.h);
        grd.addColorStop(0, 'rgba(255,190,90,0.96)');
        grd.addColorStop(1, 'rgba(170,85,20,0.98)');
 
        // Flüssigkeit als Wellen-Path (kein Rechteck)
         ctx.beginPath();
         ctx.beginPath();
         ctx.moveTo(glass.x, topY);
         ctx.moveTo(glass.x, topY);
         for (var x=0; x<=glass.w; x+=6*dpr){
         for (var x=0; x<=glass.w; x+=6*dpr){
           var y = topY + Math.sin((x*0.055) + t*4.0)*amp*0.22;
           var y = topY + Math.sin((x*0.055) + t*3.6) * amp * 0.22;
           ctx.lineTo(glass.x + x, y);
           ctx.lineTo(glass.x + x, y);
         }
         }
Zeile 930: Zeile 934:
         ctx.fill();
         ctx.fill();


         // helle Gischt
         // feiner Lichtsaum
         ctx.beginPath();
         ctx.beginPath();
         ctx.moveTo(glass.x, topY);
         ctx.moveTo(glass.x, topY);
         for (var x2=0; x2<=glass.w; x2+=6*dpr){
         for (var x2=0; x2<=glass.w; x2+=6*dpr){
           var y2 = topY + Math.sin((x2*0.055) + t*4.0)*amp*0.22;
           var y2 = topY + Math.sin((x2*0.055) + t*3.6) * amp * 0.22;
           ctx.lineTo(glass.x + x2, y2);
           ctx.lineTo(glass.x + x2, y2);
         }
         }
Zeile 941: Zeile 945:
         ctx.stroke();
         ctx.stroke();


        // Blasen/Lichtpunkte
        if (bubbles.length === 0){
          for (var j=0;j<130;j++){
            bubbles.push({ x: glass.x + Math.random()*glass.w, y: glass.y + glass.h - rand(0,8*dpr), r: rand(0.8,2.2)*dpr, s: rand(0.1,0.3)*dpr, wob: rand(0.3,0.9) });
          }
        }
        ctx.globalCompositeOperation = 'lighter';
        bubbles.forEach(function(b){
          if (b.y < topY + 3*dpr){
            b.x = glass.x + Math.random()*glass.w;
            b.y = glass.y + glass.h - rand(0,8*dpr);
          } else {
            b.y -= b.s * (1 + Math.sin(t*3 + b.x*0.02)*0.2);
            b.x += Math.sin(t*2 + b.y*0.02)*b.wob*0.15;
          }
          ctx.beginPath();
          ctx.fillStyle = 'rgba(255,220,140,0.9)';
          ctx.arc(b.x, b.y, b.r, 0, Math.PI*2);
          ctx.fill();
          ctx.beginPath();
          ctx.fillStyle = 'rgba(255,255,255,0.6)';
          ctx.arc(b.x - b.r*0.3, b.y - b.r*0.3, b.r*0.35, 0, Math.PI*2);
          ctx.fill();
        });
        ctx.restore();
      }
      function drawPourStream(t){
        var streamX = glass.x + glass.w*0.6;
        var startY  = Math.max(0, glass.y - 0.25*canvas.height);
        var endY    = fillTopY - 6*dpr;
        ctx.save();
        ctx.globalAlpha = 0.95;
        var grad = ctx.createLinearGradient(0, startY, 0, endY);
        grad.addColorStop(0, 'rgba(255,200,120,0.5)');
        grad.addColorStop(1, 'rgba(200,110,25,0.9)');
        ctx.strokeStyle = grad;
        ctx.lineWidth = Math.max(3*dpr, 3);
        ctx.lineCap = 'round';
        ctx.beginPath();
        ctx.moveTo(streamX, startY);
        var midY = (startY + endY)/2;
        var offset = Math.sin(t*6)*10*dpr;
        ctx.quadraticCurveTo(streamX + offset, midY, streamX, endY);
        ctx.stroke();
        ctx.restore();
        // Spritzer
        if (Math.random() < 0.35 && splashes.length < CONFIG.splashCount){
          var angle = rand(-Math.PI*0.8, -Math.PI*0.2);
          var speed = rand(3*dpr, 6*dpr);
          splashes.push({
            x: streamX, y: endY, vx: Math.cos(angle)*speed, vy: Math.sin(angle)*speed*0.6,
            r: rand(0.8, 2.0)*dpr, life: 60
          });
        }
        for (var i=splashes.length-1; i>=0; i--){
          var sp = splashes[i];
          sp.vy += 0.12*dpr; sp.x += sp.vx; sp.y += sp.vy; sp.life -= 1;
          ctx.beginPath();
          ctx.fillStyle = 'rgba(255,220,140,' + Math.max(0, sp.life/60).toFixed(2) + ')';
          ctx.arc(sp.x, sp.y, sp.r, 0, Math.PI*2); ctx.fill();
          if (sp.life <= 0 || sp.y > glass.y+glass.h) splashes.splice(i,1);
        }
      }
      function drawSlainte(now){
        // Zeit seit Start der Animation
        var elapsed = now - slainteStart;
        var alpha = 0;
        if (elapsed < CONFIG.slainteShowMs) {
          // Einblenden in den ersten 500ms
          alpha = Math.min(1, elapsed/500);
        } else {
          // Ausblenden
          var out = elapsed - CONFIG.slainteShowMs;
          alpha = Math.max(0, 1 - out/CONFIG.slainteFadeMs);
        }
        if (alpha <= 0) return;
        ctx.save();
        ctx.globalAlpha = alpha;
        ctx.fillStyle = '#fff';
        ctx.textAlign = 'center';
        ctx.textBaseline = 'middle';
        // große Schrift zentriert über der Flüssigkeit
        var fontSize = Math.max(24, Math.floor(canvas.height * 0.12));
        ctx.font = '600 ' + fontSize + 'px "Segoe UI", Arial, sans-serif';
        ctx.shadowColor = 'rgba(255,200,120,0.6)';
        ctx.shadowBlur = 18;
        ctx.fillText(CONFIG.slainteText, canvas.width/2, glass.y + glass.h*0.28);
         ctx.restore();
         ctx.restore();
       }
       }


       function frame(ts){
       function frame(ts){
         if (!t0) { t0 = ts; slainteStart = ts; }
         if (!t0) t0 = ts;
         var t = (ts - t0)/1000;
         var t = (ts - t0)/1000;


         // Hintergrund
         // Hintergrund sanft
         ctx.globalCompositeOperation = 'source-over';
         ctx.globalCompositeOperation = 'source-over';
         ctx.fillStyle = 'rgba(5,10,20,0.2)';
         ctx.fillStyle = 'rgba(5,10,20,0.16)';
         ctx.fillRect(0,0,canvas.width,canvas.height);
         ctx.fillRect(0,0,canvas.width,canvas.height);


         drawGlass();
         drawGlass();
        // Einschenken
        if (pouring){
          var progress = Math.min(1, (ts - t0) / CONFIG.pourDurationMs);
          var eased = 1 - Math.pow(1 - progress, 3); // easeOutCubic
          var startY = glass.y + glass.h*0.98;
          fillTopY = startY + (targetTopY - startY) * eased;
          amp = ampBase * (0.3 + 0.7*eased);
          drawPourStream(t);
          if (progress >= 1) pouring = false;
        } else {
          amp = Math.max(amp * 0.985, ampBase*0.25);
        }
         drawLiquid(t);
         drawLiquid(t);
        drawSlainte(ts);


         // kleiner Randglanz
         // kleiner Randglanz
Zeile 1.079: Zeile 974:


       function startAnim(){
       function startAnim(){
         if (!ctx || (window.matchMedia && window.matchMedia('(prefers-reduced-motion: reduce)').matches)) return;
         if (!ctx || reduce) return;
         if (!setSize()) { setTimeout(startAnim, 50); return; }
         if (!setSize()) { setTimeout(startAnim, 50); return; }
         if (started) return;
         if (started) return;
         started = true; t0=0; pouring = true;
         started = true; t0=0;
         raf = requestAnimationFrame(frame);
         raf = requestAnimationFrame(frame);


Zeile 1.103: Zeile 998:
       function onVis(){ if (document.hidden) stopAnim(false); else startAnim(); }
       function onVis(){ if (document.hidden) stopAnim(false); else startAnim(); }


      // Start
       setTimeout(startAnim, 0);
       setTimeout(startAnim, 0);
       markSeen();
       markSeen();
Abgerufen von „https://ados-wiki.de/wiki/MediaWiki:Common.js“