termynal
termynal copied to clipboard
progressChar String to graphic elements
Is any ways to make the progressChar: string
be graphic elements? Like progressChar: '<span class='graphic'></div>'
thanks, Wei
Also the width is not responsive, would it possible make it refresh the width when resize the browser width?
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.
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.
Other question is, does it come with any events
that could let us fire other function after all the Terminal Animation
finished?
thanks!
Any updates on the event
feature?
Here to 1+ events