From a99d82cae2b370d9003d06c5af212939e00df3e4 Mon Sep 17 00:00:00 2001
From: xdrm-brackets <doowap31@gmail.com>
Date: Tue, 3 Apr 2018 17:13:11 +0200
Subject: [PATCH] [vue.auth.channel] added auto-scroll to bottom message stack
 when stack have 1+ more element

---
 webpack/vue/auth/channel.vue | 26 ++++++++++++++++++++++++--
 1 file changed, 24 insertions(+), 2 deletions(-)

diff --git a/webpack/vue/auth/channel.vue b/webpack/vue/auth/channel.vue
index a053c95..9f522b4 100644
--- a/webpack/vue/auth/channel.vue
+++ b/webpack/vue/auth/channel.vue
@@ -8,7 +8,7 @@
 
 		<div class='body'>
 
-			<section class='message-stack'>
+			<section class='message-stack' ref='stack'>
 
 				<div class='message' v-for='m in gs.content.messages'>
 					<div class='icon' :style='`background-image: url("https://picsum.photos/150/?random&nonce=${m.uid}");`'></div>
@@ -39,7 +39,8 @@ export default {
 		message: '', // message text
 		pressed: {
 			16: false // SHIFT key
-		}
+		},
+		stack_length: 0
 
 	}; },
 
@@ -99,6 +100,27 @@ export default {
 
 		}
 
+	},
+
+	updated(){
+
+		let stack_length = this.$refs.stack.children.length;
+
+
+		/* (1) If new messages -> scroll to bottom */
+		if( stack_length > this.stack_length ){
+
+			this.$refs.stack.scrollTop = 10000;
+
+			// manage overriding css animation
+			setTimeout( () => { this.$refs.stack.scrollTop = 10000 }, 300 );
+
+		}
+
+		/* (2) If new messages -> update stack length */
+		if( stack_length != this.stack_length )
+			this.stack_length = stack_length;
+
 	}
 
 }