artalk 2.7.0 → 2.7.2

package/src/comment/renders/index.ts

@@ -1,19 +0,0 @@
-import type Render from '../render'
-import Avatar from './avatar'
-import Header from './header'
-import Content from './content'
-import ReplyAt from './reply-at'
-import ReplyTo from './reply-to'
-import Pending from './pending'
-import Actions from './actions'
-
-const Renders = {
-  Avatar, Header, Content, ReplyAt,
-  ReplyTo, Pending, Actions
-}
-
-export default function loadRenders(r: Render) {
-  Object.entries(Renders).forEach(([ name, render ]) => {
-    render(r)
-  })
-}

package/src/comment/renders/pending.ts

@@ -1,12 +0,0 @@
-import * as Utils from '../../lib/utils'
-import type Render from '../render'
-
-/**
- * 待审核状态界面
- */
-export default function renderPending(r: Render) {
-  if (!r.data.is_pending) return
-
-  const pendingEl = Utils.createElement(`<div class="atk-pending">${r.ctx.$t('pendingMsg')}</div>`)
-  r.$body.prepend(pendingEl)
-}

package/src/comment/renders/reply-at.ts

@@ -1,16 +0,0 @@
-import * as Utils from '../../lib/utils'
-import type Render from '../render'
-
-/**
- * 层级嵌套模式显示 AT 界面
- */
-export default function renderReplyAt(r: Render) {
-  if (r.cConf.isFlatMode || r.data.rid === 0) return // not 平铺模式 或 根评论
-  if (!r.cConf.replyTo) return
-
-  r.$replyAt = Utils.createElement(`<span class="atk-item atk-reply-at"><span class="atk-arrow"></span><span class="atk-nick"></span></span>`)
-  r.$replyAt.querySelector<HTMLElement>('.atk-nick')!.innerText = `${r.cConf.replyTo.nick}`
-  r.$replyAt.onclick = () => { r.comment.getActions().goToReplyComment() }
-
-  r.$headerBadgeWrap.insertAdjacentElement('afterend', r.$replyAt)
-}

package/src/comment/renders/reply-to.ts

@@ -1,24 +0,0 @@
-import * as Utils from '../../lib/utils'
-import marked from '../../lib/marked'
-import type Render from '../render'
-
-/**
- * 回复的对象界面
- */
-export default function renderReplyTo(r: Render) {
-  if (!r.cConf.isFlatMode) return // 仅平铺模式显示
-  if (!r.cConf.replyTo) return
-
-  r.$replyTo = Utils.createElement(`
-    <div class="atk-reply-to">
-      <div class="atk-meta">${r.ctx.$t('reply')} <span class="atk-nick"></span>:</div>
-      <div class="atk-content"></div>
-    </div>`)
-  const $nick = r.$replyTo.querySelector<HTMLElement>('.atk-nick')!
-  $nick.innerText = `@${r.cConf.replyTo.nick}`
-  $nick.onclick = () => { r.comment.getActions().goToReplyComment() }
-  let replyContent = marked(r.cConf.replyTo.content)
-  if (r.cConf.replyTo.is_collapsed) replyContent = `[${Utils.htmlEncode(r.ctx.$t('collapsed'))}]`
-  r.$replyTo.querySelector<HTMLElement>('.atk-content')!.innerHTML = replyContent
-  r.$body.prepend(r.$replyTo)
-}

package/src/components/action-btn.ts

@@ -1,170 +0,0 @@
-import $t from '@/i18n'
-import * as Utils from '../lib/utils'
-
-interface ActionBtnOptions {
-  /** 按钮文字 (动态/静态) */
-  text: (() => string) | string
-
-  /** 仅管理员可用 */
-  adminOnly?: boolean
-
-  /** 确认操作 */
-  confirm?: boolean
-
-  /** 确认时提示文字 */
-  confirmText?: string
-}
-
-/**
- * 通用操作按钮
- */
-export default class ActionBtn {
-  private opts: ActionBtnOptions
-  public $el: HTMLElement
-
-  public isLoading = false // 正在加载
-
-  public msgRecTimer?: number // 消息显示复原定时器
-  public msgRecTimerFunc?: Function // 消息显示复原操作
-  public get isMessaging() { return !!this.msgRecTimer } // 消息正在显示
-
-  public isConfirming = false // 正在确认
-  public confirmRecTimer?: number // 确认消息复原定时器
-
-  /** 构造函数 */
-  constructor(opts: ActionBtnOptions|string|(() => string)) {
-    this.$el = Utils.createElement(`<span class="atk-common-action-btn"></span>`)
-
-    this.opts = (typeof opts !== 'object') ? ({ text: opts }) : opts
-    this.$el.innerText = this.getText()
-
-    // 仅管理员可操作
-    if (this.opts.adminOnly) this.$el.setAttribute('atk-only-admin-show', '')
-  }
-
-  /** 将按钮装载到指定元素 */
-  public appendTo(dom: HTMLElement) {
-    dom.append(this.$el)
-    return this
-  }
-
-  /** 获取按钮文字（动态/静态） */
-  private getText() {
-    return (typeof this.opts.text === 'string') ? this.opts.text : this.opts.text()
-  }
-
-  /** 设置点击事件 */
-  public setClick(func: Function) {
-    this.$el.onclick = (e) => {
-      e.stopPropagation() // 防止穿透
-
-      // 按钮处于加载状态，禁止点击
-      if (this.isLoading) {
-        return
-      }
-
-      // 操作确认
-      if (this.opts.confirm && !this.isMessaging) {
-        const confirmRestore = () => {
-          this.isConfirming = false
-          this.$el.classList.remove('atk-btn-confirm')
-          this.$el.innerText = this.getText()
-        }
-
-        if (!this.isConfirming) {
-          this.isConfirming = true
-          this.$el.classList.add('atk-btn-confirm')
-          this.$el.innerText = this.opts.confirmText || $t('actionConfirm')
-          this.confirmRecTimer = window.setTimeout(() => confirmRestore(), 5000)
-          return
-        }
-
-        if (this.confirmRecTimer) window.clearTimeout(this.confirmRecTimer)
-        confirmRestore()
-      }
-
-      // 立刻释放掉原有的定时器（当显示消息后，用户立刻点击时）
-      if (this.msgRecTimer) {
-        this.fireMsgRecTimer()
-        this.clearMsgRecTimer()
-        return
-      }
-
-      // 触发设定的点击事件
-      func()
-    }
-  }
-
-  /** 文字刷新（动态/静态） */
-  public updateText(text?: (() => string) | string) {
-    if (text) this.opts.text = text
-    this.setLoading(false)
-    this.$el.innerText = this.getText()
-  }
-
-  /** 设置加载状态 */
-  public setLoading(value: boolean, loadingText?: string) {
-    if (this.isLoading === value) return
-    this.isLoading = value
-    if (value) {
-      this.$el.classList.add('atk-btn-loading')
-      this.$el.innerText = loadingText || `${$t('loading')}...`
-    } else {
-      this.$el.classList.remove('atk-btn-loading')
-      this.$el.innerText = this.getText()
-    }
-  }
-
-  /** 错误消息 */
-  public setError(text: string) {
-    this.setMsg(text, 'atk-btn-error')
-  }
-
-  /** 警告消息 */
-  public setWarn(text: string) {
-    this.setMsg(text, 'atk-btn-warn')
-  }
-
-  /** 成功消息 */
-  public setSuccess(text: string) {
-    this.setMsg(text, 'atk-btn-success')
-  }
-
-  /** 设置消息 */
-  public setMsg(text: string, className?: string, duringTime?: number, after?: Function) {
-    this.setLoading(false)
-    if (className) this.$el.classList.add(className)
-    this.$el.innerText = text
-
-    // 设定复原 timer
-    this.setMsgRecTimer(() => {
-      this.$el.innerText = this.getText()
-      if (className) this.$el.classList.remove(className)
-      if (after) after()
-    }, duringTime || 2500) // 消息默认显示持续 2500s
-  }
-
-  /** 设置消息复原操作定时器 */
-  private setMsgRecTimer(func: Function, duringTime: number) {
-    this.fireMsgRecTimer()
-    this.clearMsgRecTimer()
-
-    this.msgRecTimerFunc = func
-    this.msgRecTimer = window.setTimeout(() => {
-      func()
-      this.clearMsgRecTimer()
-    }, duringTime)
-  }
-
-  /** 立刻触发器复原定时器 */
-  private fireMsgRecTimer() {
-    if (this.msgRecTimerFunc) this.msgRecTimerFunc()
-  }
-
-  /** 仅清除 timer */
-  private clearMsgRecTimer() {
-    if (this.msgRecTimer) window.clearTimeout(this.msgRecTimer)
-    this.msgRecTimer = undefined
-    this.msgRecTimerFunc = undefined
-  }
-}

package/src/components/checker/admin.ts

@@ -1,37 +0,0 @@
-import $t from '@/i18n'
-import * as Utils from '@/lib/utils'
-import User from '@/lib/user'
-import type { Checker } from '.'
-
-const AdminChecker: Checker = {
-  inputType: 'password',
-
-  request(checker, inputVal) {
-    const data = {
-      name: User.data.nick,
-      email: User.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>${$t('adminCheck')}</span>`)
-  },
-
-  onSuccess(checker, userToken, inputVal, formEl) {
-    User.update({
-      isAdmin: true,
-      token: userToken
-    })
-    checker.getOpts().onReload()
-  },
-
-  onError(checker, err, inputVal, formEl) {}
-}
-
-export default AdminChecker

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

@@ -1,69 +0,0 @@
-import $t from '@/i18n'
-import * as Utils from '@/lib/utils'
-import * as Ui from '@/lib/ui'
-import type { CheckerCtx } from '.'
-
-/** 图片验证码 */
-export function imgBody(checker: CheckerCtx) {
-  // 图片验证方式
-  const elem = Utils.createElement(
-    `<span><img class="atk-captcha-img" src="${checker.get('img_data') || ''}">${$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.getOpts().getIframeURLBase() || ''}/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.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/components/checker/captcha.ts

@@ -1,26 +0,0 @@
-
-import type { 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/components/checker/index.ts

@@ -1,192 +0,0 @@
-import type Api from '@/api'
-import Dialog from '@/components/dialog'
-import $t from '@/i18n'
-import type { ContextApi } from '~/types'
-import type { Layer } from '@/layer'
-import * as Utils from '@/lib/utils'
-import CaptchaChecker from './captcha'
-import AdminChecker from './admin'
-
-export interface CheckerCaptchaPayload extends CheckerPayload {
-  imgData?: string
-  iframe?: string
-}
-
-export interface CheckerPayload {
-  onSuccess?: (inputVal: string, dialogEl?: HTMLElement) => void
-  onMount?: (dialogEl: HTMLElement) => void
-  onCancel?: () => void
-}
-
-export interface CheckerLauncherOptions {
-  getCtx: () => ContextApi
-  getApi: () => Api
-  getIframeURLBase: () => string
-  onReload: () => void
-}
-
-/**
- * Checker 发射台
- */
-export default class CheckerLauncher {
-  constructor(private opts: CheckerLauncherOptions) { }
-
-  public checkCaptcha(payload: CheckerCaptchaPayload) {
-    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, postFire?: (c: CheckerCtx) => void) {
-    // 显示层
-    const layer = this.opts.getCtx().get('layerManager').create(`checker-${new Date().getTime()}`)
-    layer.show()
-
-    // 构建 Checker 的上下文
-    const checkerStore: CheckerStore = {}
-    let hideInteractInput = false
-    const checkerCtx: CheckerCtx = {
-      set: (key, val) => { checkerStore[key] = val },
-      get: (key) => (checkerStore[key]),
-      getOpts: () => (this.opts),
-      getApi: () => this.opts.getApi(),
-      hideInteractInput: () => {
-        hideInteractInput = true
-      },
-      triggerSuccess: () => {
-        this.close(checker, layer)
-        if (checker.onSuccess) checker.onSuccess(checkerCtx, "", "", formEl)
-        if (payload.onSuccess) payload.onSuccess("", dialog.$el)
-      },
-      cancel: () => {
-        this.close(checker, layer)
-        if (payload.onCancel) payload.onCancel()
-      }
-    }
-
-    if (postFire) postFire(checkerCtx)
-
-    // 创建表单
-    const formEl = Utils.createElement()
-    formEl.appendChild(checker.body(checkerCtx))
-
-    // 输入框
-    const $input = Utils.createElement<HTMLInputElement>(
-      `<input id="check" type="${checker.inputType || 'text'}" autocomplete="off" required placeholder="">`
-    )
-    formEl.appendChild($input)
-    setTimeout(() => $input.focus(), 80) // 延迟 Focus
-
-    // 绑定键盘事件
-    $input.onkeyup = (evt) => {
-      if (evt.key === 'Enter' || evt.keyCode === 13) {
-        // 按下回车键
-        evt.preventDefault()
-        layer
-          .getEl()
-          .querySelector<HTMLButtonElement>('button[data-action="confirm"]')!
-          .click()
-      }
-    }
-
-    let btnTextOrg: string | undefined
-    const dialog = new Dialog(formEl)
-
-    // 确认按钮
-    dialog.setYes((btnEl) => {
-      const inputVal = $input.value.trim()
-
-      // 按钮操作
-      if (!btnTextOrg) btnTextOrg = btnEl.innerText
-      const btnTextSet = (btnText: string) => {
-        btnEl.innerText = btnText
-        btnEl.classList.add('error')
-      }
-      const btnTextRestore = () => {
-        btnEl.innerText = btnTextOrg || ''
-        btnEl.classList.remove('error')
-      }
-
-      btnEl.innerText = `${$t('loading')}...`
-
-      // 发送请求
-      checker
-        .request(checkerCtx, inputVal)
-        .then((data) => {
-          // 请求成功
-          this.close(checker, layer)
-
-          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(checkerCtx, err, inputVal, formEl)
-
-          // 错误显示 3s 后恢复按钮
-          const tf = setTimeout(() => btnTextRestore(), 3000)
-          $input.onfocus = () => {
-            btnTextRestore()
-            clearTimeout(tf)
-          }
-        })
-
-      return false
-    })
-
-    // 取消按钮
-    dialog.setNo(() => {
-      this.close(checker, layer)
-      if (payload.onCancel) payload.onCancel()
-      return false
-    })
-
-    if (hideInteractInput) {
-      $input.style.display = 'none'
-      dialog.$el.querySelector<HTMLElement>('.atk-layer-dialog-actions')!.style.display = 'none'
-    }
-
-    // 层装载 dialog 元素
-    layer.getEl().append(dialog.$el)
-
-    // onMount 回调
-    if (payload.onMount) payload.onMount(dialog.$el)
-  }
-
-  // 关闭 checker 对话框
-  private close(checker: Checker, layer: Layer) {
-    layer.destroy()
-  }
-}
-
-export interface Checker {
-  el?: HTMLElement
-  inputType?: 'password' | 'text'
-  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
-  getOpts(): CheckerLauncherOptions
-  getApi(): Api
-  hideInteractInput(): void
-  triggerSuccess(): void
-  cancel(): void
-}

package/src/components/dark-mode.ts

@@ -1,30 +0,0 @@
-const darkModeMedia = window.matchMedia('(prefers-color-scheme: dark)')
-let darkModeAutoFunc: (evt: MediaQueryListEvent) => void
-
-export function applyDarkMode($els: HTMLElement[], darkMode: boolean|'auto') {
-  const apply = (d: boolean) => {
-    $els.forEach($el => updateClassName($el, 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)
-  }
-}
-
-export const DarkModeClassName = 'atk-dark-mode'
-
-function updateClassName($el: HTMLElement, darkMode: boolean) {
-  if (darkMode) $el.classList.add(DarkModeClassName)
-  else $el.classList.remove(DarkModeClassName)
-}

package/src/components/dialog.ts

@@ -1,62 +0,0 @@
-import $t from '@/i18n'
-import * as Utils from '../lib/utils'
-
-type BtnClickHandler = (btnEl: HTMLElement, dialog: Dialog) => boolean|void
-
-/**
- * 对话框
- */
-export default class Dialog {
-  public $el: HTMLElement
-  public $content: HTMLElement
-  public $actions: HTMLElement
-
-  constructor (contentEl: HTMLElement) {
-    this.$el = Utils.createElement(
-      `<div class="atk-layer-dialog-wrap">
-        <div class="atk-layer-dialog">
-          <div class="atk-layer-dialog-content"></div>
-          <div class="atk-layer-dialog-actions"></div>
-        </div>
-      </div>`
-    )
-
-    // 按钮
-    this.$actions = this.$el.querySelector<HTMLElement>('.atk-layer-dialog-actions')!
-
-    // 内容
-    this.$content = this.$el.querySelector('.atk-layer-dialog-content')!
-    this.$content.appendChild(contentEl)
-  }
-
-  /** 按钮 · 确定 */
-  public setYes(handler: BtnClickHandler) {
-    const btn = Utils.createElement<HTMLButtonElement>(
-      `<button data-action="confirm">${$t('confirm')}</button>`
-    )
-    btn.onclick = this.onBtnClick(handler)
-    this.$actions.appendChild(btn)
-
-    return this
-  }
-
-  /** 按钮 · 取消 */
-  public setNo(handler: BtnClickHandler) {
-    const btn = Utils.createElement<HTMLButtonElement>(
-      `<button data-action="cancel">${$t('cancel')}</button>`
-    )
-    btn.onclick = this.onBtnClick(handler)
-    this.$actions.appendChild(btn)
-
-    return this
-  }
-
-  private onBtnClick(handler: BtnClickHandler) {
-    return (evt: Event) => {
-      const re = handler(evt.currentTarget as HTMLElement, this)
-      if (re === undefined || re === true) {
-        this.$el.remove()
-      }
-    }
-  }
-}