artalk 2.1.3 → 2.1.6

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-layer.ts

@@ -0,0 +1,143 @@
+import '../style/sidebar-layer.less'
+
+import Context from '@/context'
+import Component from '@/lib/component'
+import * as Utils from '@/lib/utils'
+import SidebarHTML from './html/sidebar-layer.html?raw'
+import * as Ui from '@/lib/ui'
+import Layer from './layer'
+
+export default class SidebarLayer extends Component {
+  public layer?: Layer
+  public $header: HTMLElement
+  public $closeBtn: HTMLElement
+  public $iframeWrap: HTMLElement
+  public $iframe?: HTMLIFrameElement
+
+  constructor(ctx: Context) {
+    super(ctx)
+
+    this.$el = Utils.createElement(SidebarHTML)
+    this.$header = this.$el.querySelector('.atk-sidebar-header')!
+    this.$closeBtn = this.$header.querySelector('.atk-sidebar-close')!
+    this.$iframeWrap = this.$el.querySelector('.atk-sidebar-iframe-wrap')!
+
+    this.$closeBtn.onclick = () => {
+      this.hide()
+    }
+
+    // event
+    this.ctx.on('sidebar-show', () => (this.show()))
+    this.ctx.on('sidebar-hide', () => (this.hide()))
+    this.ctx.on('user-changed', () => { this.firstShow = true })
+  }
+
+  private firstShow = true
+
+  /** 显示 */
+  public async show() {
+    this.$el.style.transform = '' // 动画清除，防止二次打开失效
+
+    // 获取 Layer
+    if (this.layer == null) {
+      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 滚动条归位
+    // this.$viewWrap.scrollTo(0, 0)
+
+    // 执行动画
+    setTimeout(() => {
+      this.$el.style.transform = 'translate(0, 0)'
+    }, 20)
+
+    // 第一次加载
+    if (this.firstShow) {
+      this.$iframeWrap.innerHTML = ''
+      this.$iframe = Utils.createElement<HTMLIFrameElement>('<iframe></iframe>')
+
+      const baseURL = (import.meta.env.MODE === 'development')  ? 'http://localhost:23367/'
+        : `${this.conf.server.replace(/\/$/, '')}/../sidebar/`
+      const userData = encodeURIComponent(JSON.stringify(this.ctx.user.data))
+
+      // 测试是否能访问
+      this.iframeLoad(`${baseURL}`
+        + `?pageKey=${encodeURIComponent(this.conf.pageKey)}`
+        + `&site=${encodeURIComponent(this.conf.site || '')}`
+        + `&user=${userData}`
+        + `${((this.conf.darkMode) ? `&darkMode=1` : ``)}`)
+
+      this.$iframeWrap.append(this.$iframe)
+      this.firstShow = false
+    } else {
+      // 暗黑模式
+      if (this.conf.darkMode && !this.$iframe!.src.match(/darkMode=1$/)) {
+        this.iframeLoad(`${this.$iframe!.src}&darkMode=1`)
+      }
+      if (!this.conf.darkMode && this.$iframe!.src.match(/darkMode=1$/)) {
+        this.iframeLoad(this.$iframe!.src.replace(/&darkMode=1$/, ''))
+      }
+    }
+  }
+
+  /** 隐藏 */
+  public hide() {
+    // 执行动画
+    this.$el.style.transform = ''
+
+    this.layer?.hide()
+  }
+
+  public iframeLoad(src: string) {
+    if (!this.$iframe) return
+
+    this.$iframe.src = src
+
+    // 加载动画
+    Ui.showLoading(this.$iframeWrap)
+    this.$iframe.onload = () => {
+      Ui.hideLoading(this.$iframeWrap)
+    }
+
+    // this.checkReqStatus(src) // 判不准，删了，没啥用
+  }
+
+  loadingTimer: number|null = null
+
+  // 测试可访问性 (由于 iframe 测不准，需要额外请求)
+  public async checkReqStatus(url: string) {
+    if (this.loadingTimer !== null) window.clearTimeout(this.loadingTimer)
+
+    this.loadingTimer = window.setTimeout(async () => {
+      try {
+        await fetch(url)
+      } catch (err) {
+        console.log(err)
+        // 请求失败，显示错误提示
+        const $errAlert = Utils.createElement(
+          `<div class="atk-err-alert">` +
+          `  <div class="atk-title">侧边栏似乎打开失败</div>` +
+          `  <div class="atk-text"><span id="AtkReload">重新加载</span> / <span id="AtkCancel">取消</span></div>` +
+          `</div>`
+        )
+        const $reloadBtn = $errAlert.querySelector<HTMLElement>('#AtkReload')!
+        const $cancelBtn = $errAlert.querySelector<HTMLElement>('#AtkCancel')!
+        $reloadBtn.onclick = () => {
+          this.iframeLoad(url)
+          $errAlert.remove()
+        }
+        $cancelBtn.onclick = () => { // 提供取消按钮，防止误判
+          $errAlert.remove()
+        }
+        this.$iframeWrap.append($errAlert)
+      }
+    }, 2000) // 2s 后开始检测
+  }
+}

package/src/defaults.ts

@@ -17,6 +17,7 @@ const defaults: ArtalkConfig = {
   vote: true,
   voteDown: false,
   uaBadge: true,
+  pvEl: '#ArtalkPV',
   flatMode: 'auto',
   maxNesting: 3,
   gravatar: {
@@ -25,7 +26,7 @@ const defaults: ArtalkConfig = {
   },
 
   pagination: {
-    pageSize: 15,
+    pageSize: 20,
     readMore: true,
     autoLoad: true,
   },

package/src/lib/detect.js

@@ -104,7 +104,9 @@ function Detect (userAgent) {
         '6.0': 'Vista',
         5.2: 'XP',
         5.1: 'XP',
-        '5.0': '2000'
+        '5.0': '2000',
+        '10.0': '10',
+        '11.0': '11' // 自定的，不是微软官方的判断方法
       }
       return hash[v] || v
     },

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） */
@@ -177,3 +178,28 @@ export function marked(ctx: Context, src: string): string {
 
   return markedInstance.parse(src)
 }
+
+/** 获取修正后的 UserAgent */
+export async function getCorrectUserAgent() {
+  const uaRaw = navigator.userAgent
+  const uaData = (navigator as any).userAgentData // @link https://web.dev/migrate-to-ua-ch/
+  if (!uaData || !uaData.getHighEntropyValues) {
+    return uaRaw
+  }
+
+  // microsoft f******k you!!!!!
+  // @link https://docs.microsoft.com/en-us/microsoft-edge/web-platform/how-to-detect-win11
+  let uaGot: any = null
+  try {
+    uaGot = await uaData.getHighEntropyValues(["platformVersion"])
+  } catch (err) { console.error(err); return uaRaw }
+
+  if (uaData.platform !== "Windows") { return uaRaw }
+  const majorPlatformVersion = Number(uaGot.platformVersion.split('.')[0])
+  if (majorPlatformVersion >= 13) {
+    // Win11 样本："Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/98.0.4758.102 Safari/537.36"
+    return uaRaw.replace(/Windows\W+NT\W+10.0/, 'Windows NT 11.0')
+  }
+
+  return uaRaw
+}

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

@@ -18,83 +18,3 @@
     background: rgba(41,47,53,.77);
   }
 }
-
-.atk-list-text-actions() {
-  display: flex;
-  flex-direction: column;
-  flex: auto;
-  padding: 0 35px;
-  padding-top: 10px;
-  padding-bottom: 0;
-  flex-wrap: wrap;
-  align-content: flex-start;
-
-  .atk-item {
-    position: relative;
-    font-size: 17px;
-    max-width: 5em;
-    display: inline-flex;
-    margin-right: 15px;
-    margin-bottom: 6px;
-    cursor: pointer;
-    user-select: none;
-
-    &.atk-green:after {
-      position: absolute;
-      content: ' ';
-      height: 5px;
-      width: 100%;
-      left: 0;
-      bottom: 5px;
-      background: rgba(50, 199, 134, 0.39);
-    }
-
-    &.atk-yellow:after {
-      position: absolute;
-      content: ' ';
-      height: 5px;
-      width: 100%;
-      left: 0;
-      bottom: 5px;
-      background: rgba(255, 203, 0, 39%);
-    }
-  }
-}
-
-.atk-list-btn-actions() {
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  padding: 0 20px;
-
-  .atk-item {
-    &:hover {
-      background: @color-bg-grey;
-    }
-
-    &:not(:last-child) {
-      margin-right: 15px;
-    }
-
-    cursor: pointer;
-    user-select: none;
-    display: flex;
-    width: 35px;
-    height: 35px;
-    border-radius: 2px;
-    align-items: center;
-    justify-content: center;
-
-    &.atk-item-close {
-      margin-left: 10px;
-    }
-  }
-
-  .atk-icon {
-    background-color: @color-meta;
-  }
-
-  .atk-icon-yes {
-    background-color: @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;