artalk 2.6.4 → 2.7.0

package/src/plugins/list/fetch.ts

@@ -0,0 +1,64 @@
+import type { ListFetchParams, ArtalkPlugin } from '~/types'
+
+export const Fetch: ArtalkPlugin = (ctx) => {
+  ctx.on('list-fetch', (_params) => {
+    if (ctx.getData().getLoading()) return
+    ctx.getData().setLoading(true)
+
+    const params: ListFetchParams = {
+      // default params
+      offset: 0,
+      limit: ctx.conf.pagination.pageSize,
+      flatMode: ctx.conf.flatMode as boolean, // always be boolean because had been handled in Artalk.init
+      paramsModifier: ctx.conf.listFetchParamsModifier,
+      ..._params
+    }
+
+    // must before other function call
+    ctx.getData().setListLastFetch({
+      params
+    })
+
+    ctx.getApi().comment
+      .get(params.offset, params.limit, params.flatMode, params.paramsModifier)
+      .then((data) => {
+        // Must before all other function call and event trigger,
+        // because it will depend on the lastData
+        // TODO this is global variable, easy to use, but not good, consider to refactor.
+        // refactor work is hard, because it is used in many places.
+        ctx.getData().setListLastFetch({ params, data })
+
+        // 装置评论
+        ctx.getData().loadComments(data.comments)
+
+        // 更新页面数据
+        ctx.getData().updatePage(data.page)
+
+        // 未读消息提示功能
+        ctx.getData().updateUnreads(data.unread || [])
+
+        // trigger events when success
+        params.onSuccess && params.onSuccess(data)
+
+        ctx.trigger('list-fetched', { params, data })
+      })
+      .catch((e) => {
+        // 显示错误对话框
+        const error = {
+          msg: e.msg || String(e),
+          data: e.data
+        }
+
+        params.onError && params.onError(error)
+
+        // trigger events when error
+        ctx.trigger('list-error', error)
+        ctx.trigger('list-fetched', { params, error })
+
+        throw e
+      })
+      .finally(() => {
+        ctx.getData().setLoading(false)
+      })
+  })
+}

package/src/plugins/list/goto-first.ts

@@ -0,0 +1,23 @@
+import type { ArtalkPlugin } from '~/types'
+import * as Utils from '@/lib/utils'
+
+/** List scroll to the first comment */
+export const GotoFirst: ArtalkPlugin = (ctx) => {
+  const handler = () => {
+    const list = ctx.get('list')
+
+    const $relative = ctx.conf.scrollRelativeTo && ctx.conf.scrollRelativeTo()
+    ;($relative || window).scroll({
+      top: Utils.getOffset(list.$el, $relative).top,
+      left: 0,
+    })
+  }
+
+  ctx.on('inited', () => {
+    ctx.on('list-goto-first', handler)
+  })
+
+  ctx.on('destroy', () => {
+    ctx.off('list-goto-first', handler)
+  })
+}

package/src/plugins/list/goto.ts

@@ -0,0 +1,72 @@
+import type { ArtalkPlugin } from '~/types'
+import * as Utils from '@/lib/utils'
+import * as Ui from '@/lib/ui'
+
+export const Goto: ArtalkPlugin = (ctx) => {
+  let delayGoto = true
+
+  const check = () => {
+    const commentID = extractCommentID()
+    if (!commentID) return
+
+    // trigger event
+    ctx.trigger('list-goto', commentID)
+
+    // reset delayGoto
+    delayGoto = true
+  }
+
+  const hashChangeHandler = () => {
+    delayGoto = false
+    check()
+  }
+  ctx.on('inited', () => {
+    window.addEventListener('hashchange', hashChangeHandler)
+    ctx.on('list-loaded', check)
+  })
+  ctx.on('destroy', () => {
+    window.removeEventListener('hashchange', hashChangeHandler)
+    ctx.off('list-loaded', check)
+  })
+
+  let foundID = 0
+  ctx.on('list-goto', (commentID) => {
+    if (foundID === commentID) return
+
+    const comment = ctx.get('list').getCommentNodes().find(c => c.getID() === commentID)
+    if (!comment) return
+
+    foundID = commentID
+
+    // 若父评论存在 “子评论部分” 限高，取消限高
+    comment.getParents().forEach((p) => {
+      p.getRender().heightLimitRemoveForChildren()
+    })
+
+    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 (!delayGoto) goTo()
+    else window.setTimeout(() => goTo(), 350)
+  })
+}
+
+function extractCommentID(): number|null {
+  // try get from query
+  let commentId = Number(Utils.getQueryParam('atk_comment')) // same as backend GetReplyLink()
+
+  // fail over to get from hash
+  if (!commentId) {
+    const match = window.location.hash.match(/#atk-comment-([0-9]+)/)
+    if (!match || !match[1] || Number.isNaN(Number(match[1]))) return null
+    commentId = Number(match[1])
+  }
+
+  return commentId || null
+}

package/src/plugins/list/index.ts

@@ -0,0 +1,25 @@
+import type { ArtalkPlugin } from '~/types'
+import { WithEditor } from './with-editor'
+import { Unread } from './unread'
+import { Count } from './count'
+import { SidebarBtn } from './sidebar-btn'
+import { UnreadBadge } from './unread-badge'
+import { Goto } from './goto'
+import { Copyright } from './copyright'
+import { NoComment } from './no-comment'
+import { Dropdown } from './dropdown'
+import { TimeTicking } from './time-ticking'
+import { ErrorDialog } from './error-dialog'
+import { Loading } from './loading'
+import { Fetch } from './fetch'
+import { ReachBottom } from './reach-bottom'
+import { GotoFirst } from './goto-first'
+
+const ListPlugins: ArtalkPlugin[] = [
+  Fetch, Loading, Unread,
+  WithEditor, Count, SidebarBtn, UnreadBadge,
+  Dropdown, Goto, NoComment, Copyright,
+  TimeTicking, ErrorDialog, ReachBottom, GotoFirst
+]
+
+export { ListPlugins }

package/src/plugins/list/loading.ts

@@ -0,0 +1,17 @@
+import type { ArtalkPlugin } from '~/types'
+import * as Ui from '@/lib/ui'
+
+export const Loading: ArtalkPlugin = (ctx) => {
+  ctx.on('list-fetch', (p) => {
+    const list = ctx.get('list')
+
+    if (p.offset === 0) // only show loading when fetch first page
+      Ui.setLoading(true, list.$el)
+    // else if not first page, show loading in paginator (code not there)
+  })
+
+  ctx.on('list-fetched', () => {
+    const list = ctx.get('list')
+    Ui.setLoading(false, list.$el)
+  })
+}

package/src/plugins/list/no-comment.ts

@@ -0,0 +1,25 @@
+import type { ArtalkPlugin } from '~/types'
+import * as Utils from '@/lib/utils'
+import { sanitize } from '@/lib/sanitizer'
+
+export const NoComment: ArtalkPlugin = (ctx) => {
+  ctx.on('list-loaded', (comments) => {
+    const list = ctx.get('list')!
+
+    // 无评论
+    const isNoComment = comments.length <= 0
+    let $noComment = list.getCommentsWrapEl().querySelector<HTMLElement>('.atk-list-no-comment')
+
+    if (isNoComment) {
+      if (!$noComment) {
+        $noComment = Utils.createElement('<div class="atk-list-no-comment"></div>')
+
+        // sanitize before set innerHTML
+        $noComment.innerHTML = sanitize(list.ctx.conf.noComment || list.ctx.$t('noComment'))
+        list.getCommentsWrapEl().appendChild($noComment)
+      }
+    } else {
+      $noComment?.remove()
+    }
+  })
+}

package/src/plugins/list/reach-bottom.ts

@@ -0,0 +1,46 @@
+import type { ArtalkPlugin } from '~/types'
+
+export const ReachBottom: ArtalkPlugin = (ctx) => {
+  const scrollEvtAt = document // TODO support ref ctx.conf
+  let observer: IntersectionObserver|null = null
+
+  const setupObserver = ($target: HTMLElement) => {
+    // eslint-disable-next-line compat/compat
+    observer = new IntersectionObserver(([entries]) => {
+      if (entries.isIntersecting) {
+        clearObserver()
+        ctx.trigger('list-reach-bottom')
+      }
+    }, {
+      root: scrollEvtAt
+    })
+    observer.observe($target)
+  }
+
+  const clearObserver = () => {
+    observer?.disconnect()
+    observer = null
+  }
+
+  ctx.on('list-loaded', () => {
+    clearObserver()
+
+    const list = ctx.get('list')
+
+    // use IntersectionObserver to detect reach bottom
+    const $target = list.getCommentsWrapEl().querySelector<HTMLElement>('.atk-comment-wrap:nth-last-child(3)')
+    if (!$target) return
+
+    // check IntersectionObserver support
+    if (!('IntersectionObserver' in window)) {
+      console.warn('IntersectionObserver api not supported')
+      return
+    }
+
+    setupObserver($target)
+  })
+
+  ctx.on('destroy', () => {
+    clearObserver()
+  })
+}

package/src/plugins/list/sidebar-btn.ts

@@ -0,0 +1,39 @@
+import type { ArtalkPlugin } from '~/types'
+import $t from '@/i18n'
+
+export const SidebarBtn: ArtalkPlugin = (ctx) => {
+  let $openSidebarBtn: HTMLElement|null = null
+
+  const syncByUser = () => {
+    if (!$openSidebarBtn) return
+    const user = ctx.get('user').data
+
+    // 已输入个人信息
+    if (!!user.nick && !!user.email) {
+      $openSidebarBtn.classList.remove('atk-hide')
+
+      // update button text (normal user or admin)
+      const $btnText = $openSidebarBtn.querySelector<HTMLElement>('.atk-text')
+      if ($btnText) $btnText.innerText = (!user.isAdmin) ? $t('msgCenter') : $t('ctrlCenter')
+    } else {
+      $openSidebarBtn.classList.add('atk-hide')
+    }
+  }
+
+  ctx.on('conf-loaded', () => {
+    const list = ctx.get('list')
+
+    $openSidebarBtn = list.$el.querySelector<HTMLElement>('[data-action="open-sidebar"]')
+    if (!$openSidebarBtn) return
+
+    $openSidebarBtn.onclick = () => { // use onclick rather than addEventListener to prevent duplicate event
+      ctx.showSidebar()
+    }
+
+    syncByUser()
+  })
+
+  ctx.on('user-changed', (user) => {
+    syncByUser()
+  })
+}

package/src/plugins/list/time-ticking.ts

@@ -0,0 +1,22 @@
+import type { ArtalkPlugin } from '~/types'
+import * as Utils from '@/lib/utils'
+
+/** 评论时间自动更新 */
+export const TimeTicking: ArtalkPlugin = (ctx) => {
+  let timer: number|null = null
+
+  ctx.on('inited', () => {
+    timer = window.setInterval(() => {
+      const list = ctx.get('list')
+
+      list.$el.querySelectorAll<HTMLElement>('[data-atk-comment-date]').forEach(el => {
+        const date = el.getAttribute('data-atk-comment-date')
+        el.innerText = Utils.timeAgo(new Date(Number(date)), ctx.$t)
+      })
+    }, 30 * 1000) // 30s 更新一次
+  })
+
+  ctx.on('destroy', () => {
+    timer && window.clearInterval(timer)
+  })
+}

package/src/plugins/list/unread-badge.ts

@@ -0,0 +1,26 @@
+import type { ArtalkPlugin } from '~/types'
+
+export const UnreadBadge: ArtalkPlugin = (ctx) => {
+  let $unreadBadge: HTMLElement|null = null
+
+  const showUnreadBadge = (count: number) => {
+    if (!$unreadBadge) return
+
+    if (count > 0) {
+      $unreadBadge.innerText = `${Number(count || 0)}`
+      $unreadBadge.style.display = 'block'
+    } else {
+      $unreadBadge.style.display = 'none'
+    }
+  }
+
+  ctx.on('conf-loaded', () => {
+    const list = ctx.get('list')
+
+    $unreadBadge = list.$el.querySelector<HTMLElement>('.atk-unread-badge')
+  })
+
+  ctx.on('unreads-updated', (unreads) => {
+    showUnreadBadge(unreads.length || 0)
+  })
+}

package/src/plugins/list/unread.ts

@@ -0,0 +1,38 @@
+import type { ArtalkPlugin } from '~/types'
+import * as Utils from '@/lib/utils'
+
+export const Unread: ArtalkPlugin = (ctx) => {
+  ctx.on('comment-rendered', (comment) => {
+    // comment unread highlight
+    if (ctx.conf.listUnreadHighlight === true) {
+      const unreads = ctx.getData().getUnreads()
+      const notify = unreads.find(o => o.comment_id === comment.getID())
+
+      if (notify) {
+        // if comment contains in unread list
+        comment.getRender().setUnread(true)
+        comment.getRender().setOpenAction(() => {
+          window.open(notify.read_link)
+
+          // remove notify which has been read
+          ctx.getData().updateUnreads(unreads.filter(o => o.comment_id !== comment.getID()))
+        })
+      } else {
+        // comment not in unread list
+        comment.getRender().setUnread(false)
+      }
+    }
+  })
+
+  ctx.on('list-goto', (commentID) => {
+    const notifyKey = Utils.getQueryParam('atk_notify_key')
+    if (notifyKey) {
+      // mark as read
+      ctx.getApi().user.markRead(commentID, notifyKey)
+        .then(() => {
+          // remove from unread list
+          ctx.getData().updateUnreads(ctx.getData().getUnreads().filter(o => o.comment_id !== commentID))
+        })
+    }
+  })
+}

package/src/plugins/list/with-editor.ts

@@ -0,0 +1,59 @@
+import type { ContextApi, ArtalkPlugin, PageData } from '~/types'
+import $t from '@/i18n'
+
+export const WithEditor: ArtalkPlugin = (ctx) => {
+  let $closeCommentBtn: HTMLElement|undefined
+
+  // on Artalk inited
+  // (after all components had mounted)
+  ctx.on('inited', () => {
+    const list = ctx.get('list')
+
+    $closeCommentBtn = list.$el.querySelector<HTMLElement>('[data-action="admin-close-comment"]')!
+
+    // bind editor close button click event
+    $closeCommentBtn.addEventListener('click', () => {
+      const page = ctx.getData().getPage()
+      if (!page) throw new Error('Page data not found')
+
+      page.admin_only = !page.admin_only
+      adminPageEditSave(ctx, page)
+    })
+  })
+
+  // on comment list loaded (it will include page data update)
+  ctx.on('page-loaded', (page) => {
+    const editor = ctx.get('editor')
+
+    // if page comment is closed
+    if (page?.admin_only === true) {
+      // then close editor
+      editor.getPlugs()?.getEvents().trigger('editor-close')
+      $closeCommentBtn && ($closeCommentBtn.innerText = $t('openComment'))
+    } else {
+      // the open editor
+      editor.getPlugs()?.getEvents().trigger('editor-open')
+      $closeCommentBtn && ($closeCommentBtn.innerText = $t('closeComment'))
+    }
+  })
+
+  ctx.on('list-loaded', (comments) => {
+    // 防止评论框被吞
+    ctx.editorResetState()
+  })
+}
+
+/** 管理员设置页面信息 */
+function adminPageEditSave(ctx: ContextApi, page: PageData) {
+  ctx.editorShowLoading()
+  ctx.getApi().page.pageEdit(page)
+    .then((respPage) => {
+      ctx.getData().updatePage(respPage)
+    })
+    .catch(err => {
+      ctx.editorShowNotify(`${$t('editFail')}: ${err.msg || String(err)}`, 'e')
+    })
+    .finally(() => {
+      ctx.editorHideLoading()
+    })
+}

package/src/plugins/markdown.ts

@@ -0,0 +1,10 @@
+import type { ArtalkPlugin } from '~/types'
+import * as marked from '@/lib/marked'
+
+export const Markdown: ArtalkPlugin = (ctx) => {
+  marked.initMarked()
+
+  ctx.on('conf-loaded', (conf) => {
+    if (conf.markedReplacers) marked.setReplacers(conf.markedReplacers)
+  })
+}

package/src/plugins/stat.ts

@@ -0,0 +1,79 @@
+import type { ContextApi, ArtalkPlugin } from '~/types'
+import Api from '../api'
+
+export interface CountOptions {
+  getApi(): Api
+
+  pageKey: string
+  countEl: string
+  pvEl: string
+
+  /** 是否增加当前页面 PV 数 */
+  pvAdd?: boolean
+}
+
+export const PvCountWidget: ArtalkPlugin = (ctx: ContextApi) => {
+  ctx.on('conf-loaded', () => {
+    initCountWidget({
+      getApi: () => ctx.getApi(),
+      pageKey: ctx.conf.pageKey,
+      countEl: ctx.conf.countEl,
+      pvEl: ctx.conf.pvEl,
+      pvAdd: true,
+    })
+  })
+}
+
+/** 初始化评论数和 PV 数量展示元素 */
+export async function initCountWidget(opt: CountOptions) {
+  // 评论数
+  if (opt.countEl && document.querySelector(opt.countEl)) {
+    refreshStatCount(opt, { query: 'page_comment', numEl: opt.countEl })
+  }
+
+  // PV
+  const curtPagePvNum = opt.pvAdd ? await opt.getApi().page.pv() : NaN
+  if (opt.pvEl && document.querySelector(opt.pvEl)) {
+    refreshStatCount(opt, {
+      query: 'page_pv',
+      numEl: opt.pvEl,
+      data: { [opt.pageKey]: curtPagePvNum },
+    })
+  }
+}
+
+type CountData = { [pageKey: string]: number }
+
+async function refreshStatCount(
+  opt: CountOptions,
+  args: {
+    query: 'page_pv' | 'page_comment'
+    numEl: string
+    data?: CountData
+  }
+) {
+  let data: CountData = args.data || {}
+
+  // Get page keys from DOM
+  let pageKeys = Array.from(document.querySelectorAll(args.numEl))
+    .map((e) => e.getAttribute('data-page-key') || opt.pageKey)
+    .filter((e) => Number.isNaN(data[e])) // filter out keys that already have data
+
+  pageKeys = [...new Set(pageKeys)] // deduplicate
+
+  // Fetch count data from server
+  if (pageKeys.length > 0) {
+    const res = await opt.getApi().page.stat(args.query, pageKeys) as CountData
+    data = { ...data, ...res }
+  }
+
+  applyCountData(args.numEl, data, data[opt.pageKey])
+}
+
+function applyCountData(selector: string, data: CountData, defaultCount: number) {
+  document.querySelectorAll(selector).forEach((el) => {
+    const pageKey = el.getAttribute('data-page-key')
+    const count = Number(pageKey ? (data[pageKey]) : defaultCount)
+    el.innerHTML = `${count}`
+  })
+}

package/src/plugins/version-check.ts

@@ -0,0 +1,37 @@
+import type { ArtalkPlugin } from '~/types'
+import { version as ARTALK_VERSION } from '~/package.json'
+import type List from '~/src/list/list'
+import * as Ui from '@/lib/ui'
+import * as Utils from '@/lib/utils'
+import $t from '@/i18n'
+
+let IgnoreVersionCheck = false
+
+export const VersionCheck: ArtalkPlugin = (ctx) => {
+  ctx.on('conf-loaded', () => {
+    const list = ctx.get('list')
+    if (ctx.conf.apiVersion && ctx.conf.versionCheck && !IgnoreVersionCheck)
+      versionCheck(list, ARTALK_VERSION, ctx.conf.apiVersion)
+  })
+}
+
+function versionCheck(list: List, feVer: string, beVer: string) {
+  const comp = Utils.versionCompare(feVer, beVer)
+  const sameVer = (comp === 0)
+  if (sameVer) return
+
+  const errEl = Utils.createElement(
+    `<div>请更新 Artalk ${comp < 0 ? $t('frontend') : $t('backend')}以获得完整体验 ` +
+    `(<a href="https://artalk.js.org/" target="_blank">帮助文档</a>)` +
+    `<br/><br/><span style="color: var(--at-color-meta);">` +
+    `当前版本：${$t('frontend')} ${feVer} / ${$t('backend')} ${beVer}` +
+    `</span><br/><br/></div>`)
+  const ignoreBtn = Utils.createElement('<span style="cursor:pointer">忽略</span>')
+  ignoreBtn.onclick = () => {
+    Ui.setError(list.$el.parentElement!, null)
+    IgnoreVersionCheck = true
+    list.ctx.fetch({ offset: 0 })
+  }
+  errEl.append(ignoreBtn)
+  Ui.setError(list.$el.parentElement!, errEl, '<span class="atk-warn-title">Artalk Warn</span>')
+}