artalk 2.6.4 → 2.7.1

package/src/plugins/stat.ts

@@ -0,0 +1,82 @@
+import type { ContextApi, ArtalkPlugin } from '~/types'
+import Api from '../api'
+
+export interface CountOptions {
+  getApi(): Api
+
+  pageKey: string
+  countEl: string
+  pvEl: string
+
+  /** 是否增加当前页面 PV 数 */
+  pvAdd?: boolean
+}
+
+export const PvCountWidget: ArtalkPlugin = (ctx: ContextApi) => {
+  ctx.on('conf-loaded', () => {
+    initCountWidget({
+      getApi: () => ctx.getApi(),
+      pageKey: ctx.conf.pageKey,
+      countEl: ctx.conf.countEl,
+      pvEl: ctx.conf.pvEl,
+      pvAdd: true,
+    })
+  })
+}
+
+/** 初始化评论数和 PV 数量展示元素 */
+export async function initCountWidget(opt: CountOptions) {
+  // 评论数
+  if (opt.countEl && document.querySelector(opt.countEl)) {
+    refreshStatCount(opt, { query: 'page_comment', numEl: opt.countEl })
+  }
+
+  // PV
+  const initialData = opt.pvAdd ? {
+    [opt.pageKey]: (await opt.getApi().page.pv()) // pv+1 and get pv count
+  } : undefined
+
+  if (opt.pvEl && document.querySelector(opt.pvEl)) {
+    refreshStatCount(opt, {
+      query: 'page_pv',
+      numEl: opt.pvEl,
+      data: initialData,
+    })
+  }
+}
+
+type CountData = { [pageKey: string]: number }
+
+async function refreshStatCount(
+  opt: CountOptions,
+  args: {
+    query: 'page_pv' | 'page_comment'
+    numEl: string
+    data?: CountData
+  }
+) {
+  let data: CountData = args.data || {}
+
+  // Get page keys which will be queried
+  let queryPageKeys = Array.from(document.querySelectorAll(args.numEl))
+    .map((e) => e.getAttribute('data-page-key') || opt.pageKey)
+    .filter((k) => typeof data[k] !== 'number') // filter out keys that already have data
+
+  queryPageKeys = [...new Set(queryPageKeys)] // deduplicate
+
+  // Fetch count data from server
+  if (queryPageKeys.length > 0) {
+    const res = await opt.getApi().page.stat(args.query, queryPageKeys) as CountData
+    data = { ...data, ...res }
+  }
+
+  applyCountData(args.numEl, data, data[opt.pageKey])
+}
+
+function applyCountData(selector: string, data: CountData, defaultCount: number) {
+  document.querySelectorAll(selector).forEach((el) => {
+    const pageKey = el.getAttribute('data-page-key')
+    const count = Number(pageKey ? (data[pageKey]) : defaultCount)
+    el.innerHTML = `${count}`
+  })
+}

package/src/plugins/version-check.ts

@@ -0,0 +1,36 @@
+import type { ArtalkPlugin } from '~/types'
+import { version as ARTALK_VERSION } from '~/package.json'
+import type List from '~/src/list/list'
+import * as Ui from '@/lib/ui'
+import * as Utils from '@/lib/utils'
+import $t from '@/i18n'
+
+let IgnoreVersionCheck = false
+
+export const VersionCheck: ArtalkPlugin = (ctx) => {
+  ctx.on('conf-loaded', () => {
+    const list = ctx.get('list')
+    if (ctx.conf.apiVersion && ctx.conf.versionCheck && !IgnoreVersionCheck)
+      versionCheck(list, ARTALK_VERSION, ctx.conf.apiVersion)
+  })
+}
+
+function versionCheck(list: List, feVer: string, beVer: string) {
+  const comp = Utils.versionCompare(feVer, beVer)
+  const sameVer = (comp === 0)
+  if (sameVer) return
+
+  const errEl = Utils.createElement(
+    `<div>${$t('updateMsg', { name: (comp < 0) ? $t('frontend') : $t('backend') })}` +
+    `<br/><br/><span style="color: var(--at-color-meta);">` +
+    `${$t('currentVersion')}: ${$t('frontend')} ${feVer} / ${$t('backend')} ${beVer}` +
+    `</span><br/><br/></div>`)
+  const ignoreBtn = Utils.createElement(`<span style="cursor:pointer">${$t('ignore')}</span>`)
+  ignoreBtn.onclick = () => {
+    Ui.setError(list.$el.parentElement!, null)
+    IgnoreVersionCheck = true
+    list.ctx.fetch({ offset: 0 })
+  }
+  errEl.append(ignoreBtn)
+  Ui.setError(list.$el.parentElement!, errEl, '<span class="atk-warn-title">Artalk Warn</span>')
+}

package/src/service.ts

@@ -1,26 +1,23 @@
-import Context from '~/types/context'
-import CheckerLauncher from './lib/checker'
-import Api from './api'
-import Editor from './editor'
-import List from './list'
-import Layer from './layer'
+import type { ContextApi } from '~/types'
+import CheckerLauncher from './components/checker'
+import Editor from './editor/editor'
 import SidebarLayer from './layer/sidebar-layer'
-import { initMarked } from './lib/marked'
+
 import User from './lib/user'
-import ListLite from './list/list-lite'
-import * as DarkMode from './lib/dark-mode'
+import List from './list/list'
+
 import * as I18n from './i18n'
+import { PlugManager } from './plugins/editor-kit'
+import { LayerManager } from './layer/layer-manager'
 
 /**
  * Services
  *
- * @description
- * 当函数有返回值时，该值将自动添加到 Context 类作为一个 private 成员的值，
- * 这个成员的名称与函数名对应。可在 Context 类中访问该对象（同事类）。
+ * @description Call these services by `ctx.get('serviceName')` or `ctx.serviceName`
  */
 const services = {
   // I18n
-  i18n(ctx: Context) {
+  i18n(ctx: ContextApi) {
     I18n.setLocale(ctx.conf.locale)
 
     ctx.on('conf-loaded', () => {
@@ -28,82 +25,58 @@ const services = {
     })
   },
 
-  // Markdown 组件
-  markdown() {
-    initMarked()
-  },
-
   // User Store
-  user(ctx: Context) {
-    User.setContext(ctx)
+  user(ctx: ContextApi) {
+    User.setOnUserChanged((user) => {
+      ctx?.trigger('user-changed', user)
+    })
     return User
   },
 
-  // HTTP API client
-  api(ctx: Context) {
-    const api = new Api(ctx)
-    return api
+  // 弹出层
+  layerManager(ctx: ContextApi) {
+    return new LayerManager(ctx)
   },
 
   // CheckerLauncher
-  checkerLauncher(ctx: Context) {
-    const checkerLauncher = new CheckerLauncher(ctx)
+  checkerLauncher(ctx: ContextApi) {
+    const checkerLauncher = new CheckerLauncher({
+      getCtx: () => ctx,
+      getApi: () => ctx.getApi(),
+      getIframeURLBase: () => ctx.conf.server,
+      onReload: () => ctx.reload()
+    })
     return checkerLauncher
   },
 
   // 编辑器
-  editor(ctx: Context) {
+  editor(ctx: ContextApi) {
     const editor = new Editor(ctx)
     ctx.$root.appendChild(editor.$el)
     return editor
   },
 
   // 评论列表
-  list(ctx: Context): ListLite|undefined {
-    // 评论列表
+  list(ctx: ContextApi): List {
     const list = new List(ctx)
     ctx.$root.appendChild(list.$el)
-
-    // 评论获取
-    list.fetchComments(0)
-
     return list
   },
 
-  // 弹出层
-  layer(ctx: Context) {
-    // 记录页面原始 CSS 属性
-    Layer.BodyOrgOverflow = document.body.style.overflow
-    Layer.BodyOrgPaddingRight = document.body.style.paddingRight
-  },
-
   // 侧边栏 Layer
-  sidebarLayer(ctx: Context) {
+  sidebarLayer(ctx: ContextApi) {
     const sidebarLayer = new SidebarLayer(ctx)
     return sidebarLayer
   },
 
-  // 默认事件绑定
-  eventsDefault(ctx: Context) {
-    // 锚点快速跳转评论
-    window.addEventListener('hashchange', () => {
-      ctx.listHashGotoCheck()
-    })
+  // Extra Service
+  // -----------------------------------------
+  // Only for type check
+  // Not inject to ctx immediately,
+  // but can be injected by other occasions
 
-    // 本地用户数据变更
-    ctx.on('user-changed', () => {
-      ctx.checkAdminShowEl()
-      ctx.listRefreshUI()
-    })
-  },
-
-  // 夜间模式
-  darkMode(ctx: Context) {
-    DarkMode.syncDarkModeConf(ctx)
-
-    ctx.on('conf-loaded', () => {
-      DarkMode.syncDarkModeConf(ctx)
-    })
+  editorPlugs(): PlugManager|undefined {
+    return undefined
   }
 }
 

package/src/style/comment.scss

@@ -41,7 +41,7 @@
 
 .atk-comment {
   display: block;
-  padding: 12px 10px;
+  padding: 10px;
 
   & > .atk-avatar {
     display: block;
@@ -239,23 +239,21 @@
     }
 
     & > .atk-footer {
-      margin-top: 12px;
+      margin-top: 5px;
 
       .atk-actions {
         display: flex;
         flex-direction: row;
         align-items: center;
         flex-wrap: wrap;
-        margin-bottom: -15px;
 
         & > span {
           color: var(--at-color-meta);
           font-size: 13px;
-          line-height: 15px;
+          line-height: 25px;
           display: inline-flex;
           cursor: pointer;
           user-select: none;
-          margin-bottom: 15px;
 
           &.atk-error, &.atk-error:hover {
             color: var(--at-color-red);
@@ -340,11 +338,11 @@
     border-left: 1px dashed transparent;
     border-bottom-color: transparent;
     &:not(:last-child) {
-      margin-bottom: 5px;
+      margin-bottom: 10px;
     }
 
     & > .atk-comment {
-      padding: 4px 0;
+      padding: 0;
 
       & > .atk-avatar img {
         width: 36px;

package/src/style/editor.scss

@@ -11,6 +11,11 @@
     margin-bottom: 7px;
   }
 
+  &.editor-traveling {
+    margin-top: 5px;
+    margin-bottom: 10px;
+  }
+
   & > .atk-header {
     display: flex;
     flex-direction: row;

package/src/style/list.scss

@@ -132,7 +132,7 @@
   }
 
   & > .atk-list-footer {
-    float: right;
+    text-align: right;
 
     @media only screen and (max-width: 768px) {
       float: initial;

package/types/{artalk-config.d.ts → config.ts}

@@ -1,7 +1,7 @@
 import { I18n } from '~/src/i18n'
-import { CommentData } from './artalk-data'
+import { CommentData } from './data'
 
-export default interface ArtalkConfig {
+export interface ArtalkConfig {
   /** 装载元素 */
   el: string|HTMLElement
 
@@ -115,6 +115,20 @@ export default interface ArtalkConfig {
 
   /** 语言本地化 */
   locale: I18n|string
+
+  /** 后端版本 (系统数据，用户不允许更改) */
+  apiVersion?: string
+
+  /** Replacer for marked */
+  markedReplacers?: ((raw: string) => string)[]
+
+  /** 列表请求参数修改器 */
+  listFetchParamsModifier?: (params: any) => void
+
+  // TODO consider merge list related config into one object, or flatten all to keep simple (keep consistency)
+  remoteConfModifier?: (conf: Partial<ArtalkConfig>) => void
+  listUnreadHighlight?: boolean
+  scrollRelativeTo?: () => HTMLElement
 }
 
 /**

package/types/context.ts

@@ -0,0 +1,84 @@
+import type { TInjectedServices } from '@/service'
+import type { CheckerCaptchaPayload, CheckerPayload } from '@/components/checker'
+import type { EventManagerFuncs } from '@/lib/event-manager'
+import type { TMarked } from '@/lib/marked'
+import type { I18n } from '@/i18n'
+import type Api from '@/api'
+import type { SidebarShowPayload, EventPayloadMap, ArtalkConfig, CommentData, DataManagerApi, ListFetchParams, NotifyLevel } from '.'
+
+/**
+ * Context 接口
+ *
+ * (面向接口的编程)
+ */
+export interface ContextApi extends EventManagerFuncs<EventPayloadMap> {
+  /** Artalk 根元素对象 */
+  $root: HTMLElement
+
+  /** 依赖注入函数 */
+  inject<K extends keyof TInjectedServices>(depName: K, obj: TInjectedServices[K]): void
+
+  /** 获取依赖对象 */
+  get<K extends keyof TInjectedServices>(depName: K): TInjectedServices[K]
+
+  /** 配置对象 */
+  // TODO 修改为 getConf() 和 setConf() 并且返回拷贝而不是引用
+  conf: ArtalkConfig
+
+  /** marked 依赖对象 */
+  getMarked(): TMarked | undefined
+
+  /** 获取 API 以供 HTTP 请求 */
+  getApi(): Api
+
+  /** 获取数据管理器对象 */
+  getData(): DataManagerApi
+
+  /** 评论回复 */
+  replyComment(commentData: CommentData, $comment: HTMLElement): void
+
+  /** 编辑评论 */
+  editComment(commentData: CommentData, $comment: HTMLElement): void
+
+  /** 获取评论数据 */
+  fetch(params: Partial<ListFetchParams>): void
+
+  /** 重载评论数据 */
+  reload(): void
+
+  /** 列表滚动到第一个评论的位置 */
+  listGotoFirst(): void
+
+  /** 显示侧边栏 */
+  showSidebar(payload?: SidebarShowPayload): void
+
+  /** 隐藏侧边栏 */
+  hideSidebar(): void
+
+  /** 编辑器 - 显示加载 */
+  editorShowLoading(): void
+
+  /** 编辑器 - 隐藏加载 */
+  editorHideLoading(): void
+
+  /** 编辑器 - 显示提示消息 */
+  editorShowNotify(msg: string, type: NotifyLevel): void
+
+  /** 评论框 - 复原状态 */
+  editorResetState(): void
+
+  /** 验证码检测 */
+  checkCaptcha(payload: CheckerCaptchaPayload): void
+
+  /** 管理员检测 */
+  checkAdmin(payload: CheckerPayload): void
+
+  /** i18n 翻译 */
+  $t(key: keyof I18n, args?: {[key: string]: string}): string
+
+  /** 设置夜间模式 */
+  setDarkMode(darkMode: boolean|'auto'): void
+
+  /** 更新配置 */
+  updateConf(conf: Partial<ArtalkConfig>): void
+}

package/types/{artalk-data.d.ts → data.ts}

@@ -228,3 +228,44 @@ export interface ApiVersionData {
   /** API 程序 CommitHash */
   commit_hash: string
 }
+
+export interface ListFetchParams {
+  offset: number
+  limit: number
+  flatMode: boolean
+  paramsModifier?: (p: any) => void
+  onSuccess?: (data: ListData) => void
+  onError?: (err: any) => void
+}
+
+export interface ListLastFetchData {
+  params: ListFetchParams
+  data?: ListData
+}
+
+export interface DataManagerApi {
+  getLoading(): boolean
+  setLoading(val: boolean): void
+
+  getListLastFetch(): ListLastFetchData|undefined
+  setListLastFetch(val: ListLastFetchData): void
+
+  getComments(): CommentData[]
+  findComment(id: number): CommentData|undefined
+
+  fetchComments(params: Partial<ListFetchParams>): void
+  loadComments(comments: CommentData[]): void
+  clearComments(): void
+
+  insertComment(comment: CommentData): void
+  updateComment(comment: CommentData): void
+  deleteComment(id: number): void
+
+  getUnreads(): NotifyData[]
+  updateUnreads(unreads: NotifyData[]): void
+
+  getPage(): PageData|undefined
+  updatePage(pageData: PageData): void
+}
+
+export type NotifyLevel = "i" | "s" | "w" | "e"

package/types/editor.ts

@@ -0,0 +1,95 @@
+import type { CommentData, NotifyLevel } from '.'
+import type Component from '../src/lib/component'
+import type { EditorUI } from '../src/editor/ui'
+
+export type EditorState = 'reply' | 'edit' | 'normal'
+
+export interface EditorApi extends Component {
+  getUI(): EditorUI
+
+  /**
+   * Get the header input elements
+   */
+  getHeaderInputEls(): Record<string, HTMLInputElement>
+
+  /**
+   * Set content
+   */
+  setContent(val: string): void
+
+  /**
+   * Insert content
+   */
+  insertContent(val: string): void
+
+  /**
+   * Get the final content
+   *
+   * This function returns the raw content or the content transformed through a plugin hook.
+   */
+  getContentFinal(): string
+
+  /**
+   * Get the raw content which is inputed by user
+   */
+  getContentRaw(): string
+
+  /**
+   * Get the HTML format content which is rendered by marked (a markdown parser)
+   */
+  getContentMarked(): string
+
+  /**
+   * Get editor current state
+   */
+  getState(): EditorState
+
+  /**
+   * Focus editor
+   */
+  focus(): void
+
+  /**
+   * Reset editor
+   */
+  reset(): void
+
+  /**
+   * Reset editor UI
+   *
+   * call it will move editor to the initial position
+   */
+  resetState(): void
+
+  /**
+   * Submit comment
+   */
+  submit(): void
+
+  /**
+   * Show notification message
+   */
+  showNotify(msg: string, type: NotifyLevel): void
+
+  /**
+   * Show loading on editor
+   */
+  showLoading(): void
+
+  /**
+   * Hide loading on editor
+   */
+  hideLoading(): void
+
+  /**
+   * Start replaying a comment
+   */
+  setReply(commentData: CommentData, $comment: HTMLElement, scroll?: boolean): void
+
+  /**
+   * Start editing a comment
+   */
+  setEditComment(commentData: CommentData, $comment: HTMLElement): void
+}
+
+export default EditorApi

package/types/event.ts

@@ -0,0 +1,40 @@
+import type Comment from '~/src/comment'
+import { CommentData, ListData, ListFetchParams, NotifyData, PageData } from './data'
+import { ArtalkConfig, LocalUser } from './config'
+
+interface ErrorData { msg: string, data?: any }
+interface ListFetchedArgs { params: Partial<ListFetchParams>, data?: ListData, error?: ErrorData }
+
+/** EventName to EventPayload Type */
+export interface EventPayloadMap {
+  'inited': undefined              // Artalk 初始化后
+  'destroy': undefined             // Artalk 销毁时
+  'list-fetch': Partial<ListFetchParams>    // 评论列表请求时
+  'list-fetched': ListFetchedArgs           // 评论列表请求后
+  'list-load': CommentData[]     // 评论装载前
+
+  // TODO merge 'list-loaded' and 'list-error', for purpose of `once` 'list-loaded' and simplify
+  // example need bind 'list-loaded' and 'list-error' to same handler
+  // consider name it to 'list-fetched': { data: CommentData[], error?: { msg: string, data?: any } }
+  // and remove `list-load`
+  'list-loaded': CommentData[]     // 评论装载后
+  'list-error': ErrorData          // 评论加载错误时
+
+  'list-goto-first': undefined    // 评论列表归位时
+  'list-reach-bottom': undefined  // 评论列表滚动到底部时
+
+  'comment-inserted': CommentData  // 评论插入后
+  'comment-updated': CommentData   // 评论更新后
+  'comment-deleted': CommentData   // 评论删除后
+  'comment-rendered': Comment      // 评论节点渲染后
+  'unreads-updated': NotifyData[]  // 未读消息变更时
+  'list-goto': number              // 评论跳转时
+  'page-loaded': PageData          // 页面数据更新后
+  'editor-submit': undefined       // 编辑器提交时
+  'editor-submitted': undefined    // 编辑器提交后
+  'user-changed': LocalUser        // 本地用户数据变更时
+  'conf-loaded': ArtalkConfig      // Artalk 配置变更时
+  'dark-mode-changed': boolean     // 深色模式变更时
+  'sidebar-show': undefined        // 侧边栏显示
+  'sidebar-hide': undefined        // 侧边栏隐藏
+}

package/types/index.ts

@@ -0,0 +1,7 @@
+export * from './config'
+export * from './data'
+export * from './context'
+export * from './editor'
+export * from './event'
+export * from './plugin'
+export * from './sidebar'

package/types/plugin.ts

@@ -0,0 +1,3 @@
+import { ContextApi } from './context'
+
+export type ArtalkPlugin = (ctx: ContextApi) => void

package/types/sidebar.ts

@@ -0,0 +1,3 @@
+export interface SidebarShowPayload {
+  view?: 'comments'|'sites'|'pages'|'transfer'
+}

package/dist/src/comment/render-ctx.d.ts

@@ -1,23 +0,0 @@
-import Comment from './comment';
-import ActionBtn from '../components/action-btn';
-export default class RenderCtx {
-    comment: Comment;
-    get ctx(): import("../../types/context").default;
-    get data(): import("../../types/artalk-data").CommentData;
-    get conf(): import("../../types/artalk-config").default;
-    get cConf(): import("./comment").CommentConf;
-    $el: HTMLElement;
-    $main: HTMLElement;
-    $header: HTMLElement;
-    $headerNick: HTMLElement;
-    $headerBadgeWrap: HTMLElement;
-    $body: HTMLElement;
-    $content: HTMLElement;
-    $childrenWrap: HTMLElement | null;
-    $actions: HTMLElement;
-    voteBtnUp?: ActionBtn;
-    voteBtnDown?: ActionBtn;
-    $replyTo?: HTMLElement;
-    $replyAt?: HTMLElement;
-    constructor(comment: Comment);
-}

package/dist/src/editor/edit-mode.d.ts

@@ -1,9 +0,0 @@
-import type { CommentData } from '../../types/artalk-data';
-import Editor from './editor';
-export interface EditModeManager {
-    editor: Editor;
-    comment?: CommentData;
-    setEdit: (comment: CommentData, $comment: HTMLElement) => void;
-    cancelEdit: () => void;
-}
-export declare function createEditModeManager(editor: Editor): EditModeManager;

package/dist/src/editor/funcs.d.ts

@@ -1,2 +0,0 @@
-import Editor from './editor';
-export default function initEditorFuncs(editor: Editor): (() => void)[];