Add visual notification if auto-scrolling is disabled

Closes #23

file/js/be.bastelstu.Chat.litcoffee

@@ -31,6 +31,7 @@ exposed by a function if necessary.
 
 		isActive = true
 		newMessageCount = 0
+		scrollUpNotifications = off
 		chatSession = Date.now()
 		errorVisible = false
 
@@ -57,7 +58,6 @@ exposed by a function if necessary.
 			titleTemplate: null
 			messageTemplate: null
 			userTemplate: null
-
 			config: null
 
 Initialize **Tims Chat**. Bind needed DOM events and initialize data structures.
@@ -271,10 +271,13 @@ Scroll down when autoscroll is being activated.
 				
 				if scrollTop < scrollHeight - height - 25
 					if $('#timsChatAutoscroll').data('status') is 1
+						scrollUpNotifications = on
 						$('#timsChatAutoscroll').click()
 						
 				if scrollTop > scrollHeight - height - 10
 					if $('#timsChatAutoscroll').data('status') is 0
+						scrollUpNotifications = off
+						$(@).removeClass 'notification'
 						$('#timsChatAutoscroll').click()
 
 Enable duplicate tab detection.
@@ -380,7 +383,6 @@ Fetch new messages from the server and pass them to `handleMessages`. The userli
 						console.error 'To many failures, aborting'
 						
 						showError WCF.Language.get 'chat.error.onMessageLoad'
-							
 				complete: ->
 					loading = false
 
@@ -500,10 +502,12 @@ the existing text. If `options.submit` is true the message will be sent to the s
 			else
 				$('#timsChatInput').focus()
 
-
 Send out notifications for the given `message`. The number of unread messages will be prepended to `document.title` and if available desktop notifications will be sent.
 
 		notify = (message) ->
+			if scrollUpNotifications
+				$('#timsChatMessageContainer').addClass 'notification'
+			
 			return if isActive or $('#timsChatNotify').data('status') is 0
 			
 			document.title = v.titleTemplate.fetch
@@ -640,7 +644,6 @@ And finally export the public methods and variables.
 				add: addListener
 				remove: removeListener
 		
-
 		window.be ?= {}
 		be.bastelstu ?= {}
 		window.be.bastelstu.Chat = Chat

file/style/be.bastelstu.wcf.chat.less

@@ -6,6 +6,16 @@
  * @license	Creative Commons Attribution-NonCommercial-ShareAlike <http://creativecommons.org/licenses/by-nc-sa/3.0/legalcode>
  * @package	be.bastelstu.wcf.chat
  */
+@keyframes timsChatNotify {
+        from {
+                border-color: @wcfContainerBorderColor;
+        }
+
+        to {
+                border-color: @wcfInputHoverBorderColor;
+        }
+}
+ 
 #tplChat {
 	#main > div {
 		overflow: hidden;
@@ -251,6 +261,15 @@
 		background-repeat: no-repeat;
 		min-height: 150px;
 	}
+	
+        .notification {
+                animation-duration: .2s;
+                animation-name: timsChatNotify;
+                animation-iteration-count: 5;
+                animation-direction: alternate;
+                animation-timing-function: linear;
+                border-color: @wcfInputHoverBorderColor;
+        }
 }
 
 html.fullscreen {