Changing greeting based on screensize

Question

I was wondering how I can change my greeting based on the screensize. Currently it doesn't look nice on smaller screens.

I'm not adept at jQuery/JS so I used an if statement to check the width and change the greeting based on that. The problem with this is that it only does so when the page loads. I'd like it to change each time the size updates.

In the demo at the bottom of this website the greeting changes based on the width of the screen.

Any help?

Have a nice day,

Rover

Answer 1

The simplest way is to add onInit and echo function that will be called on each redraw that happen on resize:

term.echo(function() {
    return new Array(this.cols()).fill('-').join('');
});

this will create line that is always full width of the terminal. If you prepared multiple greetings, then you can just create function with if statements and return proper string with the greeting you want, this is how default greetings is created.

this inside the function will be the same as terminal instance and cols is method that return number of characters per line.

So the whole code (if you don't have login) should look like this:

$('body').terminal(..., {
    greetings: false, // disable default greetings
    onInit: function() {
        this.echo(function() {
            return new Array(this.cols()).fill('-').join('');
        });
    }
});

if you use login you need to use onAfterLogin instead of onInit if you want same behavior as greetings.