JQuery Terminal typing animation not displaying special HTML characters or class styles until after animation completes

Question

I'm using code from the JQuery Terminal examples to emulate typed animation in a console window. I can get the animation to work as intended, but during the course of the animation special HTML characters do not display until after the animation completes. For example, while the animation is running, the console renders '\' instead of ''

This problem also applies to styles assigned to the class of any div that's being animated. The styles do not show up until after the animation is complete.

Below is the code used to animate (adapted from the JQuery Terminal examples page):

var anim = false;
    function typed(finish_typing) {
        return function(term, message, delay, finished, classname) {
            anim = true;
            var prompt = term.get_prompt();
            var c = 0;
            if (message.length > 0) {
                term.set_prompt('');
                var interval = setInterval(function() {
                    term.insert(message[c++]);
                    if (c == message.length) {
                        clearInterval(interval);
                        // execute in next interval
                        setTimeout(function() {
                            // swap command with prompt
                            finish_typing(term, message, prompt, classname);
                            anim = false
                            finish && finish();
                        }, delay);
                    }
                }, delay);
            }
        };
    }

var typed_message = typed(function(term, message, prompt, classname) {
    if (typeof classname === "undefined") { classname = "default"; }
    term.set_command('');
    term.echo(message, {
        finalize: function(div) { div.addClass(classname); }});
    term.set_prompt(prompt);
});

And an example of how it's being called:

E.match(/^\s*ping\s*$/i)?
    typed_message(N, "PONG", 10, function(){finished = true;}, "pong"):

In this case, styles applied to the "pong" class that's assigned to the div output by typed_message do not display until after the text is finished typing.

Is there a way to go about having the styles or special characters display while the animation is running?

it seems that you're using old code, that use just `message[c++]`, it was fixed with code that check if the character is html entity. — jcubic, Sep 24 '17 at 17:57
Ah okay, neat! I was able to get it to render the special html with that code. That appears to have been a separate issue from the other problem though, where the styles from the class don't apply until after the animation is complete. Do you know if there's a way to get the style to render while the animation is occurring? — Barrel Fist, Sep 24 '17 at 19:33
This also does not appear to work with `echo` formatting, for instance `typed_message(N, "[[u;#fff;]message]" + "\n", 10, function(){finished = true;}` it displays the `[[u;#fff;]message]` until the animation completes. — Barrel Fist, Sep 24 '17 at 20:19
yes you need to use `$.terminal.substring` function to keep formatting, will create snippet for you in answer. — jcubic, Sep 25 '17 at 06:55

jcubic · Accepted Answer · 2017-09-25T17:38:49.250

Slightly modified typed animation using set_prompt instead of insert, also $.terminal.substring and length (that last one need to go to $.terminal.length).

var anim = false;
function typed(finish_typing) {
    return function(term, message, delay, finish) {
        anim = true;
        var prompt = term.get_prompt();
        var c = 0;
        if (message.length > 0) {
            term.set_prompt('');
            var new_prompt = '';
            var interval = setInterval(function() {
                // handle html entities like &amp;
                var chr = $.terminal.substring(message, c, c+1);
                new_prompt += chr;
                term.set_prompt(new_prompt);
                c++;
                if (c == length(message)) {
                    clearInterval(interval);
                    // execute in next interval
                    setTimeout(function() {
                        // swap command with prompt
                        finish_typing(term, message, prompt);
                        anim = false
                        finish && finish();
                    }, delay);
                }
            }, delay);
        }
    };
}

function length(string) {
   return $('<span>' + $.terminal.strip(string) + '</span>').text().length;
}

var typed_message = typed(function(term, message, prompt) {
    term.set_command('');
    term.echo(message);
    term.set_prompt(prompt);
});
$('body').terminal(function(command, term) {
  typed_message(term, '[[;#fff;;class_name]hello]', 400);
});

body {
  min-height: 100vh;
  margin: 0;
}
.class_name {
  text-decoration: underline;
}

<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.terminal/1.8.0/js/jquery.terminal.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/jquery.terminal/1.8.0/css/jquery.terminal.min.css" rel="stylesheet"/>

The example on the site was updated accordingly.

Looks like this works! I can assign classes to spans output by this code and it shows up while animating, however I now have a new problem where it does not render `'\n'` for new lines until after the animation is finished. I seemed to have this working before, not sure exactly what broke it. — Barrel Fist, Sep 25 '17 at 19:53
@BarrelFist it seems that there is a bug when you add newline at the end in prompt and if each character have it's own formatting, you get newline after first character, is this your problem? — jcubic, Sep 26 '17 at 08:12
@BarrelFist I've fixed that one in [devel branch on github](https://github.com/jcubic/jquery.terminal/tree/devel) — jcubic, Sep 26 '17 at 08:42
Sorry, I might not have explained well. After using this new code, everything works correctly except `\n`, which seems to be ignored until after the animation is complete. Perhaps it is because \ characters are now being interpreted as normal html instead of how they were before? I am not sure, but the result is that I get very long lines while the typing animation is running, and line breaks only appear once it's finished. — Barrel Fist, Sep 28 '17 at 01:48
@BarrelFist does this work for you? https://codepen.io/jcubic/pen/LxgJQG it use devel version from github. — jcubic, Sep 28 '17 at 19:09

JQuery Terminal typing animation not displaying special HTML characters or class styles until after animation completes

1 Answers1