artalk 2.6.3 → 2.7.0

package/src/{lib → components}/checker/index.ts

@@ -1,11 +1,11 @@
-import Context from '~/types/context'
+import type Api from '@/api'
 import Dialog from '@/components/dialog'
-import Layer from '@/layer'
-import * as Utils from '../utils'
+import $t from '@/i18n'
+import type { ContextApi } from '~/types'
+import type { Layer } from '@/layer'
+import * as Utils from '@/lib/utils'
 import CaptchaChecker from './captcha'
 import AdminChecker from './admin'
-import type Api from '../../api'
-import type User from '../user'
 
 export interface CheckerCaptchaPayload extends CheckerPayload {
   imgData?: string
@@ -18,16 +18,18 @@ export interface CheckerPayload {
   onCancel?: () => void
 }
 
+export interface CheckerLauncherOptions {
+  getCtx: () => ContextApi
+  getApi: () => Api
+  getIframeURLBase: () => string
+  onReload: () => void
+}
+
 /**
  * Checker 发射台
  */
 export default class CheckerLauncher {
-  public ctx: Context
-  public launched: Checker[] = []
-
-  constructor(ctx: Context) {
-    this.ctx = ctx
-  }
+  constructor(private opts: CheckerLauncherOptions) { }
 
   public checkCaptcha(payload: CheckerCaptchaPayload) {
     this.fire(CaptchaChecker, payload, (ctx) => {
@@ -41,12 +43,8 @@ export default class CheckerLauncher {
   }
 
   public fire(checker: Checker, payload: CheckerPayload, postFire?: (c: CheckerCtx) => void) {
-    if (this.launched.includes(checker)) return // 阻止同时 fire 相同的 checker
-    this.launched.push(checker)
-
-    // 创建层
-    const layer = new Layer(this.ctx, `checker-${new Date().getTime()}`)
-    layer.setMaskClickHide(false)
+    // 显示层
+    const layer = this.opts.getCtx().get('layerManager').create(`checker-${new Date().getTime()}`)
     layer.show()
 
     // 构建 Checker 的上下文
@@ -55,9 +53,8 @@ export default class CheckerLauncher {
     const checkerCtx: CheckerCtx = {
       set: (key, val) => { checkerStore[key] = val },
       get: (key) => (checkerStore[key]),
-      getCtx: () => (this.ctx),
-      getApi: () => (this.ctx.getApi()),
-      getLayer: () => layer,
+      getOpts: () => (this.opts),
+      getApi: () => this.opts.getApi(),
       hideInteractInput: () => {
         hideInteractInput = true
       },
@@ -98,7 +95,7 @@ export default class CheckerLauncher {
     }
 
     let btnTextOrg: string | undefined
-    const dialog = new Dialog(this.ctx, formEl)
+    const dialog = new Dialog(formEl)
 
     // 确认按钮
     dialog.setYes((btnEl) => {
@@ -115,7 +112,7 @@ export default class CheckerLauncher {
         btnEl.classList.remove('error')
       }
 
-      btnEl.innerText = `${this.ctx.$t('loading')}...`
+      btnEl.innerText = `${$t('loading')}...`
 
       // 发送请求
       checker
@@ -165,8 +162,7 @@ export default class CheckerLauncher {
 
   // 关闭 checker 对话框
   private close(checker: Checker, layer: Layer) {
-    layer.disposeNow()
-    this.launched = this.launched.filter(c => c !== checker)
+    layer.destroy()
   }
 }
 
@@ -188,9 +184,8 @@ interface CheckerStore {
 export interface CheckerCtx {
   get<K extends keyof CheckerStore>(key: K): CheckerStore[K]
   set<K extends keyof CheckerStore>(key: K, val: CheckerStore[K]): void
-  getCtx(): Context
+  getOpts(): CheckerLauncherOptions
   getApi(): Api
-  getLayer(): Layer
   hideInteractInput(): void
   triggerSuccess(): void
   cancel(): void

package/src/components/dark-mode.ts

@@ -0,0 +1,30 @@
+const darkModeMedia = window.matchMedia('(prefers-color-scheme: dark)')
+let darkModeAutoFunc: (evt: MediaQueryListEvent) => void
+
+export function applyDarkMode($els: HTMLElement[], darkMode: boolean|'auto') {
+  const apply = (d: boolean) => {
+    $els.forEach($el => updateClassName($el, d))
+  }
+
+  if (darkMode === 'auto') {
+    if (!darkModeAutoFunc) { // 自动切换夜间模式，事件监听
+      darkModeAutoFunc = (evt) => apply(evt.matches)
+      darkModeMedia.addEventListener('change', darkModeAutoFunc)
+    }
+
+    apply(darkModeMedia.matches)
+  } else {
+    // if the type of darkMode is boolean
+    if (darkModeAutoFunc) // 解除事件监听绑定
+      darkModeMedia.removeEventListener('change', darkModeAutoFunc)
+
+    apply(darkMode)
+  }
+}
+
+export const DarkModeClassName = 'atk-dark-mode'
+
+function updateClassName($el: HTMLElement, darkMode: boolean) {
+  if (darkMode) $el.classList.add(DarkModeClassName)
+  else $el.classList.remove(DarkModeClassName)
+}

package/src/components/dialog.ts

@@ -1,4 +1,4 @@
-import Context from '~/types/context'
+import $t from '@/i18n'
 import * as Utils from '../lib/utils'
 
 type BtnClickHandler = (btnEl: HTMLElement, dialog: Dialog) => boolean|void
@@ -7,14 +7,11 @@ type BtnClickHandler = (btnEl: HTMLElement, dialog: Dialog) => boolean|void
  * 对话框
  */
 export default class Dialog {
-  public ctx: Context
   public $el: HTMLElement
   public $content: HTMLElement
   public $actions: HTMLElement
 
-  constructor (ctx: Context, contentEl: HTMLElement) {
-    this.ctx = ctx
-
+  constructor (contentEl: HTMLElement) {
     this.$el = Utils.createElement(
       `<div class="atk-layer-dialog-wrap">
         <div class="atk-layer-dialog">
@@ -30,14 +27,12 @@ export default class Dialog {
     // 内容
     this.$content = this.$el.querySelector('.atk-layer-dialog-content')!
     this.$content.appendChild(contentEl)
-
-    return this
   }
 
   /** 按钮 · 确定 */
   public setYes(handler: BtnClickHandler) {
     const btn = Utils.createElement<HTMLButtonElement>(
-      `<button data-action="confirm">${this.ctx.$t('confirm')}</button>`
+      `<button data-action="confirm">${$t('confirm')}</button>`
     )
     btn.onclick = this.onBtnClick(handler)
     this.$actions.appendChild(btn)
@@ -48,7 +43,7 @@ export default class Dialog {
   /** 按钮 · 取消 */
   public setNo(handler: BtnClickHandler) {
     const btn = Utils.createElement<HTMLButtonElement>(
-      `<button data-action="cancel">${this.ctx.$t('cancel')}</button>`
+      `<button data-action="cancel">${$t('cancel')}</button>`
     )
     btn.onclick = this.onBtnClick(handler)
     this.$actions.appendChild(btn)

package/src/components/error-dialog.ts

@@ -0,0 +1,35 @@
+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,7 +1,7 @@
 import * as Utils from '../lib/utils'
 import * as Ui from '../lib/ui'
 
-export interface PaginationConf {
+export interface PaginationOptions {
   /** 每页条数 */
   pageSize: number
 
@@ -10,7 +10,7 @@ export interface PaginationConf {
 }
 
 export default class Pagination {
-  private conf: PaginationConf
+  private opts: PaginationOptions
   public total: number
   public $el: HTMLElement
   public $input: HTMLInputElement
@@ -20,7 +20,7 @@ export default class Pagination {
 
   public page: number = 1
   get pageSize(): number {
-    return this.conf.pageSize
+    return this.opts.pageSize
   }
   get offset(): number {
     return this.pageSize * (this.page - 1)
@@ -29,9 +29,9 @@ export default class Pagination {
     return Math.ceil(this.total / this.pageSize)
   }
 
-  public constructor(total: number, conf: PaginationConf) {
+  public constructor(total: number, opts: PaginationOptions) {
     this.total = total
-    this.conf = conf
+    this.opts = opts
 
     this.$el = Utils.createElement(
       `<div class="atk-pagination-wrap">
@@ -99,9 +99,13 @@ export default class Pagination {
     this.change(page)
   }
 
+  public getHasMore() {
+    return this.page + 1 <= this.maxPage
+  }
+
   public change(page: number) {
     this.page = page
-    this.conf.onChange(this.offset)
+    this.opts.onChange(this.offset)
     this.setInput(page)
     this.checkDisabled()
   }

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

@@ -1,6 +1,6 @@
 import * as Utils from '../lib/utils'
 
-export interface ReadMoreBtnConf {
+export interface ReadMoreBtnOptions {
   /** 回调函数 */
   onClick: (offset: number) => void
 
@@ -13,7 +13,7 @@ export interface ReadMoreBtnConf {
  * 阅读更多按钮
  */
 export default class ReadMoreBtn {
-  public conf: ReadMoreBtnConf
+  public opts: ReadMoreBtnOptions
   public $el: HTMLElement
   private $loading: HTMLElement
   private $text: HTMLElement
@@ -23,12 +23,12 @@ export default class ReadMoreBtn {
 
   /** 是否有更多内容 */
   get hasMore() {
-    return this.total > (this.offset + this.conf.pageSize)
+    return this.total > (this.offset + this.opts.pageSize)
   }
 
-  public constructor(conf: ReadMoreBtnConf) {
-    this.conf = conf
-    this.origText = this.conf.text || this.origText
+  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;">
@@ -45,7 +45,7 @@ export default class ReadMoreBtn {
   }
 
   click() {
-    if (this.hasMore) this.conf.onClick(this.offset + this.conf.pageSize)
+    if (this.hasMore) this.opts.onClick(this.offset + this.opts.pageSize)
     this.checkDisabled()
   }
 

package/src/config.ts

@@ -1,14 +1,21 @@
-import type ArtalkConfig from '~/types/artalk-config'
+import type { ArtalkConfig, ContextApi } from '~/types'
+import type { ApiOptions } from './api/_options'
 import * as Utils from './lib/utils'
 import Defaults from './defaults'
 
-export default { handelBaseConf }
-
-/** 基本配置初始化 */
-export function handelBaseConf(customConf: Partial<ArtalkConfig>): ArtalkConfig {
+/**
+ * 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 {
@@ -40,10 +47,24 @@ export function handelBaseConf(customConf: Partial<ArtalkConfig>): ArtalkConfig
     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
 }
 
-export function handleBackendRefConf(conf: Partial<ArtalkConfig>) {
+/**
+ * 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'
   ]
@@ -63,3 +84,36 @@ export function handleBackendRefConf(conf: Partial<ArtalkConfig>) {
 
   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,20 +1,16 @@
-import type ArtalkConfig from '~/types/artalk-config'
-import type { CommentData, NotifyData } from '~/types/artalk-data'
-import type { Event } from '~/types/event'
-import type ContextApi from '~/types/context'
+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 DarkMode from './lib/dark-mode'
 import * as marked from './lib/marked'
-import { CheckerCaptchaPayload, CheckerPayload } from './lib/checker'
+import { CheckerCaptchaPayload, CheckerPayload } from './components/checker'
 
+import { DataManager } from './data'
 import * as I18n from './i18n'
-import { getLayerWrap } from './layer'
-import { SidebarShowPayload } from './layer/sidebar-layer'
-import Comment from './comment'
-import Api from './api'
-import List from './list'
+
+import EventManager from './lib/event-manager'
+import { convertApiOptions, handelCustomConf } from './config'
 
 // Auto dependency injection
 interface Context extends TInjectedServices { }
@@ -25,13 +21,11 @@ interface Context extends TInjectedServices { }
 class Context implements ContextApi {
   /* 运行参数 */
   public conf: ArtalkConfig
+  public data: DataManager
   public $root: HTMLElement
-  public markedReplacers: ((raw: string) => string)[] = []
 
-  private commentList: Comment[] = [] // Note: 无层级结构 + 无须排列
-
-  /* 订阅者模式 */
-  private eventList: Event[] = []
+  /* Event Manager */
+  private events = new EventManager<EventPayloadMap>()
 
   public constructor(conf: ArtalkConfig, $root?: HTMLElement) {
     this.conf = conf
@@ -39,6 +33,8 @@ class Context implements ContextApi {
     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) {
@@ -50,108 +46,34 @@ class Context implements ContextApi {
   }
 
   public getApi() {
-    return this.api
-  }
-
-  /* 评论操作 */
-  public getCommentList() {
-    return this.commentList
-  }
-
-  public getCommentDataList() {
-    return this.commentList.map(c => c.getData())
-  }
-
-  public findComment(id: number): Comment|undefined {
-    return this.commentList.find(c => c.getData().id === id)
-  }
-
-  public deleteComment(_comment: number|Comment) {
-    let comment: Comment
-    if (typeof _comment === 'number') {
-      const findComment = this.findComment(_comment)
-      if (!findComment) throw Error(`Comment ${_comment} cannot be found`)
-      comment = findComment
-    } else comment = _comment
-
-    comment.getEl().remove()
-    this.commentList.splice(this.commentList.indexOf(comment), 1)
-
-    if (this.list) {
-      const listData = this.list.getData()
-      if (listData) listData.total -= 1 // 评论数减 1
-
-      this.list.refreshUI()
-    }
-  }
-
-  public clearAllComments() {
-    if (this.list) {
-      this.list.getCommentsWrapEl().innerHTML = ''
-      this.list.clearData()
-    }
-
-    this.commentList = []
-  }
-
-  public insertComment(commentData: CommentData) {
-    this.list?.insertComment(commentData)
+    return new Api(convertApiOptions(this.conf, this))
   }
 
-  public updateComment(commentData: CommentData): void {
-    this.list?.updateComment(commentData)
+  public getData() {
+    return this.data
   }
 
-  public replyComment(commentData: CommentData, $comment: HTMLElement, scroll?: boolean): void {
-    this.editor.setReply(commentData, $comment, scroll)
-  }
-
-  public cancelReplyComment(): void {
-    this.editor.cancelReply()
+  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 cancelEditComment(): void {
-    this.editor.cancelEditComment()
-  }
-
-  public updateNotifies(notifies: NotifyData[]): void {
-    this.list?.updateUnread(notifies)
-  }
-
-  /* 评论列表 */
-  public listReload(): void {
-    this.list?.reload()
+  public fetch(params: Partial<ListFetchParams>): void {
+    this.data.fetchComments(params)
   }
 
   public reload(): void {
-    this.listReload()
+    this.data.fetchComments({ offset: 0 })
   }
 
-  public listRefreshUI(): void {
-    this.list?.refreshUI()
-  }
-
-  public listHashGotoCheck(): void {
-    if (!this.list || !(this.list instanceof List)) return
-    const list = this.list as List
-
-    list.goToCommentDelay = false
-    list.checkGoToCommentByUrlHash()
+  public listGotoFirst(): void {
+    this.trigger('list-goto-first')
   }
 
   /* 编辑器 */
-  public editorOpen(): void {
-    this.editor.open()
-  }
-
-  public editorClose(): void {
-    this.editor.close()
-  }
-
   public editorShowLoading(): void {
     this.editor.showLoading()
   }
@@ -164,12 +86,8 @@ class Context implements ContextApi {
     this.editor.showNotify(msg, type)
   }
 
-  public editorTravel($el: HTMLElement): void {
-    this.editor.travel($el)
-  }
-
-  public editorTravelBack(): void {
-    this.editor.travelBack()
+  public editorResetState(): void {
+    this.editor.resetState()
   }
 
   /* 侧边栏 */
@@ -190,43 +108,17 @@ class Context implements ContextApi {
     this.checkerLauncher.checkCaptcha(payload)
   }
 
-  public checkAdminShowEl() {
-    const items: HTMLElement[] = []
-
-    this.$root.querySelectorAll<HTMLElement>(`[atk-only-admin-show]`).forEach(item => items.push(item))
-
-    // for layer
-    const { $wrap: $layerWrap } = getLayerWrap()
-    if ($layerWrap) $layerWrap.querySelectorAll<HTMLElement>(`[atk-only-admin-show]`).forEach(item => items.push(item))
-
-    // for sidebar
-    // TODO: 这个其实应该写在 packages/artalk-sidebar 里面的
-    const $sidebarEl = document.querySelector<HTMLElement>('.atk-sidebar')
-    if ($sidebarEl) $sidebarEl.querySelectorAll<HTMLElement>(`[atk-only-admin-show]`).forEach(item => items.push(item))
-
-    items.forEach(($item: HTMLElement) => {
-      if (this.user.data.isAdmin) $item.classList.remove('atk-hide')
-      else $item.classList.add('atk-hide')
-    })
-  }
-
-  /* 订阅模式 */
-  public on(name: any, handler: any, scope: any = 'internal') {
-    this.eventList.push({ name, handler, scope })
+  /* Events */
+  public on(name: any, handler: any) {
+    this.events.on(name, handler)
   }
 
-  public off(name: any, handler: any, scope: any = 'internal') {
-    this.eventList = this.eventList.filter((evt) => {
-      if (handler) return !(evt.name === name && evt.handler === handler && evt.scope === scope)
-      return !(evt.name === name && evt.scope === scope) // 删除全部相同 name event
-    })
+  public off(name: any, handler: any) {
+    this.events.off(name, handler)
   }
 
-  public trigger(name: any, payload?: any, scope?: any) {
-    this.eventList
-      .filter((evt) => evt.name === name && (scope ? (evt.scope === scope) : true))
-      .map((evt) => evt.handler)
-      .forEach((handler) => handler(payload))
+  public trigger(name: any, payload?: any) {
+    this.events.trigger(name, payload)
   }
 
   /* i18n */
@@ -234,16 +126,19 @@ class Context implements ContextApi {
     return I18n.t(key, args)
   }
 
-  public setDarkMode(darkMode: boolean): void {
-    DarkMode.setDarkMode(this, darkMode)
+  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, nConf)
-    this.trigger('conf-loaded')
+    this.conf = Utils.mergeDeep(this.conf, handelCustomConf(nConf))
+    this.trigger('conf-loaded', this.conf)
   }
 
-  public getMarkedInstance() {
+  public getMarked() {
     return marked.getInstance()
   }
 }