artalk 2.1.6 → 2.1.7

package/index.html

@@ -31,7 +31,7 @@
   </style>
 </head>
 <body>
-  <div class="card billboard artalk-fade-in">
+  <div class="card billboard atk-fade-in">
     <div class="title"><a href="https://github.com/ArtalkJS/Artalk" target="_blank"><span>『 </span>Artalk<span> 』</span></a></div>
     <div class="desc">一款简洁的自托管评论系统 <span id="ArtalkPV"></span></div>
     <div class="social">
@@ -42,11 +42,11 @@
       <a href="https://github.com/ArtalkJS/Artalk" target="_blank"><img src="https://img.shields.io/github/stars/ArtalkJS/Artalk?style=flat-square"></a>
     </div>
   </div>
-  <div class="card artalk-fade-in">
+  <div class="card atk-fade-in">
     <div id="comments"></div>
   </div>
-  <div class="float-btn to-night artalk-fade-in">Blink</div>
-  <div class="float-btn to-top artalk-fade-in" style="display: none;">TOP</div>
+  <div class="float-btn to-night atk-fade-in">Blink</div>
+  <div class="float-btn to-top atk-fade-in" style="display: none;">TOP</div>
 
   <script type="module">
     import Artalk from './src/main'

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "artalk",
-  "version": "2.1.6",
+  "version": "2.1.7",
   "license": "GPL-3.0",
   "description": "A Selfhosted Comment System",
   "keywords": [

package/src/components/comment.ts

@@ -136,6 +136,11 @@ export default class Comment extends Component {
       $badge.remove()
     }
 
+    if (this.data.is_pinned) {
+      const $pinnedBadge = Utils.createElement(`<span class="atk-item atk-pinned-badge">置顶</span>`) // 置顶徽章
+      $nick.insertAdjacentElement('afterend', $pinnedBadge)
+    }
+
     const $date = this.$el.querySelector<HTMLElement>('.atk-date')!
     $date.innerText = this.getDateFormatted()
     $date.setAttribute('data-atk-comment-date', String(+new Date(this.data.date)))
@@ -272,6 +277,16 @@ export default class Comment extends Component {
     delBtn.setClick(() => {
       this.adminDelete(delBtn)
     })
+
+    // 绑定置顶按钮事件
+    const pinnedBtn = new ActionBtn({
+      text: () => (this.data.is_pinned ? '取消置顶' : '置顶'),
+      adminOnly: true
+    })
+    pinnedBtn.appendTo(this.$actions)
+    pinnedBtn.setClick(() => {
+      this.adminEdit('pinned', pendingBtn)
+    })
   }
   //#endregion
 
@@ -404,9 +419,9 @@ export default class Comment extends Component {
     })
   }
 
-  /** 管理员 - 评论折叠 */
-  adminEdit(type: 'collapsed'|'pending', btnElem: ActionBtn) {
-    if (btnElem.isLoading) return // 若正在折叠中
+  /** 管理员 - 评论状态修改 */
+  adminEdit(type: 'collapsed'|'pending'|'pinned', btnElem: ActionBtn) {
+    if (btnElem.isLoading) return // 若正在修改中
 
     btnElem.setLoading(true, '修改中...')
 
@@ -416,6 +431,8 @@ export default class Comment extends Component {
       modify.is_collapsed = !modify.is_collapsed
     } else if (type === 'pending') {
       modify.is_pending = !modify.is_pending
+    } else if (type === 'pinned') {
+      modify.is_pinned = !modify.is_pinned
     }
 
     new Api(this.ctx).commentEdit(modify).then((comment) => {

package/src/components/html/list.html

@@ -1,8 +1,10 @@
 <div class="atk-list">
   <div class="atk-list-header">
     <div class="atk-comment-count">
-      <span class="atk-comment-count-num">0</span>
-      条评论
+      <div class="atk-text">
+        <span class="atk-comment-count-num">0</span>
+        条评论
+      </div>
     </div>
     <div class="atk-right-action">
       <span data-action="admin-close-comment" class="atk-hide" atk-only-admin-show>关闭评论</span>

package/src/components/list.ts

@@ -12,6 +12,8 @@ export default class List extends ListLite {
   private $closeCommentBtn!: HTMLElement
   private $openSidebarBtn!: HTMLElement
   private $unreadBadge!: HTMLElement
+  private $commentCount!: HTMLElement
+  private $dropdownWrap?: HTMLElement
 
   constructor (ctx: Context) {
     const el = Utils.createElement(ListHTML)
@@ -40,6 +42,10 @@ export default class List extends ListLite {
     // 操作按钮
     this.initListActionBtn()
 
+    // 下拉选择层
+    this.$commentCount = this.$el.querySelector('.atk-comment-count')!
+    this.initDropdown()
+
     // copyright
     this.$el.querySelector<HTMLElement>('.atk-copyright')!.innerHTML = `Powered By <a href="https://artalk.js.org" target="_blank" title="Artalk v${ARTALK_VERSION}">Artalk</a>`
 
@@ -171,4 +177,58 @@ export default class List extends ListLite {
       this.$unreadBadge.style.display = 'none'
     }
   }
+
+  /** 初始化选择下拉层 */
+  protected initDropdown() {
+    this.$dropdownWrap = this.$commentCount
+    this.$commentCount.classList.add('atk-dropdown-wrap')
+
+    // 插入图标
+    this.$commentsWrap.append(Utils.createElement(`<span class="atk-arrow-down-icon"></span>`))
+
+    const reloadUseParamsEditor = (func: (p: any) => void) => {
+      this.paramsEditor = (p) => { func(p) }
+      this.fetchComments(0)
+    }
+
+    // 下拉列表
+    const dropdownList = [
+      ['最新', () => { reloadUseParamsEditor(p => { p.sort_by = 'date_desc' }) }],
+      ['最热', () => { reloadUseParamsEditor(p => { p.sort_by = 'vote' }) }],
+      ['最早', () => { reloadUseParamsEditor(p => { p.sort_by = 'date_asc' }) }],
+      ['作者', () => { reloadUseParamsEditor(p => { p.view_only_admin = true }) }],
+    ]
+
+    // 列表项点击事件
+    let curtActive = 0 // 当前选中
+    const onItemClick = (i: number, $item: HTMLElement, name: string, action: Function) => {
+      action()
+
+      // set active
+      curtActive = i
+      $dropdown.querySelectorAll('.active').forEach((e) => { e.classList.remove('active') })
+      $item.classList.add('active')
+
+      // 关闭层 (临时消失，取消 :hover)
+      $dropdown.style.display = 'none'
+      setTimeout(() => { $dropdown.style.display = '' }, 80)
+    }
+
+    // 生成列表元素
+    const $dropdown = Utils.createElement(`<ul class="atk-dropdown atk-fade-in"></ul>`)
+    dropdownList.forEach((item, i) => {
+      const name = item[0] as string
+      const action = item[1] as Function
+
+      const $item = Utils.createElement(`<li class="atk-dropdown-item"><span></span></li>`)
+      const $link = $item.querySelector<HTMLElement>('span')!
+      $link.innerText = name
+      $link.onclick = () => { onItemClick(i, $item, name, action) }
+      $dropdown.append($item)
+
+      if (i === curtActive) $item.classList.add('active') // 默认选中项
+    })
+
+    this.$dropdownWrap.append($dropdown)
+  }
 }

package/src/style/comment.less

@@ -102,6 +102,12 @@
         color: #fff;
       }
 
+      .atk-pinned-badge {
+        .badge();
+        color: #fff;
+        background: #f44336;
+      }
+
       .atk-ua {
         .badge()
       }

package/src/style/list.less

@@ -7,6 +7,72 @@
     padding: 10px 10px 5px 10px;
     border-bottom: 1px solid var(--at-color-border);
 
+    .atk-text {
+      display: inline-block;
+    }
+
+    /* 下拉选择层 */
+    .atk-dropdown-wrap {
+      position: relative;
+      cursor: pointer;
+
+      .atk-arrow-down-icon {
+        cursor: pointer;
+        vertical-align: middle;
+        border-top: 6px solid var(--at-color-grey);
+        border-left: 4px solid transparent;
+        border-right: 4px solid transparent;
+        margin-top: -1px;
+        margin-left: 0.4rem;
+        display: inline-block;
+      }
+
+      &:hover {
+        .atk-dropdown {
+          display: block;
+        }
+      }
+
+      .atk-dropdown {
+        z-index: 888;
+        display: none;
+        height: auto !important;
+        max-height: calc(100vh - 2.7rem);
+        overflow-y: auto;
+        position: absolute;
+        top: 100%;
+        right: 0;
+        width: 100%;
+        background-color: var(--at-color-bg);
+        padding: 0.6rem 0;
+        border: 1px solid var(--at-color-border);
+        text-align: center;
+        border-radius: 0.25rem;
+        white-space: nowrap;
+        margin: 0;
+        list-style: none;
+      }
+
+      .atk-dropdown-item {
+        span, a {
+          display: block;
+          line-height: 2rem;
+          position: relative;
+          border-bottom: none;
+          font-weight: 400;
+          padding: 0 1.5rem;
+
+          &:hover {
+            color: var(--at-color-main);
+          }
+        }
+
+        &.active span, a {
+          color: var(--at-color-main);
+        }
+      }
+    }
+
     .atk-comment-count {
       font-size: 15px;
 

package/types/artalk-data.d.ts

@@ -29,6 +29,9 @@ export interface CommentData {
   /** 是否待审 */
   is_pending?: boolean
 
+  /** 是否置顶 */
+  is_pinned?: boolean
+
   /** 是否为管理员 */
   is_admin?: boolean