Added infinite scrolling

scripts/Actions.ts

@@ -370,17 +370,51 @@ export function arrayRemove(arn: AnimeNotifier, element: HTMLElement) {
 }
 
 // Load more
-export function loadMore(arn: AnimeNotifier, element: HTMLElement) {
+export function loadMore(arn: AnimeNotifier, button: HTMLButtonElement) {
+	// Prevent firing this event multiple times
+	if(arn.isLoading || button.disabled) {
+		return
+	}
+
+	arn.loading(true)
+	button.disabled = true
+
 	let target = arn.app.find("load-more-target")
-	let index = "9"
+	let index = button.dataset.index
 	
 	fetch("/_" + arn.app.currentPath + "/from/" + index)
+	.then(response => {
+		let newIndex = response.headers.get("X-LoadMore-Index")
+
+		// End of data?
+		if(newIndex === "-1") {
+			button.classList.add("hidden")
+		} else {
+			button.dataset.index = newIndex
+		}
+		
+		return response
+	})
 	.then(response => response.text())
 	.then(body => {
-		target.innerHTML += body
-		arn.app.emit("DOMContentLoaded")
+		let tmp = document.createElement(target.tagName)
+		tmp.innerHTML = body
+
+		let children = [...tmp.childNodes]
+
+		window.requestAnimationFrame(() => {
+			for(let child of children) {
+				target.appendChild(child)
+			}
+
+			arn.app.emit("DOMContentLoaded")
+		})
 	})
 	.catch(err => arn.statusMessage.showError(err))
+	.then(() => {
+		arn.loading(false)
+		button.disabled = false
+	})
 }
 
 // Chrome extension installation

scripts/AnimeNotifier.ts

@@ -9,6 +9,7 @@ import { PushManager } from "./PushManager"
 import { TouchController } from "./TouchController"
 import { Analytics } from "./Analytics"
 import { SideBar } from "./SideBar"
+import { InfiniteScroller } from "./InfiniteScroller"
 
 export class AnimeNotifier {
 	app: Application
@@ -22,6 +23,7 @@ export class AnimeNotifier {
 	pushManager: PushManager
 	touchController: TouchController
 	sideBar: SideBar
+	infiniteScroller: InfiniteScroller
 	mainPageLoaded: boolean
 	isLoading: boolean
 	lastReloadContentPath: string
@@ -125,6 +127,9 @@ export class AnimeNotifier {
 
 		// Sidebar control
 		this.sideBar = new SideBar(this.app.find("sidebar"))
+
+		// Infinite scrolling
+		this.infiniteScroller = new InfiniteScroller(this.app.content.parentElement, 100)
 		
 		// Loading
 		this.loading(false)

scripts/InfiniteScroller.ts

@@ -0,0 +1,25 @@
+export class InfiniteScroller {
+	container: HTMLElement
+	threshold: number
+
+	constructor(container, threshold) {
+		this.container = container
+		this.threshold = threshold
+
+		this.container.addEventListener("scroll", e => {
+			if(this.container.scrollTop + this.container.clientHeight >= this.container.scrollHeight - threshold) {
+				this.loadMore()
+			}
+		})
+	}
+
+	loadMore() {
+		let button = document.getElementById("load-more-button")
+
+		if(!button) {
+			return
+		}
+
+		button.click()
+	}
+}