artalk 2.1.0 → 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

@@ -1,14 +1,10 @@
 import * as Utils from '../lib/utils'
 
 export interface ReadMoreBtnConf {
-  /** 每页条数 */
-  pageSize?: number
-
-  /** 数据总数 */
-  total: number
-
   /** 回调函数 */
-  onClick: () => void
+  onClick: (offset: number) => void
+
+  pageSize: number
 }
 
 /**
@@ -19,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
@@ -27,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()
   }
 
   /** 显示 */
@@ -68,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,14 +31,22 @@ 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) => {
       comment.setOpenURL(`${comment.data.page_key}#atk-comment-${comment.data.id}`)
+      comment.onReplyBtnClick = () => {
+        if (this.ctx.conf.editorTravel === true) {
+          this.ctx.trigger('editor-reply', {data: comment.data, $el: comment.$el, scroll: false})
+        } else {
+          this.ctx.trigger('sidebar-hide')
+          this.ctx.trigger('editor-reply', {data: comment.data, $el: comment.$el, scroll: true})
+        }
+      }
     }
     this.list.paramsEditor = (params) => {
       params.site_name = siteName
@@ -53,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/components/sidebar-views/sites-view.ts

@@ -16,12 +16,6 @@ export default class SitesView extends SidebarView {
 
   siteList!: SiteList
 
-  constructor(ctx: Context) {
-    super(ctx)
-
-    this.$el = Utils.createElement(`<div class="atk-sidebar-view"></div>`)
-  }
-
   mount(siteName: string) {
     if (!this.siteList) {
       this.siteList = new SiteList(this.ctx)

package/src/components/sidebar.ts

@@ -139,6 +139,12 @@ export default class Sidebar extends Component {
 
     // 获取 Layer
     this.layer = new Layer(this.ctx, 'sidebar', this.$el)
+    this.layer.afterHide = () => {
+      // 防止评论框被吞
+      if (this.ctx.conf.editorTravel === true) {
+        this.ctx.trigger('editor-travel-back')
+      }
+    }
     this.layer.show()
 
     // viewWrap 滚动条归位
@@ -217,8 +223,7 @@ export default class Sidebar extends Component {
     // 执行动画
     this.$el.style.transform = ''
 
-    // 用完即销毁
-    this.layer?.dispose()
+    this.layer?.hide()
   }
 
   /** 切换 View */

package/src/{default-conf.ts → defaults.ts}

@@ -1,7 +1,6 @@
 import ArtalkConfig from "~/types/artalk-config";
-import emoticons from './assets/emoticons.json'
 
-const defaultConf: ArtalkConfig = {
+const defaults: ArtalkConfig = {
   el: '',
   pageKey: '',
   server: '',
@@ -11,8 +10,9 @@ const defaultConf: ArtalkConfig = {
   noComment: '「此时无声胜有声」',
   sendBtn: '发送评论',
   darkMode: false,
+  editorTravel: true,
 
-  emoticons,
+  emoticons: "https://cdn.jsdelivr.net/gh/ArtalkJS/Emoticons/grps/default.json",
 
   vote: true,
   voteDown: false,
@@ -25,18 +25,18 @@ const defaultConf: ArtalkConfig = {
   },
 
   pagination: {
-    pageSize: 15,
+    pageSize: 20,
     readMore: true,
     autoLoad: true,
   },
 
   heightLimit: {
-    content: 200,
-    children: 300,
+    content: 300,
+    children: 400,
   },
 
   reqTimeout: 15000,
   versionCheck: true,
 }
 
-export default defaultConf
+export default defaults

package/src/lib/utils.ts

@@ -1,4 +1,5 @@
-import libMarked from 'marked'
+import { marked as libMarked } from 'marked'
+import insane from 'insane'
 import hanabi from 'hanabi'
 import Context from '../context'
 
@@ -95,12 +96,33 @@ 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
+  for (let i = 0; i < images.length; i++) {
+    if (images[i].complete) {
+      loaded--
+    } else {
+      // eslint-disable-next-line @typescript-eslint/no-loop-func
+      images[i].addEventListener('load', () => {
+        loaded--
+        if (loaded === 0) event()
+      })
+    }
+
+    if (loaded === 0) event()
+  }
+}
+
 export function getGravatarURL(ctx: Context, emailMD5: string) {
   return `${(ctx.conf.gravatar?.mirror || '').replace(/\/$/, '')}/${emailMD5}?d=${encodeURIComponent(ctx.conf.gravatar?.default || '')}&s=80`
 }
 
 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） */
@@ -118,34 +140,41 @@ export function versionCompare(a: string, b: string) {
   return 0
 }
 
-let markedInstance: any = null
+let markedInstance: typeof libMarked
 export function marked(ctx: Context, src: string): string {
   if (!markedInstance) {
     const renderer = new libMarked.Renderer()
     const linkRenderer = renderer.link
     renderer.link = (href, title, text) => {
-      const html = linkRenderer.call(renderer, href, title, text)
-      return html.replace(/^<a /, '<a target="_blank" rel="nofollow" ')
+      const localLink = href?.startsWith(`${window.location.protocol}//${window.location.hostname}`);
+      const html = linkRenderer.call(renderer as any, href, title, text);
+      return html.replace(/^<a /, `<a target="_blank" ${!localLink ? `rel="noreferrer noopener nofollow"` : ''} `);
     }
 
+    // @see https://github.com/markedjs/marked/blob/4afb228d956a415624c4e5554bb8f25d047676fe/src/Tokenizer.js#L329
     const nMarked = libMarked
-    nMarked.setOptions({
+    libMarked.setOptions({
       renderer,
       highlight: (code) => hanabi(code),
       pedantic: false,
       gfm: true,
-      tables: true,
       breaks: true,
-      sanitize: true, // 净化
       smartLists: true,
       smartypants: true,
-      xhtml: false
+      xhtml: false,
+      sanitize: true,
+      sanitizer: (html) => insane(html, {
+        ...insane.defaults,
+        allowedAttributes: {
+          ...insane.defaults.allowedAttributes,
+          img: ['src', 'atk-emoticon']
+        },
+      }),
+      silent: true,
     })
 
     markedInstance = nMarked
   }
 
-  return markedInstance(src)
-
-  return ''
+  return markedInstance.parse(src)
 }

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;