fixes and improvements to ANSI Art rendering #622

Additional add support for blinking + handle print of Control points
jcubic · Sep 28, 2020 · 44a6e07 · 44a6e07
1 parent 16fb260
commit 44a6e07
Show file tree

Hide file tree

Showing 16 changed files with 310 additions and 236 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,4 +1,6 @@
-## 2.18.4
+## 2.19.0
+### Features
+* add support blinking blink ANSI escape (unix_formatting)
 ### Bugfix
 * fix prism when page have color set on span
 * fix visible textarea when global css set background image

diff --git a/__tests__/__snapshots__/terminal.spec.js.snap b/__tests__/__snapshots__/terminal.spec.js.snap
diff --git a/__tests__/terminal.spec.js b/__tests__/terminal.spec.js
@@ -526,15 +526,13 @@ describe('Terminal utils', function() {
         var ansi_string = '\x1b[38;5;12mHello\x1b[2;31;46mFoo\x1b[1;3;4;32;45mB[[sb;;]a]r\x1b[0m\x1b[7mBaz\x1b[0;48;2;255;255;0;38;2;0;100;0mQuux\x1b[m';
         it('should convert ansi to terminal formatting', function() {
             var string = $.terminal.from_ansi(ansi_string);
-            expect(string).toEqual('[[;#5555FF;]Hello][[;#640000;#0AA]Foo][[biu;#44D544;#A0A]'+
-                                   'B[[sb;;]a]r][[;#000;#AAA]Baz][[;#006400;#ffff00]Quux]');
+            expect(string).toMatchSnapshot();
         });
         it('should convert ansi to terminal formatting and escape the remaining brackets', function() {
             var string = $.terminal.from_ansi(ansi_string, {
                 unixFormattingEscapeBrackets: true
             });
-            expect(string).toEqual('[[;#5555FF;]Hello][[;#640000;#0AA]Foo][[biu;#44D544;#A0A]'+
-                                   'B&#91;&#91;sb;;&#93;a&#93;r][[;#000;#AAA]Baz][[;#006400;#ffff00]Quux]');
+            expect(string).toMatchSnapshot();
         });
         it('should return uncahnged string', function() {
             var input = 'foo bar';

diff --git a/css/jquery.terminal-2.18.3.css b/css/jquery.terminal-2.18.3.css
@@ -12,7 +12,7 @@
  * Copyright (c) 2011-2020 Jakub Jankiewicz <https://jcubic.pl/me>
  * Released under the MIT license
  *
- * Date: Wed, 09 Sep 2020 08:40:30 +0000
+ * Date: Mon, 28 Sep 2020 17:55:31 +0000
  */
 .terminal .terminal-output .format, .cmd .format,
 .cmd-prompt, .cmd-prompt div {
@@ -984,3 +984,17 @@ terminal .terminal-output > div {
 .cmd .token {
     --original-color: var(--color);
 }
+.terminal .terminal-blink, .cmd .terminal-blink {
+    animation: terminal-ansi-blink 1s steps(2, start) infinite;
+    -webkit-animation: terminal-ansi-blink 1s steps(2, start) infinite;
+}
+@keyframes terminal-ansi-blink {
+    to {
+        color: var(--background);
+    }
+}
+@-webkit-keyframes terminal-ansi-blink {
+    to {
+        color: var(--background);
+     }
+}
diff --git a/css/jquery.terminal-2.18.3.min.css b/css/jquery.terminal-2.18.3.min.css
diff --git a/css/jquery.terminal-src.css b/css/jquery.terminal-src.css
@@ -984,3 +984,17 @@ terminal .terminal-output > div {
 .cmd .token {
     --original-color: var(--color);
 }
+.terminal .terminal-blink, .cmd .terminal-blink {
+    animation: terminal-ansi-blink 1s steps(2, start) infinite;
+    -webkit-animation: terminal-ansi-blink 1s steps(2, start) infinite;
+}
+@keyframes terminal-ansi-blink {
+    to {
+        color: var(--background);
+    }
+}
+@-webkit-keyframes terminal-ansi-blink {
+    to {
+        color: var(--background);
+     }
+}
diff --git a/css/jquery.terminal.css b/css/jquery.terminal.css
@@ -12,7 +12,7 @@
  * Copyright (c) 2011-2020 Jakub Jankiewicz <https://jcubic.pl/me>
  * Released under the MIT license
  *
- * Date: Wed, 09 Sep 2020 08:40:30 +0000
+ * Date: Mon, 28 Sep 2020 17:55:31 +0000
  */
 .terminal .terminal-output .format, .cmd .format,
 .cmd-prompt, .cmd-prompt div {
@@ -984,3 +984,17 @@ terminal .terminal-output > div {
 .cmd .token {
     --original-color: var(--color);
 }
+.terminal .terminal-blink, .cmd .terminal-blink {
+    animation: terminal-ansi-blink 1s steps(2, start) infinite;
+    -webkit-animation: terminal-ansi-blink 1s steps(2, start) infinite;
+}
+@keyframes terminal-ansi-blink {
+    to {
+        color: var(--background);
+    }
+}
+@-webkit-keyframes terminal-ansi-blink {
+    to {
+        color: var(--background);
+     }
+}
diff --git a/css/jquery.terminal.min.css b/css/jquery.terminal.min.css
diff --git a/css/jquery.terminal.min.css.map b/css/jquery.terminal.min.css.map
diff --git a/js/jquery.terminal-2.18.3.js b/js/jquery.terminal-2.18.3.js
@@ -41,7 +41,7 @@
  *
  * broken image by Sophia Bai from the Noun Project (CC-BY)
  *
- * Date: Sat, 26 Sep 2020 15:51:24 +0000
+ * Date: Mon, 28 Sep 2020 17:55:30 +0000
  */
 /* global define, Map */
 /* eslint-disable */
@@ -4471,7 +4471,7 @@
     // -------------------------------------------------------------------------
     $.terminal = {
         version: 'DEV',
-        date: 'Sat, 26 Sep 2020 15:51:24 +0000',
+        date: 'Mon, 28 Sep 2020 17:55:30 +0000',
         // colors from https://www.w3.org/wiki/CSS/Properties/color/keywords
         color_names: [
             'transparent', 'currentcolor', 'black', 'silver', 'gray', 'white',
@@ -5520,7 +5520,10 @@
                     }
                 }
                 if ($.terminal.valid_color(background)) {
-                    style_str += 'background-color:' + background + ';';
+                    style_str += [
+                        'background-color:' + background,
+                        '--background:' + background
+                    ].join(';') + ';';
                 }
                 var data = clean_data(data_text, text);
                 var extra = extra_css(text, settings);

diff --git a/js/jquery.terminal-2.18.3.min.js b/js/jquery.terminal-2.18.3.min.js
diff --git a/js/jquery.terminal-src.js b/js/jquery.terminal-src.js
@@ -5520,7 +5520,10 @@
                     }
                 }
                 if ($.terminal.valid_color(background)) {
-                    style_str += 'background-color:' + background + ';';
+                    style_str += [
+                        'background-color:' + background,
+                        '--background:' + background
+                    ].join(';') + ';';
                 }
                 var data = clean_data(data_text, text);
                 var extra = extra_css(text, settings);

diff --git a/js/jquery.terminal.js b/js/jquery.terminal.js
@@ -41,7 +41,7 @@
  *
  * broken image by Sophia Bai from the Noun Project (CC-BY)
  *
- * Date: Sat, 26 Sep 2020 15:51:24 +0000
+ * Date: Mon, 28 Sep 2020 17:55:30 +0000
  */
 /* global define, Map */
 /* eslint-disable */
@@ -4471,7 +4471,7 @@
     // -------------------------------------------------------------------------
     $.terminal = {
         version: 'DEV',
-        date: 'Sat, 26 Sep 2020 15:51:24 +0000',
+        date: 'Mon, 28 Sep 2020 17:55:30 +0000',
         // colors from https://www.w3.org/wiki/CSS/Properties/color/keywords
         color_names: [
             'transparent', 'currentcolor', 'black', 'silver', 'gray', 'white',
@@ -5520,7 +5520,10 @@
                     }
                 }
                 if ($.terminal.valid_color(background)) {
-                    style_str += 'background-color:' + background + ';';
+                    style_str += [
+                        'background-color:' + background,
+                        '--background:' + background
+                    ].join(';') + ';';
                 }
                 var data = clean_data(data_text, text);
                 var extra = extra_css(text, settings);

diff --git a/js/jquery.terminal.min.js b/js/jquery.terminal.min.js
diff --git a/js/jquery.terminal.min.js.map b/js/jquery.terminal.min.js.map
diff --git a/js/unix_formatting.js b/js/unix_formatting.js
@@ -54,6 +54,7 @@
         factory(root.jQuery);
     }
 })(function($) {
+    var DEBUG = false;
     /* eslint-disable */
     /* istanbul ignore next */
     function warn(str) {
@@ -699,7 +700,7 @@
             white: '#818181'
         },
         bold: {
-            black: '#444',
+            black: '#000',
             red: '#F55',
             green: '#44D544',
             yellow: '#FF5',
@@ -1011,8 +1012,7 @@
 
             49: 'transparent' // default background
         };
-        function format_ansi(controls/*code*/, state) {
-            //var controls = code.split(';');
+        function format_ansi(controls, state, ansi_art) {
             var num;
             var styles = [];
             var output_color = '';
@@ -1045,6 +1045,11 @@
                     case 5:
                         if (_ex_color || _ex_background) {
                             _process_8bit = true;
+                        } else if (ansi_art) {
+                            state.bold = true;
+                            styles.push('b');
+                        } else {
+                            state.blink = true;
                         }
                         break;
                     case 38:
@@ -1065,13 +1070,11 @@
                         state.reverse = true;
                         break;
                     default:
-                        if (controls[1] !== '5') {
-                            if (color_list[num]) {
-                                output_color = color_list[num];
-                            }
-                            if (background_list[num]) {
-                                output_background = background_list[num];
-                            }
+                        if (color_list[num]) {
+                            output_color = color_list[num];
+                        }
+                        if (background_list[num]) {
+                            output_background = background_list[num];
                         }
                 }
             }
@@ -1164,10 +1167,13 @@
                 } else if (output_background === 'transparent') {
                     background = output_background;
                 } else {
-                    background = $.terminal.ansi_colors.normal[output_background];
+                    background = colors[output_background];
                 }
             }
             var ret = [styles.join(''), color, background];
+            if (state.blink) {
+                ret.push('terminal-blink');
+            }
             return ret;
         }
         // -------------------------------------------------------------------------------
@@ -1176,8 +1182,11 @@
             var settings = $.extend({
                 unixFormattingEscapeBrackets: false,
                 position: 0,
+                unixFormattingAnsiArt: false,
                 ansiParser: {}
             }, options);
+            var ansi_art = settings.unixFormattingAnsiArt;
+            // if there are SAUCE record if something after end of file
             input = input.replace(/\x1A.*/, '');
             input = input.replace(/\r?\n?\x1b\[A\x1b\[[0-9]+C/g, '');
             input = $.terminal.unescape_brackets(input);
@@ -1237,8 +1246,14 @@
             //      https://unix.stackexchange.com/a/611344/1806
             var cp_437_control = {
                 0x00: ' ',
-                0x0F: '*'
+                0x0F: '*',
+                0x12: '↕',
+                0x18: '↑',
+                0x19: '↓',
+                0x11: '◄',
+                0x10: '█'
             };
+            var characters = 'qwertyuiopasdfghjklzxcvbnm';
             var parser_events = {
                 cursor: {x: 0, y: 0},
                 result: [],
@@ -1255,8 +1270,12 @@
                         }
                     } else if (code === 9) {
                         print.call(this, '\t');
-                    } else if (code in cp_437_control) {
+                    } else if (ansi_art && code in cp_437_control) {
                         print.call(this, cp_437_control[code]);
+                    } else if (DEBUG) {
+                        var mod = code % characters.length;
+                        var char = characters[mod];
+                        print.call(this, char);
                     }
                     if (!this.result[this.cursor.y]) {
                         this.result[this.cursor.y] = '';
@@ -1298,7 +1317,7 @@
                             this.cursor.x = Math.min(params[1] || 1, COLS) - 1;
                             break;
                         case 'm':
-                            code = format_ansi(params, this.state);
+                            code = format_ansi(params, this.state, ansi_art);
                             var empty = params.length === 1 && params[0] === 0;
                             if (inside) {
                                 if (empty) {