artalk 2.6.4 → 2.7.0

package/src/list/page.ts

@@ -0,0 +1,97 @@
+import type { ArtalkConfig, ContextApi } from '~/types'
+import $t from '@/i18n'
+import { Paginator } from './paginator'
+import ReadMorePaginator from './paginator/read-more'
+import UpDownPaginator from './paginator/up-down'
+
+function createPaginatorByConf(conf: ArtalkConfig): Paginator {
+  if (conf.pagination.readMore) return new ReadMorePaginator()
+  return new UpDownPaginator()
+}
+
+function getPageDataByLastData(ctx: ContextApi): { offset: number, total: number } {
+  const last = ctx.getData().getListLastFetch()
+  const r = { offset: 0, total: 0 }
+  if (!last) return r
+
+  r.offset = last.params.offset
+  if (last.data) r.total = last.params.flatMode ? last.data.total : last.data.total_roots
+
+  return r
+}
+
+export const initListPaginatorFunc = (ctx: ContextApi) => {
+  let paginator: Paginator|null = null
+
+  // Init paginator when conf loaded
+  ctx.on('conf-loaded', (conf) => {
+    const list = ctx.get('list')
+
+    if (paginator) paginator.dispose() // if had been init, dispose it
+
+    // create paginator instance
+    paginator = createPaginatorByConf(conf)
+
+    // create paginator dom
+    const { offset, total } = getPageDataByLastData(ctx)
+    const $paginator = paginator.create({
+      ctx, pageSize: conf.pagination.pageSize, total,
+
+      readMoreAutoLoad: conf.pagination.autoLoad,
+    })
+
+    // mount paginator dom
+    list.$commentsWrap.after($paginator)
+
+    // update paginator info
+    paginator?.update(offset, total)
+  })
+
+  // When list loaded
+  ctx.on('list-loaded', (comments) => {
+    // update paginator info
+    const { offset, total } = getPageDataByLastData(ctx)
+    paginator?.update(offset, total)
+  })
+
+  // When list fetch
+  ctx.on('list-fetch', (params) => {
+    // if clear comments when fetch new page data
+    if (ctx.getData().getComments().length > 0 && paginator?.getIsClearComments(params)) {
+      ctx.getData().clearComments()
+    }
+  })
+
+  // When list error
+  ctx.on('list-error', () => {
+    paginator?.showErr?.($t('loadFail'))
+  })
+
+  // List goto auto next page when comment not found
+  const autoSwitchPageForFindComment = (commentID: number) => {
+    const comment = ctx.getData().findComment(commentID)
+    if (!!comment || !paginator?.getHasMore()) return
+
+    // wait for list loaded
+    ctx.on('list-loaded', () => {
+      autoSwitchPageForFindComment(commentID) // recursive, until comment found or no more page
+    }, { once: true })
+
+    // TODO 自动范围改为直接跳转到计算后的页面
+    setTimeout(() => {
+      paginator?.next()
+    }, 80)
+  }
+
+  ctx.on('list-goto', (commentID) => {
+    autoSwitchPageForFindComment(commentID)
+  })
+
+  // loading
+  ctx.on('list-fetch', (params) => {
+    paginator?.setLoading(true)
+  })
+  ctx.on('list-fetched', ({ params }) => {
+    paginator?.setLoading(false)
+  })
+}

package/src/list/paginator/index.ts

@@ -1,13 +1,25 @@
-import ListLite from '../list-lite'
-import PgHolder from './holder'
+import type { ContextApi, ListFetchParams } from '~/types'
+import UpDownPaginator from './up-down'
+import ReadMorePaginator from './read-more'
 
-export type TPgMode = 'pagination'|'read-more'
-
-export interface IPgHolderConf {
-  list: ListLite
-  mode: TPgMode
+export interface IPgHolderOpt {
+  ctx: ContextApi
   total: number
   pageSize: number
+
+  readMoreAutoLoad?: boolean
+}
+
+export interface Paginator {
+  create(opts: IPgHolderOpt): HTMLElement
+  setLoading(val: boolean): void
+  update(offset: number, total: number): void
+  next(): void
+  showErr?(msg: string): void
+  getHasMore(): boolean
+  /** Clear comments when fetch new page data */
+  getIsClearComments(params: Partial<ListFetchParams>): boolean
+  dispose(): void
 }
 
-export default PgHolder
+export default { UpDownPaginator, ReadMorePaginator }

package/src/list/paginator/read-more.ts

@@ -0,0 +1,67 @@
+import type { ListFetchParams } from '~/types'
+import ReadMoreBtn from '@/components/read-more-btn'
+import $t from '@/i18n'
+import type { Paginator, IPgHolderOpt } from '.'
+
+/**
+ * 阅读更多形式的分页
+ */
+export default class ReadMorePaginator implements Paginator {
+  private instance!: ReadMoreBtn
+  private onReachedBottom: (() => void) | null = null
+  private opt!: IPgHolderOpt
+
+  create(opt: IPgHolderOpt) {
+    this.opt = opt
+
+    this.instance = new ReadMoreBtn({
+      pageSize: opt.pageSize,
+      onClick: async (o) => {
+        opt.ctx.fetch({
+          offset: o,
+        })
+      },
+      text: $t('loadMore'),
+    })
+
+    // 滚动到底部自动加载
+    if (opt.readMoreAutoLoad) {
+      this.onReachedBottom = () => {
+        if (!this.instance.hasMore || this.opt.ctx.getData().getLoading()) return
+        this.instance.click()
+      }
+      this.opt.ctx.on('list-reach-bottom', this.onReachedBottom)
+    }
+
+    return this.instance.$el
+  }
+
+  setLoading(val: boolean) {
+    this.instance.setLoading(val)
+  }
+
+  update(offset: number, total: number) {
+    this.instance.update(offset, total)
+  }
+
+  showErr(msg: string) {
+    this.instance.showErr(msg)
+  }
+
+  next() {
+    this.instance.click()
+  }
+
+  getHasMore(): boolean {
+    return this.instance.hasMore
+  }
+
+  getIsClearComments(params: Partial<ListFetchParams>): boolean {
+    return params.offset === 0
+  }
+
+  dispose(): void {
+    this.onReachedBottom && this.opt.ctx.off('list-reach-bottom', this.onReachedBottom)
+    this.instance.$el.remove()
+  }
+}

package/src/list/paginator/up-down.ts

@@ -0,0 +1,51 @@
+import PaginationComponent from '@/components/pagination'
+import type { Paginator, IPgHolderOpt } from '.'
+
+/**
+ * 翻页形式的分页
+ */
+export default class UpDownPaginator implements Paginator {
+  private instance!: PaginationComponent
+
+  create(opt: IPgHolderOpt) {
+    this.instance = new PaginationComponent(opt.total, {
+      pageSize: opt.pageSize,
+      onChange: async (o) => {
+        opt.ctx.editorResetState() // 防止评论框被吞
+
+        opt.ctx.fetch({
+          offset: o,
+          onSuccess: () => {
+            opt.ctx.listGotoFirst()
+          }
+        })
+      }
+    })
+
+    return this.instance.$el
+  }
+
+  setLoading(val: boolean) {
+    this.instance.setLoading(val)
+  }
+
+  update(offset: number, total: number) {
+    this.instance.update(offset, total)
+  }
+
+  next() {
+    this.instance.next()
+  }
+
+  getHasMore(): boolean {
+    return this.instance.getHasMore()
+  }
+
+  getIsClearComments(): boolean {
+    return true
+  }
+
+  dispose(): void {
+    this.instance.$el.remove()
+  }
+}

package/src/main.ts

@@ -1,3 +1,5 @@
 import Artalk from './artalk'
+import * as ArtalkType from '../types'
 
+export { ArtalkType }
 export default Artalk

package/src/plugins/admin-only-elem.ts

@@ -0,0 +1,40 @@
+import type { ArtalkPlugin } from '~/types'
+
+export const AdminOnlyElem: ArtalkPlugin = (ctx) => {
+  const scanApply = () => {
+    applyAdminOnlyEls(ctx.get('user').data.isAdmin, getAdminOnlyEls({
+      $root: ctx.$root
+    }))
+  }
+
+  ctx.on('list-loaded', () => {
+    scanApply()
+  })
+
+  ctx.on('user-changed', (user) => {
+    scanApply()
+  })
+}
+
+function getAdminOnlyEls(opts: { $root: HTMLElement }): HTMLElement[] {
+  const els: HTMLElement[] = []
+
+  // elements in $root
+  opts.$root.querySelectorAll<HTMLElement>(`[atk-only-admin-show]`).forEach(item => els.push(item))
+
+  // TODO provide a Artalk.conf hook to set whitelist of admin-only elements,
+  // and move following code to that hook (move into packages/artalk-sidebar)
+
+  // elements in sidebar
+  const $sidebarEl = document.querySelector<HTMLElement>('.atk-sidebar')
+  if ($sidebarEl) $sidebarEl.querySelectorAll<HTMLElement>(`[atk-only-admin-show]`).forEach(item => els.push(item))
+
+  return els
+}
+
+function applyAdminOnlyEls(isAdmin: boolean, els: HTMLElement[]) {
+  els.forEach(($item: HTMLElement) => {
+    if (isAdmin) $item.classList.remove('atk-hide')
+    else $item.classList.add('atk-hide')
+  })
+}

package/src/plugins/conf-remoter.ts

@@ -0,0 +1,54 @@
+import type { ArtalkConfig, ArtalkPlugin, ContextApi } from '~/types'
+import { handleConfFormServer } from '@/config'
+import { showErrorDialog } from '../components/error-dialog'
+
+export const ConfRemoter: ArtalkPlugin = (ctx) => {
+  ctx.on('inited', () => {
+    loadConf(ctx)
+  })
+}
+
+function loadConf(ctx: ContextApi) {
+  ctx.getApi().system.conf().then((data) => {
+    let conf: Partial<ArtalkConfig> = {
+      apiVersion: data.version.version, // version info
+    }
+
+    // reference conf from backend
+    if (ctx.conf.useBackendConf) {
+      if (!data.frontend_conf) throw new Error('The remote backend does not respond to the frontend conf, but `useBackendConf` conf is enabled')
+      conf = { ...conf, ...handleConfFormServer(data.frontend_conf) }
+    }
+
+    // apply conf modifier
+    ctx.conf.remoteConfModifier && ctx.conf.remoteConfModifier(conf)
+
+    ctx.updateConf(conf)
+  }).catch((err) => {
+    ctx.updateConf({})
+
+    let sidebarOpenView = ''
+
+    // if response err_no_site, modify the sidebar open view to create site
+    if (err.data?.err_no_site) {
+      const viewLoadParam = { create_name: ctx.conf.site, create_urls: `${window.location.protocol}//${window.location.host}` }
+      sidebarOpenView = `sites|${JSON.stringify(viewLoadParam)}`
+    }
+
+    showErrorDialog({
+      $err: ctx.get('list').$el,
+      errMsg: err.msg || String(err),
+      errData: err.data,
+      retryFn: () => loadConf(ctx),
+      onOpenSidebar:() => ctx.showSidebar({
+        view: sidebarOpenView as any
+      })
+    })
+
+    throw err
+  }).then(() => {
+    // 评论获取
+    if (ctx.conf.remoteConfModifier) return // only auto fetch when no remoteConfModifier
+    ctx.fetch({ offset: 0 })
+  }).catch(() => {})
+}

package/src/plugins/dark-mode.ts

@@ -0,0 +1,12 @@
+import type { ArtalkPlugin } from '~/types'
+import { applyDarkMode } from '@/components/dark-mode'
+
+export const DarkMode: ArtalkPlugin = (ctx) => {
+  const sync = () => {
+    applyDarkMode([ctx.$root, ctx.get('layerManager').getEl()], ctx.conf.darkMode)
+  }
+
+  ctx.on('inited', () => sync())
+  ctx.on('conf-loaded', () => sync())
+  ctx.on('dark-mode-changed', () => sync())
+}

package/src/plugins/editor/_kit.ts

@@ -0,0 +1,57 @@
+import type { PlugManager } from '../editor-kit'
+import type EditorPlug from "./_plug"
+
+/**
+ * PlugKit provides a set of methods to help you develop editor plug
+ */
+export default class PlugKit {
+  constructor(
+    private plugs: PlugManager
+  ) {
+  }
+
+  /** Use the editor */
+  useEditor() {
+    return this.plugs.editor
+  }
+
+  /** Use the context of global */
+  useGlobalCtx() {
+    return this.plugs.editor.ctx
+  }
+
+  /** Use the config of Artalk */
+  useConf() {
+    return this.plugs.editor.ctx.conf
+  }
+
+  /** Use the http api client */
+  useApi() {
+    return this.plugs.editor.ctx.getApi()
+  }
+
+  /** Use the ui of editor */
+  useUI() {
+    return this.plugs.editor.getUI()
+  }
+
+  /** Use the events in editor scope */
+  useEvents() {
+    return this.plugs.getEvents()
+  }
+
+  /** Listen the event when plug is mounted */
+  useMounted(func: () => void) {
+    this.useEvents().on('mounted', func)
+  }
+
+  /** Listen the event when plug is unmounted */
+  useUnmounted(func: () => void) {
+    this.useEvents().on('unmounted', func)
+  }
+
+  /** Use the deps of other plug */
+  useDeps<T extends typeof EditorPlug>(plug: T) {
+    return this.plugs.get(plug)
+  }
+}

package/src/plugins/editor/_plug.ts

@@ -0,0 +1,60 @@
+import type { CommentData, EditorState } from '~/types'
+import * as Utils from '@/lib/utils'
+import type PlugKit from './_kit'
+
+/**
+ * Editor 插件
+ */
+interface EditorPlug {
+  $btn?: HTMLElement
+  $panel?: HTMLElement
+  contentTransformer?(rawContent: string): string
+  editorStateEffectWhen?: EditorState
+  editorStateEffect?(comment: CommentData): () => void
+}
+
+class EditorPlug {
+  constructor(
+    protected kit: PlugKit
+  ) {
+  }
+
+  /** Use plug btn will add a btn on the bottom of editor */
+  useBtn(html: string = '<div></div>') {
+    this.$btn = Utils.createElement(`<span class="atk-plug-btn">${html}</span>`)
+    return this.$btn
+  }
+
+  /** Use plug panel will show the panel when btn is clicked */
+  usePanel(html: string = '<div></div>') {
+    this.$panel = Utils.createElement(html)
+    return this.$panel
+  }
+
+  /** Use the content transformer to handle the content of the last submit by the editor */
+  useContentTransformer(func: (raw: string) => string) {
+    this.contentTransformer = func
+  }
+
+  /** Listen the event of panel show */
+  usePanelShow(func: () => void) {
+    this.kit.useEvents().on('panel-show', (aPlug) => {
+      if (aPlug === this) func()
+    })
+  }
+
+  /** Listen the event of panel hide */
+  usePanelHide(func: () => void) {
+    this.kit.useEvents().on('panel-hide', (aPlug) => {
+      if (aPlug === this) func()
+    })
+  }
+
+  /** Use editor state modifier */
+  useEditorStateEffect(stateName: EditorState, effectFn: (comment: CommentData) => () => void) {
+    this.editorStateEffectWhen = stateName
+    this.editorStateEffect = effectFn
+  }
+}
+
+export default EditorPlug

package/src/plugins/editor/_sample.ts

@@ -0,0 +1,8 @@
+import EditorPlug from './_plug'
+import type PlugKit from './_kit'
+
+export default class SamplePlug extends EditorPlug {
+  constructor(kit: PlugKit) {
+    super(kit)
+  }
+}

package/src/plugins/editor/closable.ts

@@ -0,0 +1,44 @@
+import User from '@/lib/user'
+import * as Utils from '@/lib/utils'
+import $t from '@/i18n'
+import EditorPlug from './_plug'
+import type PlugKit from './_kit'
+
+export default class Closable extends EditorPlug {
+  constructor(kit: PlugKit) {
+    super(kit)
+
+    const onOpen = () => this.open()
+    const onClose = () => this.close()
+
+    this.kit.useMounted(() => {
+      this.kit.useEvents().on('editor-open', onOpen)
+      this.kit.useEvents().on('editor-close', onClose)
+    })
+    this.kit.useUnmounted(() => {
+      this.kit.useEvents().off('editor-open', onOpen)
+      this.kit.useEvents().off('editor-close', onClose)
+    })
+  }
+
+  private open() {
+    this.kit.useUI().$textareaWrap.querySelector('.atk-comment-closed')?.remove()
+    this.kit.useUI().$textarea.style.display = ''
+    this.kit.useUI().$bottom.style.display = ''
+  }
+
+  private close() {
+    if (!this.kit.useUI().$textareaWrap.querySelector('.atk-comment-closed'))
+      this.kit.useUI().$textareaWrap.prepend(Utils.createElement(`<div class="atk-comment-closed">${$t('onlyAdminCanReply')}</div>`))
+
+    if (!User.data.isAdmin) {
+      this.kit.useUI().$textarea.style.display = 'none'
+      this.kit.useEvents().trigger('panel-close')
+      this.kit.useUI().$bottom.style.display = 'none'
+    } else {
+      // 管理员一直打开评论
+      this.kit.useUI().$textarea.style.display = ''
+      this.kit.useUI().$bottom.style.display = ''
+    }
+  }
+}