Improved search

pages/profile/profile.scarlet

@@ -1,3 +1,5 @@
+const profile-image-size = 280px
+
 .profile
 	vertical
 	align-items center
@@ -114,8 +116,10 @@
 
 .profile-image-container
 	flex 1
-	max-width 280px
+	width profile-image-size
-	max-height 280px
+	height profile-image-size
+	max-width profile-image-size
+	max-height profile-image-size
 	border-radius ui-element-border-radius
 	overflow hidden
 

scripts/Actions/Search.ts

@@ -1,5 +1,5 @@
 import AnimeNotifier from "../AnimeNotifier"
-import { delay, requestIdleCallback } from "../Utils"
+import { delay, requestIdleCallback, findAllInside } from "../Utils"
 
 // Search page reference
 var emptySearchHTML = ""
@@ -26,7 +26,7 @@ var userSearchResults: HTMLElement
 var companySearchResults: HTMLElement
 
 // Delay before a request is sent
-const searchDelay = 150
+const searchDelay = 140
 
 // Fetch options
 const fetchOptions: RequestInit = {
@@ -89,10 +89,10 @@ export async function search(arn: AnimeNotifier, search: HTMLInputElement, e: Ke
 			history.pushState(url, document.title, url)
 		} else {
 			history.replaceState(url, document.title, url)
-		}
 
-		// Delay
+			// Delay
-		await delay(searchDelay)
+			await delay(searchDelay)
+		}
 
 		if(term !== search.value.trim()) {
 			arn.mountMountables()
@@ -165,7 +165,10 @@ function showResponseInElement(arn: AnimeNotifier, url: string, typeName: string
 
 		await arn.innerHTML(element, html)
 
-		// Emit content loaded event
+		// Do the same as for the content loaded event,
-		arn.app.emit("DOMContentLoaded")
+		// except here we are limiting it to the element.
+		arn.app.ajaxify(element.getElementsByTagName("a"))
+		arn.lazyLoad(findAllInside("lazy", element))
+		arn.mountMountables(findAllInside("mountable", element))
 	}
 }

scripts/Actions/Shop.ts

@@ -18,7 +18,6 @@ export function chargeUp(arn: AnimeNotifier, button: HTMLElement) {
 			throw "Error creating PayPal payment"
 		}
 
-		console.log(payment)
 		let link = payment.links.find(link => link.rel === "approval_url")
 
 		if(!link) {

scripts/AnimeNotifier.ts

@@ -522,8 +522,12 @@ export default class AnimeNotifier {
 		}
 	}
 
-	lazyLoad() {
+	lazyLoad(elements?: IterableIterator<Element>) {
-		for(let element of findAll("lazy")) {
+		if(!elements) {
+			elements = findAll("lazy")
+		}
+
+		for(let element of elements) {
 			switch(element.tagName) {
 				case "IMG":
 					this.lazyLoadImage(element as HTMLImageElement)
@@ -618,8 +622,12 @@ export default class AnimeNotifier {
 		this.visibilityObserver.observe(element)
 	}
 
-	mountMountables() {
+	mountMountables(elements?: IterableIterator<HTMLElement>) {
-		this.modifyDelayed("mountable", element => element.classList.add("mounted"))
+		if(!elements) {
+			elements = findAll("mountable")
+		}
+
+		this.modifyDelayed(elements, element => element.classList.add("mounted"))
 	}
 
 	unmountMountables() {
@@ -632,7 +640,7 @@ export default class AnimeNotifier {
 		}
 	}
 
-	modifyDelayed(className: string, func: (element: HTMLElement) => void) {
+	modifyDelayed(elements: IterableIterator<HTMLElement>, func: (element: HTMLElement) => void) {
 		const maxDelay = 1000
 		const delay = 18
 
@@ -643,17 +651,7 @@ export default class AnimeNotifier {
 		let mountableTypes = new Map<string, number>()
 		let mountableTypeMutations = new Map<string, Array<any>>()
 
-		let collection = document.getElementsByClassName(className)
+		for(let element of elements) {
-
-		if(collection.length === 0) {
-			return
-		}
-
-		// let delay = Math.min(maxDelay / collection.length, 20)
-
-		for(let i = 0; i < collection.length; i++) {
-			let element = collection.item(i) as HTMLElement
-
 			// Skip already mounted elements.
 			// This helps a lot when dealing with infinite scrolling
 			// where the first elements are already mounted.

scripts/MutationQueue.ts

@@ -10,10 +10,11 @@ const timeCapacity = 6.5
 // defined time capacity, it will pause and continue the mutations in the next frame.
 export class MutationQueue {
 	mutations: Array<() => void>
-	onClearCallBack: () => void
+	onClearCallBacks: Array<() => void>
 
 	constructor() {
 		this.mutations = []
+		this.onClearCallBacks = []
 	}
 
 	queue(mutation: () => void) {
@@ -48,13 +49,16 @@ export class MutationQueue {
 	clear() {
 		this.mutations.length = 0
 
-		if(this.onClearCallBack) {
+		if(this.onClearCallBacks.length > 0) {
-			this.onClearCallBack()
+			for(let callback of this.onClearCallBacks) {
-			this.onClearCallBack = null
+				callback()
+			}
+
+			this.onClearCallBacks.length = 0
 		}
 	}
 
 	wait(callBack: () => void) {
-		this.onClearCallBack = callBack
+		this.onClearCallBacks.push(callBack)
 	}
 }

scripts/Utils/findAll.ts

@@ -5,3 +5,11 @@ export function* findAll(className: string): IterableIterator<HTMLElement> {
 		yield elements[i] as HTMLElement
 	}
 }
+
+export function* findAllInside(className: string, root: HTMLElement): IterableIterator<HTMLElement> {
+	let elements = root.getElementsByClassName(className)
+
+	for(let i = 0; i < elements.length; ++i) {
+		yield elements[i] as HTMLElement
+	}
+}