artalk 2.2.7 → 2.2.10

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

@@ -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/defaults.ts

@@ -20,7 +20,8 @@ const defaults: ArtalkConfig = {
   listSort: true,
   pvEl: '#ArtalkPV',
   flatMode: 'auto',
-  maxNesting: 3,
+  nestMax: 2,
+
   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/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 {