artalk 2.7.1 → 2.7.2

package/src/plugins/index.ts

@@ -1,16 +0,0 @@
-import type { ArtalkPlugin } from '~/types'
-import { ConfRemoter } from './conf-remoter'
-import { Markdown } from './markdown'
-import { EditorKit } from './editor-kit'
-import { ListPlugins } from './list'
-import { PvCountWidget } from './stat'
-import { VersionCheck } from './version-check'
-import { AdminOnlyElem } from './admin-only-elem'
-import { DarkMode } from './dark-mode'
-
-export const DefaultPlugins: ArtalkPlugin[] = [
-  ConfRemoter,
-  Markdown, EditorKit, AdminOnlyElem,
-  ...ListPlugins,
-  PvCountWidget, VersionCheck, DarkMode,
-]

package/src/plugins/list/copyright.ts

@@ -1,16 +0,0 @@
-import type { ArtalkPlugin } from '~/types'
-import { version as ARTALK_VERSION } from '~/package.json'
-
-export const Copyright: ArtalkPlugin = (ctx) => {
-  ctx.on('conf-loaded', () => {
-    const list = ctx.get('list')
-
-    const $copyright = list.$el.querySelector<HTMLElement>('.atk-copyright')
-    if (!$copyright) return
-
-    $copyright.innerHTML = (
-      `Powered By <a href="https://artalk.js.org" ` +
-      `target="_blank" title="Artalk v${ARTALK_VERSION}">` +
-      `Artalk</a>`)
-  })
-}

package/src/plugins/list/count.ts

@@ -1,31 +0,0 @@
-import type { ArtalkPlugin } from '~/types'
-import * as Utils from '@/lib/utils'
-import $t from '@/i18n'
-
-export const Count: ArtalkPlugin = (ctx) => {
-  const refreshCountNumEl = () => {
-    const list = ctx.get('list')
-
-    const $count = list.$el.querySelector('.atk-comment-count .atk-text')
-    if (!$count) return
-
-    const text = Utils.htmlEncode($t('counter', { count: `${Number(ctx.getData().getListLastFetch()?.data?.total) || 0}` }))
-    $count.innerHTML = text.replace(/(\d+)/, '<span class="atk-comment-count-num">$1</span>')
-  }
-
-  ctx.on('list-loaded', () => {
-    refreshCountNumEl()
-  })
-
-  ctx.on('comment-inserted', () => {
-    // 评论数增加 1
-    const last = ctx.getData().getListLastFetch()
-    if (last?.data) last.data.total += 1
-  })
-
-  ctx.on('comment-deleted', () => {
-    // 评论数减 1
-    const last = ctx.getData().getListLastFetch()
-    if (last?.data) last.data.total -= 1
-  })
-}

package/src/plugins/list/dropdown.ts

@@ -1,95 +0,0 @@
-import type { ArtalkPlugin } from '~/types'
-import * as Utils from '@/lib/utils'
-import $t from '@/i18n'
-
-export const Dropdown: ArtalkPlugin = (ctx) => {
-  const reloadUseParamsEditor = (func: (p: any) => void) => {
-    ctx.conf.listFetchParamsModifier = func
-    ctx.reload()
-  }
-
-  const initDropdown = ($dropdownOn: HTMLElement) => {
-    renderDropdown({
-      $dropdownWrap: $dropdownOn,
-      dropdownList: [
-        [$t('sortLatest'), () => { reloadUseParamsEditor(p => { p.sort_by = 'date_desc' }) }],
-        [$t('sortBest'), () => { reloadUseParamsEditor(p => { p.sort_by = 'vote' }) }],
-        [$t('sortOldest'), () => { reloadUseParamsEditor(p => { p.sort_by = 'date_asc' }) }],
-        [$t('sortAuthor'), () => { reloadUseParamsEditor(p => { p.view_only_admin = true }) }],
-      ]
-    })
-  }
-
-  ctx.on('conf-loaded', () => {
-    const list = ctx.get('list')
-
-    const $count = list.$el.querySelector<HTMLElement>('.atk-comment-count')
-    if (!$count) return
-
-    // 评论列表排序 Dropdown 下拉选择层
-    if (ctx.conf.listSort) {
-      initDropdown($count)
-    } else {
-      removeDropdown({
-        $dropdownWrap: $count
-      })
-    }
-  })
-}
-
-/** 评论排序方式选择下拉菜单 */
-function renderDropdown(conf: {
-  $dropdownWrap: HTMLElement,
-  dropdownList: [string, () => void][]
-}) {
-  const { $dropdownWrap, dropdownList } = conf
-  if ($dropdownWrap.querySelector('.atk-dropdown')) return
-
-  // 修改 class
-  $dropdownWrap.classList.add('atk-dropdown-wrap')
-
-  // 插入图标
-  $dropdownWrap.append(Utils.createElement(`<span class="atk-arrow-down-icon"></span>`))
-
-  // 列表项点击事件
-  let curtActive = 0 // 当前选中
-  const onItemClick = (i: number, $item: HTMLElement, name: string, action: Function) => {
-    action()
-
-    // set active
-    curtActive = i
-    $dropdown.querySelectorAll('.active').forEach((e) => { e.classList.remove('active') })
-    $item.classList.add('active')
-
-    // 关闭层 (临时消失，取消 :hover)
-    $dropdown.style.display = 'none'
-    setTimeout(() => { $dropdown.style.display = '' }, 80)
-  }
-
-  // 生成列表元素
-  const $dropdown = Utils.createElement(`<ul class="atk-dropdown atk-fade-in"></ul>`)
-  dropdownList.forEach((item, i) => {
-    const name = item[0] as string
-    const action = item[1] as Function
-
-    const $item = Utils.createElement(`<li class="atk-dropdown-item"><span></span></li>`)
-    const $link = $item.querySelector<HTMLElement>('span')!
-    $link.innerText = name
-    $link.onclick = () => { onItemClick(i, $item, name, action) }
-    $dropdown.append($item)
-
-    if (i === curtActive) $item.classList.add('active') // 默认选中项
-  })
-
-  $dropdownWrap.append($dropdown)
-}
-
-/** 删除评论排序方式选择下拉菜单 */
-function removeDropdown(conf: {
-  $dropdownWrap: HTMLElement
-}) {
-  const { $dropdownWrap } = conf
-  $dropdownWrap.classList.remove('atk-dropdown-wrap')
-  $dropdownWrap.querySelector('.atk-arrow-down-icon')?.remove()
-  $dropdownWrap.querySelector('.atk-dropdown')?.remove()
-}

package/src/plugins/list/error-dialog.ts

@@ -1,22 +0,0 @@
-import type { ArtalkPlugin, ContextApi } from '~/types'
-import { showErrorDialog } from '@/components/error-dialog'
-import * as Ui from '../../lib/ui'
-
-export const ErrorDialog: ArtalkPlugin = (ctx) => {
-  ctx.on('list-fetch', () => {
-    const list = ctx.get('list')
-
-    // clear the original error when a new fetch is triggered
-    Ui.setError(list.$el, null)
-  })
-
-  ctx.on('list-error', (err) => {
-    showErrorDialog({
-      $err: ctx.get('list').$el,
-      errMsg: err.msg,
-      errData: err.data,
-      retryFn: () => ctx.fetch({ offset: 0 })
-    })
-  })
-}
-

package/src/plugins/list/fetch.ts

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

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

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

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

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

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

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

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

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

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

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

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

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