artalk 2.3.0 → 2.3.1

package/src/artalk.ts

@@ -2,9 +2,11 @@ import './style/main.less'
 
 import ArtalkConfig from '~/types/artalk-config'
 import { EventPayloadMap, Handler } from '~/types/event'
+import ArtalkPlug from '~/types/plug'
 import Context from '~/types/context'
 import ConcreteContext from './context'
 import defaults from './defaults'
+import { internal as internalLocales } from './i18n'
 
 import CheckerLauncher from './lib/checker'
 import Editor from './editor'
@@ -12,9 +14,9 @@ import List from './list'
 import SidebarLayer from './layer/sidebar-layer'
 
 import Layer, { GetLayerWrap } from './layer'
-import Api from './api'
 import * as Utils from './lib/utils'
 import * as Ui from './lib/ui'
+import * as Stat from './lib/stat'
 
 /**
  * Artalk
@@ -24,90 +26,45 @@ import * as Ui from './lib/ui'
 export default class Artalk {
   public static readonly defaults: ArtalkConfig = defaults
 
-  public ctx!: Context
   public conf!: ArtalkConfig
+  public ctx!: Context
   public $root!: HTMLElement
 
-  public api!: Api
   public checkerLauncher!: CheckerLauncher
   public editor!: Editor
   public list!: List
   public sidebarLayer!: SidebarLayer
 
-  constructor(customConf: Partial<ArtalkConfig>) {
-    // 配置
-    this.conf = Utils.mergeDeep(Artalk.defaults, customConf)
-    this.conf.server = this.conf.server.replace(/\/$/, '').replace(/\/api\/?$/, '')
+  protected static Plugins: ArtalkPlug[] = [
+    Stat.PvCountWidget
+  ]
 
-    // 默认 pageKey
-    if (!this.conf.pageKey) {
-      // @link http://bl.ocks.org/abernier/3070589
-      this.conf.pageKey = `${window.location.pathname}`
-    }
-
-    // 默认 pageTitle
-    if (!this.conf.pageTitle) {
-      this.conf.pageTitle = `${document.title}`
-    }
+  constructor(customConf: Partial<ArtalkConfig>) {
+    /* 初始化基本配置 */
+    this.conf = Artalk.HandelBaseConf(customConf)
+    if (this.conf.el instanceof HTMLElement) this.$root = this.conf.el
 
-    // 列表显示模式
-    if (this.conf.nestMax && this.conf.nestMax <= 1) {
-      this.conf.flatMode = true
-    }
+    /* 初始化 Context */
+    this.ctx = new ConcreteContext(this.conf, this.$root)
 
-    // 装载元素
-    this.conf.el = this.conf.el || document.createElement('div') // 允许 this.conf.el 为空
+    // @ts-ignore 远程加载引用后端的配置
+    if (this.conf.useBackendConf) return this.loadConfRemoteAndInitComponents()
 
-    if (this.conf.el instanceof HTMLElement) {
-      this.$root = this.conf.el
-    } else {
-      try {
-        const $root = document.querySelector<HTMLElement>(this.conf.el)
-        if (!$root) throw Error(`Target element "${this.conf.el}" was not found.`)
-        this.$root = $root
-      } catch (e) {
-        console.error(e)
-        throw new Error('Please check your Artalk `el` config.')
-      }
-    }
-
-    // Context 初始化
-    this.ctx = new ConcreteContext(this.$root, this.conf)
-
-    // API 初始化
-    this.api = new Api(this.ctx)
-    this.ctx.setApi(this.api)
-
-    // 界面初始化
-    this.$root.classList.add('artalk')
-    this.$root.innerHTML = ''
-
-    // 初始化组件
-    if (this.conf.useBackendConf) {
-      // 复用后端的配置
-      // @ts-ignore
-      return (async () => {
-        await this.loadConfRemote()
-        this.initCore()
-        return this // Promise<Artalk>
-      })()
-    }
-
-    this.initCore()
+    /* 初始化组件 */
+    this.initComponents()
   }
 
-  private initCore() {
-    /* 组件初始化 */
+  /** 组件初始化 */
+  private initComponents() {
+    this.initLocale()
     this.initLayer()
     this.initDarkMode()
+    Utils.initMarked(this.ctx)
 
     // CheckerLauncher
     this.checkerLauncher = new CheckerLauncher(this.ctx)
     this.ctx.setCheckerLauncher(this.checkerLauncher)
 
-    // 初始化 marked
-    Utils.initMarked(this.ctx)
-
     // 编辑器
     this.editor = new Editor(this.ctx)
     this.ctx.setEditor(this.editor)
@@ -129,18 +86,55 @@ export default class Artalk {
     // 事件绑定初始化
     this.initEventBind()
 
-    // 其他
-    this.initCountAndPV()
-
     // 插件初始化
     Artalk.Plugins.forEach(plugin => {
-      if (typeof plugin === 'function') {
+      if (typeof plugin === 'function')
         plugin(this.ctx)
-      }
     })
   }
 
-  /** 获取远程配置 */
+  /** 基本配置初始化 */
+  private static HandelBaseConf(customConf: Partial<ArtalkConfig>): ArtalkConfig {
+    // 合并默认配置
+    const conf: ArtalkConfig = Utils.mergeDeep(Artalk.defaults, customConf)
+
+    // 绑定元素
+    if (typeof conf.el === 'string' && !!conf.el) {
+      try {
+        const findEl = document.querySelector<HTMLElement>(conf.el)
+        if (!findEl) throw Error(`Target element "${conf.el}" was not found.`)
+        conf.el = findEl
+      } catch (e) {
+        console.error(e)
+        throw new Error('Please check your Artalk `el` config.')
+      }
+    }
+
+    // 服务器配置
+    conf.server = conf.server.replace(/\/$/, '').replace(/\/api\/?$/, '')
+
+    // 默认 pageKey
+    if (!conf.pageKey) {
+      // @link http://bl.ocks.org/abernier/3070589
+      conf.pageKey = `${window.location.pathname}`
+    }
+
+    // 默认 pageTitle
+    if (!conf.pageTitle) {
+      conf.pageTitle = `${document.title}`
+    }
+
+    return conf
+  }
+
+  /** 初始化组件根据远程加载的配置 */
+  private async loadConfRemoteAndInitComponents() {
+    await this.loadConfRemote()
+    this.initComponents()
+    return this
+  }
+
+  /** 远程加载配置 */
   private async loadConfRemote() {
     Ui.showLoading(this.$root)
     let backendConf = {}
@@ -151,7 +145,7 @@ export default class Artalk {
     Ui.hideLoading(this.$root)
   }
 
-  /** 事件绑定 · 初始化 */
+  /** 事件绑定初始化 */
   private initEventBind() {
     // 锚点快速跳转评论
     window.addEventListener('hashchange', () => {
@@ -166,20 +160,34 @@ export default class Artalk {
     })
   }
 
-  /** 重新加载 */
-  public reload() {
-    this.list.fetchComments(0)
+  /** 语言初始化 */
+  private initLocale() {
+    if (typeof this.conf.locale === 'string') {
+      if (this.conf.locale === 'auto') { // 自动切换
+        this.conf.locale = ((navigator.languages) ? navigator.languages[0] : navigator.language)
+      }
+
+      this.conf.locale = this.conf.locale.replace(
+        /^([a-zA-Z]+)(-[a-zA-Z]+)?$/,
+        (_, p1: string, p2: string) => (p1.toLowerCase() + (p2 || '').toUpperCase())
+      )
+
+      if (!internalLocales[this.conf.locale]) { // 语言不存在时，使用 en
+        console.log(`Locale "${this.conf.locale}" not found.`)
+        this.conf.locale = 'en'
+      }
+    }
   }
 
   /** Layer 初始化 */
-  initLayer() {
+  private initLayer() {
     // 记录页面原始 Styles
     Layer.BodyOrgOverflow = document.body.style.overflow
     Layer.BodyOrgPaddingRight = document.body.style.paddingRight
   }
 
-  /** 暗黑模式 · 初始化 */
-  public initDarkMode() {
+  /** 暗黑模式初始化 */
+  private initDarkMode() {
     if (this.conf.darkMode === 'auto') {
       // 自动切换暗黑模式，事件监听
       const darkModeMedia = window.matchMedia('(prefers-color-scheme: dark)')
@@ -190,7 +198,7 @@ export default class Artalk {
     }
   }
 
-  /** 暗黑模式 · 设定 */
+  /** 设置暗黑模式 */
   public setDarkMode(darkMode: boolean) {
     const darkModeClassName = 'atk-dark-mode'
 
@@ -214,45 +222,6 @@ export default class Artalk {
     }
   }
 
-  /** 初始化评论数和 PV 数量展示元素 */
-  public async initCountAndPV() {
-    // 评论数
-    const countEl = this.conf.countEl
-    if (countEl && document.querySelector(countEl)) {
-      this.handleStatCount({ api: 'page_comment', countEl })
-    }
-
-    // PV
-    const curtPagePvNum = await this.ctx.getApi().pv()
-    const pvEl = this.conf.pvEl
-    if (pvEl && document.querySelector(pvEl)) {
-      this.handleStatCount({ api: 'page_pv', countEl: pvEl, curtPageCount: curtPagePvNum })
-    }
-  }
-
-  private async handleStatCount(args: { api: 'page_pv'|'page_comment', countEl: string, curtPageCount?: number }) {
-    let pageCounts: {[key: string]: number} = {}
-
-    // 当前页面的统计数
-    const curtPageKey = this.ctx.conf.pageKey
-    if (args.curtPageCount) pageCounts[curtPageKey] = args.curtPageCount
-
-    // 查询其他页面的统计数
-    let queryPageKeys = Array.from(document.querySelectorAll(args.countEl))
-      .map(e => e.getAttribute('data-page-key') || curtPageKey)
-      .filter(pageKey => pageCounts[pageKey] === undefined)
-    queryPageKeys = [...new Set(queryPageKeys)] // 去重
-    if (queryPageKeys.length > 0) {
-      const counts: any = await this.ctx.getApi().stat(args.api, queryPageKeys)
-      pageCounts = { ...pageCounts, ...counts }
-    }
-
-    document.querySelectorAll(args.countEl).forEach((el) => {
-      const pageKey = el.getAttribute('data-page-key') || curtPageKey
-      el.innerHTML = `${Number(pageCounts[pageKey] || 0)}`
-    })
-  }
-
   /** 监听事件 */
   public on<K extends keyof EventPayloadMap>(name: K, handler: Handler<EventPayloadMap[K]>) {
     this.ctx.on(name, handler, 'external')
@@ -268,11 +237,20 @@ export default class Artalk {
     this.ctx.trigger(name, payload, 'external')
   }
 
-  /** Plugins */
-  protected static Plugins: ((ctx: Context) => void)[] = []
+  /** 重新加载 */
+  public reload() {
+    this.ctx.listReload()
+  }
 
-  /** Enable Plugin */
-  public static Use(plugin: ((ctx: Context) => void)) {
+  /** Use Plugin */
+  public static Use(plugin: ArtalkPlug) {
     this.Plugins.push(plugin)
   }
+
+  /** 装载数量统计元素 */
+  public static LoadCountWidget(customConf: Partial<ArtalkConfig>) {
+    const conf = this.HandelBaseConf(customConf)
+    const ctx = new ConcreteContext(conf)
+    Stat.initCountWidget({ ctx, pvAdd: false })
+  }
 }

package/src/comment/actions.ts

@@ -1,4 +1,3 @@
-import Api from '../api'
 import Comment from './comment'
 import ActionBtn from '../components/action-btn'
 

package/src/context.ts

@@ -37,13 +37,17 @@ export default class Context implements ContextApi {
   /* 订阅者模式 */
   private eventList: Event[] = []
 
-  public constructor($root: HTMLElement, conf: ArtalkConfig) {
+  public constructor(conf: ArtalkConfig, $root?: HTMLElement) {
     this.cid = +new Date()
     this.conf = conf
     this.user = new User(this)
 
-    this.$root = $root
+    this.$root = $root || document.createElement('div')
     this.$root.setAttribute('atk-run-id', this.cid.toString())
+    this.$root.classList.add('artalk')
+    this.$root.innerHTML = ''
+
+    this.api = new Api(this)
   }
 
   /* 设置持有的同事类 */

package/src/editor/editor.ts

@@ -5,7 +5,6 @@ import Context from '~/types/context'
 import Component from '../lib/component'
 import * as Utils from '../lib/utils'
 import * as Ui from '../lib/ui'
-import Api from '../api'
 
 import EditorHTML from './editor.html?raw'
 

package/src/editor/plugs/emoticons-plug.less

@@ -27,7 +27,7 @@
         padding: 5px;
         cursor: pointer;
         user-select: none;
-        border-radius: 2px;
+        border-radius: (@block-radius / 2);
         font-size: 16px;
         min-width: 35px;
 

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

@@ -1,4 +1,3 @@
-import Api from '@/api'
 import Editor from '../editor'
 import EditorPlug from './editor-plug'
 

package/src/editor/plugs/upload-plug.ts

@@ -1,5 +1,4 @@
 import * as Utils from '@/lib/utils'
-import Api from '@/api'
 import Editor from '../editor'
 import EditorPlug from './editor-plug'
 
@@ -83,7 +82,7 @@ export default class UploadPlug extends EditorPlug {
 
     // 未登录提示
     if (!this.ctx.user.checkHasBasicUserInfo()) {
-      this.editor.showNotify('填入你的名字邮箱才能上传哦', 'w')
+      this.editor.showNotify(this.ctx.$t('uploadLoginMsg'), 'w')
       return
     }
 

package/src/i18n/en.ts

@@ -13,6 +13,7 @@ export default {
   commentFail: 'Failed to comment',
   restoredMsg: 'Content has been restored',
   onlyAdminCanReply: 'Only admin can reply',
+  uploadLoginMsg: 'Please fill in your name and email to upload',
 
   /* List */
   counter: '{count} Comments',

package/src/i18n/zh-CN.ts

@@ -15,6 +15,7 @@ const zhCN: I18n = {
   commentFail: '评论失败',
   restoredMsg: '内容已自动恢复',
   onlyAdminCanReply: '仅管理员可评论',
+  uploadLoginMsg: '填入你的名字邮箱才能上传哦',
 
   /* List */
   counter: '{count} 条评论',

package/src/layer/sidebar-layer.ts

@@ -6,7 +6,6 @@ import * as Utils from '@/lib/utils'
 import * as Ui from '@/lib/ui'
 import SidebarHTML from './sidebar-layer.html?raw'
 import Layer from './layer'
-import Api from '../api'
 
 export interface SidebarShowPayload {
   view?: 'comments'|'sites'|'pages'|'transfer'

package/src/lib/checker/admin-checker.ts

@@ -1,4 +1,3 @@
-import Api from '@/api'
 import * as Utils from '../utils'
 import { Checker } from '.'
 

package/src/lib/checker/captcha-checker.ts

@@ -1,4 +1,3 @@
-import Api from '@/api'
 import * as Utils from '../utils'
 import * as Ui from '../ui'
 import { Checker } from '.'

package/src/lib/stat.ts

@@ -0,0 +1,63 @@
+import ContextApi from '~/types/context'
+import ArtalkPlug from '~/types/plug'
+
+export interface CountConf {
+  ctx: ContextApi
+
+  /** 是否增加当前页面 PV 数 */
+  pvAdd?: boolean
+}
+
+export const PvCountWidget: ArtalkPlug = (ctx: ContextApi) => {
+  initCountWidget({ ctx, pvAdd: true })
+}
+
+/** 初始化评论数和 PV 数量展示元素 */
+export async function initCountWidget(p: CountConf) {
+  // 评论数
+  const countEl = p.ctx.conf.countEl
+  if (countEl && document.querySelector(countEl)) {
+    handleStatCount(p, { api: 'page_comment', countEl })
+  }
+
+  // PV
+  const curtPagePvNum = p.pvAdd ? await p.ctx.getApi().pv() : undefined
+  const pvEl = p.ctx.conf.pvEl
+  if (pvEl && document.querySelector(pvEl)) {
+    handleStatCount(p, {
+      api: 'page_pv',
+      countEl: pvEl,
+      curtPageCount: curtPagePvNum,
+    })
+  }
+}
+
+export async function handleStatCount(
+  p: CountConf,
+  args: {
+    api: 'page_pv' | 'page_comment'
+    countEl: string
+    curtPageCount?: number
+  }
+) {
+  let pageCounts: { [key: string]: number } = {}
+
+  // 当前页面的统计数
+  const curtPageKey = p.ctx.conf.pageKey
+  if (args.curtPageCount) pageCounts[curtPageKey] = args.curtPageCount
+
+  // 查询其他页面的统计数
+  let queryPageKeys = Array.from(document.querySelectorAll(args.countEl))
+    .map((e) => e.getAttribute('data-page-key') || curtPageKey)
+    .filter((pageKey) => pageCounts[pageKey] === undefined)
+  queryPageKeys = [...new Set(queryPageKeys)] // 去重
+  if (queryPageKeys.length > 0) {
+    const counts: any = await p.ctx.getApi().stat(args.api, queryPageKeys)
+    pageCounts = { ...pageCounts, ...counts }
+  }
+
+  document.querySelectorAll(args.countEl).forEach((el) => {
+    const pageKey = el.getAttribute('data-page-key') || curtPageKey
+    el.innerHTML = `${Number(pageCounts[pageKey] || 0)}`
+  })
+}

package/src/list/list-lite.ts

@@ -3,7 +3,6 @@ import Context from '~/types/context'
 import Component from '../lib/component'
 import * as Utils from '../lib/utils'
 import * as Ui from '../lib/ui'
-import Api from '../api'
 import Comment from '../comment'
 import Pagination from '../components/pagination'
 import ReadMoreBtn from '../components/read-more-btn'

package/src/list/list.ts

@@ -4,7 +4,6 @@ import { ListData, NotifyData } from '~/types/artalk-data'
 import Context from '~/types/context'
 import * as Utils from '../lib/utils'
 import * as Ui from '../lib/ui'
-import Api from '../api'
 import ListHTML from './list.html?raw'
 import ListLite from './list-lite'
 
@@ -26,14 +25,15 @@ export default class List extends ListLite {
     this.$el = el
 
     // 平铺模式
-    let flatMode = false
-    if (this.ctx.conf.flatMode === 'auto') {
+    if (this.ctx.conf.flatMode === true) {
+      this.flatMode = true // 遵循配置总是开启平铺模式
+    } else if (this.conf.nestMax && this.conf.nestMax <= 1) {
+      this.flatMode = true // 嵌套层数值无效时，强制开启平铺模式
+    } else if (this.ctx.conf.flatMode === 'auto') {
+      // 自动判断启用平铺模式
       if (window.matchMedia("(max-width: 768px)").matches)
-        flatMode = true
-    } else if (this.ctx.conf.flatMode === true) {
-      flatMode = true
+        this.flatMode = true
     }
-    this.flatMode = flatMode
 
     // 分页模式
     this.pageMode = this.conf.pagination.readMore ? 'read-more' : 'pagination'

package/src/style/_variables.less

@@ -1,4 +1,3 @@
-@font-family: "Helvetica Neue", "PingFangSC-Light", "Hiragino Sans GB", "Microsoft YaHei", "WenQuanYi Micro Hei", sans-serif;
 @font-size: 14px;
 @line-height: 1.6em;
-@block-radius: 4px;
+@block-radius: 6px;

package/src/style/comment.less

@@ -51,7 +51,7 @@
     img {
       width: 50px;
       height: 50px;
-      border-radius: 3px;
+      border-radius: (@block-radius / 2);
     }
   }
 
@@ -62,7 +62,7 @@
     & > .atk-header {
       line-height: 1;
       font-size: 13px;
-      margin-bottom: 3px;
+      margin-bottom: .5em;
       overflow: hidden;
       position: relative;
       display: flex;
@@ -114,7 +114,7 @@
         background: var(--at-color-bg-grey);
         padding: 0px 6px;
         line-height: 17px;
-        border-radius: 3px;
+        border-radius: (@block-radius / 2);
 
         &:not(:last-child) {
           margin-right: 6px;

package/src/style/editor.less

@@ -23,7 +23,7 @@
       font-size: 14px;
       background: transparent;
       border: 2px solid transparent;
-      border-radius: calc(@block-radius / 2);
+      border-radius: (@block-radius / 2);
       padding: 6px 5px;
       resize: none;
       outline: none;
@@ -44,7 +44,7 @@
       font-size: 15px;
       background-color: var(--at-color-bg);
       border: 2px solid transparent;
-      border-radius: calc(@block-radius / 2);
+      border-radius: (@block-radius / 2);
       width: 100%;
       min-height: 120px;
       margin-top: 2px;
@@ -61,6 +61,7 @@
       background-color: var(--at-color-bg);
       border-top: 1px solid var(--at-color-border);
       padding: 5px 15px;
+      margin-top: 10px;
       // background: repeating-linear-gradient(145deg, #f2f2f2, #f2f2f2 15px, #fff 0, #fff 30px);
     }
 
@@ -68,8 +69,8 @@
       z-index: 2;
       position: absolute;
       right: 7px;
-      bottom: 8px;
-      max-width: calc(100% - 20px);
+      bottom: 2px;
+      max-width: (100% - 20px);
       height: 30px;
       line-height: 30px;
       font-size: 14px;
@@ -79,7 +80,7 @@
       text-overflow: ellipsis;
       white-space: nowrap;
       cursor: pointer;
-      border-radius: @block-radius;
+      border-radius: (@block-radius / 2);
 
       .atk-text {
       }
@@ -125,11 +126,12 @@
 
     .atk-plug-btn {
       padding: 0 8px;
+      line-height: 24px;
       cursor: pointer;
       color: var(--at-color-grey);
       font-size: @font-size;
       user-select: none;
-      border-radius: @block-radius;
+      border-radius: (@block-radius / 2);
 
       &:not(:last-child) {
         margin-right: 2px;
@@ -169,7 +171,7 @@
       cursor: pointer;
       transition: opacity 0.3s ease-in-out;
       outline: none;
-      border-radius: @block-radius;
+      border-radius: (@block-radius / 2);
 
       &:active {
         opacity: 0.9;

package/src/style/list.less

@@ -22,7 +22,7 @@
         border-left: 3px solid transparent;
         border-right: 3px solid transparent;
         margin-top: -1px;
-        margin-left: 0.4rem;
+        margin-left: 0.8rem;
         display: inline-block;
       }
 
@@ -46,7 +46,7 @@
         padding: 0.6rem 0;
         border: 1px solid var(--at-color-border);
         text-align: center;
-        border-radius: 0.25rem;
+        border-radius: @block-radius;
         white-space: nowrap;
         margin: 0;
         list-style: none;