diff --git a/pages/profile/profile.scarlet b/pages/profile/profile.scarlet index 0cad8b92..432a78ea 100644 --- a/pages/profile/profile.scarlet +++ b/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 - max-height 280px + width profile-image-size + height profile-image-size + max-width profile-image-size + max-height profile-image-size border-radius ui-element-border-radius overflow hidden diff --git a/scripts/Actions/Search.ts b/scripts/Actions/Search.ts index 91ebbb0d..67e43839 100644 --- a/scripts/Actions/Search.ts +++ b/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 - await delay(searchDelay) + // Delay + 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 - arn.app.emit("DOMContentLoaded") + // Do the same as for the content loaded event, + // 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)) } } diff --git a/scripts/Actions/Shop.ts b/scripts/Actions/Shop.ts index 9da14dc9..c650efeb 100644 --- a/scripts/Actions/Shop.ts +++ b/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) { diff --git a/scripts/AnimeNotifier.ts b/scripts/AnimeNotifier.ts index 852ffc36..5a22ab44 100644 --- a/scripts/AnimeNotifier.ts +++ b/scripts/AnimeNotifier.ts @@ -522,8 +522,12 @@ export default class AnimeNotifier { } } - lazyLoad() { - for(let element of findAll("lazy")) { + lazyLoad(elements?: IterableIterator) { + 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() { - this.modifyDelayed("mountable", element => element.classList.add("mounted")) + mountMountables(elements?: IterableIterator) { + 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, func: (element: HTMLElement) => void) { const maxDelay = 1000 const delay = 18 @@ -643,17 +651,7 @@ export default class AnimeNotifier { let mountableTypes = new Map() let mountableTypeMutations = new Map>() - let collection = document.getElementsByClassName(className) - - 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 - + for(let element of elements) { // Skip already mounted elements. // This helps a lot when dealing with infinite scrolling // where the first elements are already mounted. diff --git a/scripts/MutationQueue.ts b/scripts/MutationQueue.ts index e8978185..787a2107 100644 --- a/scripts/MutationQueue.ts +++ b/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) { - this.onClearCallBack() - this.onClearCallBack = null + if(this.onClearCallBacks.length > 0) { + for(let callback of this.onClearCallBacks) { + callback() + } + + this.onClearCallBacks.length = 0 } } wait(callBack: () => void) { - this.onClearCallBack = callBack + this.onClearCallBacks.push(callBack) } } \ No newline at end of file diff --git a/scripts/Utils/findAll.ts b/scripts/Utils/findAll.ts index 1d96460a..3f1196e1 100644 --- a/scripts/Utils/findAll.ts +++ b/scripts/Utils/findAll.ts @@ -4,4 +4,12 @@ export function* findAll(className: string): IterableIterator { for(let i = 0; i < elements.length; ++i) { yield elements[i] as HTMLElement } -} \ No newline at end of file +} + +export function* findAllInside(className: string, root: HTMLElement): IterableIterator { + let elements = root.getElementsByClassName(className) + + for(let i = 0; i < elements.length; ++i) { + yield elements[i] as HTMLElement + } +}