MediaWiki:Common.js: Unterschied zwischen den Versionen
Admin (Diskussion | Beiträge) Keine Bearbeitungszusammenfassung |
Admin (Diskussion | Beiträge) Keine Bearbeitungszusammenfassung |
||
| Zeile 397: | Zeile 397: | ||
/* Fireworks Popup ( | /* Fireworks Popup (v3) – animierter "ADOS"-Schriftzug mit Feuerwerk */ | ||
mw.loader.using(['mediawiki.util','jquery']).then(function(){ | mw.loader.using(['mediawiki.util','jquery']).then(function(){ | ||
(function($, mw){ | (function($, mw){ | ||
| Zeile 404: | Zeile 404: | ||
var CONFIG = { | var CONFIG = { | ||
enabled: true, | enabled: true, | ||
id: ' | id: 'fireworks_popup_v3', | ||
title: 'Neu: Abfüllungen bewerten 🎉', | title: 'Neu: Abfüllungen bewerten 🎉', | ||
messageHTML: | messageHTML: | ||
'<p>Ab sofort kannst du im Wiki <strong>jede Abfüllung bewerten</strong> – ' + | '<p>Ab sofort kannst du im Wiki <strong>jede Abfüllung bewerten</strong> – ' + | ||
'teile deine Meinung und hilf anderen bei der Auswahl!</p>', | 'teile deine Meinung und hilf anderen bei der Auswahl!</p>', | ||
cta: { text: 'Jetzt bewerten', url: 'https://ados-wiki.de/index.php?title= | cta: { text: 'Jetzt bewerten', url: 'https://ados-wiki.de/index.php?title=Test2' }, | ||
showOnNamespaces: 'all', | showOnNamespaces: 'all', | ||
dailyLimit: 1, | dailyLimit: 1, | ||
| Zeile 472: | Zeile 472: | ||
} | } | ||
// ==== Fireworks | // ==== Fireworks + animiertes ADOS ==== | ||
var canvas = $canvas[0], ctx = canvas.getContext('2d'); | var canvas = $canvas[0], ctx = canvas.getContext('2d'); | ||
var dpr = Math.max(1, window.devicePixelRatio || 1); | var dpr = Math.max(1, window.devicePixelRatio || 1); | ||
| Zeile 506: | Zeile 506: | ||
} | } | ||
function | // animierter Schriftzug | ||
var adosPoints = []; | |||
function createTextPoints(){ | |||
var tempCanvas = document.createElement('canvas'); | |||
var tctx = tempCanvas.getContext('2d'); | |||
tempCanvas.width = w; tempCanvas.height = h; | |||
var | 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(); | |||
} | |||
} | } | ||
| Zeile 526: | Zeile 547: | ||
ctx.globalCompositeOperation = 'lighter'; | ctx.globalCompositeOperation = 'lighter'; | ||
var next = []; | var next = []; | ||
for (var i=0;i<particles.length;i++){ | for (var i=0;i<particles.length;i++){ | ||
| Zeile 544: | Zeile 566: | ||
particles = next; | particles = next; | ||
var elapsed = t - startTime; | var elapsed = t - startTime; | ||
if (elapsed < | if (elapsed < 4000) { | ||
drawADOSParticles(); | |||
} | |||
// | // Feuerwerk nach 2s starten | ||
if (elapsed > | if (elapsed > 2000 && Math.random() < 0.08) { | ||
var bx = rand(w*0.15, w*0.85); | var bx = rand(w*0.15, w*0.85); | ||
var by = rand(h*0.2, h*0.6); | var by = rand(h*0.2, h*0.6); | ||
| Zeile 561: | Zeile 584: | ||
if (reduceMotion) return; | if (reduceMotion) return; | ||
resize(); | resize(); | ||
createTextPoints(); | |||
startTime = performance.now(); | startTime = performance.now(); | ||
if (!raf) raf = requestAnimationFrame(tick); | if (!raf) raf = requestAnimationFrame(tick); | ||
window.addEventListener('resize', resize); | window.addEventListener('resize', resize); | ||