From 9c900ec01b6d5435715dbaec5873f095256af42b Mon Sep 17 00:00:00 2001 From: Eduard Urbach Date: Fri, 22 Sep 2017 06:19:32 +0200 Subject: [PATCH] Restored mountables --- scripts/AnimeNotifier.ts | 134 +++++++++++++++++----------------- styles/base.scarlet | 2 +- styles/include/config.scarlet | 4 +- styles/mountable.scarlet | 14 ++-- 4 files changed, 77 insertions(+), 77 deletions(-) diff --git a/scripts/AnimeNotifier.ts b/scripts/AnimeNotifier.ts index 5eb56c9d..33769de5 100644 --- a/scripts/AnimeNotifier.ts +++ b/scripts/AnimeNotifier.ts @@ -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() - // let mountableTypeMutations = new Map>() + let mountableTypes = new Map() + let mountableTypeMutations = new Map>() - // 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)) diff --git a/styles/base.scarlet b/styles/base.scarlet index 42ff40dd..0840795d 100644 --- a/styles/base.scarlet +++ b/styles/base.scarlet @@ -1,7 +1,7 @@ html height 100% font-family "Ubuntu", "Trebuchet MS", sans-serif - font-size 95% + font-size 100% body tab-size 4 diff --git a/styles/include/config.scarlet b/styles/include/config.scarlet index 0bbe4ead..7b18e37c 100644 --- a/styles/include/config.scarlet +++ b/styles/include/config.scarlet @@ -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 diff --git a/styles/mountable.scarlet b/styles/mountable.scarlet index 8a55f28d..78becc67 100644 --- a/styles/mountable.scarlet +++ b/styles/mountable.scarlet @@ -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) \ No newline at end of file +.mounted + opacity 1 !important + transform translateY(0) \ No newline at end of file