Merge pull request #18 from fetus-hina/true-color

extended-color CSI (true color)
drudru · Jun 7, 2015 · 1246b37 · 1246b37
2 parents a5433dd + e47938d
commit 1246b37
Show file tree

Hide file tree

Showing 2 changed files with 89 additions and 5 deletions.
diff --git a/ansi_up.js b/ansi_up.js
@@ -40,7 +40,7 @@
         PALETTE_COLORS;
 
     function Ansi_Up() {
-      this.fg = this.bg = null;
+      this.fg = this.bg = this.fg_truecolor = this.bg_truecolor = null;
       this.bright = 0;
     }
 
@@ -191,7 +191,28 @@
                     }
                   }
                 }
-              // } else if(mode === '2' && num.length >= 3) { // true color (not supported yet)
+              } else if(mode === '2' && nums.length >= 3) { // true color
+                var r = parseInt(nums.shift());
+                var g = parseInt(nums.shift());
+                var b = parseInt(nums.shift());
+                if ((r >= 0 && r <= 255) && (g >= 0 && g <= 255) && (b >= 0 && b <= 255)) {
+                  var color = r + ', ' + g + ', ' + b;
+                  if (!use_classes) {
+                    if (is_foreground) {
+                      self.fg = color;
+                    } else {
+                      self.bg = color;
+                    }
+                  } else {
+                    if (is_foreground) {
+                      self.fg = 'ansi-truecolor';
+                      self.fg_truecolor = color;
+                    } else {
+                      self.bg = 'ansi-truecolor';
+                      self.bg_truecolor = color;
+                    }
+                  }
+                }
               }
             }
           })();
@@ -201,25 +222,46 @@
       if ((self.fg === null) && (self.bg === null)) {
         return orig_txt;
       } else {
-        var styles = classes = [];
+        var styles = [];
+        var classes = [];
+        var data = {};
+        var render_data = function (data) {
+          var fragments = [];
+          var key;
+          for (key in data) {
+            if (data.hasOwnProperty(key)) {
+              fragments.push('data-' + key + '="' + this.escape_for_html(data[key]) + '"');
+            }
+          }
+          return fragments.length > 0 ? ' ' + fragments.join(' ') : '';
+        };
+
         if (self.fg) {
           if (use_classes) {
             classes.push(self.fg + "-fg");
+            if (self.fg_truecolor !== null) {
+              data['ansi-truecolor-fg'] = self.fg_truecolor;
+              self.fg_truecolor = null;
+            }
           } else {
             styles.push("color:rgb(" + self.fg + ")");
           }
         }
         if (self.bg) {
           if (use_classes) {
             classes.push(self.bg + "-bg");
+            if (self.bg_truecolor !== null) {
+              data['ansi-truecolor-bg'] = self.bg_truecolor;
+              self.bg_truecolor = null;
+            }
           } else {
             styles.push("background-color:rgb(" + self.bg + ")");
           }
         }
         if (use_classes) {
-          return "<span class=\"" + classes.join(' ') + "\">" + orig_txt + "</span>";
+          return '<span class="' + classes.join(' ') + '"' + render_data.call(self, data) + '>' + orig_txt + '</span>';
         } else {
-          return "<span style=\"" + styles.join(';') + "\">"  + orig_txt + "</span>";
+          return '<span style="' + styles.join(';') + '"' + render_data.call(self, data) + '>' + orig_txt + '</span>';
         }
       }
     };

diff --git a/test/ansi_up-test.js b/test/ansi_up-test.js
@@ -274,6 +274,27 @@ describe('ansi_up', function() {
           l.should.eql(expected);
         });
       });
+
+      describe('transform extend colors (true color)', function() {
+        it('foreground', function() {
+          var start = "\033[38;2;42;142;242m" + "foo" + "\033[0m";
+          var expected = '<span style="color:rgb(42, 142, 242)">foo</span>';
+          var l = ansi_up.ansi_to_html(start);
+          l.should.eql(expected);
+        });
+        it('background', function() {
+          var start = "\033[48;2;42;142;242m" + "foo" + "\033[0m";
+          var expected = '<span style="background-color:rgb(42, 142, 242)">foo</span>';
+          var l = ansi_up.ansi_to_html(start);
+          l.should.eql(expected);
+        });
+        it('both foreground and background', function() {
+          var start = "\033[38;2;42;142;242;48;2;1;2;3m" + "foo" + "\033[0m";
+          var expected = '<span style="color:rgb(42, 142, 242);background-color:rgb(1, 2, 3)">foo</span>';
+          var l = ansi_up.ansi_to_html(start);
+          l.should.eql(expected);
+        });
+      });
     });
 
     describe('themed colors', function() {
@@ -392,6 +413,27 @@ describe('ansi_up', function() {
           l.should.eql(expected);
         });
       });
+
+      describe('transform extend colors (true color)', function() {
+        it('foreground', function() {
+          var start = "\033[38;2;42;142;242m" + "foo" + "\033[0m";
+          var expected = '<span class="ansi-truecolor-fg" data-ansi-truecolor-fg="42, 142, 242">foo</span>';
+          var l = ansi_up.ansi_to_html(start, {use_classes: true});
+          l.should.eql(expected);
+        });
+        it('background', function() {
+          var start = "\033[48;2;42;142;242m" + "foo" + "\033[0m";
+          var expected = '<span class="ansi-truecolor-bg" data-ansi-truecolor-bg="42, 142, 242">foo</span>';
+          var l = ansi_up.ansi_to_html(start, {use_classes: true});
+          l.should.eql(expected);
+        });
+        it('both foreground and background', function() {
+          var start = "\033[38;2;42;142;242;48;2;1;2;3m" + "foo" + "\033[0m";
+          var expected = '<span class="ansi-truecolor-fg ansi-truecolor-bg" data-ansi-truecolor-fg="42, 142, 242" data-ansi-truecolor-bg="1, 2, 3">foo</span>';
+          var l = ansi_up.ansi_to_html(start, {use_classes: true});
+          l.should.eql(expected);
+        });
+      });
     });
     describe('ignore unsupported CSI', function() {
       it('should correctly convert a string similar to CSI', function() {