ADOS Wiki

MediaWiki:Common.js: Unterschied zwischen den Versionen

← Zum vorherigen VersionsunterschiedZum nächsten Versionsunterschied →
Keine Bearbeitungszusammenfassung
Markierung: Manuelle Zurücksetzung
Keine Bearbeitungszusammenfassung
Zeile 739: Zeile 739:
// -------------------------------------
// -------------------------------------


/* Whisky News – Popup (v6)
/* Whisky News Popup mit Slàinte mhath Animation (v6) */
  - News (Titel + Intro + 2 Karten) bleiben erhalten
  - Oben: Canvas mit sanft schwenkendem Whiskyglas
  - Darunter: animierter Trinkspruch „Slàinte mhath“
*/
mw.loader.using(['mediawiki.util','jquery']).then(function(){
mw.loader.using(['mediawiki.util','jquery']).then(function(){
   (function($, mw){
   (function($, mw){
Zeile 750: Zeile 746:
     var CONFIG = {
     var CONFIG = {
       enabled: true,
       enabled: true,
       id: 'wow_mannheim_whisky_news_v6', // Version erhöhen, damit alle es sehen
       id: 'wow_mannheim_whisky_news_v6',
       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>',
      // 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', // TODO: ersetzen
           src: 'https://ados-wiki.de/images/2/2f/South_Islay_Single_Malt_13_year-old_%28Sherry_Octave_Cask_Finish%29.single.jpg',
           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 757:
         },
         },
         {
         {
           src: 'https://ados-wiki.de/images/9/95/Tullibardine_13_year-old_%28Shiraz_Wine_Octave_Cask_Finish%29.single.jpg', // TODO: ersetzen
           src: 'https://ados-wiki.de/images/9/95/Tullibardine_13_year-old_%28Shiraz_Wine_Octave_Cask_Finish%29.single.jpg',
           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 769: Zeile 763:
         }
         }
       ],
       ],
 
       toastText: 'Slàinte mhath',
       // Popup-Steuerung
       dailyLimit: 1,
       dailyLimit: 1,
       escToClose: true,
       escToClose: true,
       clickBackdropToClose: true,
       clickBackdropToClose: true
 
      // Animations-/Text-Optionen
      toastText: 'Slàinte mhath'
     };
     };


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


     // 1×/Tag je Nutzer
     // === LocalStorage: nur 1x pro Tag ===
     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 = (d => 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());
Zeile 791: Zeile 781:


     $(function(){
     $(function(){
       // Overlay + Modal
       // === Popup Grundstruktur ===
       var $overlay = $('<div>', {'class':'mw-popup-overlay'});
       var $overlay = $('<div>', {'class':'mw-popup-overlay'});
       var $modal = $('<div>', {
       var $modal = $('<div>', {'class':'mw-popup-modal','role':'dialog','aria-modal':'true'});
        '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);


      // Trinkspruch (CSS-animiert)
       var $toast = $('<div>', {'class':'mw-slainte-toast'}).text(CONFIG.toastText);
       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 $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
       // === 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){
Zeile 828: Zeile 809:
       });
       });


       // Button
       // === 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);


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


      // === Schließen ===
       function close(){
       function close(){
         stopAnim(true);
         stopAnim(true);
Zeile 852: Zeile 834:
       }
       }


       // ===== Canvas: sanft schwenkendes Whiskyglas =====
       // === Canvas Whiskyglas Animation ===
       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, t0=0, started=false, ro;
       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}, baseFill=0, amp=0;
      var baseFill=0, amp=0;


       function setSize(){
       function setSize(){
Zeile 875: Zeile 856:
       function layout(){
       function layout(){
         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;
         baseFill = glass.y + glass.h*0.58;
         baseFill=glass.y+glass.h*0.58; amp=Math.min(14*dpr,canvas.height*0.03);
        amp = Math.min(14*dpr, canvas.height*0.03);
       }
       }


       function drawGlass(){
       function drawGlass(){
         ctx.save();
         ctx.save();
         ctx.strokeStyle = 'rgba(255,255,255,0.28)';
         ctx.strokeStyle='rgba(255,255,255,0.28)';
         ctx.lineWidth = Math.max(2, 2*dpr);
         ctx.lineWidth=Math.max(2,2*dpr);
         ctx.beginPath();
         ctx.beginPath();
         ctx.moveTo(glass.x+glass.r, glass.y);
         ctx.moveTo(glass.x+glass.r,glass.y);
         ctx.arcTo(glass.x+glass.w, glass.y, glass.x+glass.w, glass.y+glass.h, glass.r);
         ctx.arcTo(glass.x+glass.w,glass.y,glass.x+glass.w,glass.y+glass.h,glass.r);
         ctx.arcTo(glass.x+glass.w, glass.y+glass.h, glass.x, glass.y+glass.h, glass.r);
         ctx.arcTo(glass.x+glass.w,glass.y+glass.h,glass.x,glass.y+glass.h,glass.r);
         ctx.arcTo(glass.x, glass.y+glass.h, glass.x, glass.y, glass.r);
         ctx.arcTo(glass.x,glass.y+glass.h,glass.x,glass.y,glass.r);
         ctx.arcTo(glass.x, glass.y, glass.x+glass.w, glass.y, glass.r);
         ctx.arcTo(glass.x,glass.y,glass.x+glass.w,glass.y,glass.r);
         ctx.closePath();
         ctx.closePath(); ctx.stroke();
        ctx.stroke();
        // 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);
         ctx.quadraticCurveTo(glass.x+glass.w*0.25, glass.y+glass.h*0.05, glass.x+glass.w*0.3, glass.y+glass.h*0.3);
         ctx.quadraticCurveTo(glass.x+glass.w*0.25,glass.y+glass.h*0.05,glass.x+glass.w*0.3,glass.y+glass.h*0.3);
         ctx.strokeStyle = 'rgba(255,255,255,0.18)';
         ctx.strokeStyle='rgba(255,255,255,0.18)'; ctx.stroke(); ctx.restore();
        ctx.stroke();
        ctx.restore();
       }
       }


       function drawLiquid(t){
       function drawLiquid(t){
         var topY = baseFill + Math.sin(t*2.0)*amp*0.25 + Math.sin(t*0.7)*amp*0.15;
         var topY=baseFill+Math.sin(t*2.0)*amp*0.25+Math.sin(t*0.7)*amp*0.15;
 
        // Clip ins Glas
         ctx.save();
         ctx.save();
         ctx.beginPath();
         ctx.beginPath();
         ctx.moveTo(glass.x+glass.r, glass.y);
         ctx.moveTo(glass.x+glass.r,glass.y);
         ctx.arcTo(glass.x+glass.w, glass.y, glass.x+glass.w, glass.y+glass.h, glass.r);
         ctx.arcTo(glass.x+glass.w,glass.y,glass.x+glass.w,glass.y+glass.h,glass.r);
         ctx.arcTo(glass.x+glass.w, glass.y+glass.h, glass.x, glass.y+glass.h, glass.r);
         ctx.arcTo(glass.x+glass.w,glass.y+glass.h,glass.x,glass.y+glass.h,glass.r);
         ctx.arcTo(glass.x, glass.y+glass.h, glass.x, glass.y, glass.r);
         ctx.arcTo(glass.x,glass.y+glass.h,glass.x,glass.y,glass.r);
         ctx.arcTo(glass.x, glass.y, glass.x+glass.w, glass.y, glass.r);
         ctx.arcTo(glass.x,glass.y,glass.x+glass.w,glass.y,glass.r);
         ctx.closePath();
         ctx.closePath(); ctx.clip();
        ctx.clip();
         var grd=ctx.createLinearGradient(0,topY-30*dpr,0,glass.y+glass.h);
 
         grd.addColorStop(0,'rgba(255,190,90,0.96)');
        // Whisky-Farbverlauf
         grd.addColorStop(1,'rgba(170,85,20,0.98)');
         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*3.6) * 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);
         }
         }
         ctx.lineTo(glass.x + glass.w, glass.y + glass.h);
         ctx.lineTo(glass.x+glass.w,glass.y+glass.h);
         ctx.lineTo(glass.x,             glass.y + glass.h);
         ctx.lineTo(glass.x,glass.y+glass.h);
         ctx.closePath();
         ctx.closePath();
         ctx.fillStyle = grd;
         ctx.fillStyle=grd; ctx.fill();
        ctx.fill();
 
        // 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*3.6) * 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);
         }
         }
         ctx.strokeStyle = 'rgba(255,215,120,0.35)';
         ctx.strokeStyle='rgba(255,215,120,0.35)';
         ctx.lineWidth = Math.max(1, 1*dpr);
         ctx.lineWidth=Math.max(1,1*dpr); ctx.stroke();
        ctx.stroke();
 
         ctx.restore();
         ctx.restore();
       }
       }


       function frame(ts){
       function frame(ts){
         if (!t0) t0 = ts;
         if(!t0) t0=ts;
         var t = (ts - t0)/1000;
         var t=(ts-t0)/1000;
 
         ctx.globalCompositeOperation='source-over';
        // Hintergrund sanft
         ctx.fillStyle='rgba(5,10,20,0.16)';
         ctx.globalCompositeOperation = 'source-over';
         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(); drawLiquid(t);
         drawGlass();
        drawLiquid(t);
 
        // kleiner Randglanz
         ctx.save();
         ctx.save();
         ctx.globalCompositeOperation = 'lighter';
         ctx.globalCompositeOperation='lighter';
         ctx.strokeStyle = 'rgba(255,255,255,0.15)';
         ctx.strokeStyle='rgba(255,255,255,0.15)';
         ctx.lineWidth = 1*dpr;
         ctx.lineWidth=1*dpr;
         ctx.beginPath();
         ctx.beginPath();
         ctx.arc(glass.x + glass.w*0.85, glass.y + glass.h*0.15, 10*dpr, 0, Math.PI*2);
         ctx.arc(glass.x+glass.w*0.85,glass.y+glass.h*0.15,10*dpr,0,Math.PI*2);
         ctx.stroke();
         ctx.stroke(); ctx.restore();
        ctx.restore();
         raf=requestAnimationFrame(frame);
 
         raf = requestAnimationFrame(frame);
       }
       }


       function startAnim(){
       function startAnim(){
         if (!ctx || reduce) 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;
         started=true;t0=0;
         raf = requestAnimationFrame(frame);
         raf=requestAnimationFrame(frame);
 
         if('ResizeObserver'in window){
         if ('ResizeObserver' in window) {
           ro=new ResizeObserver(function(){setSize();});
           ro = new ResizeObserver(function(){ setSize(); });
           ro.observe($stage[0]);
           ro.observe($stage[0]);
         } else {
         }else{$(window).on('resize.mwwnews',setSize);}
          $(window).on('resize.mwwnews', setSize);
         document.addEventListener('visibilitychange',onVis);
        }
         document.addEventListener('visibilitychange', onVis);
       }
       }
       function stopAnim(remove){
       function stopAnim(remove){
         if (raf){ cancelAnimationFrame(raf); raf=null; }
         if(raf){cancelAnimationFrame(raf);raf=null;}
         started = false;
         started=false;
         if (remove){
         if(remove){
           if (ro){ ro.disconnect(); ro=null; } else { $(window).off('resize.mwwnews'); }
           if(ro){ro.disconnect();ro=null;}else{$(window).off('resize.mwwnews');}
           document.removeEventListener('visibilitychange', onVis);
           document.removeEventListener('visibilitychange',onVis);
         }
         }
       }
       }
       function onVis(){ if (document.hidden) stopAnim(false); else startAnim(); }
       function onVis(){if(document.hidden)stopAnim(false);else startAnim();}
 
       setTimeout(startAnim,0);
      // Start
       setTimeout(startAnim, 0);
       markSeen();
       markSeen();
     });
     });
   })(jQuery, mw);
   })(jQuery,mw);
});
});
Abgerufen von „https://ados-wiki.de/wiki/MediaWiki:Common.js“