Enable ts strict mode, refactor tag dialog

Author: apqx

_includes/script-theme.html

@@ -11,7 +11,7 @@
             savedTheme = THEME_AUTO
             localStorage.setItem(KEY_THEME, savedTheme)
         }
-        const bodyE = document.getElementsByTagName("body")[0];
+        const bodyE = document.body;
         // 默认是没有.dark的，在确定是暗黑模式时加上.dark
         // 默认是没有theme-color的，在这里根据主题加上
         if (savedTheme === THEME_DARK

_posts/original/2021-08-03-为博客添加站内搜索和暗黑模式.md

@@ -101,7 +101,7 @@ const KEY_THEME = "theme"
 // 读取保存的用户主题设置
 const savedTheme = localStorage.getItem(KEY_THEME)
 console.log("saved theme = " + savedTheme)
-const bodyE = document.querySelector("body")
+const bodyE = document.body
 // 根据用户设置显示对应主题
 if (savedTheme == THEME_DARK) {
     bodyE.classList.add("dark")

npm/dist/blog-404-v2.0.0.js

@@ -2,21 +2,21 @@ import { consoleDebug } from "../util/log"
 
 export class ResizeHeightObserver {
     callback: (width: number) => void
-    lastTimeout: NodeJS.Timeout = null
+    lastTimeout: NodeJS.Timeout | null = null
     lastHeight = -1
     resizeObserver = new ResizeObserver((entries) => {
         const entry = entries.pop()
-        if (entry.contentRect.height == this.lastHeight) {
+        if (entry!!.contentRect.height == this.lastHeight) {
             // 高度没有变化
             return
         }
-        this.lastHeight = entry.contentRect.height
+        this.lastHeight = entry!!.contentRect.height
         if (this.lastTimeout != null) {
             clearTimeout(this.lastTimeout)
         }
         this.lastTimeout = setTimeout(() => {
-            consoleDebug("ResizeHeightObserver height changed after delay " + entry.contentRect.height)
-            this.callback(entry.contentRect.height)
+            consoleDebug("ResizeHeightObserver height changed after delay " + entry!!.contentRect.height)
+            this.callback(entry!!.contentRect.height)
         }, 200)
     })
     constructor(e: HTMLElement, callback: (height: number) => void) {

npm/dist/blog-index-v2.0.0.js

@@ -2,25 +2,25 @@ import { consoleDebug } from "../util/log"
 
 export class ResizeWidthObserver {
     callback: (width: number) => void
-    lastTimeout: NodeJS.Timeout = null
+    lastTimeout: NodeJS.Timeout | null = null
     lastWidth = -1
     resizeObserver = new ResizeObserver((entries) => {
         const entry = entries.pop()
-        if (entry.contentRect.width == this.lastWidth) {
+        if (entry!!.contentRect.width == this.lastWidth) {
             // 宽度没有变化
             return
         }
-        if (entry.contentRect.width == 0) {
+        if (entry!!.contentRect.width == 0) {
             // 宽度变为0是什么情况🙄
             return
         }
-        this.lastWidth = entry.contentRect.width
+        this.lastWidth = entry!!.contentRect.width
         if (this.lastTimeout != null) {
             clearTimeout(this.lastTimeout)
         }
         this.lastTimeout = setTimeout(() => {
-            consoleDebug("ResizeWidthObserver width changed after delay " + entry.contentRect.width)
-            this.callback(entry.contentRect.width)
+            consoleDebug("ResizeWidthObserver width changed after delay " + entry!!.contentRect.width)
+            this.callback(entry!!.contentRect.width)
         }, 200)
     })
     constructor(e: HTMLElement, callback: (width: number) => void) {

npm/dist/blog-index-v2.0.0.js.LICENSE.txt

@@ -3,7 +3,7 @@ import { consoleDebug } from "../util/log"
 export class ScrollLoader {
     timeMsIgnore: number
     shouldLoad: () => void
-    lastLoadTime: number
+    lastLoadTime: number = 0
     constructor(shouldLoad: () => void, timeMsIgnore: number = 50) {
         this.shouldLoad = shouldLoad
         this.timeMsIgnore = timeMsIgnore

npm/dist/blog-post-v2.0.0.js

@@ -10,7 +10,7 @@ export class HeightAnimationContainer {
     containerE: HTMLElement
     contentE: HTMLElement
     lastHeight: number
-    resizeWidthObserver: ResizeWidthObserver
+    resizeWidthObserver: ResizeWidthObserver | null = null
 
     constructor(animationContainerE: HTMLElement) {
         this.containerE = animationContainerE

npm/dist/blog-runtime-v2.0.0.js

@@ -7,16 +7,16 @@ import { getElementAttribute } from "../../util/tools"
  */
 export class ImageLoadAnimator {
     imgE: HTMLImageElement
-    id: string
-    widthResizeObserver: ResizeWidthObserver
+    id: string | null
+    widthResizeObserver: ResizeWidthObserver | null = null
 
     /**
      * 为图片加载添加高度变化动画
      * @param imgE 目标图片元素
      * @param ratio 图片宽高比
      * @param monitorResize 是否监听宽度变化，动画调整高度，false会在加载完成后设置高度为auto，之后不会再有动画
      */
-    constructor(imgE: HTMLImageElement, ratio: number = -1, monitorResize: boolean = false, animationEndCallback: () => void = null) {
+    constructor(imgE: HTMLImageElement, ratio: number = -1, monitorResize: boolean = false, animationEndCallback: (() => void) | null = null) {
         this.imgE = imgE
         this.id = getElementAttribute(imgE, "alt")
 
@@ -66,7 +66,7 @@ export class ImageLoadAnimator {
         })
     }
 
-    private animationDone(monitorResize: boolean, imgE: HTMLImageElement, animationEndCallback: () => void) {
+    private animationDone(monitorResize: boolean, imgE: HTMLImageElement, animationEndCallback: (() => void) | null) {
         if (!monitorResize) {
             imgE.classList.remove("height-animation")
             imgE.style.height = "auto"

npm/dist/blog-scaffold-v2.0.0.js

@@ -8,5 +8,5 @@ export function initContentCard(startAnimation: boolean) {
 
 export function startContentCardAnimation() {
     const cardE = document.querySelector(".content-card.fade-in-animation")
-    cardE.classList.add("fade-in-animation--start")
+    cardE?.classList.add("fade-in-animation--start")
 }