Added avatar loading

This commit is contained in:
Eduard Urbach 2017-06-19 17:45:27 +02:00
parent 10edd306f1
commit eea81b3eca
6 changed files with 61 additions and 30 deletions

View File

@ -1,7 +0,0 @@
.fade
opacity 1
transition opacity fade-speed ease
will-change opacity
.fade-out
opacity 0

View File

@ -7,9 +7,41 @@ export class AnimeNotifier {
this.app = app this.app = app
} }
onReadyStateChange() {
if(document.readyState !== "interactive") {
return
}
this.run()
}
run() { run() {
this.app.content = this.app.find("content") this.app.content = this.app.find("content")
this.app.loading = this.app.find("loading") this.app.loading = this.app.find("loading")
this.app.run() 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")
}
}
}
} }

View File

@ -16,6 +16,12 @@ export class Application {
this.fadeOutClass = "fade-out" this.fadeOutClass = "fade-out"
} }
run() {
this.ajaxify()
this.markActiveLinks()
this.loading.classList.add(this.fadeOutClass)
}
find(id: string): HTMLElement { find(id: string): HTMLElement {
return document.getElementById(id) return document.getElementById(id)
} }
@ -48,14 +54,7 @@ export class Application {
this.currentURL = url this.currentURL = url
// function sleep(ms) { // Start sending a network request
// return new Promise(resolve => setTimeout(resolve, ms))
// }
// sleep(500).then(() => {
// })
let request = this.get("/_" + url) let request = this.get("/_" + url)
let onTransitionEnd = e => { let onTransitionEnd = e => {
@ -81,6 +80,9 @@ export class Application {
// Fade animations // Fade animations
this.content.classList.remove(this.fadeOutClass) this.content.classList.remove(this.fadeOutClass)
this.loading.classList.add(this.fadeOutClass) this.loading.classList.add(this.fadeOutClass)
// Send DOMContentLoaded Event
this.emit("DOMContentLoaded")
}) })
} }
@ -136,7 +138,7 @@ export class Application {
e.preventDefault() e.preventDefault()
e.stopPropagation() e.stopPropagation()
if(!url || url === window.location.pathname) if(!url || url === self.currentURL)
return return
// Load requested page // Load requested page
@ -145,12 +147,6 @@ export class Application {
} }
} }
run() {
this.ajaxify()
this.markActiveLinks()
this.loading.classList.add(this.fadeOutClass)
}
scrollToTop() { scrollToTop() {
let parent = this.content let parent = this.content
@ -158,4 +154,11 @@ export class Application {
parent.scrollTop = 0 parent.scrollTop = 0
} }
} }
emit(eventName: string) {
document.dispatchEvent(new Event(eventName, {
"bubbles": true,
"cancelable": true
}))
}
} }

View File

@ -4,11 +4,8 @@ import { AnimeNotifier } from "./AnimeNotifier"
let app = new Application() let app = new Application()
let arn = new AnimeNotifier(app) let arn = new AnimeNotifier(app)
document.onreadystatechange = function() { document.addEventListener("DOMContentLoaded", arn.onContentLoaded.bind(arn))
if(document.readyState === "interactive") { document.addEventListener("readystatechange", arn.onReadyStateChange.bind(arn))
arn.run()
}
}
window.onpopstate = e => { window.onpopstate = e => {
if(e.state) if(e.state)

View File

@ -4,4 +4,4 @@
will-change opacity will-change opacity
.fade-out .fade-out
opacity 0 opacity 0 !important

View File

@ -8,3 +8,9 @@
default-transition default-transition
:hover :hover
box-shadow outline-shadow-heavy box-shadow outline-shadow-heavy
.user-image-found
opacity 1 !important
.user-image-not-found
opacity 0 !important