artalk 2.2.6 → 2.2.9

package/src/components/list-lite.ts

@@ -1,17 +1,20 @@
+import { ListData, CommentData, NotifyData, ApiVersionData } from '~/types/artalk-data'
 import Context from '../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 { ListData, CommentData, NotifyData, ApiVersionData } from '~/types/artalk-data'
 import Pagination from './pagination'
 import ReadMoreBtn from './read-more-btn'
+import * as ListNest from './list-nest'
 import { backendMinVersion } from '../../package.json'
 
 export default class ListLite extends Component {
   protected $commentsWrap: HTMLElement
-  protected comments: Comment[] = []
+
+  protected commentList: Comment[] = [] // Note: 无层级结构 + 无须排列
+  protected get commentDataList() { return this.commentList.map(c => c.data) }
 
   protected data?: ListData
   protected isLoading: boolean = false
@@ -21,6 +24,9 @@ export default class ListLite extends Component {
   /** 平铺模式 */
   public flatMode = false
 
+  /** 嵌套模式 */
+  public nestSortBy: ListNest.SortByType = 'DATE_DESC'
+
   /** 分页 */
   public pageMode: 'pagination'|'read-more' = 'pagination'
   public pageSize: number = 20 // 每次请求获取量
@@ -49,6 +55,9 @@ export default class ListLite extends Component {
     </div>`)
     this.$commentsWrap = this.$el.querySelector('.atk-list-comments-wrap')!
 
+    // 评论为空时显示字符
+    if (ctx.conf.noComment) this.noCommentText = ctx.conf.noComment
+
     // 评论时间自动更新
     window.setInterval(() => {
       this.$el.querySelectorAll<HTMLElement>('[data-atk-comment-date]').forEach(el => {
@@ -262,7 +271,7 @@ export default class ListLite extends Component {
   /** 刷新界面 */
   public refreshUI() {
     // 无评论
-    const isNoComment = this.comments.length <= 0
+    const isNoComment = this.commentList.length <= 0
     let $noComment = this.$commentsWrap.querySelector<HTMLElement>('.atk-list-no-comment')
 
     if (isNoComment) {
@@ -280,8 +289,11 @@ export default class ListLite extends Component {
   }
 
   /** 创建新评论 */
-  protected createComment(data: CommentData) {
-    const comment = new Comment(this.ctx, data)
+  protected createComment(cData: CommentData, ctxData?: CommentData[]) {
+    if (!ctxData) ctxData = this.commentDataList
+
+    const comment = new Comment(this.ctx, cData)
+    comment.flatMode = this.flatMode
     comment.afterRender = () => {
       if (this.renderComment) this.renderComment(comment)
     }
@@ -290,6 +302,9 @@ export default class ListLite extends Component {
       this.refreshUI()
     }
 
+    // 子评论查找回复对象
+    comment.replyTo = (cData.rid ? ctxData.find(c => c.id === cData.rid) : undefined)
+
     return comment
   }
 
@@ -300,31 +315,16 @@ export default class ListLite extends Component {
         this.putCommentFlatMode(commentData, srcData, 'append')
       })
     } else {
-      this.importCommentsNesting(srcData)
+      this.importCommentsNest(srcData)
     }
   }
 
   // 导入评论 · 嵌套模式
-  private importCommentsNesting(srcData: CommentData[]) {
-    // 查找并导入所有子评论
-    const loadChildren = (parentC: Comment) => {
-      const children = srcData.filter(o => o.rid === parentC.data.id)
-      children.forEach((childData: CommentData) => {
-        const childC = this.createComment(childData)
-        childC.render()
-
-        // 插入到父评论中
-        parentC.putChild(childC)
-
-        // 递归加载子评论
-        loadChildren(childC)
-      })
-    }
-
+  private importCommentsNest(srcData: CommentData[]) {
     // 遍历 root 评论
-    const rootComments = srcData.filter((o) => o.rid === 0)
-    rootComments.forEach((rootData: CommentData) => {
-      const rootC = this.createComment(rootData)
+    const rootNodes = ListNest.makeNestCommentNodeList(srcData, this.nestSortBy, this.conf.nestMax)
+    rootNodes.forEach((rootNode: ListNest.CommentNode) => {
+      const rootC = this.createComment(rootNode.comment, srcData)
       rootC.render()
 
       // 显示并播放渐入动画
@@ -332,10 +332,25 @@ export default class ListLite extends Component {
       rootC.playFadeInAnim()
 
       // 评论放入 comments 总表中
-      this.comments.push(rootC)
+      this.commentList.push(rootC)
 
       // 加载子评论
-      loadChildren(rootC)
+      const that = this
+      ;(function loadChildren(parentC: Comment, parentNode: ListNest.CommentNode) {
+        parentNode.children.forEach((node: ListNest.CommentNode) => {
+          const childD = node.comment
+          const childC = that.createComment(childD, srcData)
+          childC.render()
+
+          // 插入到父评论中
+          parentC.putChild(childC)
+
+          that.commentList.push(childC)
+
+          // 递归加载子评论
+          loadChildren(childC, node)
+        })
+      })(rootC, rootNode)
 
       // 限高检测
       rootC.checkHeightLimit()
@@ -343,18 +358,13 @@ export default class ListLite extends Component {
   }
 
   /** 导入评论 · 平铺模式 */
-  private putCommentFlatMode(cData: CommentData, srcData: CommentData[], insertMode: 'append'|'prepend') {
+  private putCommentFlatMode(cData: CommentData, ctxData: CommentData[], insertMode: 'append'|'prepend') {
     if (cData.is_collapsed) cData.is_allow_reply = false
-    const comment = this.createComment(cData)
-    if (cData.rid !== 0) {
-      const rComment = srcData.find(o => o.id === cData.rid)
-      if (rComment) comment.replyTo = rComment
-    }
+    const comment = this.createComment(cData, ctxData)
     comment.render()
 
     // 将评论导入 comments 总表中
-    if (insertMode === 'append') this.comments.push(comment)
-    if (insertMode === 'prepend') this.comments.unshift(comment)
+    this.commentList.push(comment)
 
     // 可见评论添加到界面
     // 注：不可见评论用于显示 “引用内容”
@@ -375,17 +385,18 @@ export default class ListLite extends Component {
     if (!this.flatMode) {
       // 嵌套模式
       const comment = this.createComment(commentData)
-      comment.render()
 
       if (commentData.rid === 0) {
         // root评论 新增
+        comment.render()
         this.$commentsWrap.prepend(comment.getEl())
-        this.comments.unshift(comment)
+        this.commentList.push(comment)
       } else {
         // 子评论 新增
         const parent = this.findComment(commentData.rid)
         if (parent) {
-          parent.putChild(comment)
+          comment.render()
+          parent.putChild(comment, (this.nestSortBy === 'DATE_ASC' ? 'append' : 'prepend'))
 
           // 若父评论存在 “子评论部分” 限高，取消限高
           comment.getParents().forEach((p) => {
@@ -400,7 +411,7 @@ export default class ListLite extends Component {
       comment.playFadeInAnim() // 播放评论渐出动画
     } else {
       // 平铺模式
-      const comment = this.putCommentFlatMode(commentData, this.comments.map(c => c.data), 'prepend')
+      const comment = this.putCommentFlatMode(commentData, this.commentDataList, 'prepend')
       Ui.scrollIntoView(comment.getEl()) // 滚动到可见
     }
 
@@ -412,47 +423,22 @@ export default class ListLite extends Component {
     this.ctx.trigger('comments-loaded')
   }
 
-  /** 遍历操作 Comment (包括子评论) */
-  protected eachComment(commentList: Comment[], action: (comment: Comment, levelList: Comment[]) => boolean|void) {
-    if (commentList.length === 0) return
-    commentList.every((item) => {
-      if (action(item, commentList) === false) return false
-      this.eachComment(item.getChildren(), action)
-      return true
-    })
-  }
-
   /** 查找评论项 */
-  protected findComment(id: number, src?: Comment[]): Comment|null {
-    if (!src) src = this.comments
-    let comment: Comment|null = null
-    this.eachComment(src, (item) => {
-      if (item.data.id === id) {
-        comment = item
-        return false
-      }
-      return true
-    })
-
-    return comment
+  protected findComment(id: number): Comment|undefined {
+    return this.commentList.find(c => c.data.id === id)
   }
 
   /** 删除评论 */
-  public deleteComment(comment: number|Comment) {
-    let findComment: Comment|null
-    if (typeof comment === 'number') {
-      findComment = this.findComment(comment)
-      if (!findComment) throw Error(`未找到评论 ${comment}`)
-    } else findComment = comment
-
-    findComment.getEl().remove()
-    this.eachComment(this.comments, (item, levelList) => {
-      if (item === findComment) {
-        levelList.splice(levelList.indexOf(item), 1)
-        return false
-      }
-      return true
-    })
+  public deleteComment(_comment: number|Comment) {
+    let comment: Comment
+    if (typeof _comment === 'number') {
+      const findComment = this.findComment(_comment)
+      if (!findComment) throw Error(`未找到评论 ${_comment}`)
+      comment = findComment
+    } else comment = _comment
+
+    comment.getEl().remove()
+    this.commentList.splice(this.commentList.indexOf(comment), 1)
 
     if (this.data) this.data.total -= 1 // 评论数减 1
 
@@ -463,7 +449,7 @@ export default class ListLite extends Component {
   public clearAllComments() {
     this.$commentsWrap.innerHTML = ''
     this.data = undefined
-    this.comments = []
+    this.commentList = []
   }
 
   /** 更新未读数据 */
@@ -472,7 +458,7 @@ export default class ListLite extends Component {
 
     // 高亮评论
     if (this.unreadHighlight === true) {
-      this.eachComment(this.comments, (comment) => {
+      this.commentList.forEach((comment) => {
         const notify = this.unread.find(o => o.comment_id === comment.data.id)
         if (notify) {
           comment.setUnread(true)

package/src/components/list-nest.ts

@@ -0,0 +1,66 @@
+import { CommentData } from '~/types/artalk-data'
+
+export type CommentNode = {
+  id: number
+  comment: CommentData
+  children: CommentNode[]
+  parent?: CommentNode
+  level: number
+}
+
+export type SortByType = 'DATE_DESC'|'DATE_ASC'|'SRC_INDEX'|'VOTE_UP_DESC'
+
+// 构建树状结构列表
+export function makeNestCommentNodeList(srcData: CommentData[], sortBy: SortByType = 'DATE_DESC', nestMax = 2) {
+  const nodeList: CommentNode[] = []
+
+  const roots = srcData.filter((o) => o.rid === 0)
+  roots.forEach((root: CommentData) => {
+    const rootNode: CommentNode = {
+      id: root.id,
+      comment: root,
+      children: [],
+      level: 1,
+    }
+
+    rootNode.parent = rootNode
+    nodeList.push(rootNode)
+
+    ;(function loadChildren(parentNode: CommentNode) {
+      const children = srcData.filter((o) => o.rid === parentNode.id)
+      if (children.length === 0) return
+      if (parentNode.level >= nestMax) parentNode = parentNode.parent!
+      children.forEach((child: CommentData) => {
+        const childNode: CommentNode = {
+          id: child.id,
+          comment: child,
+          children: [],
+          parent: parentNode,
+          level: parentNode.level + 1,
+        }
+
+        parentNode.children.push(childNode)
+        loadChildren(childNode)
+      })
+    })(rootNode)
+  })
+
+  // 排序
+  const sortFunc = (a: CommentNode, b: CommentNode): number => {
+    let v = a.id - b.id
+    if (sortBy === 'DATE_ASC') v = +new Date(a.comment.date) - +new Date(b.comment.date)
+    else if (sortBy === 'DATE_DESC') v = +new Date(b.comment.date) - +new Date(a.comment.date)
+    else if (sortBy === 'SRC_INDEX') v = srcData.indexOf(a.comment) - srcData.indexOf(b.comment)
+    else if (sortBy === 'VOTE_UP_DESC') v = b.comment.vote_up - a.comment.vote_up
+    return v
+  }
+
+  (function sortLevels(nodes: CommentNode[]) {
+    nodes.forEach((node) => {
+      node.children = node.children.sort(sortFunc)
+      sortLevels(node.children)
+    })
+  })(nodeList)
+
+  return nodeList
+}

package/src/components/list.ts

@@ -1,12 +1,12 @@
 import '../style/list.less'
 
+import { ListData } from '~/types/artalk-data'
 import Context from '../context'
 import * as Utils from '../lib/utils'
 import * as Ui from '../lib/ui'
 import Api from '../api'
 import ListHTML from './html/list.html?raw'
 import ListLite from './list-lite'
-import { ListData } from '~/types/artalk-data'
 
 export default class List extends ListLite {
   private $closeCommentBtn!: HTMLElement
@@ -112,11 +112,19 @@ export default class List extends ListLite {
     super.onLoad(data, offset)
 
     // 检测锚点跳转
-    this.checkGoToCommentByUrlHash()
+    if (!this.goToCommentFounded) this.checkGoToCommentByUrlHash()
+
+    // 防止评论框被吞
+    if (this.ctx.conf.editorTravel === true) {
+      this.ctx.trigger('editor-travel-back')
+    }
   }
 
+  private goToCommentFounded = false
+  public goToCommentDelay = true
+
   /** 跳到评论项位置 - 根据 `location.hash` */
-  public async checkGoToCommentByUrlHash () {
+  public checkGoToCommentByUrlHash() {
     let commentId = Number(Utils.getQueryParam('atk_comment')) // same as backend GetReplyLink()
     if (!commentId) {
       const match = window.location.hash.match(/#atk-comment-([0-9]+)/)
@@ -125,6 +133,14 @@ export default class List extends ListLite {
     }
     if (!commentId) return
 
+    const comment = this.findComment(commentId)
+    if (!comment) { // 若找不到评论
+      // 自动翻页
+      if (this.readMoreBtn) this.readMoreBtn.click()
+      else if (this.pagination) this.pagination.next()
+      return
+    }
+
     // 已阅 API
     const notifyKey = Utils.getQueryParam('atk_notify_key')
     if (notifyKey) {
@@ -137,20 +153,24 @@ export default class List extends ListLite {
         })
     }
 
-    const comment = this.findComment(commentId)
-    // TODO 若找不到评论的情况
-    // if (!comment) { // 若找不到评论
-    //   if (this.hasMoreComments) { // 阅读更多，并重试
-    //     await this.fetchComments()
-    //   }
-    // }
-
-    if (!comment) return
-
-    Ui.scrollIntoView(comment.getEl(), false)
-    window.setTimeout(() => {
-      comment.getEl().classList.add('atk-flash-once')
-    }, 800)
+    // 若父评论存在 “子评论部分” 限高，取消限高
+    comment.getParents().forEach((p) => {
+      if (p.$children) p.heightLimitRemove(p.$children)
+    })
+
+    const goTo = () => {
+      Ui.scrollIntoView(comment.getEl(), false)
+
+      comment.getEl().classList.remove('atk-flash-once')
+      window.setTimeout(() => {
+        comment.getEl().classList.add('atk-flash-once')
+      }, 150)
+    }
+
+    if (!this.goToCommentDelay) goTo()
+    else window.setTimeout(() => goTo(), 350)
+
+    this.goToCommentFounded = true
   }
 
   /** 管理员设置页面信息 */

package/src/components/pagination.ts

@@ -38,7 +38,7 @@ export default class Pagination {
       `<div class="atk-pagination-wrap">
         <div class="atk-pagination">
           <div class="atk-btn atk-btn-prev">Prev</div>
-          <input type="text" class="atk-input" />
+          <input type="text" class="atk-input" aria-label="Enter the number of page" />
           <div class="atk-btn atk-btn-next">Next</div>
         </div>
       </div>`)

package/src/components/sidebar-layer.ts

@@ -3,11 +3,11 @@ import '../style/sidebar-layer.less'
 import Context from '@/context'
 import Component from '@/lib/component'
 import * as Utils from '@/lib/utils'
-import SidebarHTML from './html/sidebar-layer.html?raw'
 import * as Ui from '@/lib/ui'
+import { SidebarShowPayload } from '~/types/event'
+import SidebarHTML from './html/sidebar-layer.html?raw'
 import Layer from './layer'
 import Api from '../api'
-import { SidebarShowPayload } from '~/types/event'
 
 export default class SidebarLayer extends Component {
   public layer?: Layer

package/src/context.ts

@@ -1,7 +1,7 @@
 import { marked as libMarked } from 'marked'
-import User from './lib/user'
 import ArtalkConfig from '~/types/artalk-config'
 import { EventPayloadMap, Event, EventScopeType, Handler } from '~/types/event'
+import User from './lib/user'
 
 /**
  * Artalk Context

package/src/defaults.ts

@@ -20,7 +20,8 @@ const defaults: ArtalkConfig = {
   listSort: true,
   pvEl: '#ArtalkPV',
   flatMode: 'auto',
-  maxNesting: 3,
+  nestMax: 3,
+
   gravatar: {
     default: 'mp',
     mirror: 'https://sdn.geekzu.org/avatar/',
@@ -40,6 +41,7 @@ const defaults: ArtalkConfig = {
   imgUpload: true,
   reqTimeout: 15000,
   versionCheck: true,
+  useBackendConf: false,
 }
 
 export default defaults

package/src/lib/checker/index.ts

@@ -1,9 +1,9 @@
 import Context from '@/context'
 import Layer from '@/components/layer'
 import Dialog from '@/components/dialog'
+import { CheckerPayload } from '~/types/event'
 import * as Utils from '../utils'
 import * as Ui from '../ui'
-import { CheckerPayload } from '~/types/event'
 import CaptchaChecker from './captcha-checker'
 import AdminChecker from './admin-checker'
 

package/src/lib/utils.ts

@@ -293,3 +293,33 @@ export function getURLBasedOnApi(ctx: Context, path: string) {
 export function getURLBasedOn(baseURL: string, path: string) {
   return `${baseURL.replace(/\/$/, '')}/${path.replace(/^\//, '')}`
 }
+
+/**
+ * Performs a deep merge of `source` into `target`.
+ * Mutates `target` only but not its objects and arrays.
+ *
+ * @author inspired by [jhildenbiddle](https://stackoverflow.com/a/48218209).
+ * @link https://gist.github.com/ahtcx/0cd94e62691f539160b32ecda18af3d6
+ */
+export function mergeDeep(target: any, source: any) {
+  const isObject = (obj: any) => obj && typeof obj === 'object'
+
+  if (!isObject(target) || !isObject(source)) {
+    return source
+  }
+
+  Object.keys(source).forEach(key => {
+    const targetValue = target[key]
+    const sourceValue = source[key]
+
+    if (Array.isArray(targetValue) && Array.isArray(sourceValue)) {
+      target[key] = targetValue.concat(sourceValue)
+    } else if (isObject(targetValue) && isObject(sourceValue)) {
+      target[key] = mergeDeep({ ...targetValue}, sourceValue)
+    } else {
+      target[key] = sourceValue
+    }
+  })
+
+  return target
+}

package/src/style/_color.less

@@ -2,8 +2,8 @@
   --at-color-font: #2a2e2e;
   --at-color-deep: #2a2e2e;
   --at-color-sub: #757575;
-  --at-color-grey: #999;
-  --at-color-meta: #757e91;
+  --at-color-grey: #747474;
+  --at-color-meta: #697182;
   --at-color-border: #eceff2;
   --at-color-light: #4285f4;
   --at-color-bg: #FFF;

package/src/style/comment.less

@@ -83,6 +83,27 @@
           color: var(--at-color-main);
           text-decoration: none;
         }
+
+        &.atk-reply-at {
+          margin-left: 2px;
+
+          & > .atk-arrow:before {
+            content: '';
+            vertical-align: middle;
+            transform: rotate(90deg);
+            border-bottom: 4px solid var(--at-color-grey);
+            border-left: 3px solid transparent;
+            border-right: 3px solid transparent;
+            display: inline-block;
+            margin-top: -1px;
+          }
+
+          & > .atk-nick {
+            color: var(--at-color-main);
+            cursor: pointer;
+            margin-left: 6px;
+          }
+        }
       }
 
       .badge() {

package/types/artalk-config.d.ts

@@ -74,8 +74,8 @@ export default interface ArtalkConfig {
   /** 平铺模式 */
   flatMode?: boolean|'auto'
 
-  /** 最大嵌套数 */
-  maxNesting?: number
+  /** 嵌套模式 · 最大层数 */
+  nestMax?: number
 
   /** 显示 UA 徽标 */
   uaBadge?: boolean
@@ -88,6 +88,9 @@ export default interface ArtalkConfig {
 
   /** 版本检测 */
   versionCheck?: boolean
+
+  /** 复用后端配置 */
+  useBackendConf?: boolean
 }
 
 export interface LocalUser {