component

[egfx]

This library needs an api or something like a jQuery component. When it's ready I'd be thrilled to try it out!

https://news.ycombinator.com/item?id=39574654

[Einenlum]

Hi, thanks for your contribution!

Are you looking for something like a Web Component? Something like this?

class HumanReplay extends HTMLElement {
    constructor() {
        super();
        this.values = [{"op":"a","v":"T","t":0},{"op":"a","v":"h","t":119},{"op":"a","v":"i","t":197},{"op":"a","v":"s","t":306},{"op":"a","v":" ","t":378},{"op":"a","v":"i","t":501},{"op":"a","v":"s","t":621},{"op":"a","v":" ","t":692},{"op":"a","v":"a","t":852},{"op":"a","v":" ","t":937},{"op":"a","v":"s","t":1098},{"op":"a","v":"i","t":1199},{"op":"a","v":"m","t":1837},{"op":"a","v":"p","t":1977},{"op":"a","v":"l","t":2066},{"op":"a","v":"e","t":2152},{"op":"a","v":" ","t":2300},{"op":"a","v":"t","t":2386},{"op":"a","v":"e","t":2475},{"op":"a","v":"s","t":2548},{"op":"a","v":"t","t":2626},{"op":"a","v":".","t":2674}];
        this.interval = null;
    }

    connectedCallback() {
        const printingStart = new Date();

        this.interval = setInterval(() => {
            const timePassed = new Date() - printingStart;

            const value = this.values.shift();

            if (!value) {
                clearInterval(this.interval);

                return;
            }

            if (value.t > timePassed) {
                this.values.unshift(value);

                return;
            }

            switch (value.op) {
                case 'a':
                    this.textContent = this.textContent + value.v;
                    break;
                case 'd':
                    this.textContent = this.textContent.slice(0, -1);
                    break;
                default:
                    this.textContent = value.v;
            }
        }, 20);
    }

    disconnectedCallback() {
        clearInterval(this.interval);
    }
}

customElements.define('human-replay', HumanReplay);

<!-- in the HTML file: -->
<human-replay></human-replay>

[Einenlum]

This has been added to https://einenlum.github.io/human-replay/

[egfx]

yeah, as I mentioned this would work much better as a jQuery plugin. You should be able to attach it to an input element, text element and to a div using content editable. Right now, it's unclear how to use this as a library to get the values filled in for the way you type it out. There is still a lot of manual work involved if you want to do this.

[Einenlum]

Oooh, ok! Sorry, I misunderstood your question/request. The goal of this project had never been to provide the behaviour of the GitHub page (to show a user an input and to reproduce it on the page). The goal is to provide an easy way for a developer to type something and have a super easy way to show a text exactly how they typed it on some website. A usecase would be to show on a website a header typed exactly as you want it to be shown.

But I could indeed consider building a project so that it's easy to entirely reproduce on a website (the input + preview). I don't think I saw any request regarding this but I will think about it! Thanks for your contribution.

I reopen this and will give you an update about this. Meanwhile, the code is accessible on this repo if you need to dig into it.