artalk 2.1.0 → 2.1.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "artalk",
-  "version": "2.1.0",
+  "version": "2.1.4",
   "description": "A Selfhosted Comment System",
   "keywords": [
     "comment-system",
@@ -38,29 +38,27 @@
     "lint": "eslint --ext .js,.ts src"
   },
   "devDependencies": {
-    "@rollup/plugin-dynamic-import-vars": "^1.4.0",
-    "@types/marked": "0.6.5",
-    "@types/node": "^16.7.5",
-    "@typescript-eslint/eslint-plugin": "^4.29.3",
-    "@typescript-eslint/parser": "^4.31.1",
-    "autoprefixer": "^10.3.3",
-    "eslint": "7.2.0",
-    "eslint-config-airbnb": "18.2.1",
-    "eslint-config-airbnb-typescript": "^14.0.0",
+    "@rollup/plugin-dynamic-import-vars": "^1.4.1",
+    "@types/marked": "^4.0.1",
+    "@types/node": "^16.11.7",
+    "@typescript-eslint/eslint-plugin": "^5.4.0",
+    "@typescript-eslint/parser": "^5.4.0",
+    "autoprefixer": "^10.4.0",
+    "eslint": "^8.2.0",
+    "eslint-config-airbnb-base": "15.0.0",
+    "eslint-config-airbnb-typescript": "^16.0.0",
     "eslint-config-prettier": "^8.3.0",
-    "eslint-import-resolver-typescript": "^2.4.0",
-    "eslint-plugin-import": "2.22.1",
-    "eslint-plugin-jsx-a11y": "^6.4.1",
-    "eslint-plugin-react": "^7.25.1",
-    "eslint-plugin-react-hooks": "^4.2.0",
-    "less": "^4.1.1",
-    "prettier": "^2.3.2",
-    "typescript": "4.3.2",
-    "vite": "^2.5.1",
-    "vite-tsconfig-paths": "^3.3.14"
+    "eslint-import-resolver-typescript": "^2.5.0",
+    "eslint-plugin-import": "^2.25.2",
+    "less": "^4.1.2",
+    "prettier": "^2.4.1",
+    "typescript": "^4.5.2",
+    "vite": "^2.6.14",
+    "vite-tsconfig-paths": "^3.3.17"
   },
   "dependencies": {
     "hanabi": "^0.4.0",
-    "marked": "0.7.0"
+    "insane": "^2.6.2",
+    "marked": "^4.0.3"
   }
 }

package/src/api/index.ts

@@ -16,15 +16,14 @@ export default class Api {
   // ============================
 
   /** 评论 · 获取 */
-  public get(offset: number, type?: string, flatMode?: boolean, paramsEditor?: (params: any) => void) {
+  public get(offset: number, pageSize: number, flatMode?: boolean, paramsEditor?: (params: any) => void) {
     const params: any = {
       page_key: this.ctx.conf.pageKey,
       site_name: this.ctx.conf.site || '',
-      limit: this.ctx.conf.pagination?.pageSize || 15,
+      limit: pageSize,
       offset,
     }
 
-    if (type) params.type = type
     if (flatMode) params.flat_mode = flatMode // 平铺模式
     if (this.ctx.user.checkHasBasicUserInfo()) {
       params.name = this.ctx.user.data.nick
@@ -37,18 +36,18 @@ export default class Api {
   }
 
   /** 评论 · 创建 */
-  public async add(comment: { nick: string, email: string, link: string, content: string, rid: number }) {
+  public async add(comment: { nick: string, email: string, link: string, content: string, rid: number, page_key: string, page_title?: string, site_name?: string }) {
     const params: any = {
       name: comment.nick,
       email: comment.email,
       link: comment.link,
       content: comment.content,
       rid: comment.rid,
-      page_key: this.ctx.conf.pageKey,
-      page_title: this.ctx.conf.pageTitle || '',
+      page_key: comment.page_key,
     }
 
-    if (this.ctx.conf.site) params.site_name = this.ctx.conf.site
+    if (comment.page_title) params.page_title = comment.page_title
+    if (comment.site_name) params.site_name = comment.site_name
 
     const data = await POST<any>(this.ctx, `${this.baseURL}/add`, params)
     return (data.comment as CommentData)

package/src/artalk.ts

@@ -2,7 +2,7 @@ import './style/main.less'
 
 import Context from './context'
 import ArtalkConfig from '~/types/artalk-config'
-import defaultConf from './default-conf'
+import defaults from './defaults'
 
 import CheckerLauncher from './lib/checker'
 import Editor from './components/editor'
@@ -17,6 +17,8 @@ import { EventPayloadMap, Handler } from '~/types/event'
  * @link https://artalk.js.org
  */
 export default class Artalk {
+  public static readonly defaults: ArtalkConfig = defaults
+
   public ctx: Context
   public conf: ArtalkConfig
   public $root: HTMLElement
@@ -28,12 +30,12 @@ export default class Artalk {
 
   constructor (customConf: ArtalkConfig) {
     // 配置
-    this.conf = { ...defaultConf, ...customConf }
+    this.conf = { ...Artalk.defaults, ...customConf }
     this.conf.server = this.conf.server.replace(/\/$/, '')
 
     // 默认 pageKey
     if (!this.conf.pageKey) {
-      this.conf.pageKey = `${window.location.protocol}//'${window.location.host}/${window.location.pathname}`
+      this.conf.pageKey = `${window.location.protocol}//${window.location.host}${window.location.pathname}`
     }
 
     // 装载元素
@@ -70,7 +72,7 @@ export default class Artalk {
     this.$root.appendChild(this.sidebar.$el)
 
     // 评论获取
-    this.list.reqComments()
+    this.list.fetchComments(0)
 
     // 事件绑定初始化
     this.initEventBind()
@@ -109,6 +111,11 @@ export default class Artalk {
     })
   }
 
+  /** 重新加载 */
+  public reload() {
+    this.list.fetchComments(0)
+  }
+
   /** 暗黑模式 · 初始化 */
   public initDarkMode() {
     const darkModeClassName = 'atk-dark-mode'

package/src/components/action-btn.ts

@@ -102,7 +102,7 @@ export default class ActionBtn {
   }
 
   /** 设置加载状态 */
-  public setLoading(value = true, loadingText?: string) {
+  public setLoading(value: boolean, loadingText?: string) {
     if (this.isLoading === value) return
     this.isLoading = value
     if (value) {

package/src/components/comment.ts

@@ -37,6 +37,8 @@ export default class Comment extends Component {
   private openURL?: string
   public openEvt?: () => void
 
+  public onReplyBtnClick?: Function
+
   constructor(ctx: Context, data: CommentData) {
     super(ctx)
 
@@ -53,11 +55,11 @@ export default class Comment extends Component {
   /** 渲染 UI */
   public render() {
     this.$el = Utils.createElement(CommentHTML)
-    this.$main = this.$el.querySelector('.atk-comment-main')!
+    this.$main = this.$el.querySelector('.atk-main')!
     this.$header = this.$el.querySelector('.atk-header')!
     this.$body = this.$el.querySelector('.atk-body')!
     this.$content = this.$body.querySelector('.atk-content')!
-    this.$actions = this.$el.querySelector('.atk-comment-actions')!
+    this.$actions = this.$el.querySelector('.atk-actions')!
     this.$children = null
 
     this.$el.setAttribute('data-comment-id', `${this.data.id}`)
@@ -105,7 +107,7 @@ export default class Comment extends Component {
     const $avatarImg = Utils.createElement<HTMLImageElement>('<img />')
     $avatarImg.src = this.getGravatarUrl()
     if (this.data.link) {
-      const $avatarA = Utils.createElement<HTMLLinkElement>('<a target="_blank"></a>')
+      const $avatarA = Utils.createElement<HTMLLinkElement>('<a target="_blank" rel="noreferrer noopener nofollow"></a>')
       $avatarA.href = this.data.link
       $avatarA.append($avatarImg)
       $avatar.append($avatarA)
@@ -117,7 +119,7 @@ export default class Comment extends Component {
   private renderHeader() {
     const $nick = this.$el.querySelector<HTMLElement>('.atk-nick')!
     if (this.data.link) {
-      const $nickA = Utils.createElement<HTMLLinkElement>('<a target="_blank"></a>')
+      const $nickA = Utils.createElement<HTMLLinkElement>('<a target="_blank" rel="noreferrer noopener nofollow"></a>')
       $nickA.innerText = this.data.nick
       $nickA.href = this.data.link
       $nick.append($nickA)
@@ -227,11 +229,15 @@ export default class Comment extends Component {
 
     // 绑定回复按钮事件
     if (this.data.is_allow_reply) {
-      const replyBtn = Utils.createElement(`<span data-atk-action="comment-reply">回复</span>`)
+      const replyBtn = Utils.createElement(`<span>回复</span>`)
       this.$actions.append(replyBtn)
       replyBtn.addEventListener('click', (e) => {
         e.stopPropagation() // 防止穿透
-        this.ctx.trigger('editor-reply', this.data)
+        if (!this.onReplyBtnClick) {
+          this.ctx.trigger('editor-reply', {data: this.data, $el: this.$el})
+        } else {
+          this.onReplyBtnClick()
+        }
       })
     }
 
@@ -310,6 +316,9 @@ export default class Comment extends Component {
 
     this.getChildrenEl().appendChild(childC.getEl())
     childC.playFadeInAnim()
+
+    // 内容限高
+    childC.checkHeightLimitArea('content')
   }
 
   getChildrenEl() {
@@ -330,6 +339,19 @@ export default class Comment extends Component {
     return this.parent
   }
 
+  getParents() {
+    const parents: Comment[] = []
+    const once = (c: Comment) => {
+      if (c.parent) {
+        parents.push(c.parent)
+        once(c.parent)
+      }
+    }
+
+    once(this)
+    return parents
+  }
+
   getEl() {
     return this.$el
   }
@@ -447,32 +469,85 @@ export default class Comment extends Component {
     this.$el.classList.add('atk-openable')
   }
 
-  /** 内容过多，折叠显示 */
-  public checkMoreHide($target: HTMLElement|null, allowHeight = 300) {
-    if (!$target) return
+  /** 内容限高检测 */
+  checkHeightLimit() {
+    this.checkHeightLimitArea('content') // 评论内容限高
+    this.checkHeightLimitArea('children') // 子评论部分限高（嵌套模式）
+  }
+
+  /** 目标内容限高检测 */
+  checkHeightLimitArea(area: 'children'|'content') {
+    // 参数准备
+    const childrenMaxH = this.ctx.conf.heightLimit?.children
+    const contentMaxH = this.ctx.conf.heightLimit?.content
+
+    if (area === 'children' && !childrenMaxH) return
+    if (area === 'content' && !contentMaxH) return
+
+    // 限高
+    let maxHeight: number
+    if (area === 'children') maxHeight = childrenMaxH!
+    if (area === 'content') maxHeight = contentMaxH!
 
-    let $hideMoreOpenBtn = $target?.querySelector<HTMLElement>('.atk-more-hide-open-btn')
+    // 检测指定元素
+    const checkEl = ($el?: HTMLElement|null) => {
+      if (!$el) return
 
-    const removeHideMore = () => {
-      $target.classList.remove('atk-comment-more-hide')
-      if ($hideMoreOpenBtn) $hideMoreOpenBtn.remove()
-      $target.style.height = ''
-      $target.style.overflow = ''
+      // 是否超过高度
+      if (Utils.getHeight($el) > maxHeight) {
+        this.heightLimitAdd($el, maxHeight)
+      }
     }
 
-    if (Utils.getHeight($target) > allowHeight) {
-      //console.log('内容过多，需要折叠', $target)
-      $target.classList.add('atk-comment-more-hide')
-      $target.style.height = `${allowHeight}px`
-      $target.style.overflow = 'hidden'
-      if (!$hideMoreOpenBtn) {
-        $hideMoreOpenBtn = Utils.createElement(`<div class="atk-more-hide-open-btn">阅读更多</span>`)
-        $hideMoreOpenBtn.onclick = (e) => {
-          e.stopPropagation()
-          removeHideMore()
-        }
-        $target.append($hideMoreOpenBtn)
+    // 执行限高检测
+    if (area === 'children') {
+      checkEl(this.$children)
+    } else if (area === 'content') {
+      checkEl(this.$content)
+      checkEl(this.$replyTo)
+
+      // 若有图片 · 图片加载完后再检测一次
+      Utils.onImagesLoaded(this.$content, () => {
+        checkEl(this.$content)
+      })
+      if (this.$replyTo) {
+        Utils.onImagesLoaded(this.$replyTo, () => {
+          checkEl(this.$replyTo)
+        })
       }
     }
   }
+
+  // 操作 · 取消限高
+  heightLimitRemove($el: HTMLElement) {
+    if (!$el) return
+    if (!$el.classList.contains('atk-height-limit')) return
+
+    $el.classList.remove('atk-height-limit')
+    Array.from($el.children).forEach((e) => {
+      if (e.classList.contains('atk-height-limit-btn')) e.remove()
+    })
+    $el.style.height = ''
+    $el.style.overflow = ''
+  }
+
+  // 操作 · 内容限高
+  heightLimitAdd($el: HTMLElement, maxHeight: number) {
+    if (!$el) return
+    if ($el.classList.contains('atk-height-limit')) return
+
+    $el.classList.add('atk-height-limit')
+    $el.style.height = `${maxHeight}px`
+    $el.style.overflow = 'hidden'
+    const $hideMoreOpenBtn = Utils.createElement(`<div class="atk-height-limit-btn">阅读更多</span>`)
+    $hideMoreOpenBtn.onclick = (e) => {
+      e.stopPropagation()
+      this.heightLimitRemove($el)
+
+      // 子评论数等于 1，直接取消限高
+      const children = this.getChildren()
+      if (children.length === 1) children[0].heightLimitRemove(children[0].$content)
+    }
+    $el.append($hideMoreOpenBtn)
+  }
 }

package/src/components/editor-plugs/_example-plug.ts.txt

@@ -16,13 +16,8 @@ export default class PreviewPlug extends ArtalkContext {
     this.elem = Utils.createElement('<div class="atk-editor-plug-example"></div>')
   }
 
-  getName () {
-    return 'example'
-  }
-
-  getBtnHtml () {
-    return '栗子'
-  }
+  static Name = 'example'
+  static BtnHTML = '栗子'
 
   getEl () {
     return this.elem

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

@@ -11,10 +11,10 @@ export default abstract class EditorPlug {
     this.ctx = editor.ctx
   }
 
-  public abstract initEl(): void
+  public static Name: string
+  public static BtnHTML: string
+
   public abstract getEl(): HTMLElement
-  public abstract getName(): string
-  public abstract getBtnHtml(): string
   public abstract onShow(): void
   public abstract onHide(): void
 }

package/src/components/editor-plugs/emoticons-plug.less

@@ -2,44 +2,55 @@
   height: 100%;
   width: 100%;
 
-  .atk-emoticons-list-wrap {
+  & > .atk-grp-wrap {
     .atk-slim-scrollbar();
     overflow-y: scroll;
     overflow-x: hidden;
     height: 100%; // calc(100% - 30px);
     width: 100%;
 
-    .atk-emoticons-list {
+    & > .atk-grp {
+      display: flex;
+      flex-wrap: wrap;
+      flex-direction: row;
       padding: 5px 10px 35px 10px;
 
-      .atk-emoticons-item {
-        display: inline-block;
+      &[data-type="image"] > .atk-item {
+        height: 63px;
+        width: 63px;
+      }
+
+      & > .atk-item {
+        display: flex;
+        align-items: center;
+        justify-content: center;
         padding: 5px;
         cursor: pointer;
         user-select: none;
         border-radius: 2px;
         font-size: 16px;
+        min-width: 35px;
 
         & > img {
-          max-height: 60px;
+          max-height: 100%;
           width: auto;
         }
 
         &:hover {
-          background: @color-bg-grey;
+          background: var(--at-color-bg-grey);
         }
       }
     }
   }
 
-  .atk-emoticons-types {
+  & > .atk-grp-switcher {
     position: absolute;
     bottom: 0;
     left: 0;
     width: 100%;
-    background: @color-bg-transl;
+    background: var(--at-color-bg-transl);
     height: 30px;
-    border-top: 1px solid @color-border;
+    border-top: 1px solid var(--at-color-border);
 
     & > span {
       user-select: none;
@@ -52,9 +63,8 @@
 
       &:hover,
       &.active {
-        background: @color-bg-grey;
+        background: var(--at-color-bg-grey);
       }
     }
   }
-
 }