Echo content on the same line in jQuery Terminal

Question

I've been looking through the documentation for jQuery Terminal but found nothing. Basically, I'm trying to echo the following:

Here v0.8.7 should be a link, but when I try to echo the string using .echo(string,{raw:true}) the ASCII art gets distorted:

term.echo(
    '      __ _____                     ________                              __\n'+
    '     / // _  /__ __ _____ ___ __ _/__  ___/__ ___ ______ __ __  __ ___  / /\n'+
    ' __ / // // // // // _  // _// // / / // _  // _//     // //  \\/ // _ \\/ /\n'+
    '/  / // // // // // ___// / / // / / // ___// / / / / // // /\\  // // / /__\n'+
    '\\___//____ \\\\___//____//_/ _\\_  / /_//____//_/ /_/_/_//_//_/ /_/ \\__\\_\\___/\n'+
    '          \\/              /____/                                     <a href="http://terminal.jcubic.pl/" target="_blank" title="jQueryTerminal Website">v'+term.version()+'</a>',
    {raw:true}
);

I tried using 2 separate echo calls, but the version number is pushed to a new line. How can I add the version number at the end of the ASCII art without it going into a new line?

Here is my current code:

term.echo(
    '      __ _____                     ________                              __\n'+
    '     / // _  /__ __ _____ ___ __ _/__  ___/__ ___ ______ __ __  __ ___  / /\n'+
    ' __ / // // // // // _  // _// // / / // _  // _//     // //  \\/ // _ \\/ /\n'+
    '/  / // // // // // ___// / / // / / // ___// / / / / // // /\\  // // / /__\n'+
    '\\___//____ \\\\___//____//_/ _\\_  / /_//____//_/ /_/ /_//_//_/ /_/ \\__\\_\\___/\n'+
    '          \\/              /____/                                     '
);
term.echo('<a href="http://terminal.jcubic.pl/" target="_blank" title="jQueryTerminal Website">v'+term.version()+'</a>',{raw:true});

Live demo: http://suchmail.eu/Hunpony/djdavid98/cli
(use the command ver)

Answer 1

Okay this was quite interesting. Basically the jQuery Terminal echo function only operates in a few different modes that don’t mix methods within an echo call.

But there is a way to effectively do what you are looking for by using the finalize callback function as explained in the documentation for echo:

finalize — which is callback function with one argument the div container

That is key. If you look at the source HTML that is output from jQuery Terminal when it echo’s content you can see it is all basically a pile of <div> elements with a width of 100% and the ASCII inside of it.

<div style="width: 100%;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;__&nbsp;_____&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;________&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;__</div>

So when you try to echo on the next line line this:

term.echo('<a href="http://terminal.jcubic.pl/" target="_blank" title="jQueryTerminal Website">v'+term.version()+'</a>',{raw:true});

What happens is another <div style="width: 100%;"> is generated which knocks the line down. And because it is raw:true it means that it cannot be mixed with the echo above it.

But by using finalize and acting on the div that contains the link you can do this:

term.echo('<a href="http://terminal.jcubic.pl/" target="_blank" title="jQueryTerminal Website">v'+term.version()+'</a>',
     { raw:true,
       finalize: function(div) {
          div
         .css("width", "720px")
         .css("text-align", "right")
         .css("margin-top", "-1em")
         ;
       }
     });

The magic is all CSS and jQuery setting the CSS. The width gets set to 720px, the text-align is set to the right now and then the margin-top is set to -1em so the line is pushed up exactly 1 line. Here is a screenshot of what it looks like with these adjustments in place:

So for all intents and purposes, it visually looks the same. The caveat of this method is you can never tell how browsers will behave to CSS like this. So be sure to test it in a few browsers. But if it chokes, just tweak the CSS that gets set in finalize and you should be able to come up with a combo that works well across browsers.

Answer 2

After reading through @Giacomo1968's answer, I managed to find the ultimate solution without any need for extra CSS.

term.echo(
    '      __ _____                     ________                              __\n'+
    '     / // _  /__ __ _____ ___ __ _/__  ___/__ ___ ______ __ __  __ ___  / /\n'+
    ' __ / // // // // // _  // _// // / / // _  // _//     // //  \\/ // _ \\/ /\n'+
    '/  / // // // // // ___// / / // / / // ___// / / / / // // /\\  // // / /__\n'+
    '\\___//____ \\\\___//____//_/ _\\_  / /_//____//_/ /_/_/_//_//_/ /_/ \\__\\_\\___/\n'+
    '          \\/              /____/                                           '.replace(new RegExp(" {" + (term.version().length+1) + "}$"), ''),
    {finalize: function($div){
        $div.children().last().append('<a href="http://terminal.jcubic.pl/" target="_blank" title="jQueryTerminal Website">v'+term.version()+'</a>')
    }}
);

Using the finalize option mentioned by him, I was able to add some additional HTML to the last <div> using jQuery.

Answer 3

The reason why this is happening is because \n in html is ignored, all whitespace characters are replaced by one space. In order to have this in one echo is to use <br /> instead of \n or wrap each line with <div>. This is how inserting html work, because terminal just append raw data. The other option is to use finalize, to alter text text, as other answers suggest.