artalk 2.6.4 → 2.7.0

package/src/lib/user.ts

@@ -1,13 +1,14 @@
-import { LocalUser } from "~/types/artalk-config"
-import Context from '~/types/context'
+import type { LocalUser } from '~/types'
+
+const LOCAL_USER_KEY = 'ArtalkUser'
 
 class User {
-  public ctx?: Context
-  public data: LocalUser
+  data: LocalUser
+  onUserChanged: ((user: LocalUser) => void) | null = null
 
-  public constructor() {
+  constructor() {
     // 从 localStorage 导入
-    const localUser = JSON.parse(window.localStorage.getItem('ArtalkUser') || '{}')
+    const localUser = JSON.parse(window.localStorage.getItem(LOCAL_USER_KEY) || '{}')
     this.data = {
       nick: localUser.nick || '',
       email: localUser.email || '',
@@ -17,22 +18,26 @@ class User {
     }
   }
 
-  public setContext(ctx: Context) {
-    this.ctx = ctx
-  }
-
   /** 保存用户到 localStorage 中 */
-  public update(obj: Partial<LocalUser> = {}) {
+  update(obj: Partial<LocalUser> = {}) {
     Object.entries(obj).forEach(([key, value]) => {
       this.data[key] = value
     })
 
-    window.localStorage.setItem('ArtalkUser', JSON.stringify(this.data))
-    this.ctx?.trigger('user-changed', this.data)
+    window.localStorage.setItem(LOCAL_USER_KEY, JSON.stringify(this.data))
+    this.onUserChanged && this.onUserChanged(this.data)
+  }
+
+  public setOnUserChanged(fn: ((user: LocalUser) => void) | null) {
+    this.onUserChanged = fn
   }
 
-  /** 注销，清除用户登录状态 */
-  public logout() {
+  /**
+   * Logout
+   *
+   * @description Logout will clear login status, but not clear user data (nick, email, link)
+   */
+  logout() {
     this.update({
       token: '',
       isAdmin: false
@@ -40,7 +45,7 @@ class User {
   }
 
   /** 是否已填写基本用户信息 */
-  public checkHasBasicUserInfo() {
+  checkHasBasicUserInfo() {
     return !!this.data.nick && !!this.data.email
   }
 }

package/src/lib/utils.ts

@@ -1,5 +1,3 @@
-import Context from '~/types/context'
-
 export function createElement<E extends HTMLElement = HTMLElement>(htmlStr: string = ''): E {
   const div = document.createElement('div')
   div.innerHTML = htmlStr.trim()
@@ -29,11 +27,25 @@ export function getQueryParam(name: string) {
   return match && decodeURIComponent(match[1].replace(/\+/g, ' '));
 }
 
-export function getOffset(el: HTMLElement) {
-  const rect = el.getBoundingClientRect()
+export function getOffset(el: HTMLElement, relativeTo?: HTMLElement) {
+  const getOffsetRecursive = (element: HTMLElement): { top: number, left: number } => {
+    const rect = element.getBoundingClientRect()
+    const scrollLeft = window.pageXOffset || document.documentElement.scrollLeft
+    const scrollTop = window.pageYOffset || document.documentElement.scrollTop
+    return {
+      top: rect.top + scrollTop,
+      left: rect.left + scrollLeft
+    }
+  }
+
+  const elOffset = getOffsetRecursive(el)
+  if (!relativeTo) return elOffset
+
+  const relativeToOffset = getOffsetRecursive(relativeTo)
+
   return {
-    top: rect.top + window.scrollY,
-    left: rect.left + window.scrollX
+    top: elOffset.top - relativeToOffset.top,
+    left: elOffset.left - relativeToOffset.left
   }
 }
 
@@ -55,7 +67,7 @@ export function dateFormat(date: Date) {
   return `${vYear}-${vMonth}-${vDay}`
 }
 
-export function timeAgo(date: Date, ctx: Context) {
+export function timeAgo(date: Date, $t: Function = (n: string) => n) {
   try {
     const oldTime = date.getTime()
     const currTime = new Date().getTime()
@@ -74,17 +86,17 @@ export function timeAgo(date: Date, ctx: Context) {
           // 计算相差秒数
           const leave3 = leave2 % (60 * 1000) // 计算分钟数后剩余的毫秒数
           const seconds = Math.round(leave3 / 1000)
-          if (seconds < 10) return ctx.$t('now')
-          return `${seconds} ${ctx.$t('seconds')}`
+          if (seconds < 10) return $t('now')
+          return `${seconds} ${$t('seconds')}`
         }
-        return `${minutes} ${ctx.$t('minutes')}`
+        return `${minutes} ${$t('minutes')}`
       }
-      return `${hours} ${ctx.$t('hours')}`
+      return `${hours} ${$t('hours')}`
     }
-    if (days < 0) return ctx.$t('now')
+    if (days < 0) return $t('now')
 
     if (days < 8) {
-      return `${days} ${ctx.$t('days')}`
+      return `${days} ${$t('days')}`
     }
 
     return dateFormat(date)
@@ -115,9 +127,8 @@ export function onImagesLoaded($container: HTMLElement, event: Function) {
   }
 }
 
-export function getGravatarURL(ctx: Context, emailMD5: string) {
-  const { mirror, params } = ctx.conf.gravatar
-  return `${mirror.replace(/\/$/, '')}/${emailMD5}?${params.replace(/^\?/, '')}`
+export function getGravatarURL(opts: { params: string, mirror: string, emailMD5: string }) {
+  return `${opts.mirror.replace(/\/$/, '')}/${opts.emailMD5}?${opts.params.replace(/^\?/, '')}`
 }
 
 export function sleep(ms: number) {
@@ -185,8 +196,8 @@ export function isValidURL(urlRaw: string) {
 }
 
 /** 获取基于 conf.server 的 URL */
-export function getURLBasedOnApi(ctx: Context, path: string) {
-  return getURLBasedOn(ctx.conf.server, path)
+export function getURLBasedOnApi(opts: { base: string, path: string }) {
+  return getURLBasedOn(opts.base, opts.path)
 }
 
 /** 获取基于某个 baseURL 的 URL */

package/src/list/comment.ts

@@ -0,0 +1,20 @@
+import type { ContextApi, CommentData } from '~/types'
+import Comment from '../comment/comment'
+
+export function createComment(ctx: ContextApi, comment: CommentData, ctxComments: CommentData[]): Comment {
+  const instance = new Comment(ctx, comment, {
+    isFlatMode: ctx.getData().getListLastFetch()?.params.flatMode!,
+    afterRender: () => {
+      ctx.trigger('comment-rendered', instance)
+    },
+    onDelete: (c: Comment) => {
+      ctx.getData().deleteComment(c.getID())
+    },
+    replyTo: (comment.rid ? ctxComments.find(c => c.id === comment.rid) : undefined)
+  })
+
+  // 渲染元素
+  instance.render()
+
+  return instance
+}

package/src/list/layout.ts

@@ -0,0 +1,120 @@
+import type { CommentData } from '~/types'
+import * as Ui from '@/lib/ui'
+import Comment from '../comment/comment'
+import * as ListNest from './nest'
+
+export interface LayoutOptions {
+  $commentsWrap: HTMLElement
+  nestSortBy: ListNest.SortByType
+  nestMax: number
+  flatMode: boolean
+
+  createCommentNode(comment: CommentData, ctxComments: CommentData[]): Comment
+  findCommentNode(id: number): Comment|undefined
+  getCommentDataList(): CommentData[]
+}
+
+export default class ListLayout {
+  constructor(private options: LayoutOptions) {}
+
+  // TODO refactor `if syntax` to strategy pattern
+  import(comments: CommentData[]) {
+    if (this.options.flatMode) {
+      comments.forEach((commentData: CommentData) => {
+        this.putCommentFlatMode(commentData, comments, 'append')
+      })
+    } else {
+      this.importCommentsNestMode(comments)
+    }
+  }
+
+  insert(comment: CommentData) {
+    if (!this.options.flatMode) {
+      this.insertCommentNest(comment)
+    } else {
+      this.insertCommentFlatMode(comment)
+    }
+  }
+
+  // 导入评论 · 嵌套模式
+  private importCommentsNestMode(srcData: CommentData[]) {
+    // 遍历 root 评论
+    const rootNodes = ListNest.makeNestCommentNodeList(srcData, this.options.nestSortBy, this.options.nestMax)
+    rootNodes.forEach((rootNode: ListNest.CommentNode) => {
+      const rootC = this.options.createCommentNode(rootNode.comment, srcData)
+
+      // 显示并播放渐入动画
+      this.options.$commentsWrap?.appendChild(rootC.getEl())
+      rootC.getRender().playFadeAnim()
+
+      // 加载子评论
+      const loadChildren = (parentC: Comment, parentNode: ListNest.CommentNode) => {
+        parentNode.children.forEach((node: ListNest.CommentNode) => {
+          const childD = node.comment
+          const childC = this.options.createCommentNode(childD, srcData)
+
+          // 插入到父评论中
+          parentC.putChild(childC)
+
+          // 递归加载子评论
+          loadChildren(childC, node)
+        })
+      }
+      loadChildren(rootC, rootNode)
+
+      // 限高检测
+      rootC.getRender().checkHeightLimit()
+    })
+  }
+
+  /** 导入评论 · 平铺模式 */
+  private putCommentFlatMode(cData: CommentData, ctxData: CommentData[], insertMode: 'append'|'prepend') {
+    if (cData.is_collapsed) cData.is_allow_reply = false
+    const comment = this.options.createCommentNode(cData, ctxData)
+
+    // 可见评论添加到界面
+    // 注：不可见评论用于显示 “引用内容”
+    if (cData.visible) {
+      if (insertMode === 'append') this.options.$commentsWrap?.append(comment.getEl())
+      if (insertMode === 'prepend') this.options.$commentsWrap?.prepend(comment.getEl())
+      comment.getRender().playFadeAnim()
+    }
+
+    // 平铺评论插入后 · 内容限高检测
+    comment.getRender().checkHeightLimit()
+
+    return comment
+  }
+
+  private insertCommentNest(commentData: CommentData) {
+    // 嵌套模式
+    const comment = this.options.createCommentNode(commentData, this.options.getCommentDataList())
+
+    if (commentData.rid === 0) {
+      // root评论 新增
+      this.options.$commentsWrap?.prepend(comment.getEl())
+    } else {
+      // 子评论 新增
+      const parent = this.options.findCommentNode(commentData.rid)
+      if (parent) {
+        parent.putChild(comment, (this.options.nestSortBy === 'DATE_ASC' ? 'append' : 'prepend'))
+
+        // 若父评论存在 “子评论部分” 限高，取消限高
+        comment.getParents().forEach((p) => {
+          p.getRender().heightLimitRemoveForChildren()
+        })
+      }
+    }
+
+    comment.getRender().checkHeightLimit()
+
+    Ui.scrollIntoView(comment.getEl()) // 滚动到可以见
+    comment.getRender().playFadeAnim() // 播放评论渐出动画
+  }
+
+  private insertCommentFlatMode(commentData: CommentData) {
+    // 平铺模式
+    const comment = this.putCommentFlatMode(commentData, this.options.getCommentDataList(), 'prepend')
+    Ui.scrollIntoView(comment.getEl()) // 滚动到可见
+  }
+}

package/src/list/list.html

@@ -11,7 +11,9 @@
       </span>
     </div>
   </div>
-  <div class="atk-list-body"></div>
+  <div class="atk-list-body">
+    <div class="atk-list-comments-wrap"></div>
+  </div>
   <div class="atk-list-footer">
     <div class="atk-copyright"></div>
   </div>

package/src/list/list.ts

@@ -1,223 +1,79 @@
-import { ListData, NotifyData } from '~/types/artalk-data'
-import Context from '~/types/context'
-import { version as ARTALK_VERSION } from '../../package.json'
+import type { ContextApi } from '~/types'
+import Component from '../lib/component'
 import * as Utils from '../lib/utils'
-import * as Ui from '../lib/ui'
-import User from '../lib/user'
+import CommentNode from '../comment/comment'
 import ListHTML from './list.html?raw'
-import ListLite from './list-lite'
-import * as ListUi from './list-ui'
+import ListLayout from './layout'
+import { createComment as createCommentNode } from './comment'
+import { initListPaginatorFunc } from './page'
 
-export default class List extends ListLite {
-  private $closeCommentBtn!: HTMLElement
-  private $openSidebarBtn!: HTMLElement
-  private $unreadBadge!: HTMLElement
-  private $commentCount!: HTMLElement
-  private $commentCountNum!: HTMLElement
-  private $dropdownWrap?: HTMLElement
+export default class List extends Component {
+  /** 列表评论集区域元素 */
+  $commentsWrap!: HTMLElement
+  public getCommentsWrapEl() { return this.$commentsWrap }
 
-  constructor (ctx: Context) {
-    const el = Utils.createElement(ListHTML)
+  protected commentNodes: CommentNode[] = []
+  getCommentNodes() { return this.commentNodes }
 
+  constructor (ctx: ContextApi) {
     super(ctx)
 
-    // 把 listLite $el 变为子元素
-    el.querySelector('.atk-list-body')!.append(this.$el)
-    this.$el = el
+    // Init base element
+    this.$el = Utils.createElement(ListHTML)
+    this.$commentsWrap = this.$el.querySelector('.atk-list-comments-wrap')!
 
-    // 分页模式
-    this.repositionAt = this.$el
+    // Init paginator
+    initListPaginatorFunc(ctx)
 
-    // 操作按钮
-    this.initListActionBtn()
-
-    const countNumHTML = '<span class="atk-comment-count-num">0</span>'
-    this.$commentCount = this.$el.querySelector('.atk-comment-count')!
-
-    const refreshCountNumEl = () => {
-      this.$commentCount.innerHTML = this.$t('counter', {
-        count: countNumHTML,
-      })
-      this.$commentCountNum = this.$commentCount.querySelector('.atk-comment-count-num')!
-    }
-    refreshCountNumEl()
-
-    // copyright
-    this.$el.querySelector<HTMLElement>('.atk-copyright')!.innerHTML = `Powered By <a href="https://artalk.js.org" target="_blank" title="Artalk v${ARTALK_VERSION}">Artalk</a>`
+    // Bind events
+    this.initCrudEvents()
+  }
 
-    // event listen
-    this.ctx.on('conf-loaded', () => {
-      // i18n support when locale changed
-      refreshCountNumEl()
-      this.refreshUI()
+  getListLayout() {
+    return new ListLayout({
+      $commentsWrap: this.$commentsWrap,
+      nestSortBy: this.ctx.conf.nestSort,
+      nestMax: this.ctx.conf.nestMax,
+      flatMode: this.ctx.conf.flatMode as boolean,
+      // flatMode must be boolean because it had been handled when Artalk.init
+      createCommentNode: (d, c) => {
+        const node = createCommentNode(this.ctx, d, c)
+        this.commentNodes.push(node)
+        return node
+      },
+      findCommentNode: (id) => this.commentNodes.find(c => c.getID() === id),
+      getCommentDataList: () => this.ctx.getData().getComments(),
     })
   }
 
-  private initListActionBtn() {
-    // 侧边栏呼出按钮
-    this.$openSidebarBtn = this.$el.querySelector('[data-action="open-sidebar"]')!
-    this.$closeCommentBtn = this.$el.querySelector('[data-action="admin-close-comment"]')!
-    this.$unreadBadge = this.$el.querySelector('.atk-unread-badge')!
-
-    this.$openSidebarBtn.addEventListener('click', () => {
-      this.ctx.showSidebar()
+  private initCrudEvents() {
+    this.ctx.on('list-load', (comments) => {
+      // 导入数据
+      this.getListLayout().import(comments)
     })
 
-    // 关闭评论按钮
-    this.$closeCommentBtn.addEventListener('click', () => {
-      if (!this.data) return
-
-      this.data.page.admin_only = !this.data.page.admin_only
-      this.adminPageEditSave()
+    this.ctx.on('list-loaded', (comments) => {
+      if (comments.length === 0) this.$commentsWrap.innerHTML = ''
     })
-  }
-
-  /** 刷新界面 */
-  public refreshUI() {
-    super.refreshUI()
-
-    this.$commentCountNum.innerText = String(Number(this.data?.total) || 0)
-
-    // 已输入个人信息
-    if (!!User.data.nick && !!User.data.email) {
-      this.$openSidebarBtn.classList.remove('atk-hide')
-    } else {
-      this.$openSidebarBtn.classList.add('atk-hide')
-    }
-
-    this.$openSidebarBtn.querySelector<HTMLElement>('.atk-text')!
-      .innerText = (!User.data.isAdmin) ? this.$t('msgCenter') : this.$t('ctrlCenter')
-
-    // 关闭评论
-    if (!!this.data && !!this.data.page && this.data.page.admin_only === true) {
-      this.ctx.editorClose()
-      this.$closeCommentBtn.innerHTML = this.$t('openComment')
-    } else {
-      this.ctx.editorOpen()
-      this.$closeCommentBtn.innerHTML = this.$t('closeComment')
-    }
-
-    // 评论列表排序 Dropdown 下拉选择层
-    if (this.ctx.conf.listSort) {
-      this.initDropdown()
-    } else {
-      ListUi.removeDropdown({
-        $dropdownWrap: this.$commentCount
-      })
-    }
-  }
-
-  protected onLoad(data: ListData, offset: number) {
-    super.onLoad(data, offset)
-
-    // 检测锚点跳转
-    if (!this.goToCommentFounded) this.checkGoToCommentByUrlHash()
-
-    // 防止评论框被吞
-    if (this.ctx.conf.editorTravel === true) {
-      this.ctx.editorTravelBack()
-    }
-  }
 
-  private goToCommentFounded = false
-  public goToCommentDelay = true
-
-  /** 跳到评论项位置 - 根据 `location.hash` */
-  public checkGoToCommentByUrlHash() {
-    let commentId = Number(Utils.getQueryParam('atk_comment')) // same as backend GetReplyLink()
-    if (!commentId) {
-      const match = window.location.hash.match(/#atk-comment-([0-9]+)/)
-      if (!match || !match[1] || Number.isNaN(Number(match[1]))) return
-      commentId = Number(match[1])
-    }
-    if (!commentId) return
-
-    const comment = this.ctx.findComment(commentId)
-    if (!comment) { // 若找不到评论
-      // 自动翻页
-      this.pgHolder?.next()
-      return
-    }
-
-    // 已阅 API
-    const notifyKey = Utils.getQueryParam('atk_notify_key')
-    if (notifyKey) {
-      this.ctx.getApi().user.markRead(commentId, notifyKey)
-        .then(() => {
-          this.unread = this.unread.filter(o => o.comment_id !== commentId)
-          this.updateUnread(this.unread)
-        })
-    }
-
-    // 若父评论存在 “子评论部分” 限高，取消限高
-    comment.getParents().forEach((p) => {
-      p.getRender().heightLimitRemoveForChildren()
+    // When comment insert
+    this.ctx.on('comment-inserted', (comment) => {
+      this.getListLayout().insert(comment)
     })
 
-    const goTo = () => {
-      Ui.scrollIntoView(comment.getEl(), false)
-
-      comment.getEl().classList.remove('atk-flash-once')
-      window.setTimeout(() => {
-        comment.getEl().classList.add('atk-flash-once')
-      }, 150)
-    }
-
-    if (!this.goToCommentDelay) goTo()
-    else window.setTimeout(() => goTo(), 350)
-
-    this.goToCommentFounded = true
-    this.goToCommentDelay = true // reset
-  }
-
-  /** 管理员设置页面信息 */
-  public adminPageEditSave () {
-    if (!this.data || !this.data.page) return
-
-    this.ctx.editorShowLoading()
-    this.ctx.getApi().page.pageEdit(this.data.page)
-      .then((page) => {
-        if (this.data)
-          this.data.page = { ...page }
-        this.refreshUI()
-      })
-      .catch(err => {
-        this.ctx.editorShowNotify(`${this.$t('editFail')}: ${err.msg || String(err)}`, 'e')
-      })
-      .finally(() => {
-        this.ctx.editorHideLoading()
-      })
-  }
-
-  public showUnreadBadge(count: number) {
-    if (count > 0) {
-      this.$unreadBadge.innerText = `${Number(count || 0)}`
-      this.$unreadBadge.style.display = 'block'
-    } else {
-      this.$unreadBadge.style.display = 'none'
-    }
-  }
-
-  /** 初始化选择下拉层 */
-  protected initDropdown() {
-    const reloadUseParamsEditor = (func: (p: any) => void) => {
-      this.paramsEditor = func
-      this.fetchComments(0)
-    }
-
-    ListUi.renderDropdown({
-      $dropdownWrap: this.$commentCount,
-      dropdownList: [
-        [this.$t('sortLatest'), () => { reloadUseParamsEditor(p => { p.sort_by = 'date_desc' }) }],
-        [this.$t('sortBest'), () => { reloadUseParamsEditor(p => { p.sort_by = 'vote' }) }],
-        [this.$t('sortOldest'), () => { reloadUseParamsEditor(p => { p.sort_by = 'date_asc' }) }],
-        [this.$t('sortAuthor'), () => { reloadUseParamsEditor(p => { p.view_only_admin = true }) }],
-      ]
+    // When comment delete
+    this.ctx.on('comment-deleted', (comment) => {
+      const node = this.commentNodes.find(c => c.getID() === comment.id)
+      if (!node) { console.error(`comment node id=${comment.id} not found`);return }
+      node.getEl().remove()
+      this.commentNodes = this.commentNodes.filter(c => c.getID() !== comment.id)
+      // TODO remove child nodes
     })
-  }
 
-  public updateUnread(notifies: NotifyData[]): void {
-    super.updateUnread(notifies)
-    this.showUnreadBadge(notifies?.length || 0)
+    // When comment update
+    this.ctx.on('comment-updated', (comment) => {
+      const node = this.commentNodes.find(c => c.getID() === comment.id)
+      node && node.setData(comment)
+    })
   }
 }

package/src/list/{list-nest.ts → nest.ts}

@@ -1,4 +1,4 @@
-import { CommentData } from '~/types/artalk-data'
+import type { CommentData } from '~/types'
 
 export type CommentNode = {
   id: number