web/notify.moe
Code Issues Pull Requests Activity

Fixed flickering and improved performance

Browse Source
This commit is contained in:
Eduard Urbach 2018-03-24 17:14:26 +01:00
parent d1d9a8fc8b
commit 0ec3ae174a
2 changed files with 21 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
scripts/AnimeNotifier.ts
View File

@ -44,6 +44,7 @@ export class AnimeNotifier {
// These classes will never be removed on DOM diffs // These classes will never be removed on DOM diffs
Diff.persistentClasses.add("mounted") Diff.persistentClasses.add("mounted")
Diff.persistentClasses.add("element-found") Diff.persistentClasses.add("element-found")
Diff.persistentClasses.add("active")
// Never remove src property on diffs // Never remove src property on diffs
Diff.persistentAttributes.add("src") Diff.persistentAttributes.add("src")

38
scripts/Application.ts
View File

@ -23,8 +23,10 @@ export class Application {
init() { init() {
document.addEventListener("DOMContentLoaded", () => { document.addEventListener("DOMContentLoaded", () => {
this.ajaxify() let links = document.getElementsByTagName("a")
this.markActiveLinks()
this.markActiveLinks(links)
this.ajaxify(links)
}) })
} }
@ -82,6 +84,9 @@ export class Application {
history.pushState(url, "", url) history.pushState(url, "", url)
} }
// Mark active links
this.markActiveLinks()
let onTransitionEnd = (e: Event) => { let onTransitionEnd = (e: Event) => {
// Ignore transitions of child elements. // Ignore transitions of child elements.
// We only care about the transition event on the content element. // We only care about the transition event on the content element.
@ -116,7 +121,6 @@ export class Application {
this.content.classList.add(this.fadeOutClass) this.content.classList.add(this.fadeOutClass)
this.loading.classList.remove(this.fadeOutClass) this.loading.classList.remove(this.fadeOutClass)
this.markActiveLinks()
return request return request
} }
@ -125,31 +129,29 @@ export class Application {
this.content.innerHTML = html this.content.innerHTML = html
} }
markActiveLinks(element?: HTMLElement) { markActiveLinks(links?: NodeListOf<HTMLAnchorElement>) {
if(!element) { if(!links) {
element = document.body links = document.getElementsByTagName("a")
} }
let links = element.getElementsByTagName("a")
for(let i = 0; i < links.length; i++) { for(let i = 0; i < links.length; i++) {
let link = links[i] let link = links[i]
let href = link.getAttribute("href")
if(href === this.currentPath) Diff.mutations.queue(() => {
link.classList.add(this.activeLinkClass) if(link.getAttribute("href") === this.currentPath) {
else link.classList.add(this.activeLinkClass)
link.classList.remove(this.activeLinkClass) } else {
link.classList.remove(this.activeLinkClass)
}
})
} }
} }
ajaxify(element?: HTMLElement) { ajaxify(links?: NodeListOf<HTMLAnchorElement>) {
if(!element) { if(!links) {
element = document.body links = document.getElementsByTagName("a")
} }
let links = element.getElementsByTagName("a")
for(let i = 0; i < links.length; i++) { for(let i = 0; i < links.length; i++) {
let link = links[i] as HTMLAnchorElement let link = links[i] as HTMLAnchorElement