Initial naive implementation of smooth scroll

butterfly/static/ext.js

@@ -401,6 +401,39 @@
     return sel.modify('extend', 'forward', 'character');
   });
 
+  document.addEventListener('DOMContentLoaded', function() {
+    var req;
+    return;
+    req = null;
+    return butterfly.native_scroll_to = function(scroll) {
+      var diff, e, scroll_step, step;
+      if (scroll == null) {
+        scroll = -1;
+      }
+      e = butterfly.parent;
+      if (req) {
+        cancelAnimationFrame(req);
+      }
+      if (scroll === -1 || (scroll > e.scrollHeight - e.getBoundingClientRect().height)) {
+        scroll = e.scrollHeight - e.getBoundingClientRect().height;
+      }
+      diff = scroll - e.scrollTop;
+      if (diff === 0) {
+        return;
+      }
+      step = diff / 25;
+      scroll_step = function() {
+        if (Math.abs(e.scrollTop - scroll) < Math.abs(step)) {
+          return e.scrollTop = scroll;
+        } else {
+          e.scrollTop += step;
+          return req = requestAnimationFrame(scroll_step);
+        }
+      };
+      return req = requestAnimationFrame(scroll_step);
+    };
+  });
+
   if (/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)) {
     ctrl = false;
     alt = false;

butterfly/static/main.js

@@ -563,7 +563,7 @@
           this.element.insertBefore(html, this.children[l]);
         }
         this.html = {};
-        return this.parent.scrollTop = this.parent.scrollHeight;
+        return this.native_scroll_to();
       }
     };
 
@@ -646,9 +646,19 @@
       }
     };
 
+    Terminal.prototype.native_scroll_to = function(scroll) {
+      if (scroll == null) {
+        scroll = -1;
+      }
+      if (scroll === -1) {
+        scroll = this.parent.scrollHeight - this.parent.getBoundingClientRect().height;
+      }
+      return this.parent.scrollTop = scroll;
+    };
+
     Terminal.prototype.scroll_display = function(disp) {
       if (this.native_scroll) {
-        return this.parent.scrollTop += disp * this.char_size.height;
+        return this.native_scroll_to(this.parent.scrollTop + disp * this.char_size.height);
       } else {
         this.ydisp += disp;
         if (this.ydisp > this.ybase) {

coffees/ext/smooth_scroll.coffee

@@ -0,0 +1,24 @@
+
+document.addEventListener 'DOMContentLoaded', ->
+  return
+
+  req = null
+
+  butterfly.native_scroll_to = (scroll=-1) ->
+    e = butterfly.parent
+    cancelAnimationFrame req if req
+    if scroll is -1 or (
+      scroll > e.scrollHeight - e.getBoundingClientRect().height)
+      scroll = e.scrollHeight - e.getBoundingClientRect().height
+
+    diff = scroll - e.scrollTop
+    return if diff is 0
+    step = diff / 25
+    scroll_step = ->
+      if Math.abs(e.scrollTop - scroll) < Math.abs(step)
+        e.scrollTop = scroll
+      else
+        e.scrollTop += step
+        req = requestAnimationFrame scroll_step
+
+    req = requestAnimationFrame scroll_step

coffees/term.coffee

@@ -461,8 +461,7 @@ class Terminal
       for l, html of @html
         @element.insertBefore(html, @children[l])
       @html = {}
-      @parent.scrollTop = @parent.scrollHeight
-
+      @native_scroll_to()
 
   _cursorBlink: ->
     @cursorState ^= 1
@@ -536,9 +535,14 @@ class Terminal
       @updateRange @scrollTop
       @updateRange @scrollBottom
 
+  native_scroll_to: (scroll=-1) ->
+    if scroll is -1
+      scroll = @parent.scrollHeight - @parent.getBoundingClientRect().height
+    @parent.scrollTop = scroll
+
   scroll_display: (disp) ->
     if @native_scroll
-      @parent.scrollTop += disp * @char_size.height
+      @native_scroll_to @parent.scrollTop + disp * @char_size.height
     else
       @ydisp += disp
       if @ydisp > @ybase