artalk 2.4.4 → 2.5.0

package/src/list/list-ui.ts

@@ -0,0 +1,80 @@
+import ListLite from './list-lite'
+import * as Utils from '../lib/utils'
+import * as Ui from '../lib/ui'
+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 (!list.ctx.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}`
+    }
+    // TODO 真的是飞鸽传书啊
+    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
+}

package/src/list/list.ts

@@ -29,16 +29,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() {
@@ -73,8 +83,6 @@ export default class List extends ListLite {
       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')
 
@@ -121,8 +129,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 +161,7 @@ export default class List extends ListLite {
     else window.setTimeout(() => goTo(), 350)
 
     this.goToCommentFounded = true
+    this.goToCommentDelay = true // reset
   }
 
   /** 管理员设置页面信息 */

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,55 @@
+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 func = this.getAdaptor().showErr
+    if (func) func(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) {
+    const user = new User(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;

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

@@ -51,7 +51,7 @@
     img {
       width: 50px;
       height: 50px;
-      border-radius: (@block-radius / 2);
+      border-radius: calc($block-radius / 2);
     }
   }
 
@@ -60,7 +60,7 @@
     margin-left: 63px;
 
     & > .atk-header {
-      line-height: 1;
+      line-height: 1.5;
       font-size: 13px;
       margin-bottom: .5em;
       overflow: hidden;
@@ -108,13 +108,13 @@
         }
       }
 
-      .badge() {
+      .badge {
         display: inline-block;
         color: var(--at-color-meta);
         background: var(--at-color-bg-grey);
         padding: 0px 6px;
         line-height: 17px;
-        border-radius: (@block-radius / 2);
+        border-radius: calc($block-radius / 2);
 
         &:not(:last-child) {
           margin-right: 6px;
@@ -126,24 +126,27 @@
       }
 
       .atk-badge {
-        .badge();
+        @extend .badge;
         color: #fff;
       }
 
+      .atk-region-badge {
+        @extend .badge;
+      }
+
       .atk-pinned-badge {
-        .badge();
+        @extend .badge;
         color: #fff;
         background: #f44336;
       }
 
       .atk-ua {
-        .badge()
+        @extend .badge;
       }
 
       .atk-ua-wrap {
         @media only screen and (max-width: 768px) {
           display: block;
-          margin-top: 5px;
         }
       }
     }
@@ -164,7 +167,7 @@
           border: 3px solid var(--at-color-bg-grey);
           border-bottom: 0;
           padding: 5px 10px;
-          border-radius: @block-radius @block-radius 0 0;
+          border-radius: $block-radius $block-radius 0 0;
           margin-bottom: -5px;
         }
 
@@ -193,7 +196,7 @@
 
       & > .atk-reply-to {
         padding: 5px 15px;
-        border-left: 3px solid #eee;
+        border-left: 3px solid var(--at-color-border);
         margin-bottom: 10px;
         position: relative;
         margin-top: 10px;
@@ -217,7 +220,7 @@
         padding: 10px 18px;
         display: block;
         background: var(--at-color-bg-grey);
-        border-radius: @block-radius;
+        border-radius: $block-radius;
 
         .atk-text {
           color: var(--at-color-meta);
@@ -291,7 +294,7 @@
     transform: translateX(-50%);
     cursor: pointer;
     border: 1px solid var(--at-color-border);
-    border-radius: @block-radius;
+    border-radius: $block-radius;
     background: var(--at-color-bg);
     padding: 1px 20px;
     font-size: 15px;
@@ -307,6 +310,27 @@
   .atk-height-limit .atk-height-limit .atk-height-limit-btn {
     display: none;
   }
+
+  // 限高可滚动
+  .atk-height-limit-scroll {
+    // @extend .atk-slim-scrollbar;
+    margin-top: 10px;
+    overflow-y: auto;
+    $cBorder: var(--at-color-border);
+    $cOverwrite: var(--at-color-bg);
+    background:
+      /* Shadow covers */
+      linear-gradient($cOverwrite 1px, transparent 1px calc(100% - 1px)) center top,
+      linear-gradient(transparent calc(100% - 1px), $cOverwrite calc(100% - 1px) 1px) center bottom,
+      /* Shadows */
+      linear-gradient($cBorder 1px, transparent 1px calc(100% - 1px)) center top,
+      linear-gradient(transparent calc(100% - 1px), $cBorder calc(100% - 1px) 1px) center bottom;
+    background-repeat: no-repeat;
+    background-color: transparent;
+    background-size: 100% 1px, 100% 1px, 100% 1px, 100% 1px;
+    /* Opera doesn't support this in the shorthand */
+    background-attachment: local, local, scroll, scroll;
+  }
 }
 
 /** 子评论区域 **/

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

@@ -1,11 +1,11 @@
 .atk-main-editor {
-  @editor-padding: 10px;
+  $editor-padding: 10px;
   z-index: 5;
   position: relative;
   overflow: hidden;
   background: var(--at-color-bg);
   border: 1px solid var(--at-color-border);
-  border-radius: @block-radius;
+  border-radius: $block-radius;
   margin-bottom: 10px;
 
   @media only screen and (max-width: 768px) {
@@ -23,7 +23,7 @@
       font-size: 14px;
       background: transparent;
       border: 2px solid transparent;
-      border-radius: (@block-radius / 2);
+      border-radius: calc($block-radius / 2);
       padding: 6px 5px;
       resize: none;
       outline: none;
@@ -44,7 +44,7 @@
       font-size: 15px;
       background-color: var(--at-color-bg);
       border: 2px solid transparent;
-      border-radius: (@block-radius / 2);
+      border-radius: calc($block-radius / 2);
       width: 100%;
       min-height: 120px;
       margin-top: 2px;
@@ -70,7 +70,7 @@
       position: absolute;
       right: 7px;
       bottom: 2px;
-      max-width: (100% - 20px);
+      max-width: calc(100% - 20px);
       height: 30px;
       line-height: 30px;
       font-size: 14px;
@@ -80,7 +80,7 @@
       text-overflow: ellipsis;
       white-space: nowrap;
       cursor: pointer;
-      border-radius: (@block-radius / 2);
+      border-radius: calc($block-radius / 2);
 
       .atk-text {
       }
@@ -129,9 +129,9 @@
       line-height: 24px;
       cursor: pointer;
       color: var(--at-color-grey);
-      font-size: @font-size;
+      font-size: $font-size;
       user-select: none;
-      border-radius: (@block-radius / 2);
+      border-radius: calc($block-radius / 2);
 
       &:not(:last-child) {
         margin-right: 2px;
@@ -163,15 +163,15 @@
     .atk-send-btn {
       background: var(--at-color-main);
       color: #fff;
-      font-size: @font-size;
+      font-size: $font-size;
       border: none;
-      padding: 0 30px;
       margin: 0;
       height: 30px;
+      width: 8em;
       cursor: pointer;
       transition: opacity 0.3s ease-in-out;
       outline: none;
-      border-radius: (@block-radius / 2);
+      border-radius: calc($block-radius / 2);
 
       &:active {
         opacity: 0.9;