artalk 2.7.0 → 2.7.2

package/src/list/layout.ts

@@ -1,120 +0,0 @@
-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

@@ -1,20 +0,0 @@
-<div class="atk-list">
-  <div class="atk-list-header">
-    <div class="atk-comment-count">
-      <div class="atk-text"></div>
-    </div>
-    <div class="atk-right-action">
-      <span data-action="admin-close-comment" class="atk-hide" atk-only-admin-show></span>
-      <span data-action="open-sidebar" class="atk-hide atk-on">
-        <span class="atk-unread-badge" style="display: none;"></span>
-        <div class="atk-text"></div>
-      </span>
-    </div>
-  </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>
-</div>

package/src/list/list.ts

@@ -1,79 +0,0 @@
-import type { ContextApi } from '~/types'
-import Component from '../lib/component'
-import * as Utils from '../lib/utils'
-import CommentNode from '../comment/comment'
-import ListHTML from './list.html?raw'
-import ListLayout from './layout'
-import { createComment as createCommentNode } from './comment'
-import { initListPaginatorFunc } from './page'
-
-export default class List extends Component {
-  /** 列表评论集区域元素 */
-  $commentsWrap!: HTMLElement
-  public getCommentsWrapEl() { return this.$commentsWrap }
-
-  protected commentNodes: CommentNode[] = []
-  getCommentNodes() { return this.commentNodes }
-
-  constructor (ctx: ContextApi) {
-    super(ctx)
-
-    // Init base element
-    this.$el = Utils.createElement(ListHTML)
-    this.$commentsWrap = this.$el.querySelector('.atk-list-comments-wrap')!
-
-    // Init paginator
-    initListPaginatorFunc(ctx)
-
-    // Bind events
-    this.initCrudEvents()
-  }
-
-  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 initCrudEvents() {
-    this.ctx.on('list-load', (comments) => {
-      // 导入数据
-      this.getListLayout().import(comments)
-    })
-
-    this.ctx.on('list-loaded', (comments) => {
-      if (comments.length === 0) this.$commentsWrap.innerHTML = ''
-    })
-
-    // When comment insert
-    this.ctx.on('comment-inserted', (comment) => {
-      this.getListLayout().insert(comment)
-    })
-
-    // 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
-    })
-
-    // 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/nest.ts

@@ -1,66 +0,0 @@
-import type { CommentData } from '~/types'
-
-export type CommentNode = {
-  id: number
-  comment: CommentData
-  children: CommentNode[]
-  parent?: CommentNode
-  level: number
-}
-
-export type SortByType = 'DATE_DESC'|'DATE_ASC'|'SRC_INDEX'|'VOTE_UP_DESC'
-
-// 构建树状结构列表
-export function makeNestCommentNodeList(srcData: CommentData[], sortBy: SortByType = 'DATE_DESC', nestMax = 2) {
-  const nodeList: CommentNode[] = []
-
-  const roots = srcData.filter((o) => o.rid === 0)
-  roots.forEach((root: CommentData) => {
-    const rootNode: CommentNode = {
-      id: root.id,
-      comment: root,
-      children: [],
-      level: 1,
-    }
-
-    rootNode.parent = rootNode
-    nodeList.push(rootNode)
-
-    ;(function loadChildren(parentNode: CommentNode) {
-      const children = srcData.filter((o) => o.rid === parentNode.id)
-      if (children.length === 0) return
-      if (parentNode.level >= nestMax) parentNode = parentNode.parent!
-      children.forEach((child: CommentData) => {
-        const childNode: CommentNode = {
-          id: child.id,
-          comment: child,
-          children: [],
-          parent: parentNode,
-          level: parentNode.level + 1,
-        }
-
-        parentNode.children.push(childNode)
-        loadChildren(childNode)
-      })
-    })(rootNode)
-  })
-
-  // 排序
-  const sortFunc = (a: CommentNode, b: CommentNode): number => {
-    let v = a.id - b.id
-    if (sortBy === 'DATE_ASC') v = +new Date(a.comment.date) - +new Date(b.comment.date)
-    else if (sortBy === 'DATE_DESC') v = +new Date(b.comment.date) - +new Date(a.comment.date)
-    else if (sortBy === 'SRC_INDEX') v = srcData.indexOf(a.comment) - srcData.indexOf(b.comment)
-    else if (sortBy === 'VOTE_UP_DESC') v = b.comment.vote_up - a.comment.vote_up
-    return v
-  }
-
-  (function sortLevels(nodes: CommentNode[]) {
-    nodes.forEach((node) => {
-      node.children = node.children.sort(sortFunc)
-      sortLevels(node.children)
-    })
-  })(nodeList)
-
-  return nodeList
-}

package/src/list/page.ts

@@ -1,97 +0,0 @@
-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,25 +0,0 @@
-import type { ContextApi, ListFetchParams } from '~/types'
-import UpDownPaginator from './up-down'
-import ReadMorePaginator from './read-more'
-
-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 { UpDownPaginator, ReadMorePaginator }

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

@@ -1,67 +0,0 @@
-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

@@ -1,51 +0,0 @@
-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,5 +0,0 @@
-import Artalk from './artalk'
-import * as ArtalkType from '../types'
-
-export { ArtalkType }
-export default Artalk

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

@@ -1,40 +0,0 @@
-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

@@ -1,54 +0,0 @@
-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

@@ -1,12 +0,0 @@
-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())
-}