artalk 2.6.3 → 2.7.0

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,14 +132,10 @@
   }
 
   & > .atk-list-footer {
-    z-index: 1;
-    position: absolute;
-    bottom: 5px;
-    right: 0;
+    text-align: right;
 
     @media only screen and (max-width: 768px) {
-      position: relative;
-      margin-top: 10px;
+      float: initial;
       text-align: center;
     }
 
@@ -148,7 +144,6 @@
       font-size: 12px;
       color: var(--at-color-meta);
       padding-right: 15px;
-      margin-top: 5px;
 
       a {
         color: var(--at-color-main);

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/{dist/types/artalk-data.d.ts → types/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;

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

@@ -1,2 +0,0 @@
-import Editor from './editor';
-export default Editor;

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

@@ -1,8 +0,0 @@
-import Editor from './editor';
-export interface Mover {
-    editor: Editor;
-    isMoved: boolean;
-    move(afterEl: HTMLElement): void;
-    back(): void;
-}
-export declare function createMover(editor: Editor): Mover;

package/dist/src/editor/plug-manager.d.ts

@@ -1,17 +0,0 @@
-import EditorPlug from './plugs/editor-plug';
-import Editor from './editor';
-/** Context of an editor plug manager */
-export interface PlugManager {
-    editor: Editor;
-    plugList: {
-        [name: string]: EditorPlug;
-    };
-    openedPlugName: string | null;
-    openPlugPanel(plugName: string): void;
-    closePlugPanel(): void;
-    triggerHeaderInputEvt(field: string, $input: HTMLInputElement): void;
-    triggerContentUpdatedEvt(content: string): void;
-    getTransformedContent(raw: string): string;
-}
-/** Create an editor plug manager */
-export declare function createPlugManager(editor: Editor): PlugManager;

package/dist/src/editor/plugs/editor-plug.d.ts

@@ -1,38 +0,0 @@
-import Editor from '../editor';
-/**
- * Editor 插件
- *
- * @desc 使用 Interface x Abstract 合并声明
- * @see https://www.typescriptlang.org/docs/handbook/declaration-merging.html#merging-interfaces
- */
-interface EditorPlug {
-    onPanelShow?(): void;
-    onPanelHide?(): void;
-}
-declare abstract class EditorPlug {
-    protected editor: Editor;
-    protected get ctx(): import("../../../types/context").default;
-    protected $panel?: HTMLElement;
-    protected $btn?: HTMLElement;
-    onHeaderInput?: (key: string, $input: HTMLElement) => void;
-    contentTransformer?: (rawContent: string) => string;
-    onContentUpdated?: (content: string) => void;
-    constructor(editor: Editor);
-    /** Name of plug */
-    static Name: string;
-    /** Register plug panel will provide a plug el */
-    protected registerPanel(html?: string): HTMLElement;
-    /** Register plug btn will add a btn on the bottom of editor */
-    protected registerBtn(html: string): HTMLElement;
-    /** Register the event of header input is changed */
-    protected registerHeaderInputEvt(func: (key: string, $input: HTMLElement) => void): void;
-    /** Register the content transformer to handle the content of the last submit by the editor */
-    protected registerContentTransformer(func: (raw: string) => string): void;
-    /** Register the event of editor content is updated */
-    protected registerContentUpdatedEvt(func: (content: string) => void): void;
-    /** Get panel element of plug */
-    getPanel(): HTMLElement | undefined;
-    /** Get btn element of plug */
-    getBtn(): HTMLElement | undefined;
-}
-export default EditorPlug;

package/dist/src/editor/plugs/header-input-plug.d.ts

@@ -1,13 +0,0 @@
-import Editor from '../editor';
-import EditorPlug from './editor-plug';
-export default class HeaderInputPlug extends EditorPlug {
-    static Name: string;
-    constructor(editor: Editor);
-    queryUserInfo: {
-        timeout: number | null;
-        abortFunc: (() => void) | null;
-    };
-    /** 远程获取用户数据 */
-    fetchUserInfo(): void;
-    showLoginDialog(): void;
-}

package/dist/src/editor/plugs/preview-plug.d.ts

@@ -1,10 +0,0 @@
-import Editor from '../editor';
-import EditorPlug from './editor-plug';
-export default class PreviewPlug extends EditorPlug {
-    static Name: string;
-    protected $panel: HTMLElement;
-    private isBind;
-    constructor(editor: Editor);
-    onPanelShow(): void;
-    updateContent(): void;
-}