artalk 2.4.4 → 2.5.1

package/src/list/list-ui.ts

@@ -0,0 +1,137 @@
+import ListLite from './list-lite'
+import * as Utils from '../lib/utils'
+import * as Ui from '../lib/ui'
+import User from '../lib/user'
+import $t from '../i18n'
+
+/** 界面刷新 */
+export function refreshUI(list: ListLite) {
+    // 无评论
+    const isNoComment = list.ctx.getCommentList().length <= 0
+    let $noComment = list.getCommentsWrapEl().querySelector<HTMLElement>('.atk-list-no-comment')
+
+    if (isNoComment) {
+      if (!$noComment) {
+        $noComment = Utils.createElement('<div class="atk-list-no-comment"></div>')
+        $noComment.innerHTML = list.noCommentText || list.ctx.conf.noComment || list.ctx.$t('noComment')
+        list.getCommentsWrapEl().appendChild($noComment)
+      }
+    } else {
+      $noComment?.remove()
+    }
+
+    // 仅管理员显示控制
+    list.ctx.checkAdminShowEl()
+}
+
+/** 构建错误提示界面 */
+export function renderErrorDialog(list: ListLite, errMsg: string, errData?: any): HTMLElement {
+  const errEl = Utils.createElement(`<span>${errMsg}，${$t('listLoadFailMsg')}<br/></span>`)
+
+  const $retryBtn = Utils.createElement(`<span style="cursor:pointer;">${$t('listRetry')}</span>`)
+  $retryBtn.onclick = () => (list.fetchComments(0))
+  errEl.appendChild($retryBtn)
+
+  const adminBtn = Utils.createElement('<span atk-only-admin-show> | <span style="cursor:pointer;">打开控制台</span></span>')
+  errEl.appendChild(adminBtn)
+  if (!User.data.isAdmin) adminBtn.classList.add('atk-hide')
+
+  let sidebarView = ''
+
+  // 找不到站点错误，打开侧边栏并填入创建站点表单
+  if (errData?.err_no_site) {
+    const viewLoadParam = {
+      create_name: list.ctx.conf.site,
+      create_urls: `${window.location.protocol}//${window.location.host}`
+    }
+    sidebarView = `sites|${JSON.stringify(viewLoadParam)}`
+  }
+
+  adminBtn.onclick = () => list.ctx.showSidebar({
+    view: sidebarView as any
+  })
+
+  return errEl
+}
+
+/** 版本检测弹窗 */
+export function versionCheckDialog(list: ListLite, feVer: string, beVer: string): boolean {
+  const comp = Utils.versionCompare(feVer, beVer)
+  const notSameVer = (comp !== 0)
+  if (notSameVer) {
+    const errEl = Utils.createElement(
+      `<div>请更新 Artalk ${comp < 0 ? $t('frontend') : $t('backend')}以获得完整体验 ` +
+      `(<a href="https://artalk.js.org/" target="_blank">帮助文档</a>)` +
+      `<br/><br/><span style="color: var(--at-color-meta);">` +
+      `当前版本：${$t('frontend')} ${feVer} / ${$t('backend')} ${beVer}` +
+      `</span><br/><br/></div>`)
+    const ignoreBtn = Utils.createElement('<span style="cursor:pointer">忽略</span>')
+    ignoreBtn.onclick = () => {
+      Ui.setError(list.$el.parentElement!, null)
+      list.ctx.conf.versionCheck = false
+      list.fetchComments(0)
+    }
+    errEl.append(ignoreBtn)
+    Ui.setError(list.$el.parentElement!, errEl, '<span class="atk-warn-title">Artalk Warn</span>')
+    return true
+  }
+
+  return false
+}
+
+/** 评论排序方式选择下拉菜单 */
+export function renderDropdown(conf: {
+  $dropdownWrap: HTMLElement,
+  dropdownList: [string, () => void][]
+}) {
+  const { $dropdownWrap, dropdownList } = conf
+  if ($dropdownWrap.querySelector('.atk-dropdown')) return
+
+  // 修改 class
+  $dropdownWrap.classList.add('atk-dropdown-wrap')
+
+  // 插入图标
+  $dropdownWrap.append(Utils.createElement(`<span class="atk-arrow-down-icon"></span>`))
+
+  // 列表项点击事件
+  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') // 默认选中项
+  })
+
+  $dropdownWrap.append($dropdown)
+}
+
+/** 删除评论排序方式选择下拉菜单 */
+export function removeDropdown(conf: {
+  $dropdownWrap: HTMLElement
+}) {
+  const { $dropdownWrap } = conf
+  $dropdownWrap.classList.remove('atk-dropdown-wrap')
+  $dropdownWrap.querySelector('.atk-arrow-down-icon')?.remove()
+  $dropdownWrap.querySelector('.atk-dropdown')?.remove()
+}

package/src/list/list.ts

@@ -3,8 +3,10 @@ import Context from '~/types/context'
 import { version as ARTALK_VERSION } from '../../package.json'
 import * as Utils from '../lib/utils'
 import * as Ui from '../lib/ui'
+import User from '../lib/user'
 import ListHTML from './list.html?raw'
 import ListLite from './list-lite'
+import * as ListUi from './list-ui'
 
 export default class List extends ListLite {
   private $closeCommentBtn!: HTMLElement
@@ -29,16 +31,26 @@ export default class List extends ListLite {
     // 操作按钮
     this.initListActionBtn()
 
+    const countNumHTML = '<span class="atk-comment-count-num">0</span>'
     this.$commentCount = this.$el.querySelector('.atk-comment-count')!
-    this.$commentCount.innerHTML = this.$t('counter', {
-      count: '<span class="atk-comment-count-num">0</span>',
-    })
-    this.$commentCountNum = this.$commentCount.querySelector('.atk-comment-count-num')!
+
+    const refreshCountNumEl = () => {
+      this.$commentCount.innerHTML = this.$t('counter', {
+        count: countNumHTML,
+      })
+      this.$commentCountNum = this.$commentCount.querySelector('.atk-comment-count-num')!
+    }
+    refreshCountNumEl()
 
     // 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>`
 
     // event listen
+    this.ctx.on('conf-loaded', () => {
+      // i18n support when locale changed
+      refreshCountNumEl()
+      this.refreshUI()
+    })
   }
 
   private initListActionBtn() {
@@ -67,16 +79,14 @@ export default class List extends ListLite {
     this.$commentCountNum.innerText = String(Number(this.data?.total) || 0)
 
     // 已输入个人信息
-    if (!!this.ctx.user.data.nick && !!this.ctx.user.data.email) {
+    if (!!User.data.nick && !!User.data.email) {
       this.$openSidebarBtn.classList.remove('atk-hide')
     } else {
       this.$openSidebarBtn.classList.add('atk-hide')
     }
 
-    // 仅管理员显示控制
-    this.ctx.checkAdminShowEl()
     this.$openSidebarBtn.querySelector<HTMLElement>('.atk-text')!
-      .innerText = (!this.ctx.user.data.isAdmin) ? this.$t('msgCenter') : this.$t('ctrlCenter')
+      .innerText = (!User.data.isAdmin) ? this.$t('msgCenter') : this.$t('ctrlCenter')
 
     // 关闭评论
     if (!!this.data && !!this.data.page && this.data.page.admin_only === true) {
@@ -90,6 +100,10 @@ export default class List extends ListLite {
     // 评论列表排序 Dropdown 下拉选择层
     if (this.ctx.conf.listSort) {
       this.initDropdown()
+    } else {
+      ListUi.removeDropdown({
+        $dropdownWrap: this.$commentCount
+      })
     }
   }
 
@@ -121,8 +135,7 @@ export default class List extends ListLite {
     const comment = this.ctx.findComment(commentId)
     if (!comment) { // 若找不到评论
       // 自动翻页
-      if (this.readMoreBtn) this.readMoreBtn.click()
-      else if (this.pagination) this.pagination.next()
+      this.pgHolder?.next()
       return
     }
 
@@ -154,6 +167,7 @@ export default class List extends ListLite {
     else window.setTimeout(() => goTo(), 350)
 
     this.goToCommentFounded = true
+    this.goToCommentDelay = true // reset
   }
 
   /** 管理员设置页面信息 */
@@ -184,63 +198,22 @@ export default class List extends ListLite {
     }
   }
 
-  private dropdownLoaded = false
-
   /** 初始化选择下拉层 */
   protected initDropdown() {
-    if (this.dropdownLoaded) return
-    this.dropdownLoaded = true
-
-    this.$dropdownWrap = this.$commentCount
-    this.$commentCount.classList.add('atk-dropdown-wrap')
-
-    // 插入图标
-    this.$dropdownWrap.append(Utils.createElement(`<span class="atk-arrow-down-icon"></span>`))
-
     const reloadUseParamsEditor = (func: (p: any) => void) => {
-      this.paramsEditor = (p) => { func(p) }
+      this.paramsEditor = func
       this.fetchComments(0)
     }
 
-    // 下拉列表
-    const dropdownList = [
-      [this.$t('sortLatest'), () => { reloadUseParamsEditor(p => { p.sort_by = 'date_desc' }) }],
-      [this.$t('sortBest'), () => { reloadUseParamsEditor(p => { p.sort_by = 'vote' }) }],
-      [this.$t('sortOldest'), () => { reloadUseParamsEditor(p => { p.sort_by = 'date_asc' }) }],
-      [this.$t('sortAuthor'), () => { 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') // 默认选中项
+    ListUi.renderDropdown({
+      $dropdownWrap: this.$commentCount,
+      dropdownList: [
+        [this.$t('sortLatest'), () => { reloadUseParamsEditor(p => { p.sort_by = 'date_desc' }) }],
+        [this.$t('sortBest'), () => { reloadUseParamsEditor(p => { p.sort_by = 'vote' }) }],
+        [this.$t('sortOldest'), () => { reloadUseParamsEditor(p => { p.sort_by = 'date_asc' }) }],
+        [this.$t('sortAuthor'), () => { reloadUseParamsEditor(p => { p.view_only_admin = true }) }],
+      ]
     })
-
-    this.$dropdownWrap.append($dropdown)
   }
 
   public updateUnread(notifies: NotifyData[]): void {

package/src/list/paginator/adaptors/index.ts

@@ -0,0 +1,21 @@
+import { IPgHolderConf, TPgMode } from '../index'
+import PaginationAdaptor from './pagination'
+import ReadMoreAdaptor from './read-more'
+
+// 分页方式适配器
+const Adaptors: Record<TPgMode, IPgAdaptor<any>> = {
+  'pagination': PaginationAdaptor,
+  'read-more': ReadMoreAdaptor
+}
+
+export default Adaptors
+
+export interface IPgAdaptor<T> {
+  instance: T
+  el: HTMLElement
+  createInstance(conf: IPgHolderConf): [T, HTMLElement]
+  setLoading(val: boolean): void
+  update(offset: number, total: number): void
+  next(): void
+  showErr?(msg: string): void
+}

package/src/list/paginator/adaptors/pagination.ts

@@ -0,0 +1,42 @@
+import Pagination from '@/components/pagination'
+import * as Utils from '@/lib/utils'
+import { IPgAdaptor } from '.'
+
+interface IPaginationAdaptor extends IPgAdaptor<Pagination> {}
+
+/**
+ * 翻页形式的分页
+ */
+export default <IPaginationAdaptor>{
+  createInstance(conf) {
+    const instance = new Pagination(conf.total, {
+      pageSize: conf.pageSize,
+      onChange: async (o) => {
+        if (conf.list.conf.editorTravel === true)
+          conf.list.ctx.editorTravelBack() // 防止评论框被吞
+
+        await conf.list.fetchComments(o)
+
+        // 滚动到第一个评论的位置
+        if (conf.list.repositionAt) {
+          const at = conf.list.scrollListenerAt || window
+          at.scroll({
+            top: conf.list.repositionAt ? Utils.getOffset(conf.list.repositionAt).top : 0,
+            left: 0,
+          })
+        }
+      }
+    })
+
+    return [instance, instance.$el]
+  },
+  setLoading(val) {
+    this.instance.setLoading(val)
+  },
+  update(offset, total) {
+    this.instance.update(offset, total)
+  },
+  next() {
+    this.instance.next()
+  }
+}

package/src/list/paginator/adaptors/read-more.ts

@@ -0,0 +1,56 @@
+import ReadMoreBtn from '@/components/read-more-btn'
+import $t from '@/i18n'
+import * as Ui from '@/lib/ui'
+import { IPgAdaptor } from '.'
+
+interface IReadMoreAdaptor extends IPgAdaptor<ReadMoreBtn> {
+  autoLoadScrollEvent?: () => void
+}
+
+/**
+ * 阅读更多形式的分页
+ */
+export default <IReadMoreAdaptor>{
+  createInstance(conf) {
+    const readMoreBtn = new ReadMoreBtn({
+      pageSize: conf.pageSize,
+      onClick: async (o) => {
+        await conf.list.fetchComments(o)
+      },
+      text: $t('loadMore'),
+    })
+
+    // 滚动到底部自动加载
+    if (conf.list.conf.pagination.autoLoad) {
+      // 添加滚动事件监听
+      const at = conf.list.scrollListenerAt || document
+      if (this.autoLoadScrollEvent) at.removeEventListener('scroll', this.autoLoadScrollEvent) // 解除原有
+      this.autoLoadScrollEvent = () => {
+        if (conf.mode !== 'read-more'
+          || !readMoreBtn?.hasMore
+          || conf.list.getLoading()
+        ) return
+
+        const $target = conf.list.$el.querySelector<HTMLElement>('.atk-list-comments-wrap > .atk-comment-wrap:nth-last-child(3)') // 获取倒数第3个评论元素
+        if ($target && Ui.isVisible($target, conf.list.scrollListenerAt)) {
+          readMoreBtn.click() // 自动点击加载更多按钮
+        }
+      }
+      at.addEventListener('scroll', this.autoLoadScrollEvent)
+    }
+
+    return [readMoreBtn, readMoreBtn.$el]
+  },
+  setLoading(val) {
+    this.instance.setLoading(val)
+  },
+  update(offset, total) {
+    this.instance.update(offset, total)
+  },
+  showErr(msg) {
+    this.instance.showErr(msg)
+  },
+  next() {
+    this.instance.click()
+  }
+}

package/src/list/paginator/holder.ts

@@ -0,0 +1,56 @@
+import { IPgHolderConf, TPgMode } from '.'
+import Adaptors from './adaptors'
+
+/**
+ * 分页方式持有者（调度器）
+ */
+export default class PgHolder {
+  private conf: IPgHolderConf
+
+  constructor(conf: IPgHolderConf) {
+    this.conf = conf
+    this.init()
+  }
+
+  public getAdaptor() {
+    return Adaptors[this.conf.mode]
+  }
+
+  public init() {
+    const adaptor = this.getAdaptor()
+    const [instance, el] = adaptor.createInstance(this.conf)
+    adaptor.instance = instance
+    adaptor.el = el
+    this.conf.list.$el.append(adaptor.el)
+  }
+
+  public setLoading(val: boolean) {
+    this.getAdaptor().setLoading(val)
+  }
+
+  public update(offset: number, total: number) {
+    this.getAdaptor().update(offset, total)
+  }
+
+  public getEl() {
+    return this.getAdaptor().el
+  }
+
+  public showErr(msg: string) {
+    const that = this.getAdaptor()
+    const func = that.showErr
+    if (func) func.bind(that)(msg)
+  }
+
+  public setMode(val: TPgMode) {
+    if (val !== this.conf.mode) {
+      this.getEl().remove()
+      this.conf.mode = val
+      this.init()
+    }
+  }
+
+  public next() {
+    this.getAdaptor().next()
+  }
+}

package/src/list/paginator/index.ts

@@ -0,0 +1,13 @@
+import ListLite from '../list-lite'
+import PgHolder from './holder'
+
+export type TPgMode = 'pagination'|'read-more'
+
+export interface IPgHolderConf {
+  list: ListLite
+  mode: TPgMode
+  total: number
+  pageSize: number
+}
+
+export default PgHolder

package/src/service.ts

@@ -0,0 +1,118 @@
+import Context from '~/types/context'
+import CheckerLauncher from './lib/checker'
+import Api from './api'
+import Editor from './editor'
+import List from './list'
+import Layer from './layer'
+import SidebarLayer from './layer/sidebar-layer'
+import { initMarked } from './lib/marked'
+import User from './lib/user'
+import ListLite from './list/list-lite'
+import * as DarkMode from './lib/dark-mode'
+import * as I18n from './i18n'
+
+/**
+ * Services
+ *
+ * @description
+ * 当函数有返回值时，该值将自动添加到 Context 类作为一个 private 成员的值，
+ * 这个成员的名称与函数名对应。可在 Context 类中访问该对象（同事类）。
+ */
+const services = {
+  // I18n
+  i18n(ctx: Context) {
+    I18n.setLocale(ctx.conf.locale)
+
+    ctx.on('conf-loaded', () => {
+      I18n.setLocale(ctx.conf.locale)
+    })
+  },
+
+  // Markdown 组件
+  markdown() {
+    initMarked()
+  },
+
+  // User Store
+  user(ctx: Context) {
+    User.setContext(ctx)
+    return User
+  },
+
+  // HTTP API client
+  api(ctx: Context) {
+    const api = new Api(ctx)
+    return api
+  },
+
+  // CheckerLauncher
+  checkerLauncher(ctx: Context) {
+    const checkerLauncher = new CheckerLauncher(ctx)
+    return checkerLauncher
+  },
+
+  // 编辑器
+  editor(ctx: Context) {
+    const editor = new Editor(ctx)
+    ctx.$root.appendChild(editor.$el)
+    return editor
+  },
+
+  // 评论列表
+  list(ctx: Context): ListLite|undefined {
+    // 评论列表
+    const list = new List(ctx)
+    ctx.$root.appendChild(list.$el)
+
+    // 评论获取
+    list.fetchComments(0)
+
+    return list
+  },
+
+  // 弹出层
+  layer(ctx: Context) {
+    // 记录页面原始 CSS 属性
+    Layer.BodyOrgOverflow = document.body.style.overflow
+    Layer.BodyOrgPaddingRight = document.body.style.paddingRight
+  },
+
+  // 侧边栏 Layer
+  sidebarLayer(ctx: Context) {
+    const sidebarLayer = new SidebarLayer(ctx)
+    return sidebarLayer
+  },
+
+  // 默认事件绑定
+  eventsDefault(ctx: Context) {
+    // 锚点快速跳转评论
+    window.addEventListener('hashchange', () => {
+      ctx.listHashGotoCheck()
+    })
+
+    // 本地用户数据变更
+    ctx.on('user-changed', () => {
+      ctx.checkAdminShowEl()
+      ctx.listRefreshUI()
+    })
+  },
+
+  // 夜间模式
+  darkMode(ctx: Context) {
+    DarkMode.syncDarkModeConf(ctx)
+
+    ctx.on('conf-loaded', () => {
+      DarkMode.syncDarkModeConf(ctx)
+    })
+  }
+}
+
+export default services
+
+// type tricks for dependency injection
+type TServiceImps = typeof services
+type TObjectWithFuncs = {[k: string]: (...args: any) => any}
+type TKeysOnlyReturn<T extends TObjectWithFuncs, V> = {[K in keyof T]: ReturnType<T[K]> extends V ? K : never}[keyof T]
+type TOmitConditions = TKeysOnlyReturn<TServiceImps, void>
+type TServiceInjectors = Omit<TServiceImps, TOmitConditions>
+export type TInjectedServices = {[K in keyof TServiceInjectors]: ReturnType<TServiceInjectors[K]>}

package/src/style/{_color.less → _color.scss}

@@ -8,7 +8,7 @@
   --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: #f3f4f5;
   --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;
@@ -16,7 +16,7 @@
   --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));
+  --at-color-gradient: linear-gradient(180deg, transparent, rgba(255, 255, 255));
 
   &.atk-dark-mode {
     --at-color-font: #fff;
@@ -36,6 +36,6 @@
     --at-color-pink: #fa5a57;
     --at-color-yellow: #ff7c37;
     --at-color-green: #4caf50;
-    --at-color-gradient: linear-gradient(180deg, rgba(30, 34, 36, 0), rgba(30, 34, 36, 1));
+    --at-color-gradient: linear-gradient(180deg, transparent, rgba(30, 34, 36, 1));
   }
 }

package/src/style/{_extend.less → _extend.scss}

@@ -1,4 +1,4 @@
-.atk-slim-scrollbar() {
+.atk-slim-scrollbar {
   &::-webkit-scrollbar {
     width: 4px;
     height: 4px;

package/src/style/_variables.scss

@@ -0,0 +1,3 @@
+$font-size: 14px;
+$line-height: 1.6em;
+$block-radius: 6px;