artalk 2.6.4 → 2.7.1

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

package/src/list/page.ts

@@ -0,0 +1,97 @@
+import type { ArtalkConfig, ContextApi } from '~/types'
+import $t from '@/i18n'
+import { Paginator } from './paginator'
+import ReadMorePaginator from './paginator/read-more'
+import UpDownPaginator from './paginator/up-down'
+
+function createPaginatorByConf(conf: ArtalkConfig): Paginator {
+  if (conf.pagination.readMore) return new ReadMorePaginator()
+  return new UpDownPaginator()
+}
+
+function getPageDataByLastData(ctx: ContextApi): { offset: number, total: number } {
+  const last = ctx.getData().getListLastFetch()
+  const r = { offset: 0, total: 0 }
+  if (!last) return r
+
+  r.offset = last.params.offset
+  if (last.data) r.total = last.params.flatMode ? last.data.total : last.data.total_roots
+
+  return r
+}
+
+export const initListPaginatorFunc = (ctx: ContextApi) => {
+  let paginator: Paginator|null = null
+
+  // Init paginator when conf loaded
+  ctx.on('conf-loaded', (conf) => {
+    const list = ctx.get('list')
+
+    if (paginator) paginator.dispose() // if had been init, dispose it
+
+    // create paginator instance
+    paginator = createPaginatorByConf(conf)
+
+    // create paginator dom
+    const { offset, total } = getPageDataByLastData(ctx)
+    const $paginator = paginator.create({
+      ctx, pageSize: conf.pagination.pageSize, total,
+
+      readMoreAutoLoad: conf.pagination.autoLoad,
+    })
+
+    // mount paginator dom
+    list.$commentsWrap.after($paginator)
+
+    // update paginator info
+    paginator?.update(offset, total)
+  })
+
+  // When list loaded
+  ctx.on('list-loaded', (comments) => {
+    // update paginator info
+    const { offset, total } = getPageDataByLastData(ctx)
+    paginator?.update(offset, total)
+  })
+
+  // When list fetch
+  ctx.on('list-fetch', (params) => {
+    // if clear comments when fetch new page data
+    if (ctx.getData().getComments().length > 0 && paginator?.getIsClearComments(params)) {
+      ctx.getData().clearComments()
+    }
+  })
+
+  // When list error
+  ctx.on('list-error', () => {
+    paginator?.showErr?.($t('loadFail'))
+  })
+
+  // List goto auto next page when comment not found
+  const autoSwitchPageForFindComment = (commentID: number) => {
+    const comment = ctx.getData().findComment(commentID)
+    if (!!comment || !paginator?.getHasMore()) return
+
+    // wait for list loaded
+    ctx.on('list-loaded', () => {
+      autoSwitchPageForFindComment(commentID) // recursive, until comment found or no more page
+    }, { once: true })
+
+    // TODO 自动范围改为直接跳转到计算后的页面
+    setTimeout(() => {
+      paginator?.next()
+    }, 80)
+  }
+
+  ctx.on('list-goto', (commentID) => {
+    autoSwitchPageForFindComment(commentID)
+  })
+
+  // loading
+  ctx.on('list-fetch', (params) => {
+    paginator?.setLoading(true)
+  })
+  ctx.on('list-fetched', ({ params }) => {
+    paginator?.setLoading(false)
+  })
+}

package/src/list/paginator/index.ts

@@ -1,13 +1,25 @@
-import ListLite from '../list-lite'
-import PgHolder from './holder'
+import type { ContextApi, ListFetchParams } from '~/types'
+import UpDownPaginator from './up-down'
+import ReadMorePaginator from './read-more'
 
-export type TPgMode = 'pagination'|'read-more'
-
-export interface IPgHolderConf {
-  list: ListLite
-  mode: TPgMode
+export interface IPgHolderOpt {
+  ctx: ContextApi
   total: number
   pageSize: number
+
+  readMoreAutoLoad?: boolean
+}
+
+export interface Paginator {
+  create(opts: IPgHolderOpt): HTMLElement
+  setLoading(val: boolean): void
+  update(offset: number, total: number): void
+  next(): void
+  showErr?(msg: string): void
+  getHasMore(): boolean
+  /** Clear comments when fetch new page data */
+  getIsClearComments(params: Partial<ListFetchParams>): boolean
+  dispose(): void
 }
 
-export default PgHolder
+export default { UpDownPaginator, ReadMorePaginator }

package/src/list/paginator/read-more.ts

@@ -0,0 +1,67 @@
+import type { ListFetchParams } from '~/types'
+import ReadMoreBtn from '@/components/read-more-btn'
+import $t from '@/i18n'
+import type { Paginator, IPgHolderOpt } from '.'
+
+/**
+ * 阅读更多形式的分页
+ */
+export default class ReadMorePaginator implements Paginator {
+  private instance!: ReadMoreBtn
+  private onReachedBottom: (() => void) | null = null
+  private opt!: IPgHolderOpt
+
+  create(opt: IPgHolderOpt) {
+    this.opt = opt
+
+    this.instance = new ReadMoreBtn({
+      pageSize: opt.pageSize,
+      onClick: async (o) => {
+        opt.ctx.fetch({
+          offset: o,
+        })
+      },
+      text: $t('loadMore'),
+    })
+
+    // 滚动到底部自动加载
+    if (opt.readMoreAutoLoad) {
+      this.onReachedBottom = () => {
+        if (!this.instance.hasMore || this.opt.ctx.getData().getLoading()) return
+        this.instance.click()
+      }
+      this.opt.ctx.on('list-reach-bottom', this.onReachedBottom)
+    }
+
+    return this.instance.$el
+  }
+
+  setLoading(val: boolean) {
+    this.instance.setLoading(val)
+  }
+
+  update(offset: number, total: number) {
+    this.instance.update(offset, total)
+  }
+
+  showErr(msg: string) {
+    this.instance.showErr(msg)
+  }
+
+  next() {
+    this.instance.click()
+  }
+
+  getHasMore(): boolean {
+    return this.instance.hasMore
+  }
+
+  getIsClearComments(params: Partial<ListFetchParams>): boolean {
+    return params.offset === 0
+  }
+
+  dispose(): void {
+    this.onReachedBottom && this.opt.ctx.off('list-reach-bottom', this.onReachedBottom)
+    this.instance.$el.remove()
+  }
+}

package/src/list/paginator/up-down.ts

@@ -0,0 +1,51 @@
+import PaginationComponent from '@/components/pagination'
+import type { Paginator, IPgHolderOpt } from '.'
+
+/**
+ * 翻页形式的分页
+ */
+export default class UpDownPaginator implements Paginator {
+  private instance!: PaginationComponent
+
+  create(opt: IPgHolderOpt) {
+    this.instance = new PaginationComponent(opt.total, {
+      pageSize: opt.pageSize,
+      onChange: async (o) => {
+        opt.ctx.editorResetState() // 防止评论框被吞
+
+        opt.ctx.fetch({
+          offset: o,
+          onSuccess: () => {
+            opt.ctx.listGotoFirst()
+          }
+        })
+      }
+    })
+
+    return this.instance.$el
+  }
+
+  setLoading(val: boolean) {
+    this.instance.setLoading(val)
+  }
+
+  update(offset: number, total: number) {
+    this.instance.update(offset, total)
+  }
+
+  next() {
+    this.instance.next()
+  }
+
+  getHasMore(): boolean {
+    return this.instance.getHasMore()
+  }
+
+  getIsClearComments(): boolean {
+    return true
+  }
+
+  dispose(): void {
+    this.instance.$el.remove()
+  }
+}

package/src/main.ts

@@ -1,3 +1,14 @@
 import Artalk from './artalk'
+import * as ArtalkType from '../types'
 
+export { ArtalkType }
 export default Artalk
+
+// Expose the static methods from the Artalk class
+// because direct export of static methods is not supported
+// for adapting to different environments like CommonJS and browser IIFE
+// for example, we can use `Artalk.init()` rather than `Artalk.default.init()`
+// therefore, we need to manually expose the static methods in the Artalk class.
+export const init = Artalk.init
+export const use = Artalk.use
+export const loadCountWidget = Artalk.loadCountWidget

package/src/plugins/admin-only-elem.ts

@@ -0,0 +1,40 @@
+import type { ArtalkPlugin } from '~/types'
+
+export const AdminOnlyElem: ArtalkPlugin = (ctx) => {
+  const scanApply = () => {
+    applyAdminOnlyEls(ctx.get('user').data.isAdmin, getAdminOnlyEls({
+      $root: ctx.$root
+    }))
+  }
+
+  ctx.on('list-loaded', () => {
+    scanApply()
+  })
+
+  ctx.on('user-changed', (user) => {
+    scanApply()
+  })
+}
+
+function getAdminOnlyEls(opts: { $root: HTMLElement }): HTMLElement[] {
+  const els: HTMLElement[] = []
+
+  // elements in $root
+  opts.$root.querySelectorAll<HTMLElement>(`[atk-only-admin-show]`).forEach(item => els.push(item))
+
+  // TODO provide a Artalk.conf hook to set whitelist of admin-only elements,
+  // and move following code to that hook (move into packages/artalk-sidebar)
+
+  // elements in sidebar
+  const $sidebarEl = document.querySelector<HTMLElement>('.atk-sidebar')
+  if ($sidebarEl) $sidebarEl.querySelectorAll<HTMLElement>(`[atk-only-admin-show]`).forEach(item => els.push(item))
+
+  return els
+}
+
+function applyAdminOnlyEls(isAdmin: boolean, els: HTMLElement[]) {
+  els.forEach(($item: HTMLElement) => {
+    if (isAdmin) $item.classList.remove('atk-hide')
+    else $item.classList.add('atk-hide')
+  })
+}

package/src/plugins/conf-remoter.ts

@@ -0,0 +1,54 @@
+import type { ArtalkConfig, ArtalkPlugin, ContextApi } from '~/types'
+import { handleConfFormServer } from '@/config'
+import { showErrorDialog } from '../components/error-dialog'
+
+export const ConfRemoter: ArtalkPlugin = (ctx) => {
+  ctx.on('inited', () => {
+    loadConf(ctx)
+  })
+}
+
+function loadConf(ctx: ContextApi) {
+  ctx.getApi().system.conf().then((data) => {
+    let conf: Partial<ArtalkConfig> = {
+      apiVersion: data.version.version, // version info
+    }
+
+    // reference conf from backend
+    if (ctx.conf.useBackendConf) {
+      if (!data.frontend_conf) throw new Error('The remote backend does not respond to the frontend conf, but `useBackendConf` conf is enabled')
+      conf = { ...conf, ...handleConfFormServer(data.frontend_conf) }
+    }
+
+    // apply conf modifier
+    ctx.conf.remoteConfModifier && ctx.conf.remoteConfModifier(conf)
+
+    ctx.updateConf(conf)
+  }).catch((err) => {
+    ctx.updateConf({})
+
+    let sidebarOpenView = ''
+
+    // if response err_no_site, modify the sidebar open view to create site
+    if (err.data?.err_no_site) {
+      const viewLoadParam = { create_name: ctx.conf.site, create_urls: `${window.location.protocol}//${window.location.host}` }
+      sidebarOpenView = `sites|${JSON.stringify(viewLoadParam)}`
+    }
+
+    showErrorDialog({
+      $err: ctx.get('list').$el,
+      errMsg: err.msg || String(err),
+      errData: err.data,
+      retryFn: () => loadConf(ctx),
+      onOpenSidebar:() => ctx.showSidebar({
+        view: sidebarOpenView as any
+      })
+    })
+
+    throw err
+  }).then(() => {
+    // 评论获取
+    if (ctx.conf.remoteConfModifier) return // only auto fetch when no remoteConfModifier
+    ctx.fetch({ offset: 0 })
+  }).catch(() => {})
+}

package/src/plugins/dark-mode.ts

@@ -0,0 +1,12 @@
+import type { ArtalkPlugin } from '~/types'
+import { applyDarkMode } from '@/components/dark-mode'
+
+export const DarkMode: ArtalkPlugin = (ctx) => {
+  const sync = () => {
+    applyDarkMode([ctx.$root, ctx.get('layerManager').getEl()], ctx.conf.darkMode)
+  }
+
+  ctx.on('inited', () => sync())
+  ctx.on('conf-loaded', () => sync())
+  ctx.on('dark-mode-changed', () => sync())
+}