|
|
| Zeile 738: |
Zeile 738: |
|
| |
|
| // ------------------------------------- | | // ------------------------------------- |
|
| |
| /* Whisky News – Popup (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(){
| |
| (function($, mw){
| |
| 'use strict';
| |
|
| |
| var CONFIG = {
| |
| enabled: true,
| |
| id: 'wow_mannheim_whisky_news_v6', // Version erhöhen, damit alle es sehen
| |
| 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>',
| |
|
| |
| // Karten (Bilder optional – URLs ggf. ersetzen)
| |
| 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
| |
| 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)',
| |
| cta: 'Zur South Islay Abfüllung'
| |
| },
| |
| {
| |
| 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',
| |
| link: 'https://ados-wiki.de/wiki/Tullibardine_13_year-old',
| |
| cta: 'Zur Tullibardine Abfüllung'
| |
| }
| |
| ],
| |
|
| |
| // Popup-Steuerung
| |
| dailyLimit: 1,
| |
| escToClose: true,
| |
| clickBackdropToClose: true,
| |
|
| |
| // Animations-/Text-Optionen
| |
| toastText: 'Slàinte mhath'
| |
| };
| |
|
| |
| if (!CONFIG.enabled) return;
| |
|
| |
| // 1×/Tag je Nutzer
| |
| var isAnon = (mw.config.get('wgUserName') === null);
| |
| function LSget(k){ try { return localStorage.getItem(k); } catch(e){ return null; } }
| |
| function LSset(k,v){ try { localStorage.setItem(k, v); } catch(e){} }
| |
| 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());
| |
| if (LSget(key) === today) return;
| |
| function markSeen(){ LSset(key, today); }
| |
|
| |
| $(function(){
| |
| // Overlay + Modal
| |
| var $overlay = $('<div>', {'class':'mw-popup-overlay'});
| |
| 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 $canvas = $('<canvas>', {'class':'mw-fw-canvas','aria-hidden':'true'});
| |
| $stage.append($canvas);
| |
|
| |
| // 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);
| |
|
| |
| // Karten
| |
| var $cards = $('<div>', {'class':'mw-wnews-cards'});
| |
| CONFIG.images.forEach(function(img){
| |
| 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(
| |
| $thumb,
| |
| $('<div>', {'class':'mw-wnews-meta'}).append(
| |
| $('<div>', {'class':'mw-wnews-title', text: img.alt}),
| |
| $('<div>', {'class':'mw-wnews-cta', text: img.cta || 'Mehr ansehen'})
| |
| )
| |
| );
| |
| $cards.append($card);
| |
| });
| |
|
| |
| // Button
| |
| var $btnRow = $('<div>', {'class':'mw-popup-button-row'});
| |
| var $ok = $('<button>', {'class':'mw-popup-close', type:'button'}).text('OK');
| |
| $btnRow.append($ok);
| |
|
| |
| // zusammenbauen
| |
| $modal.append($stage, $toast, $title, $intro, $cards, $btnRow);
| |
| $('body').append($overlay, $modal);
| |
|
| |
| function close(){
| |
| stopAnim(true);
| |
| markSeen();
| |
| $overlay.remove(); $modal.remove();
| |
| $(document).off('keydown.mwwnews visibilitychange');
| |
| }
| |
| if (CONFIG.clickBackdropToClose) $overlay.on('click', close);
| |
| $ok.on('click', close);
| |
| if (CONFIG.escToClose){
| |
| $(document).on('keydown.mwwnews', function(e){
| |
| var k = e.key || e.keyCode;
| |
| if (k==='Escape' || k==='Esc' || k===27){ e.preventDefault(); close(); }
| |
| });
| |
| }
| |
|
| |
| // ===== Canvas: sanft schwenkendes Whiskyglas =====
| |
| var canvas = $canvas[0], ctx = canvas.getContext && canvas.getContext('2d');
| |
| 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 glass = {x:0,y:0,w:0,h:0,r:0};
| |
| var baseFill=0, amp=0;
| |
|
| |
| function setSize(){
| |
| var r = $stage[0].getBoundingClientRect();
| |
| if (r.width <= 0 || r.height <= 0) return false;
| |
| var newDpr = Math.max(1, window.devicePixelRatio || 1);
| |
| if (cw!==r.width || ch!==r.height || dpr!==newDpr){
| |
| dpr=newDpr; cw=r.width; ch=r.height;
| |
| canvas.width = Math.floor(cw*dpr);
| |
| canvas.height = Math.floor(ch*dpr);
| |
| canvas.style.width = cw+'px';
| |
| canvas.style.height = ch+'px';
| |
| layout();
| |
| }
| |
| return true;
| |
| }
| |
| function layout(){
| |
| 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.r = Math.min(glass.w,glass.h)*0.08;
| |
| baseFill = glass.y + glass.h*0.58;
| |
| amp = Math.min(14*dpr, canvas.height*0.03);
| |
| }
| |
|
| |
| function drawGlass(){
| |
| ctx.save();
| |
| ctx.strokeStyle = 'rgba(255,255,255,0.28)';
| |
| ctx.lineWidth = Math.max(2, 2*dpr);
| |
| ctx.beginPath();
| |
| 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.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.x+glass.w, glass.y, glass.r);
| |
| ctx.closePath();
| |
| ctx.stroke();
| |
| // Glanzkante
| |
| ctx.beginPath();
| |
| 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.strokeStyle = 'rgba(255,255,255,0.18)';
| |
| ctx.stroke();
| |
| ctx.restore();
| |
| }
| |
|
| |
| function drawLiquid(t){
| |
| 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.beginPath();
| |
| 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.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.x+glass.w, glass.y, glass.r);
| |
| ctx.closePath();
| |
| ctx.clip();
| |
|
| |
| // Whisky-Farbverlauf
| |
| 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.moveTo(glass.x, topY);
| |
| for (var x=0; x<=glass.w; x+=6*dpr){
| |
| var y = topY + Math.sin((x*0.055) + t*3.6) * amp * 0.22;
| |
| ctx.lineTo(glass.x + x, y);
| |
| }
| |
| ctx.lineTo(glass.x + glass.w, glass.y + glass.h);
| |
| ctx.lineTo(glass.x, glass.y + glass.h);
| |
| ctx.closePath();
| |
| ctx.fillStyle = grd;
| |
| ctx.fill();
| |
|
| |
| // feiner Lichtsaum
| |
| ctx.beginPath();
| |
| ctx.moveTo(glass.x, topY);
| |
| for (var x2=0; x2<=glass.w; x2+=6*dpr){
| |
| var y2 = topY + Math.sin((x2*0.055) + t*3.6) * amp * 0.22;
| |
| ctx.lineTo(glass.x + x2, y2);
| |
| }
| |
| ctx.strokeStyle = 'rgba(255,215,120,0.35)';
| |
| ctx.lineWidth = Math.max(1, 1*dpr);
| |
| ctx.stroke();
| |
|
| |
| ctx.restore();
| |
| }
| |
|
| |
| function frame(ts){
| |
| if (!t0) t0 = ts;
| |
| var t = (ts - t0)/1000;
| |
|
| |
| // Hintergrund sanft
| |
| ctx.globalCompositeOperation = 'source-over';
| |
| ctx.fillStyle = 'rgba(5,10,20,0.16)';
| |
| ctx.fillRect(0,0,canvas.width,canvas.height);
| |
|
| |
| drawGlass();
| |
| drawLiquid(t);
| |
|
| |
| // kleiner Randglanz
| |
| ctx.save();
| |
| ctx.globalCompositeOperation = 'lighter';
| |
| ctx.strokeStyle = 'rgba(255,255,255,0.15)';
| |
| ctx.lineWidth = 1*dpr;
| |
| ctx.beginPath();
| |
| ctx.arc(glass.x + glass.w*0.85, glass.y + glass.h*0.15, 10*dpr, 0, Math.PI*2);
| |
| ctx.stroke();
| |
| ctx.restore();
| |
|
| |
| raf = requestAnimationFrame(frame);
| |
| }
| |
|
| |
| function startAnim(){
| |
| if (!ctx || reduce) return;
| |
| if (!setSize()) { setTimeout(startAnim, 50); return; }
| |
| if (started) return;
| |
| started = true; t0=0;
| |
| raf = requestAnimationFrame(frame);
| |
|
| |
| if ('ResizeObserver' in window) {
| |
| ro = new ResizeObserver(function(){ setSize(); });
| |
| ro.observe($stage[0]);
| |
| } else {
| |
| $(window).on('resize.mwwnews', setSize);
| |
| }
| |
| document.addEventListener('visibilitychange', onVis);
| |
| }
| |
| function stopAnim(remove){
| |
| if (raf){ cancelAnimationFrame(raf); raf=null; }
| |
| started = false;
| |
| if (remove){
| |
| if (ro){ ro.disconnect(); ro=null; } else { $(window).off('resize.mwwnews'); }
| |
| document.removeEventListener('visibilitychange', onVis);
| |
| }
| |
| }
| |
| function onVis(){ if (document.hidden) stopAnim(false); else startAnim(); }
| |
|
| |
| // Start
| |
| setTimeout(startAnim, 0);
| |
| markSeen();
| |
| });
| |
| })(jQuery, mw);
| |
| });
| |