diff --git a/fade.scarlet b/fade.scarlet deleted file mode 100644 index a3c62d77..00000000 --- a/fade.scarlet +++ /dev/null @@ -1,7 +0,0 @@ -.fade - opacity 1 - transition opacity fade-speed ease - will-change opacity - -.fade-out - opacity 0 \ No newline at end of file diff --git a/scripts/AnimeNotifier.ts b/scripts/AnimeNotifier.ts index d1b9ac2f..a4755489 100644 --- a/scripts/AnimeNotifier.ts +++ b/scripts/AnimeNotifier.ts @@ -7,9 +7,41 @@ export class AnimeNotifier { this.app = app } + onReadyStateChange() { + if(document.readyState !== "interactive") { + return + } + + this.run() + } + run() { this.app.content = this.app.find("content") this.app.loading = this.app.find("loading") this.app.run() } + + onContentLoaded() { + this.updateAvatars() + } + + updateAvatars() { + let images = document.querySelectorAll('.user-image') + + for(let i = 0; i < images.length; ++i) { + let img = images[i] as HTMLImageElement + + if(img.naturalWidth === 0) { + img.onload = function() { + this.classList.add("user-image-found") + } + + img.onerror = function() { + this.classList.add("user-image-not-found") + } + } else { + img.classList.add("user-image-found") + } + } + } } \ No newline at end of file diff --git a/scripts/Application.ts b/scripts/Application.ts index c669f537..913c6c68 100644 --- a/scripts/Application.ts +++ b/scripts/Application.ts @@ -16,6 +16,12 @@ export class Application { this.fadeOutClass = "fade-out" } + run() { + this.ajaxify() + this.markActiveLinks() + this.loading.classList.add(this.fadeOutClass) + } + find(id: string): HTMLElement { return document.getElementById(id) } @@ -48,14 +54,7 @@ export class Application { this.currentURL = url - // function sleep(ms) { - // return new Promise(resolve => setTimeout(resolve, ms)) - // } - - // sleep(500).then(() => { - - // }) - + // Start sending a network request let request = this.get("/_" + url) let onTransitionEnd = e => { @@ -81,6 +80,9 @@ export class Application { // Fade animations this.content.classList.remove(this.fadeOutClass) this.loading.classList.add(this.fadeOutClass) + + // Send DOMContentLoaded Event + this.emit("DOMContentLoaded") }) } @@ -136,21 +138,15 @@ export class Application { e.preventDefault() e.stopPropagation() - if(!url || url === window.location.pathname) + if(!url || url === self.currentURL) return - + // Load requested page self.load(url, true) } } } - run() { - this.ajaxify() - this.markActiveLinks() - this.loading.classList.add(this.fadeOutClass) - } - scrollToTop() { let parent = this.content @@ -158,4 +154,11 @@ export class Application { parent.scrollTop = 0 } } + + emit(eventName: string) { + document.dispatchEvent(new Event(eventName, { + "bubbles": true, + "cancelable": true + })) + } } \ No newline at end of file diff --git a/scripts/main.ts b/scripts/main.ts index cca43926..b76789a6 100644 --- a/scripts/main.ts +++ b/scripts/main.ts @@ -4,11 +4,8 @@ import { AnimeNotifier } from "./AnimeNotifier" let app = new Application() let arn = new AnimeNotifier(app) -document.onreadystatechange = function() { - if(document.readyState === "interactive") { - arn.run() - } -} +document.addEventListener("DOMContentLoaded", arn.onContentLoaded.bind(arn)) +document.addEventListener("readystatechange", arn.onReadyStateChange.bind(arn)) window.onpopstate = e => { if(e.state) diff --git a/styles/fade.scarlet b/styles/fade.scarlet index a3c62d77..8070e87a 100644 --- a/styles/fade.scarlet +++ b/styles/fade.scarlet @@ -4,4 +4,4 @@ will-change opacity .fade-out - opacity 0 \ No newline at end of file + opacity 0 !important \ No newline at end of file diff --git a/styles/user.scarlet b/styles/user.scarlet index e7c497c0..21a16f54 100644 --- a/styles/user.scarlet +++ b/styles/user.scarlet @@ -7,4 +7,10 @@ opacity 0 default-transition :hover - box-shadow outline-shadow-heavy \ No newline at end of file + box-shadow outline-shadow-heavy + +.user-image-found + opacity 1 !important + +.user-image-not-found + opacity 0 !important \ No newline at end of file