artalk 2.3.3 → 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 // 关闭投票功能
 
-    // 绑定回复按钮事件
-    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()
-        }
+    // 赞同按钮
+    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.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,8 +277,34 @@ 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', pinnedBtn)
+    })
+  }
+
+  // 操作按钮 - 编辑
+  private renderActions_Edit() {
+    const editBtn = new ActionBtn(this.ctx, {
+      text: this.ctx.$t('edit'),
+      adminOnly: true
+    })
+    editBtn.appendTo(this.$actions)
+    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,
@@ -259,16 +315,6 @@ export default class CommentRender {
     delBtn.setClick(() => {
       this.comment.getActions().adminDelete(delBtn)
     })
-
-    // 绑定置顶按钮事件
-    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)
-    })
   }
 
   /** 内容限高检测 */

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,20 +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)
   }
 
   public replyComment(commentData: CommentData, $comment: HTMLElement, scroll?: boolean): void {
@@ -123,17 +133,37 @@ export default class Context implements ContextApi {
     this.editor.cancelReply()
   }
 
+  public editComment(commentData: CommentData, $comment: HTMLElement): void {
+    this.editor.setEditComment(commentData, $comment)
+  }
+
+  public cancelEditComment(): void {
+    this.editor.cancelEditComment()
+  }
+
   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 {
+    this.listReload()
   }
 
   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()
   }
 
   /* 编辑器 */
@@ -224,14 +254,23 @@ 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]
-    }
+    return getI18n(this.conf.locale, key, args)
+  }
+
+  public setDarkMode(darkMode: boolean): void {
+    const darkModeClassName = 'atk-dark-mode'
+
+    this.conf.darkMode = darkMode
+    this.trigger('conf-updated')
 
-    let str = locales?.[key] || key
-    str = str.replace(/\{\s*(\w+?)\s*\}/g, (_, token) => args[token] || '')
+    if (this.conf.darkMode) this.$root.classList.add(darkModeClassName)
+    else this.$root.classList.remove(darkModeClassName)
 
-    return str
+    // for Layer
+    const { $wrap: $layerWrap } = GetLayerWrap(this)
+    if ($layerWrap) {
+      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'
@@ -31,10 +29,18 @@ export default class Editor extends Component {
   public $submitBtn: HTMLButtonElement
   public $notifyWrap: HTMLElement
 
+  // Editor 的不同状态
+  private isTraveling = false
+
+  /** 回复评论 */
   private replyComment: CommentData|null = null
   private $sendReply: HTMLElement|null = null
+  public get isReplyMode() { return this.replyComment !== null }
 
-  private isTraveling = false
+  /** 编辑评论 */
+  private editComment: CommentData|null = null
+  private $editCancelBtn: HTMLElement|null = null
+  public get isEditMode() { return this.editComment !== null }
 
   /** 启用的插件 */
   private readonly ENABLED_PLUGS = [ EmoticonsPlug, UploadPlug, PreviewPlug, HeaderInputPlug ]
@@ -98,6 +104,8 @@ export default class Editor extends Component {
   }
 
   private onHeaderInput(key: string, $input: HTMLInputElement) {
+    if (this.isEditMode) return // 评论编辑模式，不修改个人信息
+
     this.user.update({
       [key]: $input.value.trim()
     })
@@ -128,8 +136,13 @@ export default class Editor extends Component {
     })
   }
 
+  private refreshSendBtnText() {
+    if (this.isEditMode) this.$submitBtn.innerText = this.$t('save')
+    else this.$submitBtn.innerText = this.ctx.conf.sendBtn || this.$t('send')
+  }
+
   private initSubmitBtn() {
-    this.$submitBtn.innerText = this.ctx.conf.sendBtn || this.$t('send')
+    this.refreshSendBtnText()
     this.$submitBtn.addEventListener('click', () => (this.submit()))
   }
 
@@ -186,21 +199,16 @@ export default class Editor extends Component {
     }
   }
 
-  public clearEditor() {
-    this.setContent('')
-    this.cancelReply()
-  }
-
   private adjustTextareaHeight() {
     const diff = this.$textarea.offsetHeight - this.$textarea.clientHeight
     this.$textarea.style.height = '0px' // it's a magic. 若不加此行，内容减少，高度回不去
     this.$textarea.style.height = `${this.$textarea.scrollHeight + diff}px`
   }
 
+  /** 设置回复评论 */
   public setReply(commentData: CommentData, $comment: HTMLElement, scroll = true) {
-    if (this.replyComment !== null) {
-      this.cancelReply()
-    }
+    if (this.isEditMode) this.cancelEditComment()
+    if (this.isReplyMode) this.cancelReply()
 
     if (this.$sendReply === null) {
       this.$sendReply = Utils.createElement(`<div class="atk-send-reply">${this.$t('reply')} <span class="atk-text"></span><span class="atk-cancel">×</span></div>`);
@@ -221,6 +229,7 @@ export default class Editor extends Component {
     this.$textarea.focus()
   }
 
+  /** 取消回复评论 */
   public cancelReply() {
     if (this.$sendReply !== null) {
       this.$sendReply.remove()
@@ -233,6 +242,53 @@ export default class Editor extends Component {
     }
   }
 
+  /** 设置编辑评论 */
+  public setEditComment(commentData: CommentData, $comment: HTMLElement) {
+    if (this.isEditMode) this.cancelEditComment()
+    if (this.isReplyMode) this.cancelReply()
+
+    if (this.$editCancelBtn === null) {
+      this.$editCancelBtn = Utils.createElement(`<div class="atk-send-reply">${this.$t('editCancel')}<span class="atk-cancel">×</span></div>`);
+      this.$editCancelBtn.onclick = () => {
+        this.cancelEditComment()
+      }
+      this.$textareaWrap.append(this.$editCancelBtn)
+    }
+    this.editComment = commentData
+
+    this.$header.style.display = 'none' // TODO 暂时隐藏
+
+    this.travel($comment)
+
+    this.$nick.value = commentData.nick
+    this.$email.value = commentData.email || ''
+    this.$link.value = commentData.link
+
+    this.setContent(commentData.content)
+    this.$textarea.focus()
+
+    this.refreshSendBtnText()
+  }
+
+  /** 取消编辑评论 */
+  public cancelEditComment() {
+    if (this.$editCancelBtn !== null) {
+      this.$editCancelBtn.remove()
+      this.$editCancelBtn = null
+    }
+
+    this.editComment = null
+    this.travelBack()
+
+    this.$nick.value = this.user.data.nick
+    this.$email.value = this.user.data.email
+    this.$link.value = this.user.data.link
+
+    this.setContent('')
+    this.refreshSendBtnText()
+    this.$header.style.display = '' // TODO
+  }
+
   public showNotify(msg: string, type: "i"|"s"|"w"|"e") {
     Ui.showNotify(this.$notifyWrap, msg, type)
   }
@@ -245,7 +301,7 @@ export default class Editor extends Component {
     Ui.hideLoading(this.$el)
   }
 
-  /** 提交评论 */
+  /** 点击评论提交按钮事件 */
   public async submit() {
     if (this.getFinalContent().trim() === '') {
       this.$textarea.focus()
@@ -256,8 +312,19 @@ export default class Editor extends Component {
 
     this.showLoading()
 
+    if (!this.isEditMode) {
+      await this.submitAdd()
+    } else {
+      await this.submitEdit()
+    }
+
+    this.hideLoading()
+  }
+
+  /** 创建评论 */
+  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,
@@ -274,14 +341,40 @@ export default class Editor extends Component {
       }
 
       this.ctx.insertComment(nComment)
-      this.clearEditor() // 清空编辑器
+
+      // 复原编辑器
+      this.setContent('')
+      this.cancelReply()
+
+      this.ctx.trigger('editor-submitted')
+    } catch (err: any) {
+      console.error(err)
+      this.showNotify(`${this.$t('commentFail')}，${err.msg || String(err)}`, 'e')
+    }
+  }
+
+  /** 修改评论 */
+  public async submitEdit() {
+    try {
+      const saveData = {
+        content: this.getFinalContent(),
+        nick: this.$nick.value,
+        email: this.$email.value,
+        link: this.$link.value,
+      }
+      const nComment = await this.ctx.getApi().comment.commentEdit({
+        ...this.editComment, ...saveData
+      })
+      this.ctx.updateComment(nComment)
+
+      // 复原编辑器
+      this.setContent('')
+      this.cancelEditComment()
+
       this.ctx.trigger('editor-submitted')
     } catch (err: any) {
       console.error(err)
       this.showNotify(`${this.$t('commentFail')}，${err.msg || String(err)}`, 'e')
-      return
-    } finally {
-      this.hideLoading()
     }
   }
 

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/en.ts

@@ -3,6 +3,7 @@ export default {
   placeholder: 'Leave a comment',
   noComment: 'No Comment',
   send: 'Send',
+  save: 'Save',
   nick: 'Nickname',
   email: 'Email',
   link: 'Website',
@@ -42,6 +43,8 @@ export default {
   approved: 'Approved',
   pending: 'Pending',
   pendingMsg: 'Pending, visible only to commenter.',
+  edit: 'Edit',
+  editCancel: 'Cancel Edit',
   delete: 'Delete',
   deleteConfirm: 'Confirm',
   pin: 'Pin',