artalk 2.4.4 → 2.5.0

package/src/editor/submit.ts

@@ -0,0 +1,98 @@
+import type { CommentData } from '~/types/artalk-data'
+import Editor from './editor'
+
+export interface SubmitManager {
+  editor: Editor
+  do: () => Promise<void>
+  customs: CustomSubmit[]
+  registerCustom(c: CustomSubmit): void
+}
+
+export function createSubmitManager(editor: Editor) {
+  const m: SubmitManager = {
+    editor,
+    do: () => Do(m),
+    customs: [],
+    registerCustom: (c) => { m.customs.push(c) }
+  }
+
+  return m
+}
+
+async function Do(m: SubmitManager) {
+  if (m.editor.getFinalContent().trim() === '') {
+    m.editor.focus()
+    return
+  }
+
+  const custom = m.customs.find(o => o.activeCond())
+
+  m.editor.ctx.trigger('editor-submit')
+  m.editor.showLoading()
+
+  try {
+    // pre submit
+    if (custom?.pre) custom.pre()
+
+    let nComment: CommentData
+
+    // submit request
+    if (custom?.req) nComment = await custom.req()
+    else nComment = await reqAdd(m)
+
+    // post submit
+    if (custom?.post) custom.post(nComment)
+    else postSubmitAdd(m, nComment)
+  } catch (err: any) {
+    // submit error
+    console.error(err)
+    m.editor.showNotify(`${m.editor.$t('commentFail')}，${err.msg || String(err)}`, 'e')
+  }
+
+  // 复原编辑器
+  m.editor.reset()
+
+  m.editor.ctx.trigger('editor-submitted')
+  m.editor.hideLoading()
+}
+
+interface CustomSubmit {
+  activeCond: () => void
+  pre?: () => void
+  req?: () => Promise<CommentData>
+  post?: (nComment: CommentData) => void
+}
+
+// ================== Submit Add =======================
+function getSubmitAddParams(m: SubmitManager) {
+  const { nick, email, link } = m.editor.ctx.user.data
+  const conf = m.editor.ctx.conf
+  const reply = m.editor.getReplyManager()?.comment
+
+  return {
+    content: m.editor.getFinalContent(),
+    nick, email, link,
+    rid: (!reply) ? 0 : reply.id,
+    page_key: (!reply) ? conf.pageKey : reply.page_key,
+    page_title: (!reply) ? conf.pageTitle : undefined,
+    site_name: (!reply) ? conf.site : reply.site_name
+  }
+}
+
+async function reqAdd(m: SubmitManager) {
+  const nComment = await m.editor.ctx.getApi().comment.add({
+    ...getSubmitAddParams(m)
+  })
+  return nComment
+}
+
+function postSubmitAdd(m: SubmitManager, commentNew: CommentData) {
+  // 回复不同页面的评论，跳转到新页面
+  const reply = m.editor.getReplyManager()
+  const conf = m.editor.ctx.conf
+  if (!!reply?.comment && reply.comment.page_key !== conf.pageKey) {
+    window.open(`${reply.comment.page_url}#atk-comment-${commentNew.id}`)
+  }
+
+  m.editor.ctx.insertComment(commentNew)
+}

package/src/editor/ui.ts

@@ -0,0 +1,36 @@
+import * as Utils from '../lib/utils'
+import EditorHTML from './editor.html?raw'
+
+const Sel = {
+  $header: '.atk-header',
+  $nick: '.atk-header [name="nick"]',
+  $email: '.atk-header [name="email"]',
+  $link: '.atk-header [name="link"]',
+  $textareaWrap: '.atk-textarea-wrap',
+  $textarea: '.atk-textarea',
+  $bottom: '.atk-bottom',
+  $submitBtn: '.atk-send-btn',
+  $notifyWrap: '.atk-notify-wrap',
+  $plugBtnWrap: '.atk-plug-btn-wrap',
+  $plugPanelWrap: '.atk-plug-panel-wrap',
+}
+
+export interface EditorUI extends Record<keyof typeof Sel, HTMLElement> {
+  $el: HTMLElement
+  $nick: HTMLInputElement
+  $email: HTMLInputElement
+  $link: HTMLInputElement
+  $textarea: HTMLTextAreaElement
+  $submitBtn: HTMLButtonElement
+  $sendReply?: HTMLElement
+  $editCancelBtn?: HTMLElement
+}
+
+export function render() {
+  const $el = Utils.createElement(EditorHTML)
+  const ui = { $el }
+  Object.entries(Sel).forEach(([k, sel]) => {
+    ui[k] = $el.querySelector(sel)
+  })
+  return ui as EditorUI
+}

package/src/i18n/index.ts

@@ -2,6 +2,7 @@ import en from './en'
 import zhCN from './zh-CN'
 
 export type I18n = typeof en
+export type I18nKeys = keyof I18n
 
 // @note the key of language is followed by `ISO 639`
 // https://en.wikipedia.org/wiki/ISO_639
@@ -22,9 +23,9 @@ export function defineLocaleExternal(lang: string, locale: I18n, aliases?: strin
 }
 
 /**
- * get a locale object by language name
+ * find a locale object by language name
  */
-function getLocaleSet(lang: string): I18n {
+export function findLocaleSet(lang: string): I18n {
   // normalize a key of language to `ISO 639`
   lang = lang.replace(
     /^([a-zA-Z]+)(-[a-zA-Z]+)?$/,
@@ -47,18 +48,28 @@ function getLocaleSet(lang: string): I18n {
 }
 
 /**
- * get a i18n message by key
+ * System locale setting
  */
-function getI18n(locale: I18n|string, key: keyof I18n, args: {[key: string]: string} = {}) {
-  if (typeof locale === 'string') {
-    locale = getLocaleSet(locale)
-  }
+let LocaleConf: I18n|string = 'en'
+let LocaleDict: I18n = findLocaleSet(LocaleConf) // en by default
 
-  let str = locale?.[key] || key
+/**
+ * Set system locale
+ */
+export function setLocale(locale: I18n|string) {
+  if (locale === LocaleConf) return
+  LocaleConf = locale
+  LocaleDict = (typeof locale === 'string') ? findLocaleSet(locale) : locale
+}
+
+/**
+ * Get an i18n message by key
+ */
+export function t(key: I18nKeys, args: {[key: string]: string} = {}) {
+  let str = LocaleDict?.[key] || key
   str = str.replace(/\{\s*(\w+?)\s*\}/g, (_, token) => args[token] || '')
 
   return str
 }
 
-export { getLocaleSet }
-export default getI18n
+export default t

package/src/layer/index.ts

@@ -1,4 +1,4 @@
-import Layer, { GetLayerWrap } from './layer'
+import Layer, { getLayerWrap } from './layer'
 
 export default Layer
-export { GetLayerWrap }
+export { getLayerWrap }

package/src/layer/layer.ts

@@ -19,7 +19,7 @@ export default class Layer extends Component {
     super(ctx)
 
     this.name = name
-    const { $wrap, $mask } = GetLayerWrap(ctx)
+    const { $wrap, $mask } = getLayerWrap()
     this.$wrap = $wrap
     this.$mask = $mask
 
@@ -148,11 +148,11 @@ export default class Layer extends Component {
   }
 }
 
-export function GetLayerWrap(ctx: Context): { $wrap: HTMLElement, $mask: HTMLElement } {
-  let $wrap = document.querySelector<HTMLElement>(`.atk-layer-wrap#ctx-${ctx.cid}`)
+export function getLayerWrap(): { $wrap: HTMLElement, $mask: HTMLElement } {
+  let $wrap = document.querySelector<HTMLElement>(`.atk-layer-wrap`)
   if (!$wrap) {
     $wrap = Utils.createElement(
-      `<div class="atk-layer-wrap" id="ctx-${ctx.cid}" style="display: none;"><div class="atk-layer-mask"></div></div>`
+      `<div class="atk-layer-wrap" style="display: none;"><div class="atk-layer-mask"></div></div>`
     )
     document.body.appendChild($wrap)
   }

package/src/layer/sidebar-layer.ts

@@ -89,6 +89,7 @@ export default class SidebarLayer extends Component {
 
       if (conf.view) query.view = conf.view
       if (this.conf.darkMode) query.darkMode = '1'
+      if (typeof this.conf.locale === 'string') query.locale = this.conf.locale
 
       const urlParams = new URLSearchParams(query);
       this.iframeLoad(`${baseURL}?${urlParams.toString()}`)
@@ -96,7 +97,7 @@ export default class SidebarLayer extends Component {
       this.$iframeWrap.append(this.$iframe)
       this.firstShow = false
     } else {
-      // 暗黑模式
+      // 夜间模式
       const isIframeSrcDarkMode = this.$iframe!.src.includes('darkMode=1')
 
       if (this.conf.darkMode && !isIframeSrcDarkMode)

package/src/lib/checker/admin.ts

@@ -0,0 +1,36 @@
+import * as Utils from '../utils'
+import { Checker } from '.'
+
+const AdminChecker: Checker = {
+  inputType: 'password',
+
+  request(checker, inputVal) {
+    const data = {
+      name: checker.getUser().data.nick,
+      email: checker.getUser().data.email,
+      password: inputVal
+    }
+
+    return (async () => {
+      const resp = await checker.getApi().user.login(data.name, data.email, data.password)
+      return resp.token
+    })()
+  },
+
+  body(checker) {
+    return Utils.createElement(`<span>${checker.getCtx().$t('adminCheck')}</span>`)
+  },
+
+  onSuccess(checker, userToken, inputVal, formEl) {
+    checker.getUser().update({
+      isAdmin: true,
+      token: userToken
+    })
+    checker.getCtx().trigger('user-changed', checker.getUser().data)
+    checker.getCtx().listReload()
+  },
+
+  onError(checker, err, inputVal, formEl) {}
+}
+
+export default AdminChecker

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

@@ -0,0 +1,68 @@
+import * as Utils from '../utils'
+import * as Ui from '../ui'
+import { CheckerCtx } from '.'
+
+/** 图片验证码 */
+export function imgBody(checker: CheckerCtx) {
+  // 图片验证方式
+  const elem = Utils.createElement(
+    `<span><img class="atk-captcha-img" src="${checker.get('img_data') || ''}">${checker.getCtx().$t('captchaCheck')}</span>`
+  );
+
+  // 刷新验证码
+  elem.querySelector<HTMLElement>('.atk-captcha-img')!.onclick = () => {
+    const imgEl = elem.querySelector('.atk-captcha-img')
+    checker.getApi().captcha.captchaGet()
+      .then((imgData) => {
+        imgEl!.setAttribute('src', imgData)
+      })
+      .catch((err) => {
+        console.error('Failed to get captcha image ', err)
+      })
+  }
+  return elem
+}
+
+/** iframe 形式的通用验证服务 */
+export function iframeBody(checker: CheckerCtx) {
+  const $iframeWrap = Utils.createElement(`<div class="atk-checker-iframe-wrap"></div>`)
+  const $iframe = Utils.createElement<HTMLIFrameElement>(`<iframe class="atk-fade-in"></iframe>`)
+  $iframe.style.display = 'none'
+  Ui.showLoading($iframeWrap, { transparentBg: true })
+  $iframe.src = `${checker.getCtx().conf.server}/api/captcha/get?t=${+new Date()}`
+  $iframe.onload = () => {
+    $iframe.style.display = ''
+    Ui.hideLoading($iframeWrap)
+  }
+  $iframeWrap.append($iframe)
+
+  const $closeBtn = Utils.createElement(`<div class="atk-close-btn"><i class="atk-icon atk-icon-close"></i></div>`)
+  $iframeWrap.append($closeBtn)
+
+  checker.hideInteractInput()
+
+  // 轮询状态
+  let stop = false // 打断
+  const sleep = (ms: number) => new Promise((resolve) => { window.setTimeout(() => { resolve(null) }, ms) })
+  ;(async function queryStatus() {
+    await sleep(1000)
+    if (stop) return
+    let isPass = false
+    try {
+      const resp = await checker.getCtx().getApi().captcha.captchaStatus()
+      isPass = resp.is_pass
+    } catch { isPass = false }
+    if (isPass) {
+      checker.triggerSuccess()
+    } else {
+      queryStatus()
+    }
+  })()
+
+  $closeBtn.onclick = () => {
+    stop = true
+    checker.cancel()
+  }
+
+  return $iframeWrap
+}

package/src/lib/checker/captcha.ts

@@ -0,0 +1,26 @@
+
+import { Checker } from '.'
+import * as render from './captcha-renders'
+
+const CaptchaChecker: Checker = {
+  request(checker, inputVal) {
+    return checker.getApi().captcha.captchaCheck(inputVal)
+  },
+
+  body(checker) {
+    if (checker.get('iframe')) return render.iframeBody(checker)
+    return render.imgBody(checker)
+  },
+
+  onSuccess(checker, data, inputVal, formEl) {
+    checker.set('val', inputVal)
+  },
+
+  onError(checker, err, inputVal, formEl) {
+    formEl.querySelector<HTMLElement>('.atk-captcha-img')!.click() // 刷新验证码
+    formEl.querySelector<HTMLInputElement>('input[type="text"]')!.value = '' // 清空输入框输入
+  }
+}
+
+export default CaptchaChecker
+

package/src/lib/checker/index.ts

@@ -2,9 +2,10 @@ import Context from '~/types/context'
 import Dialog from '@/components/dialog'
 import Layer from '@/layer'
 import * as Utils from '../utils'
-import * as Ui from '../ui'
-import CaptchaChecker from './captcha-checker'
-import AdminChecker from './admin-checker'
+import CaptchaChecker from './captcha'
+import AdminChecker from './admin'
+import type Api from '../../api'
+import type User from '../user'
 
 export interface CheckerCaptchaPayload extends CheckerPayload {
   imgData?: string
@@ -22,26 +23,24 @@ export interface CheckerPayload {
  */
 export default class CheckerLauncher {
   public ctx: Context
-
   public launched: Checker[] = []
-  public captchaConf: { val?: string, imgData?: string, iframe?: string } = {}
 
   constructor(ctx: Context) {
     this.ctx = ctx
   }
 
   public checkCaptcha(payload: CheckerCaptchaPayload) {
-    this.captchaConf.imgData = payload.imgData
-    this.captchaConf.iframe = payload.iframe
-
-    this.fire(CaptchaChecker, payload)
+    this.fire(CaptchaChecker, payload, (ctx) => {
+      ctx.set('img_data', payload.imgData)
+      ctx.set('iframe', payload.iframe)
+    })
   }
 
   public checkAdmin(payload: CheckerPayload) {
     this.fire(AdminChecker, payload)
   }
 
-  public fire(checker: Checker, payload: CheckerPayload) {
+  public fire(checker: Checker, payload: CheckerPayload, postFire?: (c: CheckerCtx) => void) {
     if (this.launched.includes(checker)) return // 阻止同时 fire 相同的 checker
     this.launched.push(checker)
 
@@ -50,16 +49,22 @@ export default class CheckerLauncher {
     layer.setMaskClickHide(false)
     layer.show()
 
-    // Checker 的上下文
+    // 构建 Checker 的上下文
+    const checkerStore: CheckerStore = {}
     let hideInteractInput = false
     const checkerCtx: CheckerCtx = {
+      set: (key, val) => { checkerStore[key] = val },
+      get: (key) => (checkerStore[key]),
+      getCtx: () => (this.ctx),
+      getApi: () => (this.ctx.getApi()),
+      getUser: () => (this.ctx.user),
       getLayer: () => layer,
       hideInteractInput: () => {
         hideInteractInput = true
       },
       triggerSuccess: () => {
         this.close(checker, layer)
-        if (checker.onSuccess) checker.onSuccess(this, checkerCtx, "", "", formEl)
+        if (checker.onSuccess) checker.onSuccess(checkerCtx, "", "", formEl)
         if (payload.onSuccess) payload.onSuccess("", dialog.$el)
       },
       cancel: () => {
@@ -68,9 +73,11 @@ export default class CheckerLauncher {
       }
     }
 
+    if (postFire) postFire(checkerCtx)
+
     // 创建表单
     const formEl = Utils.createElement()
-    formEl.appendChild(checker.body(this, checkerCtx))
+    formEl.appendChild(checker.body(checkerCtx))
 
     // 输入框
     const $input = Utils.createElement<HTMLInputElement>(
@@ -113,19 +120,19 @@ export default class CheckerLauncher {
 
       // 发送请求
       checker
-        .request(this, checkerCtx, inputVal)
+        .request(checkerCtx, inputVal)
         .then((data) => {
           // 请求成功
           this.close(checker, layer)
 
-          if (checker.onSuccess) checker.onSuccess(this, checkerCtx, data, inputVal, formEl)
+          if (checker.onSuccess) checker.onSuccess(checkerCtx, data, inputVal, formEl)
           if (payload.onSuccess) payload.onSuccess(inputVal, dialog.$el)
         })
         .catch((err) => {
           // 请求失败
           btnTextSet(String(err.msg || String(err)))
 
-          if (checker.onError) checker.onError(this, checkerCtx, err, inputVal, formEl)
+          if (checker.onError) checker.onError(checkerCtx, err, inputVal, formEl)
 
           // 错误显示 3s 后恢复按钮
           const tf = setTimeout(() => btnTextRestore(), 3000)
@@ -167,13 +174,24 @@ export default class CheckerLauncher {
 export interface Checker {
   el?: HTMLElement
   inputType?: 'password' | 'text'
-  body: (launcher: CheckerLauncher, ctx: CheckerCtx) => HTMLElement
-  request: (launcher: CheckerLauncher, ctx: CheckerCtx, inputVal: string) => Promise<string>
-  onSuccess?: (launcher: CheckerLauncher, ctx: CheckerCtx, data: string, inputVal: string, formEl: HTMLElement) => void
-  onError?: (launcher: CheckerLauncher, ctx: CheckerCtx, err: any, inputVal: string, formEl: HTMLElement) => void
+  body: (checker: CheckerCtx) => HTMLElement
+  request: (checker: CheckerCtx, inputVal: string) => Promise<string>
+  onSuccess?: (checker: CheckerCtx, respData: string, inputVal: string, formEl: HTMLElement) => void
+  onError?: (checker: CheckerCtx, err: any, inputVal: string, formEl: HTMLElement) => void
+}
+
+interface CheckerStore {
+  val?: string
+  img_data?: string
+  iframe?: string
 }
 
 export interface CheckerCtx {
+  get<K extends keyof CheckerStore>(key: K): CheckerStore[K]
+  set<K extends keyof CheckerStore>(key: K, val: CheckerStore[K]): void
+  getCtx(): Context
+  getApi(): Api
+  getUser(): User
   getLayer(): Layer
   hideInteractInput(): void
   triggerSuccess(): void

package/src/lib/dark-mode.ts

@@ -0,0 +1,48 @@
+import type Context from '~/types/context'
+import { getLayerWrap } from '../layer'
+
+const darkModeMedia = window.matchMedia('(prefers-color-scheme: dark)')
+let darkModeAutoFunc: (evt: MediaQueryListEvent) => void
+
+export function syncDarkModeConf(ctx: Context) {
+  setDarkMode(ctx, ctx.conf.darkMode, false) // ref `conf.darkMode` data, so no need to `alterConf`
+}
+
+export function setDarkMode(ctx: Context, darkMode: boolean|'auto', alterConf = true) {
+  const apply = (d: boolean) => {
+    updateClassName(ctx, d)
+    if (alterConf) alterCtxConf(ctx, d)
+  }
+
+  if (darkMode === 'auto') {
+    if (!darkModeAutoFunc) { // 自动切换夜间模式，事件监听
+      darkModeAutoFunc = (evt) => apply(evt.matches)
+      darkModeMedia.addEventListener('change', darkModeAutoFunc)
+    }
+
+    apply(darkModeMedia.matches)
+  } else {
+    // if the type of darkMode is boolean
+    if (darkModeAutoFunc) // 解除事件监听绑定
+      darkModeMedia.removeEventListener('change', darkModeAutoFunc)
+
+    apply(darkMode)
+  }
+}
+
+function alterCtxConf(ctx: Context, darkMode: boolean) {
+  ctx.conf.darkMode = darkMode
+}
+
+const DarkModeClassName = 'atk-dark-mode'
+export function updateClassName(ctx: Context, darkMode: boolean) {
+  if (darkMode) ctx.$root.classList.add(DarkModeClassName)
+  else ctx.$root.classList.remove(DarkModeClassName)
+
+  // for Layer
+  const { $wrap: $layerWrap } = getLayerWrap()
+  if ($layerWrap) {
+    if (darkMode) $layerWrap.classList.add(DarkModeClassName)
+    else $layerWrap.classList.remove(DarkModeClassName)
+  }
+}