MediaWiki:Common.js

Note: After publishing, you may have to bypass your browser's cache to see the changes.

Firefox / Safari: Hold Shift while clicking Reload, or press either Ctrl-F5 or Ctrl-R (⌘-R on a Mac)
Google Chrome: Press Ctrl-Shift-R (⌘-Shift-R on a Mac)
Internet Explorer / Edge: Hold Ctrl while clicking Refresh, or press Ctrl-F5
Opera: Press Ctrl-F5.

function countdownToChristmas() {
    var now = new Date();
    var targetDate = new Date(now.getFullYear(), 11, 25); // Dec 25 of current year

    if (now > targetDate) {
        targetDate.setFullYear(targetDate.getFullYear() + 1);
    }

    function updateCountdown() {
        var now = new Date();
        var diff = targetDate - now;

        if (diff <= 0) {
            document.getElementById('xmas-timer').innerText = "Merry Christmas!";
            return;
        }

        var days = Math.floor(diff / (1000 * 60 * 60 * 24));
        var hours = Math.floor((diff / (1000 * 60 * 60)) % 24);
        var minutes = Math.floor((diff / (1000 * 60)) % 60);
        var seconds = Math.floor((diff / 1000) % 60);

        document.getElementById('xmas-timer').innerText =
            "Countdown to Christmas: " + days + "d " + hours + "h " + minutes + "m " + seconds + "s";
    }

    updateCountdown();
    setInterval(updateCountdown, 1000);
}

$(document).ready(countdownToChristmas);


mw.loader.using(['jquery'], function () {
    $(function () {
        var canvas = document.getElementById("confetti-canvas");
        if (!canvas) return;

        canvas.width = window.innerWidth;
        canvas.height = window.innerHeight;
        var ctx = canvas.getContext("2d");

        var pieces = [], count = 150;
        for (var i = 0; i < count; i++) {
            pieces.push({
                x: Math.random() * canvas.width,
                y: Math.random() * canvas.height - canvas.height,
                r: Math.random() * 20 + 10,
                d: Math.random() * 10 + 10,
                color: "hsl(" + Math.random() * 360 + ", 100%, 50%)",
                tilt: Math.random() * 10 - 10,
                tiltAngle: 0
            });
        }

        function draw() {
            ctx.clearRect(0, 0, canvas.width, canvas.height);
            for (var i = 0; i < count; i++) {
                var p = pieces[i];
                ctx.beginPath();
                ctx.lineWidth = p.r / 2;
                ctx.strokeStyle = p.color;
                ctx.moveTo(p.x + p.tilt + p.r / 4, p.y);
                ctx.lineTo(p.x + p.tilt, p.y + p.tilt + p.r / 4);
                ctx.stroke();
            }

            update();
            requestAnimationFrame(draw);
        }

        function update() {
            for (var i = 0; i < count; i++) {
                var p = pieces[i];
                p.y += Math.cos(p.d / 2) + 1 + p.r / 5;
                p.tiltAngle += 0.1;
                p.tilt = Math.sin(p.tiltAngle - i / 3) * 15;
                if (p.y > canvas.height) {
                    p.y = -20;
                    p.x = Math.random() * canvas.width;
                }
            }
        }

        draw();
    });
});

mw.loader.using(['jquery'], function () {
    $(function () {
        var count = 50;
        for (var i = 0; i < count; i++) {
            var flake = $('<div class="snowflake">❄</div>').css({
                position: "fixed",
                top: "-2em",
                left: Math.random() * 100 + "%",
                fontSize: (Math.random() * 10 + 10) + "px",
                color: "#fff",
                opacity: Math.random(),
                zIndex: 9999,
                pointerEvents: "none",
                animation: `fall ${Math.random() * 5 + 5}s linear infinite`
            });
            $("body").append(flake);
        }

        $("<style>").text(`
            @keyframes fall {
                0% { transform: translateY(0); }
                100% { transform: translateY(100vh); }
            }
        `).appendTo("head");
    });
});