artalk 2.7.1 → 2.7.3

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

@@ -1,67 +0,0 @@
-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

@@ -1,51 +0,0 @@
-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,14 +0,0 @@
-import Artalk from './artalk'
-import * as ArtalkType from '../types'
-
-export { ArtalkType }
-export default Artalk
-
-// Expose the static methods from the Artalk class
-// because direct export of static methods is not supported
-// for adapting to different environments like CommonJS and browser IIFE
-// for example, we can use `Artalk.init()` rather than `Artalk.default.init()`
-// therefore, we need to manually expose the static methods in the Artalk class.
-export const init = Artalk.init
-export const use = Artalk.use
-export const loadCountWidget = Artalk.loadCountWidget

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

@@ -1,40 +0,0 @@
-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

@@ -1,54 +0,0 @@
-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

@@ -1,12 +0,0 @@
-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

@@ -1,57 +0,0 @@
-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

@@ -1,60 +0,0 @@
-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

@@ -1,8 +0,0 @@
-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

@@ -1,44 +0,0 @@
-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 = ''
-    }
-  }
-}

package/src/plugins/editor/emoticons.scss

@@ -1,72 +0,0 @@
-.atk-editor-plug-emoticons {
-  height: 100%;
-  width: 100%;
-
-  & > .atk-grp-wrap {
-    @extend .atk-slim-scrollbar;
-    overflow-y: scroll;
-    overflow-x: hidden;
-    height: 100%; // calc(100% - 30px);
-    width: 100%;
-
-    & > .atk-grp {
-      display: flex;
-      flex-wrap: wrap;
-      flex-direction: row;
-      padding: 5px 10px 35px 10px;
-
-      &[data-type="image"] > .atk-item {
-        height: 63px;
-        width: 63px;
-      }
-
-      & > .atk-item {
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        padding: 5px;
-        cursor: pointer;
-        user-select: none;
-        border-radius: calc($block-radius / 2);
-        font-size: 15px;
-        min-width: 35px;
-        margin: 2px;
-
-        & > img {
-          max-height: 100%;
-          width: auto;
-        }
-
-        &:hover {
-          background: var(--at-color-bg-grey);
-        }
-      }
-    }
-  }
-
-  & > .atk-grp-switcher {
-    position: absolute;
-    bottom: 0;
-    left: 0;
-    width: 100%;
-    background: var(--at-color-bg-transl);
-    height: 30px;
-    border-top: 1px solid var(--at-color-border);
-    border-bottom: 1px solid var(--at-color-border);
-
-    & > span {
-      user-select: none;
-      padding: 0 10px;
-      line-height: 30px;
-      float: left;
-      display: block;
-      cursor: pointer;
-      font-size: $font-size;
-
-      &:hover,
-      &.active {
-        background: var(--at-color-bg-grey);
-      }
-    }
-  }
-}