artalk 2.7.0 → 2.7.2

package/src/components/error-dialog.ts

@@ -1,35 +0,0 @@
-import * as Utils from '@/lib/utils'
-import * as Ui from '@/lib/ui'
-import User from '@/lib/user'
-import $t from '@/i18n'
-
-export interface ErrorDialogOptions {
-  $err: HTMLElement
-
-  errMsg: string
-  errData?: any
-  retryFn?: () => void
-
-  onOpenSidebar?: () => void
-}
-
-export function showErrorDialog(opts: ErrorDialogOptions) {
-  const errEl = Utils.createElement(`<span>${opts.errMsg}，${$t('listLoadFailMsg')}<br/></span>`)
-
-  if (opts.retryFn) {
-    const $retryBtn = Utils.createElement(`<span style="cursor:pointer;">${$t('listRetry')}</span>`)
-    $retryBtn.onclick = () => opts.retryFn && opts.retryFn()
-    errEl.appendChild($retryBtn)
-  }
-
-  if (opts.onOpenSidebar) {
-    const $openSidebar = Utils.createElement('<span atk-only-admin-show> | <span style="cursor:pointer;">打开控制台</span></span>')
-    errEl.appendChild($openSidebar)
-    if (!User.data.isAdmin) { // only display if user is admin
-      $openSidebar.classList.add('atk-hide')
-    }
-    $openSidebar.onclick = () => opts.onOpenSidebar && opts.onOpenSidebar()
-  }
-
-  Ui.setError(opts.$err, errEl)
-}

package/src/components/pagination.ts

@@ -1,153 +0,0 @@
-import * as Utils from '../lib/utils'
-import * as Ui from '../lib/ui'
-
-export interface PaginationOptions {
-  /** 每页条数 */
-  pageSize: number
-
-  /** 回调函数 */
-  onChange: (offset: number) => void
-}
-
-export default class Pagination {
-  private opts: PaginationOptions
-  public total: number
-  public $el: HTMLElement
-  public $input: HTMLInputElement
-  public inputTimer?: number
-  public $prevBtn: HTMLElement
-  public $nextBtn: HTMLElement
-
-  public page: number = 1
-  get pageSize(): number {
-    return this.opts.pageSize
-  }
-  get offset(): number {
-    return this.pageSize * (this.page - 1)
-  }
-  get maxPage(): number {
-    return Math.ceil(this.total / this.pageSize)
-  }
-
-  public constructor(total: number, opts: PaginationOptions) {
-    this.total = total
-    this.opts = opts
-
-    this.$el = Utils.createElement(
-      `<div class="atk-pagination-wrap">
-        <div class="atk-pagination">
-          <div class="atk-btn atk-btn-prev">Prev</div>
-          <input type="text" class="atk-input" aria-label="Enter the number of page" />
-          <div class="atk-btn atk-btn-next">Next</div>
-        </div>
-      </div>`)
-    this.$input = this.$el.querySelector('.atk-input')!
-    this.$input.value = `${this.page}`
-
-    this.$input.oninput = () => this.input()
-    this.$input.onkeydown = (e) => this.keydown(e)
-
-    this.$prevBtn = this.$el.querySelector('.atk-btn-prev')!
-    this.$nextBtn = this.$el.querySelector('.atk-btn-next')!
-
-    this.$prevBtn.onclick = () => this.prev()
-    this.$nextBtn.onclick = () => this.next()
-
-    this.checkDisabled()
-  }
-
-  public update(offset: number, total: number) {
-    this.page = Math.ceil(offset / this.pageSize) + 1
-    this.total = total
-
-    this.setInput(this.page)
-    this.checkDisabled()
-  }
-
-  public setInput(page: number) {
-    this.$input.value = `${page}`
-  }
-
-  public input(now: boolean = false) {
-    window.clearTimeout(this.inputTimer)
-
-    const value = this.$input.value.trim()
-
-    const modify = () => {
-      if (value === '') { this.setInput(this.page);return }
-      let page = Number(value)
-      if (Number.isNaN(page)) { this.setInput(this.page);return }
-      if (page < 1) { this.setInput(this.page);return }
-      if (page > this.maxPage) { this.setInput(this.maxPage);page = this.maxPage }
-      this.change(page)
-    }
-
-    // 延迟 800ms 执行
-    if (!now) this.inputTimer = window.setTimeout(() => modify(), 800)
-    else modify()
-  }
-
-  public prev() {
-    const page = this.page - 1
-    if (page < 1) { return }
-    this.change(page)
-  }
-
-  public next() {
-    const page = this.page + 1
-    if (page > this.maxPage) { return }
-    this.change(page)
-  }
-
-  public getHasMore() {
-    return this.page + 1 <= this.maxPage
-  }
-
-  public change(page: number) {
-    this.page = page
-    this.opts.onChange(this.offset)
-    this.setInput(page)
-    this.checkDisabled()
-  }
-
-  public checkDisabled() {
-    if (this.page + 1 > this.maxPage) {
-      this.$nextBtn.classList.add('atk-disabled')
-    } else {
-      this.$nextBtn.classList.remove('atk-disabled')
-    }
-
-    if (this.page - 1 < 1) {
-      this.$prevBtn.classList.add('atk-disabled')
-    } else {
-      this.$prevBtn.classList.remove('atk-disabled')
-    }
-  }
-
-  public keydown(e: KeyboardEvent) {
-    const keyCode = e.keyCode || e.which
-
-    if (keyCode === 38) {
-      // 上键
-      const page = Number(this.$input.value) + 1
-      if (page > this.maxPage) { return }
-      this.setInput(page);
-      this.input()
-    } else if (keyCode === 40) {
-      // 下键
-      const page = Number(this.$input.value) - 1
-      if (page < 1) { return }
-      this.setInput(page)
-      this.input()
-    } else if (keyCode === 13) {
-      // 回车
-      this.input(true)
-    }
-  }
-
-  /** 加载 */
-  setLoading (isLoading: boolean) {
-    if (isLoading) Ui.showLoading(this.$el)
-    else Ui.hideLoading(this.$el)
-  }
-}

package/src/components/read-more-btn.ts

@@ -1,92 +0,0 @@
-import * as Utils from '../lib/utils'
-
-export interface ReadMoreBtnOptions {
-  /** 回调函数 */
-  onClick: (offset: number) => void
-
-  pageSize: number
-
-  text?: string
-}
-
-/**
- * 阅读更多按钮
- */
-export default class ReadMoreBtn {
-  public opts: ReadMoreBtnOptions
-  public $el: HTMLElement
-  private $loading: HTMLElement
-  private $text: HTMLElement
-  private offset: number = 0
-  private total: number = 0
-  private origText: string = 'Load More'
-
-  /** 是否有更多内容 */
-  get hasMore() {
-    return this.total > (this.offset + this.opts.pageSize)
-  }
-
-  public constructor(opts: ReadMoreBtnOptions) {
-    this.opts = opts
-    this.origText = this.opts.text || this.origText
-
-    this.$el = Utils.createElement(
-    `<div class="atk-list-read-more" style="display: none;">
-      <div class="atk-list-read-more-inner">
-        <div class="atk-loading-icon" style="display: none;"></div>
-        <span class="atk-text">${this.origText}</span>
-      </div>
-    </div>`)
-
-    this.$loading = this.$el.querySelector<HTMLElement>('.atk-loading-icon')!
-    this.$text = this.$el.querySelector<HTMLElement>('.atk-text')!
-
-    this.$el.onclick = () => { this.click() }
-  }
-
-  click() {
-    if (this.hasMore) this.opts.onClick(this.offset + this.opts.pageSize)
-    this.checkDisabled()
-  }
-
-  /** 显示 */
-  show() {
-    this.$el.style.display = ''
-  }
-
-  /** 隐藏 */
-  hide() {
-    this.$el.style.display = 'none'
-  }
-
-  /** 加载 */
-  setLoading (isLoading: boolean) {
-    this.$loading.style.display = isLoading ? '' : 'none'
-    this.$text.style.display = isLoading ? 'none' : ''
-  }
-
-  /** 错误提示 */
-  showErr(errMsg: string) {
-    this.setLoading(false)
-
-    this.$text.innerText = errMsg
-    this.$el.classList.add('atk-err')
-    window.setTimeout(() => {
-      this.$text.innerText = this.origText
-      this.$el.classList.remove('atk-err')
-    }, 2000) // 2s后错误提示复原
-  }
-
-  /** 更新数据 */
-  public update(offset: number, total: number) {
-    this.offset = offset
-    this.total = total
-
-    this.checkDisabled()
-  }
-
-  public checkDisabled() {
-    if (this.hasMore) this.show()
-    else this.hide()
-  }
-}

package/src/config.ts

@@ -1,119 +0,0 @@
-import type { ArtalkConfig, ContextApi } from '~/types'
-import type { ApiOptions } from './api/_options'
-import * as Utils from './lib/utils'
-import Defaults from './defaults'
-
-/**
- * Merges the user custom config with the default config
- *
- * @param customConf - The custom config object which is provided by the user
- * @returns The config for Artalk instance creation
- */
-export function handelCustomConf(customConf: Partial<ArtalkConfig>): ArtalkConfig {
-  // 合并默认配置
-  const conf: ArtalkConfig = Utils.mergeDeep(Defaults, customConf)
-
-  // TODO the type of el options may HTMLElement, use it directly instead of from mergeDeep
-  if (customConf.el) conf.el = customConf.el
-
-  // 绑定元素
-  if (typeof conf.el === 'string' && !!conf.el) {
-    try {
-      const findEl = document.querySelector<HTMLElement>(conf.el)
-      if (!findEl) throw Error(`Target element "${conf.el}" was not found.`)
-      conf.el = findEl
-    } catch (e) {
-      console.error(e)
-      throw new Error('Please check your Artalk `el` config.')
-    }
-  }
-
-  // 服务器配置
-  conf.server = conf.server.replace(/\/$/, '').replace(/\/api\/?$/, '')
-
-  // 默认 pageKey
-  if (!conf.pageKey) {
-    // @link http://bl.ocks.org/abernier/3070589
-    conf.pageKey = `${window.location.pathname}`
-  }
-
-  // 默认 pageTitle
-  if (!conf.pageTitle) {
-    conf.pageTitle = `${document.title}`
-  }
-
-  // 自适应语言
-  if (conf.locale === 'auto') {
-    conf.locale = navigator.language
-  }
-
-  // flatMode
-  if (conf.flatMode === true || Number(conf.nestMax) <= 1)
-    conf.flatMode = true
-
-  // 自动判断启用平铺模式
-  if (conf.flatMode === 'auto')
-    conf.flatMode = window.matchMedia("(max-width: 768px)").matches
-
-  return conf
-}
-
-/**
- * Handle the config which is provided by the server
- *
- * @param conf - The Server response config for control the frontend of Artalk remotely
- * @returns The config for Artalk instance creation
- */
-export function handleConfFormServer(conf: Partial<ArtalkConfig>) {
-  const DisabledKeys: (keyof ArtalkConfig)[] = [
-    'el', 'pageKey', 'pageTitle', 'server', 'site', 'darkMode'
-  ]
-  Object.keys(conf).forEach(k => {
-    if (DisabledKeys.includes(k as any)) delete conf[k]
-  })
-
-  // Patch: `emoticons` config string to json
-  if (conf.emoticons && typeof conf.emoticons === "string") {
-    conf.emoticons = conf.emoticons.trim()
-    if (conf.emoticons.startsWith("[") || conf.emoticons.startsWith("{")) {
-      conf.emoticons = JSON.parse(conf.emoticons) // pase json
-    } else if (conf.emoticons === "false") {
-      conf.emoticons = false
-    }
-  }
-
-  return conf
-}
-
-/**
- * Convert Artalk Config to ApiOptions for Api client
- *
- * @param conf - Artalk config
- * @param ctx - If `ctx` not provided, `checkAdmin` and `checkCaptcha` will be disabled
- * @returns ApiOptions for Api client instance creation
- */
-export function convertApiOptions(conf: Partial<ArtalkConfig>, ctx?: ContextApi): ApiOptions {
-  return {
-    baseURL: `${conf.server}/api`,
-    siteName: conf.site || '',
-    pageKey: conf.pageKey || '',
-    pageTitle: conf.pageTitle || '',
-    timeout: conf.reqTimeout,
-
-    onNeedCheckAdmin(payload) {
-      ctx?.checkAdmin({
-        onSuccess: () => { payload.recall() },
-        onCancel: () => { payload.reject() },
-      })
-    },
-
-    onNeedCheckCaptcha(payload) {
-      ctx?.checkCaptcha({
-        imgData: payload.data.imgData,
-        iframe: payload.data.iframe,
-        onSuccess: () => { payload.recall() },
-        onCancel: () => { payload.reject() },
-      })
-    },
-  }
-}

package/src/context.ts

@@ -1,146 +0,0 @@
-import type { ArtalkConfig, CommentData, ListFetchParams, ContextApi, EventPayloadMap, SidebarShowPayload } from '~/types'
-import type { TInjectedServices } from './service'
-import Api from './api'
-
-import * as Utils from './lib/utils'
-import * as marked from './lib/marked'
-import { CheckerCaptchaPayload, CheckerPayload } from './components/checker'
-
-import { DataManager } from './data'
-import * as I18n from './i18n'
-
-import EventManager from './lib/event-manager'
-import { convertApiOptions, handelCustomConf } from './config'
-
-// Auto dependency injection
-interface Context extends TInjectedServices { }
-
-/**
- * Artalk Context
- */
-class Context implements ContextApi {
-  /* 运行参数 */
-  public conf: ArtalkConfig
-  public data: DataManager
-  public $root: HTMLElement
-
-  /* Event Manager */
-  private events = new EventManager<EventPayloadMap>()
-
-  public constructor(conf: ArtalkConfig, $root?: HTMLElement) {
-    this.conf = conf
-
-    this.$root = $root || document.createElement('div')
-    this.$root.classList.add('artalk')
-    this.$root.innerHTML = ''
-
-    this.data = new DataManager(this.events)
-  }
-
-  public inject(depName: string, obj: any) {
-    this[depName] = obj
-  }
-
-  public get(depName: string) {
-    return this[depName]
-  }
-
-  public getApi() {
-    return new Api(convertApiOptions(this.conf, this))
-  }
-
-  public getData() {
-    return this.data
-  }
-
-  public replyComment(commentData: CommentData, $comment: HTMLElement): void {
-    this.editor.setReply(commentData, $comment)
-  }
-
-  public editComment(commentData: CommentData, $comment: HTMLElement): void {
-    this.editor.setEditComment(commentData, $comment)
-  }
-
-  public fetch(params: Partial<ListFetchParams>): void {
-    this.data.fetchComments(params)
-  }
-
-  public reload(): void {
-    this.data.fetchComments({ offset: 0 })
-  }
-
-  public listGotoFirst(): void {
-    this.trigger('list-goto-first')
-  }
-
-  /* 编辑器 */
-  public editorShowLoading(): void {
-    this.editor.showLoading()
-  }
-
-  public editorHideLoading(): void {
-    this.editor.hideLoading()
-  }
-
-  public editorShowNotify(msg, type): void {
-    this.editor.showNotify(msg, type)
-  }
-
-  public editorResetState(): void {
-    this.editor.resetState()
-  }
-
-  /* 侧边栏 */
-  public showSidebar(payload?: SidebarShowPayload): void {
-    this.sidebarLayer.show(payload)
-  }
-
-  public hideSidebar(): void {
-    this.sidebarLayer.hide()
-  }
-
-  /* 权限检测 */
-  public checkAdmin(payload: CheckerPayload): void {
-    this.checkerLauncher.checkAdmin(payload)
-  }
-
-  public checkCaptcha(payload: CheckerCaptchaPayload): void {
-    this.checkerLauncher.checkCaptcha(payload)
-  }
-
-  /* Events */
-  public on(name: any, handler: any) {
-    this.events.on(name, handler)
-  }
-
-  public off(name: any, handler: any) {
-    this.events.off(name, handler)
-  }
-
-  public trigger(name: any, payload?: any) {
-    this.events.trigger(name, payload)
-  }
-
-  /* i18n */
-  public $t(key: I18n.I18nKeys, args: {[key: string]: string} = {}): string {
-    return I18n.t(key, args)
-  }
-
-  public setDarkMode(darkMode: boolean|'auto'): void {
-    // prevent trigger 'conf-loaded' to improve performance
-    // this.updateConf({ ...this.conf, darkMode })
-    this.conf.darkMode = darkMode
-    this.trigger('dark-mode-changed', darkMode)
-  }
-
-  public updateConf(nConf: Partial<ArtalkConfig>): void {
-    this.conf = Utils.mergeDeep(this.conf, handelCustomConf(nConf))
-    this.trigger('conf-loaded', this.conf)
-  }
-
-  public getMarked() {
-    return marked.getInstance()
-  }
-}
-
-export default Context

package/src/data.ts

@@ -1,110 +0,0 @@
-import type { NotifyData, PageData, CommentData, DataManagerApi, ListFetchParams, ListLastFetchData, EventPayloadMap } from '~/types'
-import EventManager from './lib/event-manager'
-
-export class DataManager implements DataManagerApi {
-  private loading: boolean = false
-  private listLastFetch?: ListLastFetchData
-  private comments: CommentData[] = [] // Note: 无层级结构 + 无须排列
-  private unreads: NotifyData[] = []
-  private page?: PageData
-
-  constructor(
-    protected events: EventManager<EventPayloadMap>
-  ) {}
-
-  getLoading() {
-    return this.loading
-  }
-
-  setLoading(val: boolean) {
-    this.loading = val
-  }
-
-  getListLastFetch() {
-    return this.listLastFetch
-  }
-
-  setListLastFetch(val: ListLastFetchData) {
-    this.listLastFetch = val
-  }
-
-  // -------------------------------------------------------------------
-  //  Comments
-  // -------------------------------------------------------------------
-  getComments() {
-    return this.comments
-  }
-
-  fetchComments(params: Partial<ListFetchParams>) {
-    this.events.trigger('list-fetch', params)
-  }
-
-  findComment(id: number) {
-    return this.comments.find(c => c.id === id)
-  }
-
-  clearComments() {
-    this.comments = []
-    this.events.trigger('list-loaded', this.comments)
-  }
-
-  loadComments(partialComments: CommentData[]) {
-    this.events.trigger('list-load', partialComments)
-
-    this.comments.push(...partialComments)
-
-    this.events.trigger('list-loaded', this.comments)
-  }
-
-  insertComment(comment: CommentData) {
-    this.comments.push(comment)
-
-    this.events.trigger('comment-inserted', comment)
-    this.events.trigger('list-loaded', this.comments) // list-loaded should always keep the last
-  }
-
-  updateComment(comment: CommentData) {
-    this.comments = this.comments.map(c => {
-      if (c.id === comment.id) return comment
-      return c
-    })
-
-    this.events.trigger('comment-updated', comment)
-    this.events.trigger('list-loaded', this.comments)
-  }
-
-  deleteComment(id: number) {
-    const comment = this.comments.find(c => c.id === id)
-    if (!comment) throw new Error(`Comment ${id} not found`)
-    this.comments = this.comments.filter(c => c.id !== id)
-
-    this.events.trigger('comment-deleted', comment)
-    this.events.trigger('list-loaded', this.comments)
-  }
-
-  // -------------------------------------------------------------------
-  //  Unreads
-  // -------------------------------------------------------------------
-  getUnreads() {
-    return this.unreads
-  }
-
-  updateUnreads(unread: NotifyData[]) {
-    this.unreads = unread
-
-    this.events.trigger('unreads-updated', this.unreads)
-  }
-
-  // -------------------------------------------------------------------
-  // Page
-  // -------------------------------------------------------------------
-  getPage() {
-    return this.page
-  }
-
-  updatePage(pageData: PageData) {
-    this.page = pageData
-
-    this.events.trigger('page-loaded', pageData)
-  }
-}