Okay then

butterfly/__init__.py

@@ -14,7 +14,7 @@
 #
 # You should have received a copy of the GNU General Public License
 # along with this program.  If not, see <http://www.gnu.org/licenses/>.
-__version__ = '1.5.10'
+__version__ = '2.0.0'
 
 
 import os

butterfly/static/main.js

@@ -142,7 +142,7 @@
 
   Terminal = (function() {
     function Terminal(parent, out1, ctl1) {
-      var a, div, group, i, px;
+      var div, px;
       this.parent = parent;
       this.out = out1;
       this.ctl = ctl1 != null ? ctl1 : function() {};
@@ -164,21 +164,6 @@
       this.rows = Math.floor(window.innerHeight / this.char_size.height);
       px = window.innerHeight % this.char_size.height;
       this.element.style['padding-bottom'] = px + "px";
-      this.element.removeChild(div);
-      this.html = {};
-      i = Math.max(this.rows - 1, 0);
-      group = this.document.createElement('div');
-      group.className = 'group';
-      group.innerHTML = ((function() {
-        var k, ref, results;
-        results = [];
-        for (a = k = 0, ref = i; 0 <= ref ? k <= ref : k >= ref; a = 0 <= ref ? ++k : --k) {
-          results.push('<div class="line"> </div>');
-        }
-        return results;
-      })()).join('');
-      this.element.appendChild(group);
-      this.children = Array.prototype.slice.call(document.querySelectorAll('.line'));
       this.scrollback = 1000000;
       this.buff_size = 100000;
       this.visualBell = 100;
@@ -411,15 +396,9 @@
       })(this);
       getCoords = (function(_this) {
         return function(ev) {
-          var el, h, w, x, y;
+          var h, w, x, y;
           x = ev.pageX;
-          y = ev.pageY;
-          el = _this.element;
-          while (el && el !== _this.document.documentElement) {
-            x -= el.offsetLeft;
-            y -= el.offsetTop;
-            el = "offsetParent" in el ? el.offsetParent : el.parentNode;
-          }
+          y = ev.pageY - window.scrollY;
           w = _this.element.clientWidth;
           h = window.innerHeight;
           x = Math.ceil((x / w) * _this.cols);
@@ -491,7 +470,7 @@
     };
 
     Terminal.prototype.refresh = function(force) {
-      var attr, ch, classes, cursor, data, dirty, fg, group, html, i, j, k, l, len, len1, len2, len3, line, lines, m, new_out, o, out, q, ref, ref1, ref2, ref3, ref4, ref5, ref6, styles, u, x;
+      var attr, ch, classes, cursor, data, dirty, fg, group, i, j, k, len, len1, len2, len3, line, lines, m, new_out, o, out, q, ref, ref1, ref2, ref3, ref4, ref5, styles, u, x;
       if (force == null) {
         force = false;
       }
@@ -516,6 +495,10 @@
         attr = this.cloneAttr(this.defAttr);
         for (i = o = 0, ref3 = this.cols - 1; 0 <= ref3 ? o <= ref3 : o >= ref3; i = 0 <= ref3 ? ++o : --o) {
           data = line[i];
+          if (data.html) {
+            out += data.html;
+            continue;
+          }
           ch = data.ch;
           if (!this.equalAttr(data, attr)) {
             if (!this.equalAttr(attr, this.defAttr)) {
@@ -632,13 +615,6 @@
         }
         this.children = Array.prototype.slice.call(lines, -this.rows);
       }
-      ref6 = this.html;
-      for (l in ref6) {
-        html = ref6[l];
-        this.children[l].innerHTML = '';
-        this.children[l].appendChild(html);
-      }
-      this.html = {};
       return this.native_scroll_to();
     };
 
@@ -720,7 +696,7 @@
     };
 
     Terminal.prototype.write = function(data) {
-      var ch, content, cs, html, i, l, pt, ref, ref1, type, valid;
+      var attr, ch, content, cs, i, l, pt, ref, ref1, type, valid;
       i = 0;
       l = data.length;
       while (i < l) {
@@ -1146,17 +1122,15 @@
                         console.log("HTML escapes are disabled");
                         break;
                       }
-                      html = document.createElement('div');
-                      html.classList.add('inline-html');
-                      html.innerHTML = content;
-                      this.html[this.y] = html;
+                      attr = this.cloneAttr(this.curAttr);
+                      attr.html = "<div class=\"inline-html\">" + content + "</div>";
+                      this.screen[this.y][0][this.x] = attr;
                       this.screen[this.y][1] = true;
                       break;
                     case "IMAGE":
-                      html = document.createElement('img');
-                      html.classList.add('inline-image');
-                      html.src = "data:image;base64," + content;
-                      this.html[this.y] = html;
+                      attr = this.cloneAttr(this.curAttr);
+                      attr.html = "<img class=\"inline-image\" src=\"data:image;base64," + content + "\" />";
+                      this.screen[this.y][0][this.x] = attr;
                       this.screen[this.y][1] = true;
                       break;
                     case "PROMPT":

coffees/term.coffee

@@ -73,15 +73,6 @@ class Terminal
     @rows = Math.floor(window.innerHeight / @char_size.height)
     px = window.innerHeight % @char_size.height
     @element.style['padding-bottom'] = "#{px}px"
-    @element.removeChild div
-
-    @html = {}
-    i = Math.max @rows - 1, 0
-    group = @document.createElement('div')
-    group.className = 'group'
-    group.innerHTML = ('<div class="line"> </div>' for a in [0..i]).join ''
-    @element.appendChild group
-    @children = Array.prototype.slice.call document.querySelectorAll('.line')
 
     @scrollback = 1000000
     @buff_size = 100000
@@ -331,15 +322,7 @@ class Terminal
     # mouse coordinates measured in cols/rows
     getCoords = (ev) =>
       x = ev.pageX
-      y = ev.pageY
-
-      # should probably check offsetParent
-      # but this is more portable
-      el = @element
-      while el and el isnt @document.documentElement
-        x -= el.offsetLeft
-        y -= el.offsetTop
-        el = if "offsetParent" of el then el.offsetParent else el.parentNode
+      y = ev.pageY - window.scrollY
 
       # convert to cols/rows
       w = @element.clientWidth
@@ -409,6 +392,10 @@ class Terminal
       attr = @cloneAttr @defAttr
       for i in [0..@cols - 1]
         data = line[i]
+        if data.html
+          out += data.html
+          continue
+
         ch = data.ch
         unless @equalAttr data, attr
           out += "</span>" unless @equalAttr attr, @defAttr
@@ -501,10 +488,6 @@ class Terminal
       @children = Array.prototype.slice.call(
         lines, -@rows)
 
-    for l, html of @html
-      @children[l].innerHTML = ''
-      @children[l].appendChild(html)
-    @html = {}
     @native_scroll_to()
 
   _cursorBlink: ->
@@ -1055,17 +1038,18 @@ class Terminal
                       console.log "HTML escapes are disabled"
                       break
 
-                    html = document.createElement 'div'
-                    html.classList.add 'inline-html'
-                    html.innerHTML = content
-                    @html[@y] = html
+                    attr = @cloneAttr @curAttr
+                    attr.html = (
+                      "<div class=\"inline-html\">#{content}</div>")
+                    @screen[@y][0][@x] = attr
                     @screen[@y][1] = true
 
                   when "IMAGE"
-                    html = document.createElement 'img'
-                    html.classList.add 'inline-image'
-                    html.src = "data:image;base64," + content
-                    @html[@y] = html
+                    attr = @cloneAttr @curAttr
+                    attr.html = (
+                      "<img class=\"inline-image\" src=\"data:image;base64,#{
+                        content}\" />")
+                    @screen[@y][0][@x] = attr
                     @screen[@y][1] = true
 
                   when "PROMPT"

package.json

@@ -1,6 +1,6 @@
 {
   "name": "butterfly",
-  "version": "1.5.10",
+  "version": "2.0.0",
   "description": "A sleek web based terminal emulator",
   "repository": {
     "type": "git",