|
|
| Zeile 988: |
Zeile 988: |
| } | | } |
| })(); | | })(); |
|
| |
|
| |
|
| |
| // ===================PopUp für Diagramm=========================
| |
|
| |
|
| |
| /* ADOS – Chart-News Popup (v1)
| |
| Info-Popup: Abfüllungen pro Jahr / pro Serie + Gesamt
| |
| - Oben Canvas-Animation (wachsende Balken + Sparkles)
| |
| - 1× pro Tag je Nutzer
| |
| */
| |
| mw.loader.using(['mediawiki.util','jquery']).then(function(){
| |
| (function($, mw){
| |
| 'use strict';
| |
|
| |
| var CONFIG = {
| |
| enabled: true,
| |
| id: 'ados_chart_news_v1', // Bei Änderungen hochzählen, damit alle es wieder sehen
| |
| title: 'Neu: Abfüllungen im Diagramm 📊',
| |
| introHTML:
| |
| '<p>Ab sofort werden <strong>alle Abfüllungen</strong> in übersichtlichen Diagrammen festgehalten – ' +
| |
| 'sie zeigen <strong>pro Jahr</strong> und <strong>pro Serie</strong> wie viele erschienen sind ' +
| |
| 'und auch <strong>wie viele insgesamt</strong>.</p>',
| |
| cta: { text: 'Zu den Diagrammen', url: 'https://ados-wiki.de/wiki/Abf%C3%BCllungen_pro_Jahr' },
| |
|
| |
| // Anzeige
| |
| showOnNamespaces: 'all',
| |
| dailyLimit: 1,
| |
| escToClose: true,
| |
| clickBackdropToClose: true
| |
| };
| |
|
| |
| if (!CONFIG.enabled) return;
| |
|
| |
| // Namespace-Filter (falls gewünscht)
| |
| var ns = mw.config.get('wgNamespaceNumber');
| |
| if (CONFIG.showOnNamespaces !== 'all' &&
| |
| $.isArray(CONFIG.showOnNamespaces) &&
| |
| $.inArray(ns, CONFIG.showOnNamespaces) === -1) return;
| |
|
| |
| // 1×/Tag
| |
| 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 = (function(d){ return 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':'ados-chartnews-title'
| |
| });
| |
|
| |
| // Canvas-Bühne (Chart-Animation)
| |
| var $stage = $('<div>', {'class':'mw-fw-canvas-wrap'});
| |
| var $canvas = $('<canvas>', {'class':'mw-fw-canvas','aria-hidden':'true'});
| |
| $stage.append($canvas);
| |
|
| |
| // Titel / Intro
| |
| var $title = $('<h2>', { id:'ados-chartnews-title' }).text(CONFIG.title);
| |
| var $intro = $('<div>', {'class':'mw-popup-content'}).html(CONFIG.introHTML);
| |
|
| |
| // Buttons
| |
| var $btnRow = $('<div>', {'class':'mw-popup-button-row'});
| |
| if (CONFIG.cta && CONFIG.cta.url) {
| |
| $btnRow.append($('<a>', {
| |
| 'class':'mw-popup-wiki-button',
| |
| 'href': CONFIG.cta.url,
| |
| 'target': '_blank',
| |
| 'rel': 'noopener'
| |
| }).text(CONFIG.cta.text || 'Mehr'));
| |
| }
| |
| var $ok = $('<button>', {'class':'mw-popup-close', type:'button'}).text('OK');
| |
| $btnRow.append($ok);
| |
|
| |
| // Zusammenbauen
| |
| $modal.append($stage, $title, $intro, $btnRow);
| |
| $('body').append($overlay, $modal);
| |
|
| |
| // Schließen
| |
| function close(){
| |
| stopAnim(true);
| |
| markSeen();
| |
| $overlay.remove(); $modal.remove();
| |
| $(document).off('keydown.adoschart');
| |
| }
| |
| if (CONFIG.clickBackdropToClose) $overlay.on('click', close);
| |
| $ok.on('click', close);
| |
| if (CONFIG.escToClose){
| |
| $(document).on('keydown.adoschart', function(e){
| |
| var k = e.key || e.keyCode;
| |
| if (k==='Escape' || k==='Esc' || k===27){ e.preventDefault(); close(); }
| |
| });
| |
| }
| |
|
| |
| // ===== Canvas-Animation: wachsende Balken + Sparkles =====
| |
| 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, started=false, t0=0, ro;
| |
|
| |
| // Dummy-Daten für die Animation (nur visuell, echte Charts sind auf der Zielseite)
| |
| var bars = [
| |
| { label:'2021', value: 12, color:'#5aa3ff' },
| |
| { label:'2022', value: 18, color:'#7ccb88' },
| |
| { label:'2023', value: 26, color:'#f7b267' },
| |
| { label:'2024', value: 31, color:'#e07a5f' },
| |
| { label:'2025', value: 38, color:'#c084fc' }
| |
| ];
| |
| var maxVal = 40; // für „Gesamt“/Skalierung
| |
| var sparkles = [];
| |
|
| |
| function setSize(){
| |
| var rect = $stage[0].getBoundingClientRect();
| |
| if (rect.width <= 0 || rect.height <= 0) return false;
| |
| var newDpr = Math.max(1, window.devicePixelRatio || 1);
| |
| if (cw!==rect.width || ch!==rect.height || dpr!==newDpr){
| |
| dpr=newDpr; cw=rect.width; ch=rect.height;
| |
| canvas.width = Math.floor(cw*dpr);
| |
| canvas.height = Math.floor(ch*dpr);
| |
| canvas.style.width = cw+'px';
| |
| canvas.style.height = ch+'px';
| |
| }
| |
| return true;
| |
| }
| |
|
| |
| function lerp(a,b,t){ return a + (b-a)*t; }
| |
| function easeOutCubic(x){ return 1 - Math.pow(1 - x, 3); }
| |
|
| |
| function addSparkle(x,y){
| |
| if (reduce) return;
| |
| for (var i=0;i<6;i++){
| |
| sparkles.push({
| |
| x:x, y:y,
| |
| vx:(Math.random()*2-1)*0.8*dpr,
| |
| vy:(Math.random()*2-1)*0.8*dpr - 0.6*dpr,
| |
| life: 36 + Math.random()*18,
| |
| age: 0
| |
| });
| |
| }
| |
| }
| |
|
| |
| function frame(ts){
| |
| if (!t0) t0 = ts;
| |
| var t = (ts - t0)/1000;
| |
|
| |
| // Hintergrund
| |
| ctx.globalCompositeOperation = 'source-over';
| |
| ctx.fillStyle = 'rgba(5,10,20,0.14)';
| |
| ctx.fillRect(0,0,canvas.width,canvas.height);
| |
|
| |
| // Chart-Bereich
| |
| var pad = 18*dpr;
| |
| var gx = pad*2, gy = pad, gw = canvas.width - pad*3, gh = canvas.height - pad*3;
| |
| // Achse
| |
| ctx.strokeStyle = 'rgba(255,255,255,0.22)';
| |
| ctx.lineWidth = Math.max(1, 1*dpr);
| |
| ctx.beginPath();
| |
| ctx.moveTo(gx, gy+gh);
| |
| ctx.lineTo(gx+gw, gy+gh);
| |
| ctx.stroke();
| |
|
| |
| // Balken animiert hochfahren
| |
| var n = bars.length;
| |
| var gap = gw * 0.08 / n;
| |
| var bw = (gw - gap*(n+1)) / n;
| |
|
| |
| for (var i=0;i<n;i++){
| |
| var delay = i * 120; // leicht versetzt starten
| |
| var p = Math.max(0, (ts - t0 - delay)/900);
| |
| var prog = Math.min(1, easeOutCubic(p));
| |
| var targetH = (bars[i].value / maxVal) * gh;
| |
| var hNow = targetH * prog;
| |
|
| |
| var bx = gx + gap + i*(bw + gap);
| |
| var by = gy + gh - hNow;
| |
|
| |
| // Balken
| |
| var grad = ctx.createLinearGradient(bx, by, bx, gy+gh);
| |
| grad.addColorStop(0, bars[i].color);
| |
| grad.addColorStop(1, 'rgba(255,255,255,0.06)');
| |
| ctx.fillStyle = grad;
| |
| ctx.fillRect(bx, by, bw, hNow);
| |
|
| |
| // Glanzkante
| |
| ctx.fillStyle = 'rgba(255,255,255,0.18)';
| |
| ctx.fillRect(bx + bw*0.72, by, Math.max(1, bw*0.08), hNow);
| |
|
| |
| // Sparkles am Balkenende
| |
| if (prog > 0.95 && Math.random()<0.12){ addSparkle(bx + bw*0.5, by - 6*dpr); }
| |
|
| |
| // Label
| |
| ctx.fillStyle = 'rgba(255,255,255,0.8)';
| |
| ctx.font = Math.max(10*dpr, 12) + 'px "Segoe UI", Arial';
| |
| ctx.textAlign = 'center';
| |
| ctx.fillText(bars[i].label, Math.floor(bx + bw/2), Math.floor(gy+gh + 14*dpr));
| |
| }
| |
|
| |
| // Sparkles bewegen/zeichnen
| |
| var next = [];
| |
| ctx.globalCompositeOperation = 'lighter';
| |
| for (var s=0;s<sparkles.length;s++){
| |
| var sp = sparkles[s];
| |
| sp.age++;
| |
| sp.vy += 0.02*dpr;
| |
| sp.x += sp.vx;
| |
| sp.y += sp.vy;
| |
| var alpha = Math.max(0, 1 - sp.age/sp.life);
| |
| if (alpha>0){
| |
| ctx.beginPath();
| |
| ctx.fillStyle = 'rgba(255,230,160,'+alpha.toFixed(2)+')';
| |
| ctx.arc(sp.x, sp.y, Math.max(0.8, 2.2*alpha)*dpr, 0, Math.PI*2);
| |
| ctx.fill();
| |
| next.push(sp);
| |
| }
| |
| }
| |
| sparkles = next;
| |
|
| |
| 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);
| |
|
| |
| // ResizeObserver
| |
| if ('ResizeObserver' in window) {
| |
| ro = new ResizeObserver(function(){ setSize(); });
| |
| ro.observe($stage[0]);
| |
| } else {
| |
| $(window).on('resize.adoschart', setSize);
| |
| }
| |
| }
| |
| function stopAnim(remove){
| |
| if (raf){ cancelAnimationFrame(raf); raf=null; }
| |
| started = false;
| |
| if (remove){
| |
| if (ro){ ro.disconnect(); ro=null; } else { $(window).off('resize.adoschart'); }
| |
| }
| |
| }
| |
|
| |
| // Start
| |
| setTimeout(startAnim, 0);
| |
| markSeen();
| |
| });
| |
| })(jQuery, mw);
| |
| });
| |
|
| |
| // ==========================Scan==================================
| |
|
| |
| mw.loader.using('mediawiki.util').then(function () {
| |
| if (mw.config.get('wgPageName') !== 'LabelScan') return;
| |
| mw.loader.load('/index.php?title=MediaWiki:Gadget-LabelScan.js&action=raw&ctype=text/javascript');
| |
| mw.loader.load('/index.php?title=MediaWiki:Gadget-LabelScan.css&action=raw&ctype=text/css', 'text/css');
| |
| });
| |