web/notify.moe
Code Issues Pull Requests Activity

Restored mountables

Browse Source
This commit is contained in:
Eduard Urbach 2017-09-22 06:19:32 +02:00
parent 9acbddf1be
commit 9c900ec01b
4 changed files with 77 additions and 77 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

134
scripts/AnimeNotifier.ts
View File

@ -24,7 +24,7 @@ export class AnimeNotifier {
imageFound: MutationQueue
imageNotFound: MutationQueue
// unmount: MutationQueue
unmount: MutationQueue
constructor(app: Application) {
this.app = app
@ -33,7 +33,7 @@ export class AnimeNotifier {
this.imageFound = new MutationQueue(elem => elem.classList.add("image-found"))
this.imageNotFound = new MutationQueue(elem => elem.classList.add("image-not-found"))
// this.unmount = new MutationQueue(elem => elem.classList.remove("mounted"))
this.unmount = new MutationQueue(elem => elem.classList.remove("mounted"))
// These classes will never be removed on DOM diffs
Diff.persistentClasses.add("mounted")
@ -140,7 +140,7 @@ export class AnimeNotifier {
this.visibilityObserver.disconnect()
this.contentLoadedActions = Promise.all([
// Promise.resolve().then(() => this.mountMountables()),
Promise.resolve().then(() => this.mountMountables()),
Promise.resolve().then(() => this.lazyLoadImages()),
Promise.resolve().then(() => this.displayLocalDates()),
Promise.resolve().then(() => this.setSelectBoxValue()),
@ -471,87 +471,87 @@ export class AnimeNotifier {
this.visibilityObserver.observe(img)
}
// mountMountables() {
// this.modifyDelayed("mountable", element => element.classList.add("mounted"))
// }
mountMountables() {
this.modifyDelayed("mountable", element => element.classList.add("mounted"))
}
// unmountMountables() {
// for(let element of findAll("mountable")) {
// if(element.classList.contains("never-unmount")) {
// continue
// }
unmountMountables() {
for(let element of findAll("mountable")) {
if(element.classList.contains("never-unmount")) {
continue
}
// this.unmount.queue(element)
// }
// }
this.unmount.queue(element)
}
}
// modifyDelayed(className: string, func: (element: HTMLElement) => void) {
// const maxDelay = 1000
// const delay = 20
modifyDelayed(className: string, func: (element: HTMLElement) => void) {
const maxDelay = 1000
const delay = 20
// let time = 0
// let start = Date.now()
// let maxTime = start + maxDelay
let time = 0
let start = Date.now()
let maxTime = start + maxDelay
// let mountableTypes = new Map<string, number>()
// let mountableTypeMutations = new Map<string, Array<any>>()
let mountableTypes = new Map<string, number>()
let mountableTypeMutations = new Map<string, Array<any>>()
// let collection = document.getElementsByClassName(className)
let collection = document.getElementsByClassName(className)
// if(collection.length === 0) {
// return
// }
if(collection.length === 0) {
return
}
// // let delay = Math.min(maxDelay / collection.length, 20)
// let delay = Math.min(maxDelay / collection.length, 20)
// for(let i = 0; i < collection.length; i++) {
// let element = collection.item(i) as HTMLElement
// let type = element.dataset.mountableType || "general"
for(let i = 0; i < collection.length; i++) {
let element = collection.item(i) as HTMLElement
let type = element.dataset.mountableType || "general"
// if(mountableTypes.has(type)) {
// time = mountableTypes.get(type) + delay
// mountableTypes.set(type, time)
// } else {
// time = start
// mountableTypes.set(type, time)
// mountableTypeMutations.set(type, [])
// }
if(mountableTypes.has(type)) {
time = mountableTypes.get(type) + delay
mountableTypes.set(type, time)
} else {
time = start
mountableTypes.set(type, time)
mountableTypeMutations.set(type, [])
}
// if(time > maxTime) {
// time = maxTime
// }
if(time > maxTime) {
time = maxTime
}
// mountableTypeMutations.get(type).push({
// element,
// time
// })
// }
mountableTypeMutations.get(type).push({
element,
time
})
}
// for(let mountableType of mountableTypeMutations.keys()) {
// let mutations = mountableTypeMutations.get(mountableType)
// let mutationIndex = 0
for(let mountableType of mountableTypeMutations.keys()) {
let mutations = mountableTypeMutations.get(mountableType)
let mutationIndex = 0
// let updateBatch = () => {
// let now = Date.now()
let updateBatch = () => {
let now = Date.now()
// for(; mutationIndex < mutations.length; mutationIndex++) {
// let mutation = mutations[mutationIndex]
for(; mutationIndex < mutations.length; mutationIndex++) {
let mutation = mutations[mutationIndex]
// if(mutation.time > now) {
// break
// }
if(mutation.time > now) {
break
}
// func(mutation.element)
// }
func(mutation.element)
}
// if(mutationIndex < mutations.length) {
// window.requestAnimationFrame(updateBatch)
// }
// }
if(mutationIndex < mutations.length) {
window.requestAnimationFrame(updateBatch)
}
}
// window.requestAnimationFrame(updateBatch)
// }
// }
window.requestAnimationFrame(updateBatch)
}
}
diff(url: string) {
if(url === this.app.currentPath) {
@ -570,11 +570,11 @@ export class AnimeNotifier {
history.pushState(url, null, url)
this.app.currentPath = url
this.app.markActiveLinks()
// this.unmountMountables()
this.unmountMountables()
this.loading(true)
// Delay by transition-speed
return request
return delay(300).then(() => request)
.then(html => this.app.setContent(html, true))
.then(() => this.app.emit("DOMContentLoaded"))
.then(() => this.loading(false))

2
styles/base.scarlet
View File

@ -1,7 +1,7 @@
html
height 100%
font-family "Ubuntu", "Trebuchet MS", sans-serif
font-size 95%
font-size 100%
body
tab-size 4

4
styles/include/config.scarlet
View File

@ -66,6 +66,6 @@ nav-height = 3.11rem
typography-margin = 0.4rem
// Timings
fade-speed = 1ms
fade-speed = 300ms
transition-speed = 200ms
// mountable-transition-speed = 300ms
mountable-transition-speed = 300ms

14
styles/mountable.scarlet
View File

@ -1,8 +1,8 @@
// .mountable
// opacity 0
// transform translateY(0.85rem)
// transition opacity mountable-transition-speed ease, transform mountable-transition-speed ease
.mountable
opacity 0
transform translateY(0.85rem)
transition opacity mountable-transition-speed ease, transform mountable-transition-speed ease
// .mounted
// opacity 1 !important
// transform translateY(0)
.mounted
opacity 1 !important
transform translateY(0)