artalk 2.6.4 → 2.7.1

package/src/data.ts

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

package/src/defaults.ts

@@ -1,4 +1,4 @@
-import ArtalkConfig from "~/types/artalk-config"
+import type { ArtalkConfig } from '~/types'
 
 const defaults: ArtalkConfig = {
   el: '',

package/src/editor/editor.ts

@@ -1,114 +1,59 @@
-import type { CommentData } from '~/types/artalk-data'
-import type Context from '~/types/context'
+import type { CommentData, ContextApi, EditorApi } from '~/types'
 import Component from '../lib/component'
-import * as Utils from '../lib/utils'
 import * as Ui from '../lib/ui'
 import marked from '../lib/marked'
-import User from '../lib/user'
-import initEditorFuncs from './funcs'
 import { render, EditorUI } from './ui'
-import { PlugManager } from './plug-manager'
-import { Mover } from './mover'
-import { ReplyManager } from './reply'
-import { EditModeManager } from './edit-mode'
-import { SubmitManager } from './submit'
-
-export default class Editor extends Component {
-  /** 界面 */
-  private ui: EditorUI
-  public getUI() { return this.ui }
-
-  /** 插件管理器 */
-  private plugs?: PlugManager
-  public getPlugs() { return this.plugs }
-  public setPlugs(p: PlugManager) { this.plugs = p }
-
-  /** 评论框移动 */
-  private mover?: Mover
-  public setMover(m: Mover) { this.mover = m }
-
-  /** 回复评论 */
-  private reply?: ReplyManager
-  public setReplyManager(m: ReplyManager) { this.reply = m }
-  public getReplyManager() { return this.reply }
-  public get isReplyMode() { return !!this.reply?.comment }
+import EditorStateManager from './state'
 
-  /** 编辑评论 */
-  private editMode?: EditModeManager
-  public setEditModeManager(m: EditModeManager) { this.editMode = m }
-  public get isEditMode() { return !!this.editMode?.comment }
-
-  /** 提交评论 */
-  private submitManager?: SubmitManager
-  public setSubmitManager(m: SubmitManager) { this.submitManager = m }
-  public getSubmitManager() { return this.submitManager }
+class Editor extends Component implements EditorApi {
+  private ui: EditorUI
+  private state: EditorStateManager
 
-  /** 已加载功能的 unmount 函数 */
-  private unmountFuncs: (() => void)[] = []
+  getUI() { return this.ui }
+  getPlugs() { return this.ctx.get('editorPlugs') }
+  getState() { return this.state.get() }
 
-  public constructor(ctx: Context) {
+  constructor(ctx: ContextApi) {
     super(ctx)
 
     // init editor ui
     this.ui = render()
     this.$el = this.ui.$el
 
-    // event listen
-    this.ctx.on('conf-loaded', () => {
-      // call unmount funcs
-      // (this will only be called while conf reloaded, not be called at first time)
-      this.unmountFuncs?.forEach((unmount) => !!unmount && unmount())
-
-      // call init will return unmount funcs and save it
-      this.unmountFuncs = initEditorFuncs(this) // init editor funcs
-    })
+    // init state manager
+    this.state = new EditorStateManager(this)
   }
 
-  public getHeaderInputEls() {
+  getHeaderInputEls() {
     return { nick: this.ui.$nick, email: this.ui.$email, link: this.ui.$link }
   }
 
-  public saveToLocalStorage() {
-    window.localStorage.setItem('ArtalkContent', this.getContentOriginal().trim())
-  }
-
-  public refreshSendBtnText() {
-    if (this.isEditMode) this.ui.$submitBtn.innerText = this.$t('save')
-    else this.ui.$submitBtn.innerText = this.ctx.conf.sendBtn || this.$t('send')
-  }
-
-  /** 最终用于 submit 的数据 */
-  public getFinalContent() {
-    let content = this.getContentOriginal()
+  getContentFinal() {
+    let content = this.getContentRaw()
 
     // plug hook: final content transformer
-    if (this.plugs) content = this.plugs.getTransformedContent(content)
+    const plugs = this.getPlugs()
+    if (plugs) content = plugs.getTransformedContent(content)
 
     return content
   }
 
-  public getContentOriginal() {
-    return this.ui.$textarea.value || '' // Tip: !!"0" === true
+  getContentRaw() {
+    return this.ui.$textarea.value || ''
   }
 
-  public getContentMarked() {
-    return marked(this.ctx, this.getFinalContent())
+  getContentMarked() {
+    return marked(this.getContentFinal())
   }
 
-  public setContent(val: string) {
+  setContent(val: string) {
     this.ui.$textarea.value = val
-    this.saveToLocalStorage()
 
     // plug hook: content updated
-    if (this.plugs) this.plugs.triggerContentUpdatedEvt(val)
-
-    // 延迟执行防止无效
-    window.setTimeout(() => {
-      this.adjustTextareaHeight()
-    }, 80)
+    this.getPlugs()?.getEvents().trigger('content-updated', val)
   }
 
-  public insertContent(val: string) {
+  insertContent(val: string) {
     if ((document as any).selection) {
       this.ui.$textarea.focus();
       (document as any).selection.createRange().text = val
@@ -128,100 +73,42 @@ export default class Editor extends Component {
     }
   }
 
-  public adjustTextareaHeight() {
-    const diff = this.ui.$textarea.offsetHeight - this.ui.$textarea.clientHeight
-    this.ui.$textarea.style.height = '0px' // it's a magic. 若不加此行，内容减少，高度回不去
-    this.ui.$textarea.style.height = `${this.ui.$textarea.scrollHeight + diff}px`
-  }
-
-  public focus() {
+  focus() {
     this.ui.$textarea.focus()
   }
 
-  public reset() {
+  reset() {
     this.setContent('')
-    this.cancelReply()
-    this.cancelEditComment()
-  }
-
-  /** 设置回复评论 */
-  public setReply(commentData: CommentData, $comment: HTMLElement, scroll = true) {
-    this.reply?.setReply(commentData, $comment, scroll)
+    this.resetState()
   }
 
-  /** 取消回复评论 */
-  public cancelReply() {
-    this.reply?.cancelReply()
+  resetState() {
+    this.state.switch('normal')
   }
 
-  /** 设置编辑评论 */
-  public setEditComment(commentData: CommentData, $comment: HTMLElement) {
-    this.editMode?.setEdit(commentData, $comment)
+  setReply(comment: CommentData, $comment: HTMLElement) {
+    this.state.switch('reply', { comment, $comment })
   }
 
-  /** 取消编辑评论 */
-  public cancelEditComment() {
-    this.editMode?.cancelEdit()
+  setEditComment(comment: CommentData, $comment: HTMLElement) {
+    this.state.switch('edit', { comment, $comment })
   }
 
-  public showNotify(msg: string, type: "i"|"s"|"w"|"e") {
+  showNotify(msg: string, type: any) {
     Ui.showNotify(this.ui.$notifyWrap, msg, type)
   }
 
-  public showLoading() {
+  showLoading() {
     Ui.showLoading(this.ui.$el)
   }
 
-  public hideLoading() {
+  hideLoading() {
     Ui.hideLoading(this.ui.$el)
   }
 
-  /** 点击评论提交按钮事件 */
-  public async submit() {
-    if (!this.submitManager) throw Error('submitManger not initialized')
-    await this.submitManager.do()
-  }
-
-  /** 关闭评论 */
-  public close() {
-    if (!this.ui.$textareaWrap.querySelector('.atk-comment-closed'))
-      this.ui.$textareaWrap.prepend(Utils.createElement(`<div class="atk-comment-closed">${this.$t('onlyAdminCanReply')}</div>`))
-
-    if (!User.data.isAdmin) {
-      this.ui.$textarea.style.display = 'none'
-      this.closePlugPanel()
-      this.ui.$bottom.style.display = 'none'
-    } else {
-      // 管理员一直打开评论
-      this.ui.$textarea.style.display = ''
-      this.ui.$bottom.style.display = ''
-    }
-  }
-
-  /** 打开评论 */
-  public open() {
-    this.ui.$textareaWrap.querySelector('.atk-comment-closed')?.remove()
-    this.ui.$textarea.style.display = ''
-    this.ui.$bottom.style.display = ''
-  }
-
-  /** 移动评论框到置顶元素之后 */
-  public travel($afterEl: HTMLElement) {
-    this.mover?.move($afterEl)
-  }
-
-  /** 评论框归位 */
-  public travelBack() {
-    this.mover?.back()
-  }
-
-  /** 展开插件面板 */
-  public openPlugPanel(plugName: string) {
-    this.plugs?.openPlugPanel(plugName)
-  }
-
-  /** 收起插件面板 */
-  public closePlugPanel() {
-    this.plugs?.closePlugPanel()
+  submit() {
+    this.ctx.trigger('editor-submit')
   }
 }
+
+export default Editor

package/src/editor/state.ts

@@ -0,0 +1,52 @@
+import type { EditorState, CommentData } from '~/types'
+import * as Ui from '@/lib/ui'
+import type Editor from './editor'
+import Mover from '../plugins/editor/mover'
+
+export default class EditorStateManager {
+  constructor(private editor: Editor) {}
+
+  private stateCurt: EditorState = 'normal'
+  private stateUnmountFn: (() => void)|null = null
+
+  /** Get current state */
+  get() {
+    return this.stateCurt
+  }
+
+  /**
+   * Switch editor state
+   *
+   * @param state The state to switch
+   * @param payload The cause of state switch
+   */
+  switch(state: EditorState, payload?: { $comment: HTMLElement, comment: CommentData }) {
+    // trigger unmount
+    if (this.stateUnmountFn) {
+      this.stateUnmountFn()
+      this.stateUnmountFn = null
+
+      // move editor back to the initial position
+      this.editor.getPlugs()?.get(Mover)?.back()
+    }
+
+    // invoke effect function and save unmount function
+    if (state !== 'normal' && payload) {
+      // move editor position
+      let moveAfterEl = payload.$comment
+      if (!this.editor.conf.flatMode) moveAfterEl = moveAfterEl.querySelector<HTMLElement>('.atk-footer')!
+      this.editor.getPlugs()?.get(Mover)?.move(moveAfterEl)
+
+      const $relative = this.editor.ctx.conf.scrollRelativeTo && this.editor.ctx.conf.scrollRelativeTo()
+      Ui.scrollIntoView(this.editor.getUI().$el, true, $relative)
+
+      const plugin = this.editor.getPlugs()?.getPlugs().find(p => p.editorStateEffectWhen === state)
+      if (plugin && plugin.editorStateEffect) {
+        this.stateUnmountFn = plugin.editorStateEffect(payload.comment)
+      }
+    }
+
+    // change current state
+    this.stateCurt = state
+  }
+}

package/src/i18n/en.ts

@@ -78,4 +78,7 @@ export default {
   deleteFail: 'Delete Failed',
   reqGot: 'Request got',
   reqAborted: 'Request timed out or terminated unexpectedly',
+  updateMsg: 'Please update Artalk {name} to get the full experience',
+  currentVersion: 'Current Version',
+  ignore: 'Ignore',
 }

package/src/i18n/jp.ts

@@ -80,4 +80,7 @@ export default defineLocaleExternal('jp', {
   deleteFail: '削除に失敗しました',
   reqGot: 'リクエストを取得しました',
   reqAborted: 'リクエストがタイムアウトしたか、予期せず終了した',
+  updateMsg: 'フルな体験をするためには、Artalk {name} をアップデートしてください',
+  currentVersion: '現在のバージョン',
+  ignore: '無視する',
 }, ['jp-JP'])

package/src/i18n/zh-CN.ts

@@ -1,4 +1,4 @@
-import { I18n } from '.'
+import type { I18n } from '.'
 
 const zhCN: I18n = {
   /* Editor */
@@ -80,6 +80,9 @@ const zhCN: I18n = {
   deleteFail: '删除失败',
   reqGot: '请求响应',
   reqAborted: '请求超时或意外终止',
+  updateMsg: '请更新 Artalk {name} 以获得完整体验',
+  currentVersion: '当前版本',
+  ignore: '忽略',
 }
 
 export default zhCN

package/src/i18n/zh-TW.ts

@@ -80,4 +80,7 @@ export default defineLocaleExternal('zh-TW', {
   deleteFail: '刪除失敗',
   reqGot: '請求響應',
   reqAborted: '請求超時或意外終止',
+  updateMsg: '請更新 Artalk {name} 以獲得完整體驗',
+  currentVersion: '當前版本',
+  ignore: '忽略',
 })

package/src/layer/index.ts

@@ -1,4 +1,4 @@
-import Layer, { getLayerWrap } from './layer'
-
-export default Layer
-export { getLayerWrap }
+export * from './layer'
+export * from './wrap'
+export * from './scrollbar-helper'
+export * from './layer-manager'

package/src/layer/layer-manager.ts

@@ -0,0 +1,32 @@
+import type { ContextApi } from '~/types'
+import { getScrollbarHelper } from './scrollbar-helper'
+import { LayerWrap } from './wrap'
+import { Layer } from './layer'
+
+export class LayerManager {
+  private wrap: LayerWrap
+  private ctx: ContextApi
+
+  constructor(ctx: ContextApi) {
+    this.ctx = ctx
+
+    this.wrap = new LayerWrap()
+    document.body.appendChild(this.wrap.getWrap())
+
+    ctx.on('destroy', () => {
+      this.wrap.getWrap().remove()
+    })
+
+    // 记录页面原始 CSS 属性
+    getScrollbarHelper().init()
+  }
+
+  getEl() {
+    return this.wrap.getWrap()
+  }
+
+  create(name: string, el?: HTMLElement | undefined) {
+    const layer = new Layer(this.wrap, name, el)
+    return layer
+  }
+}