Restored mountables

scripts/AnimeNotifier.ts

@@ -24,7 +24,7 @@ export class AnimeNotifier {
 
 	imageFound: MutationQueue
 	imageNotFound: MutationQueue
-	// unmount: MutationQueue
+	unmount: MutationQueue
 
 	constructor(app: Application) {
 		this.app = app
@@ -33,7 +33,7 @@ export class AnimeNotifier {
 
 		this.imageFound = new MutationQueue(elem => elem.classList.add("image-found"))
 		this.imageNotFound = new MutationQueue(elem => elem.classList.add("image-not-found"))
-		// this.unmount = new MutationQueue(elem => elem.classList.remove("mounted"))
+		this.unmount = new MutationQueue(elem => elem.classList.remove("mounted"))
 
 		// These classes will never be removed on DOM diffs
 		Diff.persistentClasses.add("mounted")
@@ -140,7 +140,7 @@ export class AnimeNotifier {
 		this.visibilityObserver.disconnect()
 		
 		this.contentLoadedActions = Promise.all([
-			// Promise.resolve().then(() => this.mountMountables()),
+			Promise.resolve().then(() => this.mountMountables()),
 			Promise.resolve().then(() => this.lazyLoadImages()),
 			Promise.resolve().then(() => this.displayLocalDates()),
 			Promise.resolve().then(() => this.setSelectBoxValue()),
@@ -471,87 +471,87 @@ export class AnimeNotifier {
 		this.visibilityObserver.observe(img)
 	}
 
-	// mountMountables() {
+	mountMountables() {
-	// 	this.modifyDelayed("mountable", element => element.classList.add("mounted"))
+		this.modifyDelayed("mountable", element => element.classList.add("mounted"))
-	// }
+	}
 
-	// unmountMountables() {
+	unmountMountables() {
-	// 	for(let element of findAll("mountable")) {
+		for(let element of findAll("mountable")) {
-	// 		if(element.classList.contains("never-unmount")) {
+			if(element.classList.contains("never-unmount")) {
-	// 			continue
+				continue
-	// 		}
+			}
 
-	// 		this.unmount.queue(element)
+			this.unmount.queue(element)
-	// 	}
+		}
-	// }
+	}
 
-	// modifyDelayed(className: string, func: (element: HTMLElement) => void) {
+	modifyDelayed(className: string, func: (element: HTMLElement) => void) {
-	// 	const maxDelay = 1000
+		const maxDelay = 1000
-	// 	const delay = 20
+		const delay = 20
 		
-	// 	let time = 0
+		let time = 0
-	// 	let start = Date.now()
+		let start = Date.now()
-	// 	let maxTime = start + maxDelay
+		let maxTime = start + maxDelay
 
-	// 	let mountableTypes = new Map<string, number>()
+		let mountableTypes = new Map<string, number>()
-	// 	let mountableTypeMutations = new Map<string, Array<any>>()
+		let mountableTypeMutations = new Map<string, Array<any>>()
 
-	// 	let collection = document.getElementsByClassName(className)
+		let collection = document.getElementsByClassName(className)
 
-	// 	if(collection.length === 0) {
+		if(collection.length === 0) {
-	// 		return
+			return
-	// 	}
+		}
 
-	// 	// let delay = Math.min(maxDelay / collection.length, 20)
+		// let delay = Math.min(maxDelay / collection.length, 20)
 
-	// 	for(let i = 0; i < collection.length; i++) {
+		for(let i = 0; i < collection.length; i++) {
-	// 		let element = collection.item(i) as HTMLElement
+			let element = collection.item(i) as HTMLElement
-	// 		let type = element.dataset.mountableType || "general"
+			let type = element.dataset.mountableType || "general"
 
-	// 		if(mountableTypes.has(type)) {
+			if(mountableTypes.has(type)) {
-	// 			time = mountableTypes.get(type) + delay
+				time = mountableTypes.get(type) + delay
-	// 			mountableTypes.set(type, time)
+				mountableTypes.set(type, time)
-	// 		} else {
+			} else {
-	// 			time = start
+				time = start
-	// 			mountableTypes.set(type, time)
+				mountableTypes.set(type, time)
-	// 			mountableTypeMutations.set(type, [])
+				mountableTypeMutations.set(type, [])
-	// 		}
+			}
 
-	// 		if(time > maxTime) {
+			if(time > maxTime) {
-	// 			time = maxTime
+				time = maxTime
-	// 		}
+			}
 
-	// 		mountableTypeMutations.get(type).push({
+			mountableTypeMutations.get(type).push({
-	// 			element,
+				element,
-	// 			time
+				time
-	// 		})
+			})
-	// 	}
+		}
 
-	// 	for(let mountableType of mountableTypeMutations.keys()) {
+		for(let mountableType of mountableTypeMutations.keys()) {
-	// 		let mutations = mountableTypeMutations.get(mountableType)
+			let mutations = mountableTypeMutations.get(mountableType)
-	// 		let mutationIndex = 0
+			let mutationIndex = 0
 
-	// 		let updateBatch = () => {
+			let updateBatch = () => {
-	// 			let now = Date.now()
+				let now = Date.now()
 
-	// 			for(; mutationIndex < mutations.length; mutationIndex++) {
+				for(; mutationIndex < mutations.length; mutationIndex++) {
-	// 				let mutation = mutations[mutationIndex]
+					let mutation = mutations[mutationIndex]
 
-	// 				if(mutation.time > now) {
+					if(mutation.time > now) {
-	// 					break
+						break
-	// 				}
+					}
 
-	// 				func(mutation.element)
+					func(mutation.element)
-	// 			}
+				}
 
-	// 			if(mutationIndex < mutations.length) {
+				if(mutationIndex < mutations.length) {
-	// 				window.requestAnimationFrame(updateBatch)
+					window.requestAnimationFrame(updateBatch)
-	// 			}
+				}
-	// 		}
+			}
 
-	// 		window.requestAnimationFrame(updateBatch)
+			window.requestAnimationFrame(updateBatch)
-	// 	}
+		}
-	// }
+	}
 
 	diff(url: string) {
 		if(url === this.app.currentPath) {
@@ -570,11 +570,11 @@ export class AnimeNotifier {
 		history.pushState(url, null, url)
 		this.app.currentPath = url
 		this.app.markActiveLinks()
-		// this.unmountMountables()
+		this.unmountMountables()
 		this.loading(true)
 
 		// Delay by transition-speed
-		return request
+		return delay(300).then(() => request)
 		.then(html => this.app.setContent(html, true))
 		.then(() => this.app.emit("DOMContentLoaded"))
 		.then(() => this.loading(false))

styles/base.scarlet

@@ -1,7 +1,7 @@
 html
 	height 100%
 	font-family "Ubuntu", "Trebuchet MS", sans-serif
-	font-size 95%
+	font-size 100%
 
 body
 	tab-size 4

styles/include/config.scarlet

@@ -66,6 +66,6 @@ nav-height = 3.11rem
 typography-margin = 0.4rem
 
 // Timings
-fade-speed = 1ms
+fade-speed = 300ms
 transition-speed = 200ms
-// mountable-transition-speed = 300ms
+mountable-transition-speed = 300ms

styles/mountable.scarlet

@@ -1,8 +1,8 @@
-// .mountable
+.mountable
-// 	opacity 0
+	opacity 0
-// 	transform translateY(0.85rem)
+	transform translateY(0.85rem)
-// 	transition opacity mountable-transition-speed ease, transform mountable-transition-speed ease
+	transition opacity mountable-transition-speed ease, transform mountable-transition-speed ease
 
-// .mounted
+.mounted
-// 	opacity 1 !important
+	opacity 1 !important
-// 	transform translateY(0)
+	transform translateY(0)