MediaWiki:KennethsParoxysmFlowerHelmet.js

$(function() {
    // Restrict to certain article. TO-DO: Edit to page-Kenneths_Paroxysm_Flower_Helmet.
    if ($("body").hasClass("page-Flying_Clown") || $("body").hasClass("page-User_As8D")) {
        
        // TO-DO:
        // - Add effect from https://codepen.io/soulwire/pen/mErPAK
        // - Add contained frame
        
        // ——————————————————————————————————————————————————
        // TextScramble
        // ——————————————————————————————————————————————————
        
        function TextScramble(el) {
            this.el = el;
            this.chars = '!<>-_\\/[]{}—=+*^?#________';
            this.update = this.update.bind(this);
            this.setText = setText;
            this.update = update;
            this.randomChar = randomChar;
        }
        
        function setText(newText) {
            var oldText = this.el.innerText;
            var length = Math.max(oldText.length, newText.length);
            var promise = new Promise(function(resolve) { this.resolve = resolve; });
            this.queue = [];
            for (var i = 0; i < length; i++) {
                var from = oldText[i] || '';
                var to = newText[i] || '';
                var start = Math.floor(Math.random() * 40);
                var end = start + Math.floor(Math.random() * 40);
                this.queue.push({ from, to, start, end });
            }
            cancelAnimationFrame(this.frameRequest);
            this.frame = 0;
            this.update();
            return promise;
        }
        
        function update() {
            var output = '';
            var complete = 0;
            for (var i = 0, n = this.queue.length; i < n; i++) {
                let { from, to, start, end, char } = this.queue[i];
                if (this.frame >= end) {
                    complete++;
                    output += to;
                } else if (this.frame >= start) {
                    if (!char || Math.random() < 0.28) {
                        char = this.randomChar();
                        this.queue[i].char = char;
                    }
                    output += `<span class="dud">${char}</span>`;
                } else {
                    output += from;
                }
            }
            this.el.innerHTML = output;
            if (complete === this.queue.length) {
                this.resolve();
            } else {
                this.frameRequest = requestAnimationFrame(this.update);
                this.frame++;
            }
        }
        
        function randomChar() {
            return this.chars[Math.floor(Math.random() * this.chars.length)];
        }
    
        $(".demo-text, .glitch-text").each(function() {
            var lines = [];
            for (var i = 0; i < 10; i++) {
                if ($(this).attr("data-line" + i) !== undefined)
                    lines.push($(this).attr("data-line" + i));
            }
            
            var fx = new TextScramble(this);
            var counter = 0;
            
            var next = function() {
                fx.setText(lines[counter]).then(function() {
                    setTimeout(next, 800);
                });
                counter = (counter + 1) % lines.length;
            };
            next();
        });
    }
});