artalk 2.6.3 → 2.7.0

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,106 +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 {
-  /** 界面 */
+import EditorStateManager from './state'
+
+class Editor extends Component implements EditorApi {
   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 }
-
-  /** 编辑评论 */
-  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 }
-
-  public constructor(ctx: Context) {
+  private state: EditorStateManager
+
+  getUI() { return this.ui }
+  getPlugs() { return this.ctx.get('editorPlugs') }
+  getState() { return this.state.get() }
+
+  constructor(ctx: ContextApi) {
     super(ctx)
 
     // init editor ui
     this.ui = render()
     this.$el = this.ui.$el
 
-    // event listen
-    this.ctx.on('conf-loaded', () => {
-      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
@@ -120,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()
+    this.resetState()
   }
 
-  /** 设置回复评论 */
-  public setReply(commentData: CommentData, $comment: HTMLElement, scroll = true) {
-    this.reply?.setReply(commentData, $comment, scroll)
+  resetState() {
+    this.state.switch('normal')
   }
 
-  /** 取消回复评论 */
-  public cancelReply() {
-    this.reply?.cancelReply()
+  setReply(comment: CommentData, $comment: HTMLElement) {
+    this.state.switch('reply', { comment, $comment })
   }
 
-  /** 设置编辑评论 */
-  public setEditComment(commentData: CommentData, $comment: HTMLElement) {
-    this.editMode?.setEdit(commentData, $comment)
+  setEditComment(comment: CommentData, $comment: HTMLElement) {
+    this.state.switch('edit', { comment, $comment })
   }
 
-  /** 取消编辑评论 */
-  public cancelEditComment() {
-    this.editMode?.cancelEdit()
-  }
-
-  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) return
-    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/zh-CN.ts

@@ -1,4 +1,4 @@
-import { I18n } from '.'
+import type { I18n } from '.'
 
 const zhCN: I18n = {
   /* Editor */

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
+  }
+}

package/src/layer/layer.ts

@@ -1,51 +1,17 @@
-import Context from '~/types/context'
-import Component from '../lib/component'
-import * as Utils from '../lib/utils'
-import * as Ui from '../lib/ui'
+import type { LayerWrap } from './wrap'
 
-export default class Layer extends Component {
-  private name: string
-  private $wrap: HTMLElement
-  private $mask: HTMLElement
+export class Layer {
+  private $el: HTMLElement
+  private wrap: LayerWrap
+  private onAfterHide?: () => void
 
-  private maskClickHideEnable: boolean = true
-
-  public static BodyOrgOverflow: string
-  public static BodyOrgPaddingRight: string
-
-  public afterHide?: Function
-
-  constructor (ctx: Context, name: string, el?: HTMLElement) {
-    super(ctx)
-
-    this.name = name
-    const { $wrap, $mask } = getLayerWrap()
-    this.$wrap = $wrap
-    this.$mask = $mask
-
-    this.$el = this.$wrap.querySelector(`[data-layer-name="${name}"].atk-layer-item`)!
-    if (this.$el === null) {
-      // 若传递 layer 元素为空
-      if (!el) {
-        this.$el = Utils.createElement()
-        this.$el.classList.add('atk-layer-item')
-      } else {
-        this.$el = el
-      }
-    }
-    this.$el.setAttribute('data-layer-name', name)
-    this.$el.style.display = 'none'
-
-    // 添加到 layers wrap 中
-    this.$wrap.append(this.$el)
-  }
-
-  getName() {
-    return this.name
+  constructor(wrap: LayerWrap, name: string, el?: HTMLElement) {
+    this.wrap = wrap
+    this.$el = this.wrap.createItem(name, el)
   }
 
-  getWrapEl() {
-    return this.$wrap
+  setOnAfterHide(func: () => void) {
+    this.onAfterHide = func
   }
 
   getEl() {
@@ -53,111 +19,21 @@ export default class Layer extends Component {
   }
 
   show() {
-    this.fireAllActionTimer()
-
-    this.$wrap.style.display = 'block'
-    this.$mask.style.display = 'block'
-    this.$mask.classList.add('atk-fade-in')
     this.$el.style.display = ''
-
-    this.$mask.onclick = () => {
-      if (this.maskClickHideEnable) this.hide()
-    }
-
-    // body style 禁止滚动 + 防抖
-    this.pageBodyScrollBarHide()
-  }
-
-  hide () {
-    if (this.afterHide) this.afterHide()
-    this.$wrap.classList.add('atk-fade-out')
-    this.$el.style.display = 'none'
-
-    // body style 禁止滚动解除
-    this.pageBodyScrollBarShow()
-
-    this.newActionTimer(() => {
-      this.$wrap.style.display = 'none'
-      this.checkCleanLayer()
-    }, 450)
-    this.newActionTimer(() => {
-      this.$wrap.style.display = 'none'
-      this.$wrap.classList.remove('atk-fade-out')
-    }, 200)
+    this.wrap.show()
   }
 
-  setMaskClickHide (enable: boolean) {
-    this.maskClickHideEnable = enable
-  }
-
-  // 页面滚动条隐藏
-  pageBodyScrollBarHide() {
-    document.body.style.overflow = 'hidden'
-
-    const bpr = parseInt(window.getComputedStyle(document.body, null).getPropertyValue('padding-right'), 10)
-    document.body.style.paddingRight = `${Ui.getScrollBarWidth() + bpr || 0}px`
-  }
-
-  // 页面滚动条显示
-  pageBodyScrollBarShow() {
-    document.body.style.overflow = Layer.BodyOrgOverflow
-    document.body.style.paddingRight = Layer.BodyOrgPaddingRight
-  }
-
-  // Timers
-  private static actionTimers: {act: Function, tid: number}[] = []
-
-  private newActionTimer(func: Function, delay: number) {
-    const act = () => {
-      func() // 执行
-      Layer.actionTimers = Layer.actionTimers.filter(o => o.act !== act) // 删除
-    }
-
-    const tid = window.setTimeout(() => act(), delay)
-
-    Layer.actionTimers.push({ act, tid })
-  }
-
-  private fireAllActionTimer() {
-    Layer.actionTimers.forEach(item => {
-      clearTimeout(item.tid)
-      item.act() // 立即执行
+  hide() {
+    this.wrap.hide(() => {
+      this.$el.style.display = 'none'
+      this.onAfterHide && this.onAfterHide()
     })
   }
 
-  /** 销毁 - 无动画 */
-  disposeNow() {
-    this.$el.remove()
-    this.pageBodyScrollBarShow()
-    // this.$el dispose
-    this.checkCleanLayer()
-  }
-
-  /** 销毁 */
-  dispose() {
-    this.hide()
-    this.$el.remove()
-    // this.$el dispose
-    this.checkCleanLayer()
-  }
-
-  checkCleanLayer() {
-    if (this.getWrapEl().querySelectorAll('.atk-layer-item').length === 0) {
-      this.$wrap.style.display = 'none'
-    }
-  }
-}
-
-export function getLayerWrap(): { $wrap: HTMLElement, $mask: HTMLElement } {
-  let $wrap = document.querySelector<HTMLElement>(`.atk-layer-wrap`)
-  if (!$wrap) {
-    $wrap = Utils.createElement(
-      `<div class="atk-layer-wrap" style="display: none;"><div class="atk-layer-mask"></div></div>`
-    )
-    document.body.appendChild($wrap)
+  destroy() {
+    this.wrap.hide(() => {
+      this.$el.remove()
+      this.onAfterHide && this.onAfterHide()
+    })
   }
-
-  const $mask = $wrap.querySelector<HTMLElement>('.atk-layer-mask')!
-
-  return { $wrap, $mask }
 }

package/src/layer/scrollbar-helper.ts

@@ -0,0 +1,24 @@
+import * as Ui from '@/lib/ui'
+
+let bodyOrgOverflow: string
+let bodyOrgPaddingRight: string
+
+export function getScrollbarHelper() {
+  return {
+    init() {
+      bodyOrgOverflow = document.body.style.overflow
+      bodyOrgPaddingRight = document.body.style.paddingRight
+    },
+
+    unlock() {
+      document.body.style.overflow = bodyOrgOverflow
+      document.body.style.paddingRight = bodyOrgPaddingRight
+    },
+
+    lock() {
+      document.body.style.overflow = 'hidden'
+      const barPaddingRight = parseInt(window.getComputedStyle(document.body, null).getPropertyValue('padding-right'), 10)
+      document.body.style.paddingRight = `${Ui.getScrollBarWidth() + barPaddingRight || 0}px`
+    }
+  }
+}