app: add auto scroll logic

Previously, the messages container would always scroll to the bottom
unconditionally. Now, it will only scroll if we are at the bottom of
the container already.

Author: evanlucas

app.js

@@ -74,6 +74,8 @@ function App(el, currentWindow) {
   this.router = new Router(this)
   this.url = '/'
 
+  this._shouldAutoScroll = true
+
   this._addRoutes()
   this._addStyles()
   this._addHandlers()
@@ -96,7 +98,7 @@ function App(el, currentWindow) {
       rootNode = patch(rootNode, patches)
       tree = newTree
 
-      if (this.activeModel) {
+      if (this.activeModel && this._shouldAutoScroll) {
         if (this.activeModel.ele) {
           const ele = document.querySelector(this.activeModel.ele)
           if (ele) {
@@ -311,6 +313,17 @@ App.prototype._addHandlers = function _addHandlers() {
     return false
   })
 
+  this.on('scroll', (e) => {
+    const node = e.target
+    if (node.scrollHeight <= node.clientHeight + node.scrollTop) {
+      this._shouldAutoScroll = true
+      debug('should auto scroll')
+    } else {
+      debug('should not auto scroll')
+      this._shouldAutoScroll = false
+    }
+  })
+
   const addConnTooltip = new Tooltip(this.el, {
     selector: 'a.add-connection'
   , placement: 'right'

lib/views/channel.js

@@ -58,6 +58,9 @@ Channel.prototype.render = function render(channel) {
     ])
   , h(`.channel-container.${ubcl}`, {
       className: cl
+    , onscroll: (e) => {
+        this.target.emit('scroll', e)
+      }
     }, kids)
   ]
 }

lib/views/connection.js

@@ -38,7 +38,11 @@ Connection.prototype.render = function render(conn) {
       , h('p.subtitle', `${conn.server.host}:${conn.server.port}`)
       ])
     ])
-  , h('.logs-container', [
+  , h('.logs-container', {
+      onscroll: (e) => {
+        this.target.emit('scroll', e)
+      }
+    }, [
       h('ul.logs', conn.logs.map((log) => {
         return this.log.render(log)
       }))

test/views/channel.js

@@ -75,9 +75,7 @@ test('ChannelView', (t) => {
 
   const container = out[1]
   t.equal(container.tagName, 'DIV')
-  t.deepEqual(container.properties, {
-    className: 'channel-container userbar-shown'
-  })
+  t.equal(container.properties.className, 'channel-container userbar-shown')
 
   t.equal(container.children.length, 2)
   t.equal(container.children[0].tagName, 'UL')