fix(ui/height_limit): height limit not working while loading images (#…

…849)
ArtalkJS · May 1, 2024 · c3f730b · c3f730b
1 parent e132c31
commit c3f730b
Show file tree

Hide file tree

Showing 3 changed files with 34 additions and 47 deletions.
diff --git a/ui/artalk/src/comment/height-limit.ts b/ui/artalk/src/comment/height-limit.ts
@@ -16,33 +16,40 @@ export interface IHeightLimitRule {
   max: number
 
   /** Whether or not the element contains `<img />` */
-  imgContains?: boolean
+  imgCheck?: boolean
 }
 
 export type THeightLimitRuleSet = IHeightLimitRule[]
 
 /** Check all elements below the max height limit */
 export function check(conf: IHeightLimitConf, rules: THeightLimitRuleSet) {
-  rules.forEach(({ el, max: maxHeight, imgContains }) => {
+  rules.forEach(({ el, max, imgCheck }) => {
+    if (!el) return
+
+    // set max height to limit the height
+    if (imgCheck) el.style.maxHeight = `${max + 1}px` // allow 2px more for next detecting
+
     const _apply = () => {
-      if (!el) return
-      if (!conf.scrollable)
-        applyHeightLimit({
-          el,
-          maxHeight,
-          postBtnClick: conf.postExpandBtnClick,
-        })
-      else applyScrollableHeightLimit({ el, maxHeight })
+      const postBtnClick = conf.postExpandBtnClick
+      !conf.scrollable
+        ? applyHeightLimit({ el, max, postBtnClick })
+        : applyScrollableHeightLimit({ el, max })
     }
 
     // checking
     const _check = () => {
-      if (el && Utils.getHeight(el) > maxHeight) _apply() // 是否超过高度
+      if (Utils.getHeight(el) > max) _apply() // 是否超过高度
+    }
+
+    _check() // check immediately
+
+    // image check
+    if (imgCheck) {
+      // check again when image loaded
+      el.querySelectorAll<HTMLImageElement>('.atk-content img').forEach((img) => {
+        img.onload = () => _check()
+      })
     }
-    _check() // check now
-    if (imgContains && el)
-      // check again if img contains
-      Utils.onImagesLoaded(el, () => _check())
   })
 }
 
@@ -52,15 +59,15 @@ const HEIGHT_LIMIT_CSS = 'atk-height-limit'
 /** Apply height limit on an element and add expand btn */
 export function applyHeightLimit(obj: {
   el: HTMLElement
-  maxHeight: number
+  max: number
   postBtnClick?: (e: MouseEvent) => void
 }) {
   if (!obj.el) return
-  if (!obj.maxHeight) return
+  if (!obj.max) return
   if (obj.el.classList.contains(HEIGHT_LIMIT_CSS)) return
 
   obj.el.classList.add(HEIGHT_LIMIT_CSS)
-  obj.el.style.height = `${obj.maxHeight}px`
+  obj.el.style.height = `${obj.max}px`
   obj.el.style.overflow = 'hidden'
 
   /* Expand button */
@@ -86,16 +93,17 @@ export function disposeHeightLimit($el: HTMLElement) {
     if (e.classList.contains('atk-height-limit-btn')) e.remove()
   })
   $el.style.height = ''
+  $el.style.maxHeight = ''
   $el.style.overflow = ''
 }
 
 /** Height limit scrollable CSS class name */
 const HEIGHT_LIMIT_SCROLL_CSS = 'atk-height-limit-scroll'
 
 /** Apply scrollable height limit */
-export function applyScrollableHeightLimit(obj: { el: HTMLElement; maxHeight: number }) {
-  if (!obj.el) return
-  if (obj.el.classList.contains(HEIGHT_LIMIT_SCROLL_CSS)) return
-  obj.el.classList.add(HEIGHT_LIMIT_SCROLL_CSS)
-  obj.el.style.height = `${obj.maxHeight}px`
+export function applyScrollableHeightLimit(opt: { el: HTMLElement; max: number }) {
+  if (!opt.el) return
+  if (opt.el.classList.contains(HEIGHT_LIMIT_SCROLL_CSS)) return
+  opt.el.classList.add(HEIGHT_LIMIT_SCROLL_CSS)
+  opt.el.style.height = `${opt.max}px`
 }
diff --git a/ui/artalk/src/comment/render.ts b/ui/artalk/src/comment/render.ts
@@ -88,10 +88,10 @@ export default class Render {
       },
       [
         // 评论内容限高
-        { el: this.$content, max: contentMaxH, imgContains: true },
-        { el: this.$replyTo, max: contentMaxH, imgContains: true },
+        { el: this.$content, max: contentMaxH, imgCheck: true },
+        { el: this.$replyTo, max: contentMaxH, imgCheck: true },
         // 子评论区域限高（仅嵌套模式）
-        { el: this.$childrenWrap, max: childrenMaxH, imgContains: false },
+        { el: this.$childrenWrap, max: childrenMaxH, imgCheck: false },
       ],
     )
   }

diff --git a/ui/artalk/src/lib/utils.ts b/ui/artalk/src/lib/utils.ts
@@ -106,27 +106,6 @@ export function timeAgo(date: Date, $t: Function = (n: string) => n) {
   }
 }
 
-/** 所有图片加载完毕后执行 */
-export function onImagesLoaded($container: HTMLElement, event: Function) {
-  if (!$container) return
-  const images = $container.getElementsByTagName('img')
-  if (!images.length) return
-  let loaded = images.length
-  for (let i = 0; i < images.length; i++) {
-    if (images[i].complete) {
-      loaded--
-    } else {
-      // eslint-disable-next-line @typescript-eslint/no-loop-func
-      images[i].addEventListener('load', () => {
-        loaded--
-        if (loaded === 0) event()
-      })
-    }
-
-    if (loaded === 0) event()
-  }
-}
-
 export function getGravatarURL(opts: { params: string; mirror: string; emailMD5: string }) {
   return `${opts.mirror.replace(/\/$/, '')}/${opts.emailMD5}?${opts.params.replace(/^\?/, '')}`
 }