Remove vue-chat-scroll, add custom scroll-to-bottom behavior (still doesn't work perfect)

package.json

@@ -25,7 +25,6 @@
     "sanitize-html": "^1.13.0",
     "sass-loader": "^4.0.2",
     "vue": "^2.5.13",
-    "vue-chat-scroll": "^1.2.1",
     "vue-i18n": "^7.3.2",
     "vue-router": "^3.0.1",
     "vue-template-compiler": "^2.3.4",

src/components/chat_panel/chat_panel.js

@@ -3,7 +3,9 @@ const chatPanel = {
     return {
       currentMessage: '',
       channel: null,
-      collapsed: false
+      collapsed: false,
+      bottomed: true,
+      chatEl: undefined
     }
   },
   computed: {
@@ -18,7 +20,29 @@ const chatPanel = {
     },
     togglePanel () {
       this.collapsed = !this.collapsed
+    },
+    checkScroll (e) {
+      const el = e.target
+      this.bottomed = (el.scrollHeigh - (el.offsetHeight + el.scrollTop) < 10)
+    },
+    scrollToBottom () {
+      if (this.chatEl && this.bottomed) {
+        this.chatEl.scrollTop = this.chatEl.scrollHeight - this.chatEl.offsetHeight
+      }
     }
+  },
+  watch: {
+    messages: function () {
+      this.$nextTick(function () {
+        this.scrollToBottom()
+      })
+    }
+  },
+  mounted: function () {
+    this.$nextTick(function () {
+      this.chatEl = this.$el.querySelector('.chat-window')
+      this.scrollToBottom()
+    })
   }
 }
 

src/components/chat_panel/chat_panel.vue

@@ -7,7 +7,7 @@
           <i class="icon-cancel" style="float: right;"></i>
         </div>
       </div>
-      <div class="chat-window" v-chat-scroll>
+      <div class="chat-window" @scroll.passive="checkScroll">
         <div class="chat-message" v-for="message in messages" :key="message.id">
           <span class="chat-avatar">
             <img :src="message.author.avatar" />

src/main.js

@@ -26,8 +26,6 @@ import createPersistedState from './lib/persisted_state.js'
 
 import messages from './i18n/messages.js'
 
-import VueChatScroll from 'vue-chat-scroll'
-
 const currentLocale = (window.navigator.language || 'en').split('-')[0]
 
 Vue.use(Vuex)
@@ -40,7 +38,6 @@ Vue.use(VueTimeago, {
   }
 })
 Vue.use(VueI18n)
-Vue.use(VueChatScroll)
 
 const persistedStateOptions = {
   paths: [
@@ -170,4 +167,3 @@ window.fetch('/instance/panel.html')
   .then((html) => {
     store.dispatch('setOption', { name: 'instanceSpecificPanelContent', value: html })
   })
-

yarn.lock

@@ -5836,12 +5836,6 @@ void-elements@^2.0.0:
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/void-elements/-/void-elements-2.0.1.tgz#c066afb582bb1cb4128d60ea92392e94d5e9dbec"
 
-vue-chat-scroll@^1.2.1:
-  version "1.2.1"
-  resolved "https://registry.yarnpkg.com/vue-chat-scroll/-/vue-chat-scroll-1.2.1.tgz#54f123004b887d91f2f7fb69b9bebdf6f61ea9b4"
-  dependencies:
-    vue "^2.1.10"
-
 vue-hot-reload-api@^2.0.11:
   version "2.2.4"
   resolved "https://registry.yarnpkg.com/vue-hot-reload-api/-/vue-hot-reload-api-2.2.4.tgz#683bd1d026c0d3b3c937d5875679e9a87ec6cd8f"
@@ -5893,7 +5887,7 @@ vue-timeago@^3.1.2:
   version "3.4.2"
   resolved "https://registry.yarnpkg.com/vue-timeago/-/vue-timeago-3.4.2.tgz#291c99370975b0a6f7b65f8745fba878fb545fd8"
 
-vue@^2.1.10, vue@^2.5.13:
+vue@^2.5.13:
   version "2.5.13"
   resolved "https://registry.yarnpkg.com/vue/-/vue-2.5.13.tgz#95bd31e20efcf7a7f39239c9aa6787ce8cf578e1"