Add "restart" and "faster" button to animation in termynal

[RWallan]

Inspired on FastAPI documentation I noticed that there are two buttons very useful and elegant. One button to restarts the animation and another button to makes the animation go faster.

See the examples:

Fast button

Restart button

And this is the termynal from the Termynal plugin:

Does it make sense to implement these buttons in the project?

[daxartio]

Of course!

I will try to add the features. I also will be glade to approve your PR to the project!

[RWallan]

I don't have much experience in JS and CSS, but I noticed some modifications in termynal.js within the FastAPI repository.

async start() {
        this.addFinish()
        await this._wait(this.startDelay);

        for (let line of this.lines) {
            const type = line.getAttribute(this.pfx);
            const delay = line.getAttribute(`${this.pfx}-delay`) || this.lineDelay;

            if (type == 'input') {
                line.setAttribute(`${this.pfx}-cursor`, this.cursor);
                await this.type(line);
                await this._wait(delay);
            }

            else if (type == 'progress') {
                await this.progress(line);
                await this._wait(delay);
            }

            else {
                this.container.appendChild(line);
                await this._wait(delay);
            }

            line.removeAttribute(`${this.pfx}-cursor`);
        }
        this.addRestart()
        this.finishElement.style.visibility = 'hidden'
        this.lineDelay = this.originalLineDelay
        this.typeDelay = this.originalTypeDelay
        this.startDelay = this.originalStartDelay
    }

    generateRestart() {
        const restart = document.createElement('a')
        restart.onclick = (e) => {
            e.preventDefault()
            this.container.innerHTML = ''
            this.init()
        }
        restart.href = '#'
        restart.setAttribute('data-terminal-control', '')
        restart.innerHTML = "restart ↻"
        return restart
    }

    generateFinish() {
        const finish = document.createElement('a')
        finish.onclick = (e) => {
            e.preventDefault()
            this.lineDelay = 0
            this.typeDelay = 0
            this.startDelay = 0
        }
        finish.href = '#'
        finish.setAttribute('data-terminal-control', '')
        finish.innerHTML = "fast →"
        this.finishElement = finish
        return finish
    }

    addRestart() {
        const restart = this.generateRestart()
        this.container.appendChild(restart)
    }

    addFinish() {
        const finish = this.generateFinish()
        this.container.appendChild(finish)
    }

I believe these modifications are responsible for creating the buttons. However, I am not sure how to properly implement this JS to make it work correctly.

Nonetheless, I hope this information is helpful.

[daxartio]

Added in v0.3.0