artalk 2.3.4 → 2.4.0

package/src/comment/render.ts

@@ -1,5 +1,3 @@
-import '../style/comment.less'
-
 import * as Utils from '../lib/utils'
 import * as Ui from '../lib/ui'
 import ActionBtn from '../components/action-btn'
@@ -49,7 +47,7 @@ export default class CommentRender {
     this.renderReplyAt()
     this.renderReplyTo()
     this.renderPending()
-    this.renderActionBtn()
+    this.renderActions()
 
     this.recoveryChildrenWrap()
 
@@ -63,7 +61,7 @@ export default class CommentRender {
     $avatarImg.src = this.comment.getGravatarURL()
     if (this.data.link) {
       const $avatarA = Utils.createElement<HTMLLinkElement>('<a target="_blank" rel="noreferrer noopener nofollow"></a>')
-      $avatarA.href = this.data.link
+      $avatarA.href = Utils.isValidURL(this.data.link) ? this.data.link : `https://${this.data.link}`
       $avatarA.append($avatarImg)
       $avatar.append($avatarA)
     } else {
@@ -73,17 +71,26 @@ export default class CommentRender {
 
   /** 初始化 - 评论信息 */
   private renderHeader() {
+    this.renderHeader_Nick()
+    this.renderHeader_VerifyBadge()
+    this.renderHeader_Date()
+    this.renderHeader_UABadge()
+  }
+
+  private renderHeader_Nick() {
     this.$headerNick = this.$el.querySelector<HTMLElement>('.atk-nick')!
 
     if (this.data.link) {
       const $nickA = Utils.createElement<HTMLLinkElement>('<a target="_blank" rel="noreferrer noopener nofollow"></a>')
       $nickA.innerText = this.data.nick
-      $nickA.href = this.data.link
+      $nickA.href = Utils.isValidURL(this.data.link) ? this.data.link : `https://${this.data.link}`
       this.$headerNick.append($nickA)
     } else {
       this.$headerNick.innerText = this.data.nick
     }
+  }
 
+  private renderHeader_VerifyBadge() {
     this.$headerBadgeWrap = this.$el.querySelector<HTMLElement>('.atk-badge-wrap')!
     this.$headerBadgeWrap.innerHTML = ''
 
@@ -100,11 +107,15 @@ export default class CommentRender {
       const $pinnedBadge = Utils.createElement(`<span class="atk-pinned-badge">${this.ctx.$t('pin')}</span>`) // 置顶徽章
       this.$headerBadgeWrap.append($pinnedBadge)
     }
+  }
 
+  private renderHeader_Date() {
     const $date = this.$el.querySelector<HTMLElement>('.atk-date')!
     $date.innerText = this.comment.getDateFormatted()
     $date.setAttribute('data-atk-comment-date', String(+new Date(this.data.date)))
+  }
 
+  private renderHeader_UABadge() {
     if (this.ctx.conf.uaBadge) {
       let $uaWrap = this.$header.querySelector('atk-ua-wrap')
       if (!$uaWrap) {
@@ -115,8 +126,9 @@ export default class CommentRender {
       $uaWrap.innerHTML = ''
       const $uaBrowser = Utils.createElement(`<span class="atk-ua ua-browser"></span>`)
       const $usOS = Utils.createElement(`<span class="atk-ua ua-os"></span>`)
-      $uaBrowser.innerText = this.comment.getUserUaBrowser()
-      $usOS.innerText = this.comment.getUserUaOS()
+      const uaInfo = this.comment.getUserUA()
+      $uaBrowser.innerText = uaInfo.browser
+      $usOS.innerText = uaInfo.os
       $uaWrap.append($uaBrowser)
       $uaWrap.append($usOS)
     }
@@ -196,39 +208,55 @@ export default class CommentRender {
   }
 
   /** 初始化 - 评论操作按钮 */
-  private renderActionBtn() {
-    // 投票功能
-    if (this.ctx.conf.vote) {
-      // 赞同按钮
-      this.voteBtnUp = new ActionBtn(this.ctx, () => `${this.ctx.$t('voteUp')} (${this.data.vote_up || 0})`).appendTo(this.$actions)
-      this.voteBtnUp.setClick(() => {
-        this.comment.getActions().vote('up')
-      })
+  private renderActions() {
+    this.renderActions_Vote()
+    this.renderActions_Reply()
+
+    // 管理员操作
+    this.renderActions_Collapse()
+    this.renderActions_Moderator()
+    this.renderActions_Pin()
+    this.renderActions_Edit()
+    this.renderActions_Del()
+  }
 
-      // 反对按钮
-      if (this.ctx.conf.voteDown) {
-        this.voteBtnDown = new ActionBtn(this.ctx, () => `${this.ctx.$t('voteDown')} (${this.data.vote_down || 0})`).appendTo(this.$actions)
-        this.voteBtnDown.setClick(() => {
-          this.comment.getActions().vote('down')
-        })
-      }
-    }
+  // 操作按钮 - 投票
+  private renderActions_Vote() {
+    if (!this.ctx.conf.vote) return // 关闭投票功能
+
+    // 赞同按钮
+    this.voteBtnUp = new ActionBtn(this.ctx, () => `${this.ctx.$t('voteUp')} (${this.data.vote_up || 0})`).appendTo(this.$actions)
+    this.voteBtnUp.setClick(() => {
+      this.comment.getActions().vote('up')
+    })
 
-    // 回复按钮
-    if (this.data.is_allow_reply) {
-      const replyBtn = Utils.createElement(`<span>${this.ctx.$t('reply')}</span>`)
-      this.$actions.append(replyBtn)
-      replyBtn.addEventListener('click', (e) => {
-        e.stopPropagation() // 防止穿透
-        if (!this.cConf.onReplyBtnClick) {
-          this.ctx.replyComment(this.data, this.$el)
-        } else {
-          this.cConf.onReplyBtnClick()
-        }
+    // 反对按钮
+    if (this.ctx.conf.voteDown) {
+      this.voteBtnDown = new ActionBtn(this.ctx, () => `${this.ctx.$t('voteDown')} (${this.data.vote_down || 0})`).appendTo(this.$actions)
+      this.voteBtnDown.setClick(() => {
+        this.comment.getActions().vote('down')
       })
     }
+  }
+
+  // 操作按钮 - 回复
+  private renderActions_Reply() {
+    if (!this.data.is_allow_reply) return // 不允许回复
+
+    const replyBtn = Utils.createElement(`<span>${this.ctx.$t('reply')}</span>`)
+    this.$actions.append(replyBtn)
+    replyBtn.addEventListener('click', (e) => {
+      e.stopPropagation() // 防止穿透
+      if (!this.cConf.onReplyBtnClick) {
+        this.ctx.replyComment(this.data, this.$el)
+      } else {
+        this.cConf.onReplyBtnClick()
+      }
+    })
+  }
 
-    // 折叠按钮
+  // 操作按钮 - 折叠
+  private renderActions_Collapse() {
     const collapseBtn = new ActionBtn(this.ctx, {
       text: () => (this.data.is_collapsed ? this.ctx.$t('expand') : this.ctx.$t('collapse')),
       adminOnly: true
@@ -237,8 +265,10 @@ export default class CommentRender {
     collapseBtn.setClick(() => {
       this.comment.getActions().adminEdit('collapsed', collapseBtn)
     })
+  }
 
-    // 审核按钮
+  // 操作按钮 - 审核
+  private renderActions_Moderator() {
     const pendingBtn = new ActionBtn(this.ctx, {
       text: () => (this.data.is_pending ? this.ctx.$t('pending') : this.ctx.$t('approved')),
       adminOnly: true
@@ -247,18 +277,22 @@ export default class CommentRender {
     pendingBtn.setClick(() => {
       this.comment.getActions().adminEdit('pending', pendingBtn)
     })
+  }
 
-    // 置顶按钮
+  // 操作按钮 - 置顶
+  private renderActions_Pin() {
     const pinnedBtn = new ActionBtn(this.ctx, {
       text: () => (this.data.is_pinned ? this.ctx.$t('unpin') : this.ctx.$t('pin')),
       adminOnly: true
     })
     pinnedBtn.appendTo(this.$actions)
     pinnedBtn.setClick(() => {
-      this.comment.getActions().adminEdit('pinned', pendingBtn)
+      this.comment.getActions().adminEdit('pinned', pinnedBtn)
     })
+  }
 
-    // 编辑按钮
+  // 操作按钮 - 编辑
+  private renderActions_Edit() {
     const editBtn = new ActionBtn(this.ctx, {
       text: this.ctx.$t('edit'),
       adminOnly: true
@@ -267,8 +301,10 @@ export default class CommentRender {
     editBtn.setClick(() => {
       this.ctx.editComment(this.data, this.$el)
     })
+  }
 
-    // 删除按钮
+  // 操作按钮 - 删除
+  private renderActions_Del() {
     const delBtn = new ActionBtn(this.ctx, {
       text: this.ctx.$t('delete'),
       confirm: true,

package/src/components/pagination.ts

@@ -1,4 +1,3 @@
-import '../style/pagination.less'
 import * as Utils from '../lib/utils'
 import * as Ui from '../lib/ui'
 

package/src/context.ts

@@ -2,7 +2,7 @@ import { marked as libMarked } from 'marked'
 import ArtalkConfig from '~/types/artalk-config'
 import { CommentData, NotifyData } from '~/types/artalk-data'
 import { Event } from '~/types/event'
-import { internal as internalLocales, I18n } from './i18n'
+import getI18n, { I18n } from './i18n'
 import User from './lib/user'
 import ContextApi from '../types/context'
 import Editor from './editor'
@@ -12,6 +12,7 @@ import SidebarLayer, { SidebarShowPayload } from './layer/sidebar-layer'
 import CheckerLauncher, { CheckerCaptchaPayload, CheckerPayload } from './lib/checker'
 import Layer, { GetLayerWrap } from './layer'
 import Api from './api'
+import List from './list'
 
 /**
  * Artalk Context
@@ -20,7 +21,7 @@ export default class Context implements ContextApi {
   /* 持有同事类 */
   private api!: Api
   private editor!: Editor
-  private list!: ListLite
+  private list?: ListLite
   private sidebarLayer!: SidebarLayer
   private checkerLauncher!: CheckerLauncher
 
@@ -99,24 +100,29 @@ export default class Context implements ContextApi {
     comment.getEl().remove()
     this.commentList.splice(this.commentList.indexOf(comment), 1)
 
-    const listData = this.list.getData()
-    if (listData) listData.total -= 1 // 评论数减 1
+    if (this.list) {
+      const listData = this.list.getData()
+      if (listData) listData.total -= 1 // 评论数减 1
 
-    this.list.refreshUI()
+      this.list.refreshUI()
+    }
   }
 
   public clearAllComments() {
-    this.list.getCommentsWrapEl().innerHTML = ''
-    this.list.clearData()
+    if (this.list) {
+      this.list.getCommentsWrapEl().innerHTML = ''
+      this.list.clearData()
+    }
+
     this.commentList = []
   }
 
   public insertComment(commentData: CommentData) {
-    this.list.insertComment(commentData)
+    this.list?.insertComment(commentData)
   }
 
   public updateComment(commentData: CommentData): void {
-    this.list.updateComment(commentData)
+    this.list?.updateComment(commentData)
   }
 
   public replyComment(commentData: CommentData, $comment: HTMLElement, scroll?: boolean): void {
@@ -136,12 +142,12 @@ export default class Context implements ContextApi {
   }
 
   public updateNotifies(notifies: NotifyData[]): void {
-    this.list.updateUnread(notifies)
+    this.list?.updateUnread(notifies)
   }
 
   /* 评论列表 */
   public listReload(): void {
-    this.list.reload()
+    this.list?.reload()
   }
 
   public reload(): void {
@@ -149,7 +155,15 @@ export default class Context implements ContextApi {
   }
 
   public listRefreshUI(): void {
-    this.list.refreshUI()
+    this.list?.refreshUI()
+  }
+
+  public listHashGotoCheck(): void {
+    if (!this.list || this.list !instanceof List) return
+    const list = this.list as List
+
+    list.goToCommentDelay = false
+    list.checkGoToCommentByUrlHash()
   }
 
   /* 编辑器 */
@@ -240,15 +254,7 @@ export default class Context implements ContextApi {
 
   /* i18n */
   public $t(key: keyof I18n, args: {[key: string]: string} = {}): string {
-    let locales = this.conf.locale
-    if (typeof locales === 'string') {
-      locales = internalLocales[locales]
-    }
-
-    let str = locales?.[key] || key
-    str = str.replace(/\{\s*(\w+?)\s*\}/g, (_, token) => args[token] || '')
-
-    return str
+    return getI18n(this.conf.locale, key, args)
   }
 
   public setDarkMode(darkMode: boolean): void {
@@ -257,20 +263,14 @@ export default class Context implements ContextApi {
     this.conf.darkMode = darkMode
     this.trigger('conf-updated')
 
-    if (this.conf.darkMode) {
-      this.$root.classList.add(darkModeClassName)
-    } else {
-      this.$root.classList.remove(darkModeClassName)
-    }
+    if (this.conf.darkMode) this.$root.classList.add(darkModeClassName)
+    else this.$root.classList.remove(darkModeClassName)
 
     // for Layer
     const { $wrap: $layerWrap } = GetLayerWrap(this)
     if ($layerWrap) {
-      if (this.conf.darkMode) {
-        $layerWrap.classList.add(darkModeClassName)
-      } else {
-        $layerWrap.classList.remove(darkModeClassName)
-      }
+      if (this.conf.darkMode) $layerWrap.classList.add(darkModeClassName)
+      else $layerWrap.classList.remove(darkModeClassName)
     }
   }
 }

package/src/editor/editor.ts

@@ -1,5 +1,3 @@
-import '@/style/editor.less'
-
 import { CommentData } from '~/types/artalk-data'
 import Context from '~/types/context'
 import Component from '../lib/component'
@@ -326,7 +324,7 @@ export default class Editor extends Component {
   /** 创建评论 */
   public async submitAdd() {
     try {
-      const nComment = await this.ctx.getApi().add({
+      const nComment = await this.ctx.getApi().comment.add({
         content: this.getFinalContent(),
         nick: this.user.data.nick,
         email: this.user.data.email,
@@ -364,7 +362,7 @@ export default class Editor extends Component {
         email: this.$email.value,
         link: this.$link.value,
       }
-      const nComment = await this.ctx.getApi().commentEdit({
+      const nComment = await this.ctx.getApi().comment.commentEdit({
         ...this.editComment, ...saveData
       })
       this.ctx.updateComment(nComment)

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

@@ -39,7 +39,7 @@ export default class HeaderInputPlug extends EditorPlug {
     this.queryUserInfo.timeout = window.setTimeout(() => {
       this.queryUserInfo.timeout = null // 清理
 
-      const {req, abort} = this.ctx.getApi().userGet(
+      const {req, abort} = this.ctx.getApi().user.userGet(
         this.ctx.user.data.nick, this.ctx.user.data.email
       )
       this.queryUserInfo.abortFunc = abort

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

@@ -99,7 +99,7 @@ export default class UploadPlug extends EditorPlug {
     try {
       if (!this.ctx.conf.imgUploader) {
         // 使用 ArtalkGo 进行图片上传
-        resp = await this.ctx.getApi().imgUpload(file)
+        resp = await this.ctx.getApi().upload.imgUpload(file)
       } else {
         // 使用自定义的图片上传器
         resp = {img_url: await this.ctx.conf.imgUploader(file)}

package/src/i18n/index.ts

@@ -3,7 +3,7 @@ import zhCN from './zh-CN'
 
 export type I18n = typeof en
 
-// @note the Key name is followed by `ISO 639`
+// @note the key of language is followed by `ISO 639`
 // https://en.wikipedia.org/wiki/ISO_639
 // https://datatracker.ietf.org/doc/html/rfc5646#section-2.1
 export const internal = {
@@ -14,8 +14,123 @@ export const internal = {
 
 export const external = {
   'jp-JP': {},
-  'zh-TW': {},
+  'zh-TW': {
+    /* Editor */
+    placeholder: '鍵入內容...',
+    noComment: '「此時無聲勝有聲」',
+    send: '發送評論',
+    save: '保存評論',
+    nick: '昵稱',
+    email: '郵箱',
+    link: '網址',
+    emoticon: '表情',
+    preview: '預覽',
+    image: '圖片',
+    uploadFail: '上傳失敗',
+    commentFail: '評論失敗',
+    restoredMsg: '內容已自動恢復',
+    onlyAdminCanReply: '僅管理員可評論',
+    uploadLoginMsg: '填入你的名字郵箱才能上傳哦',
+
+    /* List */
+    counter: '{count} 條評論',
+    sortLatest: '最新',
+    sortOldest: '最早',
+    sortBest: '最熱',
+    sortAuthor: '作者',
+    openComment: '打開評論',
+    closeComment: '關閉評論',
+    listLoadFailMsg: '無法獲取評論列表數據',
+    listRetry: '點擊重新獲取',
+    loadMore: '加載更多',
+
+    /* Comment */
+    admin: '管理員',
+    reply: '回覆',
+    voteUp: '贊同',
+    voteDown: '反對',
+    voteFail: '投票失敗',
+    readMore: '閱讀更多',
+    actionConfirm: '確認操作',
+    collapse: '摺疊',
+    collapsed: '已摺疊',
+    collapsedMsg: '該評論已被系統或管理員摺疊',
+    expand: '展開',
+    approved: '已審',
+    pending: '待審',
+    pendingMsg: '審核中，僅本人可見。',
+    edit: '編輯',
+    editCancel: '取消編輯',
+    delete: '刪除',
+    deleteConfirm: '確認刪除',
+    pin: '置頂',
+    unpin: '取消置頂',
+
+    /* Time */
+    seconds: '秒前',
+    minutes: '分鐘前',
+    hours: '小時前',
+    days: '天前',
+    now: '剛剛',
+
+    /* Checker */
+    adminCheck: '鍵入密碼來驗證管理員身份：',
+    captchaCheck: '鍵入驗證碼繼續：',
+    confirm: '確認',
+    cancel: '取消',
+
+    /* Sidebar */
+    msgCenter: '通知中心',
+    ctrlCenter: '控制中心',
+
+    /* General */
+    frontend: '前端',
+    backend: '後端',
+    loading: '加載中',
+    loadFail: '加載失敗',
+    editing: '修改中',
+    editFail: '修改失敗',
+    deleting: '刪除中',
+    deleteFail: '刪除失敗',
+    reqGot: '請求響應',
+    reqAborted: '請求超時或意外終止',
+  },
   'fr-FR': {},
   'de-DE': {},
   'bn-IN': {},
 }
+
+/**
+ * get a locale object by language name
+ */
+function getLocaleSet(lang: string): I18n {
+  // normalize a key of language to `ISO 639`
+  lang = lang.replace(
+    /^([a-zA-Z]+)(-[a-zA-Z]+)?$/,
+    (_, p1: string, p2: string) => (p1.toLowerCase() + (p2 || '').toUpperCase())
+  )
+
+  // case not found
+  if (!internal[lang]) {
+    return internal.en // use `en` by default
+  }
+
+  return internal[lang]
+}
+
+/**
+ * get a i18n message by key
+ */
+function getI18n(locale: I18n|string, key: keyof I18n, args: {[key: string]: string} = {}) {
+  if (typeof locale === 'string') {
+    locale = getLocaleSet(locale)
+  }
+
+  let str = locale?.[key] || key
+  str = str.replace(/\{\s*(\w+?)\s*\}/g, (_, token) => args[token] || '')
+
+  return str
+}
+
+export { getLocaleSet, getI18n }
+export default getI18n

package/src/layer/sidebar-layer.ts

@@ -1,5 +1,3 @@
-import '../style/sidebar-layer.less'
-
 import Context from '~/types/context'
 import Component from '@/lib/component'
 import * as Utils from '@/lib/utils'
@@ -62,7 +60,7 @@ export default class SidebarLayer extends Component {
 
     // 管理员身份验证 (若身份失效，弹出验证窗口)
     ;(async () => {
-      const resp = await this.ctx.getApi().loginStatus()
+      const resp = await this.ctx.getApi().user.loginStatus()
       if (resp.is_admin && !resp.is_login) {
         this.layer?.hide()
         this.firstShow = true

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

@@ -11,7 +11,7 @@ const AdminChecker: Checker = {
       password: inputVal
     }
 
-    return that.ctx.getApi().login(data.name, data.email, data.password)
+    return that.ctx.getApi().user.login(data.name, data.email, data.password)
   },
 
   body(that, ctx) {

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

@@ -4,7 +4,7 @@ import { Checker } from '.'
 
 const CaptchaChecker: Checker = {
   request(that, ctx, inputVal) {
-    return that.ctx.getApi().captchaCheck(inputVal)
+    return that.ctx.getApi().captcha.captchaCheck(inputVal)
   },
 
   body(that, ctx) {
@@ -34,7 +34,7 @@ const CaptchaChecker: Checker = {
         if (stop) return
         let isPass = false
         try {
-          const resp = await that.ctx.getApi().captchaStatus()
+          const resp = await that.ctx.getApi().captcha.captchaStatus()
           isPass = resp.is_pass
         } catch { isPass = false }
         if (isPass) {
@@ -60,7 +60,7 @@ const CaptchaChecker: Checker = {
     // 刷新验证码
     elem.querySelector<HTMLElement>('.atk-captcha-img')!.onclick = () => {
       const imgEl = elem.querySelector('.atk-captcha-img')
-      that.ctx.getApi().captchaGet()
+      that.ctx.getApi().captcha.captchaGet()
         .then((imgData) => {
           imgEl!.setAttribute('src', imgData)
         })

package/src/lib/stat.ts

@@ -21,7 +21,7 @@ export async function initCountWidget(p: CountConf) {
   }
 
   // PV
-  const curtPagePvNum = p.pvAdd ? await p.ctx.getApi().pv() : undefined
+  const curtPagePvNum = p.pvAdd ? await p.ctx.getApi().page.pv() : undefined
   const pvEl = p.ctx.conf.pvEl
   if (pvEl && document.querySelector(pvEl)) {
     handleStatCount(p, {
@@ -52,7 +52,7 @@ export async function handleStatCount(
     .filter((pageKey) => pageCounts[pageKey] === undefined)
   queryPageKeys = [...new Set(queryPageKeys)] // 去重
   if (queryPageKeys.length > 0) {
-    const counts: any = await p.ctx.getApi().stat(args.api, queryPageKeys)
+    const counts: any = await p.ctx.getApi().page.stat(args.api, queryPageKeys)
     pageCounts = { ...pageCounts, ...counts }
   }
 

package/src/lib/ui.ts

@@ -32,6 +32,12 @@ export function hideLoading(parentElem: HTMLElement) {
   if ($loading) $loading.style.display = 'none'
 }
 
+/** 元素加载动画 */
+export function setLoading(val: boolean, parentElem: HTMLElement) {
+  if (val) showLoading(parentElem)
+  else hideLoading(parentElem)
+}
+
 /** 元素是否用户可见 */
 export function isVisible(el: HTMLElement, viewport: HTMLElement = document.documentElement) {
   const viewportHeight = viewport.clientHeight