artalk 2.1.3 → 2.1.4

package/src/components/list.ts

@@ -16,7 +16,7 @@ export default class List extends ListLite {
   constructor (ctx: Context) {
     const el = Utils.createElement(ListHTML)
 
-    super(ctx, el)
+    super(ctx)
 
     // 把 listLite $el 变为子元素
     el.querySelector('.atk-list-body')!.append(this.$el)
@@ -34,6 +34,8 @@ export default class List extends ListLite {
 
     // 分页模式
     this.pageMode = this.conf.pagination?.readMore ? 'read-more' : 'pagination'
+    this.pageSize = this.conf.pagination?.pageSize || 20
+    this.repositionAt = this.$el
 
     // 操作按钮
     this.initListActionBtn()
@@ -42,7 +44,7 @@ export default class List extends ListLite {
     this.$el.querySelector<HTMLElement>('.atk-copyright')!.innerHTML = `Powered By <a href="https://artalk.js.org" target="_blank" title="Artalk v${ARTALK_VERSION}">Artalk</a>`
 
     // event listen
-    this.ctx.on('list-reload', () => (this.reqComments(0))) // 刷新评论
+    this.ctx.on('list-reload', () => (this.fetchComments(0))) // 刷新评论
     this.ctx.on('list-refresh-ui', () => (this.refreshUI()))
     this.ctx.on('list-import', (data) => (this.importComments(data)))
     this.ctx.on('list-insert', (data) => (this.insertComment(data)))
@@ -51,7 +53,7 @@ export default class List extends ListLite {
     this.ctx.on('unread-update', (data) => (this.showUnreadBadge(data.notifies?.length || 0)))
   }
 
-  private initListActionBtn () {
+  private initListActionBtn() {
     // 侧边栏呼出按钮
     this.$openSidebarBtn = this.$el.querySelector('[data-action="open-sidebar"]')!
     this.$closeCommentBtn = this.$el.querySelector('[data-action="admin-close-comment"]')!
@@ -71,10 +73,10 @@ export default class List extends ListLite {
   }
 
   /** 刷新界面 */
-  public refreshUI () {
+  public refreshUI() {
     super.refreshUI()
 
-    this.$el.querySelector<HTMLElement>('.atk-comment-count-num')!.innerText = String(this.commentsCount)
+    this.$el.querySelector<HTMLElement>('.atk-comment-count-num')!.innerText = String(Number(this.data?.total) || 0)
 
     // 已输入个人信息
     if (!!this.ctx.user.data.nick && !!this.ctx.user.data.email) {
@@ -85,7 +87,7 @@ export default class List extends ListLite {
 
     // 仅管理员显示控制
     this.ctx.trigger('check-admin-show-el')
-    this.$openSidebarBtn.innerText = (!this.ctx.user.data.isAdmin) ? '通知中心' : '控制中心'
+    this.$openSidebarBtn.querySelector<HTMLElement>('.atk-text')!.innerText = (!this.ctx.user.data.isAdmin) ? '通知中心' : '控制中心'
 
     // 关闭评论
     if (!!this.data && !!this.data.page && this.data.page.admin_only === true) {
@@ -97,7 +99,7 @@ export default class List extends ListLite {
     }
   }
 
-  public onLoad(data: ListData, offset: number) {
+  protected onLoad(data: ListData, offset: number) {
     super.onLoad(data, offset)
 
     // 检测锚点跳转
@@ -130,7 +132,7 @@ export default class List extends ListLite {
     // TODO 若找不到评论的情况
     // if (!comment) { // 若找不到评论
     //   if (this.hasMoreComments) { // 阅读更多，并重试
-    //     await this.reqComments()
+    //     await this.fetchComments()
     //   }
     // }
 
@@ -161,7 +163,7 @@ export default class List extends ListLite {
       })
   }
 
-  public showUnreadBadge (count: number) {
+  public showUnreadBadge(count: number) {
     if (count > 0) {
       this.$unreadBadge.innerText = `${Number(count || 0)}`
       this.$unreadBadge.style.display = 'block'

package/src/components/pagination.ts

@@ -4,7 +4,7 @@ import * as Ui from '../lib/ui'
 
 export interface PaginationConf {
   /** 每页条数 */
-  pageSize?: number
+  pageSize: number
 
   /** 回调函数 */
   onChange: (offset: number) => void
@@ -21,7 +21,7 @@ export default class Pagination {
 
   public page: number = 1
   get pageSize(): number {
-    return this.conf.pageSize || 15
+    return this.conf.pageSize
   }
   get offset(): number {
     return this.pageSize * (this.page - 1)

package/src/components/read-more-btn.ts

@@ -2,7 +2,9 @@ import * as Utils from '../lib/utils'
 
 export interface ReadMoreBtnConf {
   /** 回调函数 */
-  onClick: () => void
+  onClick: (offset: number) => void
+
+  pageSize: number
 }
 
 /**
@@ -13,6 +15,13 @@ export default class ReadMoreBtn {
   public $el: HTMLElement
   private $loading: HTMLElement
   private $text: HTMLElement
+  private offset: number = 0
+  private total: number = 0
+
+  /** 是否有更多内容 */
+  get hasMore() {
+    return this.total > (this.offset + this.conf.pageSize)
+  }
 
   public constructor(conf: ReadMoreBtnConf) {
     this.conf = conf
@@ -21,18 +30,19 @@ export default class ReadMoreBtn {
     `<div class="atk-list-read-more" style="display: none;">
       <div class="atk-list-read-more-inner">
         <div class="atk-loading-icon" style="display: none;"></div>
-        <span class="atk-text">查看更多</span>
+        <span class="atk-text">加载更多</span>
       </div>
     </div>`)
 
     this.$loading = this.$el.querySelector<HTMLElement>('.atk-loading-icon')!
     this.$text = this.$el.querySelector<HTMLElement>('.atk-text')!
 
-    this.$el.onclick = () => this.click()
+    this.$el.onclick = () => { this.click() }
   }
 
   click() {
-    this.conf.onClick()
+    if (this.hasMore) this.conf.onClick(this.offset + this.conf.pageSize)
+    this.checkDisabled()
   }
 
   /** 显示 */
@@ -62,4 +72,17 @@ export default class ReadMoreBtn {
       this.$el.classList.remove('atk-err')
     }, 2000) // 2s后错误提示复原
   }
+
+  /** 更新数据 */
+  public update(offset: number, total: number) {
+    this.offset = offset
+    this.total = total
+
+    this.checkDisabled()
+  }
+
+  public checkDisabled() {
+    if (this.hasMore) this.show()
+    else this.hide()
+  }
 }

package/src/components/sidebar-views/comments-view.ts

@@ -31,10 +31,10 @@ export default class MessageView extends SidebarView {
       this.viewActiveTab = 'mentions'
     }
 
-    this.list = new ListLite(this.ctx, this.$el)
+    this.list = new ListLite(this.ctx)
     this.list.flatMode = true
     this.list.unreadHighlight = true
-    this.list.autoLoadListenerAt = this.$parent
+    this.list.scrollListenerAt = this.$parent
     this.list.pageMode = 'pagination'
     this.list.noCommentText = '<div class="atk-sidebar-no-content">无内容</div>'
     this.list.renderComment = (comment) => {
@@ -61,12 +61,11 @@ export default class MessageView extends SidebarView {
   switchTab(tab: string, siteName: string): boolean|void {
     //console.log(tab, siteName)
     this.viewActiveTab = tab
-    this.list.type = tab as any;
-    this.list.isFirstLoad = true
     this.list.paramsEditor = (params) => {
+      params.type = tab as any
       params.site_name = siteName
     }
-    this.list.reqComments()
+    this.list.fetchComments(0)
 
     return true
   }

package/src/defaults.ts

@@ -25,7 +25,7 @@ const defaults: ArtalkConfig = {
   },
 
   pagination: {
-    pageSize: 15,
+    pageSize: 20,
     readMore: true,
     autoLoad: true,
   },

package/src/lib/utils.ts

@@ -98,6 +98,7 @@ export function timeAgo(date: Date) {
 
 /** 所有图片加载完毕后执行 */
 export function onImagesLoaded($container: HTMLElement, event: Function) {
+  if (!$container) return
   const images = $container.getElementsByTagName('img')
   if (!images.length) return
   let loaded = images.length
@@ -121,7 +122,7 @@ export function getGravatarURL(ctx: Context, emailMD5: string) {
 }
 
 export function sleep(ms: number) {
-  return new Promise(resolve => setTimeout(resolve, ms));
+  return new Promise(resolve => { setTimeout(resolve, ms) });
 }
 
 /** 版本号比较（a < b :-1 | 0 | b < a :1） */

package/src/style/_color.less

@@ -1,27 +1,24 @@
 .artalk, .atk-layer-wrap {
-  * {
-    --at-color-font: #2a2e2e;
-    --at-color-deep: #2a2e2e;
-    --at-color-sub: #757575;
-    --at-color-grey: #999;
-    --at-color-meta: #757e91;
-    --at-color-border: #eceff2;
-    --at-color-light: #4285f4;
-    --at-color-bg: #FFF;
-    --at-color-bg-transl: rgba(255, 255, 255, 0.94);
-    --at-color-bg-grey: #F4F4F4;
-    --at-color-bg-grey-transl: rgba(244, 244, 244, 0.75);
-    --at-color-bg-light: rgba(29, 161, 242, 0.1);
-    --at-color-main: #0083ff;
-    --at-color-red: #ff5652;
-    --at-color-pink: #fa5a57;
-    --at-color-yellow: #ff7c37;
-    --at-color-green: #4caf50;
-    --at-color-quote: #687a86;
-    --at-color-gradient: linear-gradient(180deg, rgba(255, 255, 255, 0), rgba(255, 255, 255));
-  }
+  --at-color-font: #2a2e2e;
+  --at-color-deep: #2a2e2e;
+  --at-color-sub: #757575;
+  --at-color-grey: #999;
+  --at-color-meta: #757e91;
+  --at-color-border: #eceff2;
+  --at-color-light: #4285f4;
+  --at-color-bg: #FFF;
+  --at-color-bg-transl: rgba(255, 255, 255, 0.94);
+  --at-color-bg-grey: #F4F4F4;
+  --at-color-bg-grey-transl: rgba(244, 244, 244, 0.75);
+  --at-color-bg-light: rgba(29, 161, 242, 0.1);
+  --at-color-main: #0083ff;
+  --at-color-red: #ff5652;
+  --at-color-pink: #fa5a57;
+  --at-color-yellow: #ff7c37;
+  --at-color-green: #4caf50;
+  --at-color-gradient: linear-gradient(180deg, rgba(255, 255, 255, 0), rgba(255, 255, 255));
 
-  &.atk-dark-mode * {
+  &.atk-dark-mode {
     --at-color-font: #fff;
     --at-color-deep: #e7e7e7;
     --at-color-sub: #e7e7e7;
@@ -39,7 +36,6 @@
     --at-color-pink: #fa5a57;
     --at-color-yellow: #ff7c37;
     --at-color-green: #4caf50;
-    --at-color-quote: #687a86;
     --at-color-gradient: linear-gradient(180deg, rgba(30, 34, 36, 0), rgba(30, 34, 36, 1));
   }
 }

package/src/style/_extend.less

@@ -69,7 +69,7 @@
 
   .atk-item {
     &:hover {
-      background: @color-bg-grey;
+      background: var(--at-color-bg-grey);
     }
 
     &:not(:last-child) {
@@ -91,10 +91,10 @@
   }
 
   .atk-icon {
-    background-color: @color-meta;
+    background-color: var(--at-color-meta);
   }
 
   .atk-icon-yes {
-    background-color: @color-main;
+    background-color: var(--at-color-main);
   }
 }

package/src/style/_variables.less

@@ -1,28 +1,4 @@
-@color-font: var(--at-color-font);
-@color-deep: var(--at-color-deep);
-@color-sub: var(--at-color-sub);
-@color-grey: var(--at-color-grey);
-@color-meta: var(--at-color-meta);
-@color-light: var(--at-color-light);
-@color-border: var(--at-color-border);
-@color-bg: var(--at-color-bg);
-@color-bg-transl: var(--at-color-bg-transl);
-@color-bg-grey: var(--at-color-bg-grey);
-@color-bg-grey-transl: var(--at-color-bg-grey-transl);
-@color-bg-light: var(--at-color-bg-light);
-@color-main: var(--at-color-main);
-@color-red: var(--at-color-red);
-@color-pink: var(--at-color-pink);
-@color-yellow: var(--at-color-yellow);
-@color-green: var(--at-color-green);
-@color-quote: var(--at-color-quote);
-@color-gradient: var(--at-color-gradient);
-
 @font-family: "Helvetica Neue", "PingFangSC-Light", "Hiragino Sans GB", "Microsoft YaHei", "WenQuanYi Micro Hei", sans-serif;
 @font-size: 14px;
 @line-height: 1.6em;
-
-@block-margin: 15px;
-@block-margin-mobile: 7px;
-@block-padding: 10px;
 @block-radius: 4px;