Эхо-контент в той же строке в терминале jQuery

Question

Я просматривал документацию для терминала jQuery, но ничего не нашел. По сути, я пытаюсь повторить следующее:

Вот v0.8.7 должна быть ссылка, но когда я пытаюсь повторить строку, используя .echo(string,{raw:true}) искусство ASCII искажается:

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

Я попытался использовать 2 отдельных эхо-вызова, но номер версии перенесен на новую строку. Как добавить номер версии в конце обложки ASCII без перехода на новую строку?

Вот мой текущий код:

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});

Демонстрация в реальном времени: http://suchmail.eu/Hunpony/djdavid98/cli
(используйте команду ver)

Answer 1

Прочитав ответ@JakeGould, мне удалось найти окончательное решение без необходимости дополнительного 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>')
    }}
);

С использованием finalize упомянутый им вариант, мне удалось добавить какой-то дополнительный HTML к последнему <div> используя jQuery.

Answer 2

Хорошо, это было довольно интересно. В основном jQuery Terminalecho Функция работает только в нескольких различных режимах, которые не смешивают методы в пределах echo вызов.

Но есть способ эффективно делать то, что вы ищете, используя finalize функция обратного вызова, как описано в документации для echo:

finalize - функция обратного вызова с одним аргументом контейнер div

Это ключ. Если вы посмотрите на исходный HTML, который выводится из jQuery Terminal когда это echo контент, который вы можете видеть, это все в основном куча <div> элементы с шириной 100% и ASCII внутри него.

<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>

Поэтому, когда вы пытаетесь echo на следующей строке это:

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

Что происходит, это другое <div style="width: 100%;"> генерируется который сбивает линию вниз. И потому что это raw:true это означает, что его нельзя смешивать с echo над ним.

Но с помощью finalize и действуя на div который содержит ссылку, вы можете сделать это:

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")
         ;
       }
     });

Волшебство - все CSS & jQuery, устанавливающий CSS. Ширина устанавливается в 720px, text-align устанавливается прямо сейчас, а затем margin-top установлен в -1em таким образом, линия выдвигается ровно на 1 строку. Вот скриншот того, как это выглядит с этими настройками:

Так что для всех намерений и целей, это выглядит одинаково. Предостережение этого метода в том, что вы никогда не можете сказать, как браузеры будут вести себя с CSS, как это. Поэтому обязательно протестируйте его в нескольких браузерах. Но если это задыхается, просто настройте CSS, который устанавливается в finalize и у вас должна получиться комбинация, которая хорошо работает во всех браузерах.

Answer 3

Причина, по которой это происходит, заключается в том, что \n в html игнорируется, все пробельные символы заменяются одним пробелом. Чтобы иметь это в одном эхо, это использовать <br /> вместо \n или оберните каждую строку <div>, Вот как работает вставка html, потому что терминал просто добавляет необработанные данные. Другой вариант заключается в использовании finalize, чтобы изменить текстовый текст, как предлагают другие ответы.