artalk 2.1.3 → 2.1.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "artalk",
-  "version": "2.1.3",
+  "version": "2.1.4",
   "description": "A Selfhosted Comment System",
   "keywords": [
     "comment-system",
@@ -44,15 +44,12 @@
     "@typescript-eslint/eslint-plugin": "^5.4.0",
     "@typescript-eslint/parser": "^5.4.0",
     "autoprefixer": "^10.4.0",
-    "eslint": "7.2.0",
-    "eslint-config-airbnb": "18.2.1",
-    "eslint-config-airbnb-typescript": "^14.0.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",
+    "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",

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

package/src/artalk.ts

@@ -72,7 +72,7 @@ export default class Artalk {
     this.$root.appendChild(this.sidebar.$el)
 
     // 评论获取
-    this.list.reqComments()
+    this.list.fetchComments(0)
 
     // 事件绑定初始化
     this.initEventBind()
@@ -113,7 +113,7 @@ export default class Artalk {
 
   /** 重新加载 */
   public reload() {
-    this.list.reqComments()
+    this.list.fetchComments(0)
   }
 
   /** 暗黑模式 · 初始化 */

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

@@ -55,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}`)
@@ -229,7 +229,7 @@ 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() // 防止穿透
@@ -316,6 +316,9 @@ export default class Comment extends Component {
 
     this.getChildrenEl().appendChild(childC.getEl())
     childC.playFadeInAnim()
+
+    // 内容限高
+    childC.checkHeightLimitArea('content')
   }
 
   getChildrenEl() {
@@ -465,4 +468,86 @@ export default class Comment extends Component {
     this.openURL = url
     this.$el.classList.add('atk-openable')
   }
+
+  /** 内容限高检测 */
+  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!
+
+    // 检测指定元素
+    const checkEl = ($el?: HTMLElement|null) => {
+      if (!$el) return
+
+      // 是否超过高度
+      if (Utils.getHeight($el) > maxHeight) {
+        this.heightLimitAdd($el, maxHeight)
+      }
+    }
+
+    // 执行限高检测
+    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/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);
       }
     }
   }
-
 }

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

@@ -17,8 +17,8 @@ export default class EmoticonsPlug extends EditorPlug {
   public $el!: HTMLElement
   public emoticons: EmoticonListData = []
 
-  public $listWrap!: HTMLElement
-  public $types!: HTMLElement
+  public $grpWrap!: HTMLElement
+  public $grpSwitcher!: HTMLElement
 
   constructor (public editor: Editor) {
     super(editor)
@@ -162,18 +162,18 @@ export default class EmoticonsPlug extends EditorPlug {
   /** 初始化表情列表界面 */
   initEmoticonsList () {
     // 表情列表
-    this.$listWrap = Utils.createElement(`<div class="atk-emoticons-list-wrap"></div>`)
-    this.$el.append(this.$listWrap)
+    this.$grpWrap = Utils.createElement(`<div class="atk-grp-wrap"></div>`)
+    this.$el.append(this.$grpWrap)
 
     this.emoticons.forEach((grp, index) => {
-      const emoticonsEl = Utils.createElement(`<div class="atk-emoticons-list" style="display: none;"></div>`)
-      this.$listWrap.append(emoticonsEl)
-      emoticonsEl.setAttribute('data-index', String(index))
-      emoticonsEl.setAttribute('data-grp-name', grp.name)
-      emoticonsEl.setAttribute('data-type', grp.type)
+      const $grp = Utils.createElement(`<div class="atk-grp" style="display: none;"></div>`)
+      this.$grpWrap.append($grp)
+      $grp.setAttribute('data-index', String(index))
+      $grp.setAttribute('data-grp-name', grp.name)
+      $grp.setAttribute('data-type', grp.type)
       grp.items.forEach((item) => {
-        const $item = Utils.createElement(`<span class="atk-emoticons-item"></span>`)
-        emoticonsEl.append($item)
+        const $item = Utils.createElement(`<span class="atk-item"></span>`)
+        $grp.append($item)
 
         if (!!item.key && !(new RegExp(`^(${grp.name})?\\s?[0-9]+$`).test(item.key)))
           $item.setAttribute('title', item.key)
@@ -198,14 +198,14 @@ export default class EmoticonsPlug extends EditorPlug {
     })
 
     // 表情分类
-    this.$types = Utils.createElement(`<div class="atk-emoticons-types"></div>`)
-    this.$el.append(this.$types)
+    this.$grpSwitcher = Utils.createElement(`<div class="atk-grp-switcher"></div>`)
+    this.$el.append(this.$grpSwitcher)
     this.emoticons.forEach((grp, index) => {
       const $item = Utils.createElement('<span />')
       $item.innerText = grp.name
       $item.setAttribute('data-index', String(index))
       $item.onclick = () => (this.openGrp(index))
-      this.$types.append($item)
+      this.$grpSwitcher.append($item)
     })
 
     // 默认打开第一个分类
@@ -215,7 +215,7 @@ export default class EmoticonsPlug extends EditorPlug {
 
   /** 打开一个表情组 */
   openGrp (index: number) {
-    Array.from(this.$listWrap.children).forEach((item) => {
+    Array.from(this.$grpWrap.children).forEach((item) => {
       const el = item as HTMLElement
       if (el.getAttribute('data-index') !== String(index)) {
         el.style.display = 'none'
@@ -224,8 +224,8 @@ export default class EmoticonsPlug extends EditorPlug {
       }
     })
 
-    this.$types.querySelectorAll('span.active').forEach(item => item.classList.remove('active'))
-    this.$types.querySelector(`span[data-index="${index}"]`)?.classList.add('active')
+    this.$grpSwitcher.querySelectorAll('span.active').forEach(item => item.classList.remove('active'))
+    this.$grpSwitcher.querySelector(`span[data-index="${index}"]`)?.classList.add('active')
 
     this.changeListHeight()
   }
@@ -238,7 +238,7 @@ export default class EmoticonsPlug extends EditorPlug {
   }
 
   changeListHeight () {
-    /* const listWrapHeight = Utils.getHeight(this.$listWrapem)
+    /* const listWrapHeight = Utils.getHeight(this.$grpWrapem)
     this.editor.plugWrapEl.style.height = `${listWrapHeight > 150 ? listWrapHeight : 150}px` */
   }
 

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

@@ -3,5 +3,5 @@
   overflow-x: hidden;
   height: 100%;
   width: 100%;
-  padding: @block-padding 10px + 5px;
+  padding: 10px (10px + 5px);
 }

package/src/components/editor.ts

@@ -18,12 +18,9 @@ export default class Editor extends Component {
   public $header: HTMLElement
   public $textareaWrap: HTMLElement
   public $textarea: HTMLTextAreaElement
-  public $closeComment: HTMLTextAreaElement
   public $plugWrap: HTMLElement
   public $bottom: HTMLElement
-  public $bottomPartLeft: HTMLElement
-  public $plugSwitcherWrap: HTMLElement
-  public $bottomPartRight: HTMLElement
+  public $plugBtnWrap: HTMLElement
   public $submitBtn: HTMLButtonElement
   public $notifyWrap: HTMLElement
 
@@ -41,17 +38,14 @@ export default class Editor extends Component {
 
     this.$el = Utils.createElement(EditorHTML)
 
-    this.$header = this.$el.querySelector('.atk-editor-header')!
-    this.$textareaWrap = this.$el.querySelector('.atk-editor-textarea-wrap')!
-    this.$textarea = this.$el.querySelector('.atk-editor-textarea')!
-    this.$closeComment = this.$el.querySelector('.atk-close-comment')!
-    this.$plugWrap = this.$el.querySelector('.atk-editor-plug-wrap')!
-    this.$bottom = this.$el.querySelector('.atk-editor-bottom')!
-    this.$bottomPartLeft = this.$el.querySelector('.atk-editor-bottom-part.atk-left')!
-    this.$plugSwitcherWrap = this.$el.querySelector('.atk-editor-plug-switcher-wrap')!
-    this.$bottomPartRight = this.$el.querySelector('.atk-editor-bottom-part.atk-right')!
+    this.$header = this.$el.querySelector('.atk-header')!
+    this.$textareaWrap = this.$el.querySelector('.atk-textarea-wrap')!
+    this.$textarea = this.$el.querySelector('.atk-textarea')!
+    this.$plugWrap = this.$el.querySelector('.atk-plug-wrap')!
+    this.$bottom = this.$el.querySelector('.atk-bottom')!
+    this.$plugBtnWrap = this.$el.querySelector('.atk-plug-btn-wrap')!
     this.$submitBtn = this.$el.querySelector('.atk-send-btn')!
-    this.$notifyWrap = this.$el.querySelector('.atk-editor-notify-wrap')!
+    this.$notifyWrap = this.$el.querySelector('.atk-notify-wrap')!
 
     this.initLocalStorage()
     this.initHeader()
@@ -201,13 +195,13 @@ export default class Editor extends Component {
     this.$plugWrap.innerHTML = ''
     this.$plugWrap.style.display = 'none'
     this.openedPlugName = null
-    this.$plugSwitcherWrap.innerHTML = ''
+    this.$plugBtnWrap.innerHTML = ''
 
     // 依次实例化 plug
     this.LOADABLE_PLUG_LIST.forEach((PlugObj) => {
       // 切换按钮
-      const btnElem = Utils.createElement(`<span class="atk-editor-action atk-editor-plug-switcher">${PlugObj.BtnHTML}</span>`)
-      this.$plugSwitcherWrap.appendChild(btnElem)
+      const btnElem = Utils.createElement(`<span class="atk-plug-btn">${PlugObj.BtnHTML}</span>`)
+      this.$plugBtnWrap.appendChild(btnElem)
       btnElem.addEventListener('click', () => {
         let plug = this.plugList[PlugObj.Name]
         if (!plug) {
@@ -215,7 +209,7 @@ export default class Editor extends Component {
           this.plugList[PlugObj.Name] = plug
         }
 
-        this.$plugSwitcherWrap.querySelectorAll('.active').forEach(item => item.classList.remove('active'))
+        this.$plugBtnWrap.querySelectorAll('.active').forEach(item => item.classList.remove('active'))
 
         // 若点击已打开的，则收起
         if (PlugObj.Name === this.openedPlugName) {
@@ -413,7 +407,8 @@ export default class Editor extends Component {
 
   /** 关闭评论 */
   close () {
-    this.$closeComment.style.display = ''
+    if (!this.$textareaWrap.querySelector('.atk-comment-closed'))
+      this.$textareaWrap.prepend(Utils.createElement('<div class="atk-comment-closed">仅管理员可评论</div>'))
 
     if (!this.user.data.isAdmin) {
       this.$textarea.style.display = 'none'
@@ -428,7 +423,7 @@ export default class Editor extends Component {
 
   /** 打开评论 */
   open () {
-    this.$closeComment.style.display = 'none'
+    this.$textareaWrap.querySelector('.atk-comment-closed')?.remove()
     this.$textarea.style.display = ''
     this.$bottom.style.display = ''
   }

package/src/components/html/comment.html

@@ -1,25 +1,18 @@
-<div class="atk-comment-wrap" data-comment-id="">
+<div class="atk-comment-wrap">
   <div class="atk-comment">
-
     <div class="atk-avatar"></div>
-
-    <div class="atk-comment-main">
-
+    <div class="atk-main">
       <div class="atk-header">
-        <span class="atk-nick"></span>
-        <span class="atk-badge"></span>
-        <span class="atk-date"></span>
+        <span class="atk-item atk-nick"></span>
+        <span class="atk-item atk-badge"></span>
+        <span class="atk-item atk-date"></span>
       </div>
-
       <div class="atk-body">
         <div class="atk-content"></div>
       </div>
-
       <div class="atk-footer">
-        <div class="atk-comment-actions"></div>
+        <div class="atk-actions"></div>
       </div>
-
     </div>
-
   </div>
 </div>

package/src/components/html/editor.html

@@ -1,19 +1,18 @@
 <div class="atk-main-editor">
-  <div class="atk-editor-header">
+  <div class="atk-header">
     <input name="nick" placeholder="昵称" class="atk-nick" type="text" required="required">
     <input name="email" placeholder="邮箱" class="atk-email" type="email" required="required">
     <input name="link" placeholder="网址 (https://)" class="atk-link" type="url">
   </div>
-  <div class="atk-editor-textarea-wrap">
-    <div class="atk-close-comment" style="display: none;"><span>仅管理员可评论</span></div>
-    <textarea id="atk-editor-textarea" class="atk-editor-textarea" placeholder=""></textarea>
+  <div class="atk-textarea-wrap">
+    <textarea class="atk-textarea" placeholder=""></textarea>
   </div>
-  <div class="atk-editor-plug-wrap" style="display: none;"></div>
-  <div class="atk-editor-bottom">
-    <div class="atk-editor-bottom-part atk-left atk-editor-plug-switcher-wrap"></div>
-    <div class="atk-editor-bottom-part atk-right">
+  <div class="atk-plug-wrap" style="display: none;"></div>
+  <div class="atk-bottom">
+    <div class="atk-item atk-plug-btn-wrap"></div>
+    <div class="atk-item">
       <button type="button" class="atk-send-btn"></button>
     </div>
   </div>
-  <div class="atk-editor-notify-wrap"></div>
+  <div class="atk-notify-wrap"></div>
 </div>

package/src/components/html/list.html

@@ -8,7 +8,7 @@
       <span data-action="admin-close-comment" class="atk-hide" atk-only-admin-show>关闭评论</span>
       <span data-action="open-sidebar" class="atk-hide atk-on">
         <span class="atk-unread-badge" style="display: none;"></span>
-        通知中心
+        <div class="atk-text">通知中心</div>
       </span>
     </div>
   </div>