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
}
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")
}
}
}
}

View File

@ -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,7 +138,7 @@ export class Application {
e.preventDefault()
e.stopPropagation()
if(!url || url === window.location.pathname)
if(!url || url === self.currentURL)
return
// Load requested page
@ -145,12 +147,6 @@ export class Application {
}
}
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
}))
}
}

View File

@ -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)

View File

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

View File

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