progressChar String to graphic elements

[weilinzung]

Is any ways to make the progressChar: string be graphic elements? Like progressChar: '<span class='graphic'></div>'

thanks, Wei

[weilinzung]

Also the width is not responsive, would it possible make it refresh the width when resize the browser width?

[ines]

Interesting question! What exactly are you trying to do?

Under the hood, Termynal currently takes the progressChar, multiplies it by the progressLength and then renders it character by character. This is why using a HTML string for the progress character currently doesn't work.

If you want to use a custom character that's not an emoji or other unicode character, the simplest solution would be to use an icon font, e.g. FontAwesome or an entirely custom one built with a tool like IcoMoon (which even lets you upload your own SVGs). Then use the character that's mapped to your icon in the font as the progressChar, and apply the font to the progress via CSS. (Don't forget to add a fallback font so the "100%" will be rendered correctly.)

Here's a little CodePen demo with examples: https://codepen.io/ines/pen/c799d3780bf0b7c1a9ccb0ccd47bfdca

Alternatively, you could also edit termynal.js and replace the progress method with something like this (untested, but should work):

async progress(line) {
    const progressLength = line.getAttribute(`${this.pfx}-progressLength`) || this.progressLength;
    const progressChar = line.getAttribute(`${this.pfx}-progressChar`) || this.progressChar;
    line.innerHTML = ''; // use innerHTML instead of textContent
    this.container.appendChild(line);

    for (let i = 1; i < progressLength + 1; i++) { // iterate projectLength times
        await this._wait(this.typeDelay);
        const percent = Math.round(i / chars.length * 100);
        // use innerHTML and n times the character (i.e. the HTML string)
        line.innerHTML = `${progressChar * i} ${percent}%`;
    }
}

This will take whatever you set as the progressChar, including raw HTML and add it to the line's innerHTML. (As I mentioned in #1, I'm thinking about changing Termynal to write to the innerHTML instead of the textContent in general to make this kind of stuff easier. But there are always trade-offs.)

Edit: Just saw your question about the width – do you have an example of the responsiveness problem?

By default, the max-width of the Termynal container is set to 100%, which means it should respond to the window's width, and expand in height if necessary (since the height is set as min-height). In some cases, it also helps to add white-space: pre-wrap; word-wrap: break-word; (to make sure lines and long strings wrap on small screens). Maybe it does make sense to at least add an onResize callback to give the user more control over this.

[weilinzung]

cool and if you could change to write innerHTML or give an option for that would be great. I am trying to use a CSS element instead of using type or text. screenshot here: https://i.imgur.com/HTBqHb3.png

I would try some texts or create some graphics as fontello for now see if help.

And for the responsive width thing, I find out I can add width: 100% !important could fix it now.

anyway, this is a great JS, thanks for response so quick.

[weilinzung]

Other question is, does it come with any events that could let us fire other function after all the Terminal Animation finished?

thanks!

[weilinzung]

Any updates on the event feature?

[nicolascribbles]

Here to 1+ events