artalk 2.5.0 → 2.5.1

package/src/editor/submit.ts

@@ -1,5 +1,6 @@
 import type { CommentData } from '~/types/artalk-data'
 import Editor from './editor'
+import User from '../lib/user'
 
 export interface SubmitManager {
   editor: Editor
@@ -65,7 +66,7 @@ interface CustomSubmit {
 
 // ================== Submit Add =======================
 function getSubmitAddParams(m: SubmitManager) {
-  const { nick, email, link } = m.editor.ctx.user.data
+  const { nick, email, link } = User.data
   const conf = m.editor.ctx.conf
   const reply = m.editor.getReplyManager()?.comment
 

package/src/i18n/external.ts

@@ -0,0 +1,10 @@
+import type { I18n } from '.'
+
+export const GLOBAL_LOCALES_KEY = "ArtalkI18n"
+
+export function defineLocaleExternal(lang: string, locale: I18n, aliases?: string[]) {
+  if (!window[GLOBAL_LOCALES_KEY]) window[GLOBAL_LOCALES_KEY] = {}
+  window[GLOBAL_LOCALES_KEY][lang] = locale
+  if (aliases) aliases.forEach(l => { window[GLOBAL_LOCALES_KEY][l] = locale })
+  return locale
+}

package/src/i18n/index.ts

@@ -1,5 +1,6 @@
 import en from './en'
 import zhCN from './zh-CN'
+import { GLOBAL_LOCALES_KEY } from './external'
 
 export type I18n = typeof en
 export type I18nKeys = keyof I18n
@@ -13,15 +14,6 @@ export const internal = {
   'zh-CN': zhCN,
 }
 
-const GLOBAL_LOCALES_KEY = "ArtalkI18n";
-
-export function defineLocaleExternal(lang: string, locale: I18n, aliases?: string[]) {
-  if (!window[GLOBAL_LOCALES_KEY]) window[GLOBAL_LOCALES_KEY] = {}
-  window[GLOBAL_LOCALES_KEY][lang] = locale
-  if (aliases) aliases.forEach(l => { window[GLOBAL_LOCALES_KEY][l] = locale })
-  return locale
-}
-
 /**
  * find a locale object by language name
  */

package/src/i18n/jp.ts

@@ -1,4 +1,4 @@
-import { defineLocaleExternal } from '.'
+import { defineLocaleExternal } from './external'
 
 export default defineLocaleExternal('jp', {
   /* エディタ */

package/src/i18n/zh-TW.ts

@@ -1,4 +1,4 @@
-import { defineLocaleExternal } from '.'
+import { defineLocaleExternal } from './external'
 
 export default defineLocaleExternal('zh-TW', {
   /* Editor */

package/src/layer/sidebar-layer.ts

@@ -3,6 +3,7 @@ import Component from '@/lib/component'
 import * as Utils from '@/lib/utils'
 import * as Ui from '@/lib/ui'
 import SidebarHTML from './sidebar-layer.html?raw'
+import User from '../lib/user'
 import Layer from './layer'
 
 export interface SidebarShowPayload {
@@ -83,7 +84,7 @@ export default class SidebarLayer extends Component {
       const query: any = {
         pageKey: this.conf.pageKey,
         site: this.conf.site || '',
-        user: JSON.stringify(this.ctx.user.data),
+        user: JSON.stringify(User.data),
         time: +new Date()
       }
 

package/src/lib/checker/admin.ts

@@ -1,4 +1,5 @@
 import * as Utils from '../utils'
+import User from '../user'
 import { Checker } from '.'
 
 const AdminChecker: Checker = {
@@ -6,8 +7,8 @@ const AdminChecker: Checker = {
 
   request(checker, inputVal) {
     const data = {
-      name: checker.getUser().data.nick,
-      email: checker.getUser().data.email,
+      name: User.data.nick,
+      email: User.data.email,
       password: inputVal
     }
 
@@ -22,11 +23,11 @@ const AdminChecker: Checker = {
   },
 
   onSuccess(checker, userToken, inputVal, formEl) {
-    checker.getUser().update({
+    User.update({
       isAdmin: true,
       token: userToken
     })
-    checker.getCtx().trigger('user-changed', checker.getUser().data)
+    checker.getCtx().trigger('user-changed', User.data)
     checker.getCtx().listReload()
   },
 

package/src/lib/checker/index.ts

@@ -57,7 +57,6 @@ export default class CheckerLauncher {
       get: (key) => (checkerStore[key]),
       getCtx: () => (this.ctx),
       getApi: () => (this.ctx.getApi()),
-      getUser: () => (this.ctx.user),
       getLayer: () => layer,
       hideInteractInput: () => {
         hideInteractInput = true
@@ -191,7 +190,6 @@ export interface CheckerCtx {
   set<K extends keyof CheckerStore>(key: K, val: CheckerStore[K]): void
   getCtx(): Context
   getApi(): Api
-  getUser(): User
   getLayer(): Layer
   hideInteractInput(): void
   triggerSuccess(): void

package/src/lib/user.ts

@@ -1,13 +1,11 @@
-import ArtalkConfig, { LocalUser } from "~/types/artalk-config"
+import { LocalUser } from "~/types/artalk-config"
 import Context from '~/types/context'
 
-export default class User {
-  public ctx: Context
+class User {
+  public ctx?: Context
   public data: LocalUser
 
-  public constructor(ctx: Context) {
-    this.ctx = ctx
-
+  public constructor() {
     // 从 localStorage 导入
     const localUser = JSON.parse(window.localStorage.getItem('ArtalkUser') || '{}')
     this.data = {
@@ -19,6 +17,10 @@ export default class User {
     }
   }
 
+  public setContext(ctx: Context) {
+    this.ctx = ctx
+  }
+
   /** 保存用户到 localStorage 中 */
   public update(obj: Partial<LocalUser> = {}) {
     Object.entries(obj).forEach(([key, value]) => {
@@ -26,7 +28,7 @@ export default class User {
     })
 
     window.localStorage.setItem('ArtalkUser', JSON.stringify(this.data))
-    this.ctx.trigger('user-changed', this.ctx.user.data)
+    this.ctx?.trigger('user-changed', this.data)
   }
 
   /** 注销，清除用户登录状态 */
@@ -42,3 +44,7 @@ export default class User {
     return !!this.data.nick && !!this.data.email
   }
 }
+
+const UserInstance = new User()
+
+export default UserInstance

package/src/list/list-ui.ts

@@ -1,6 +1,7 @@
 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'
 
 /** 界面刷新 */
@@ -33,7 +34,7 @@ export function renderErrorDialog(list: ListLite, errMsg: string, errData?: any)
 
   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')
+  if (!User.data.isAdmin) adminBtn.classList.add('atk-hide')
 
   let sidebarView = ''
 
@@ -43,7 +44,6 @@ export function renderErrorDialog(list: ListLite, errMsg: string, errData?: any)
       create_name: list.ctx.conf.site,
       create_urls: `${window.location.protocol}//${window.location.host}`
     }
-    // TODO 真的是飞鸽传书啊
     sidebarView = `sites|${JSON.stringify(viewLoadParam)}`
   }
 
@@ -78,3 +78,60 @@ export function versionCheckDialog(list: ListLite, feVer: string, beVer: string)
 
   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
@@ -77,14 +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.$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) {
@@ -98,6 +100,10 @@ export default class List extends ListLite {
     // 评论列表排序 Dropdown 下拉选择层
     if (this.ctx.conf.listSort) {
       this.initDropdown()
+    } else {
+      ListUi.removeDropdown({
+        $dropdownWrap: this.$commentCount
+      })
     }
   }
 
@@ -192,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/holder.ts

@@ -37,8 +37,9 @@ export default class PgHolder {
   }
 
   public showErr(msg: string) {
-    const func = this.getAdaptor().showErr
-    if (func) func(msg)
+    const that = this.getAdaptor()
+    const func = that.showErr
+    if (func) func.bind(that)(msg)
   }
 
   public setMode(val: TPgMode) {

package/src/service.ts

@@ -35,8 +35,8 @@ const services = {
 
   // User Store
   user(ctx: Context) {
-    const user = new User(ctx)
-    return user
+    User.setContext(ctx)
+    return User
   },
 
   // HTTP API client

package/src/style/list.scss

@@ -177,6 +177,10 @@
     padding-bottom: 10px;
   }
 
+  &.atk-err .atk-text {
+    color: var(--at-color-red) !important;
+  }
+
   .atk-list-read-more-inner {
     cursor: pointer;
     user-select: none;
@@ -195,10 +199,6 @@
     background: var(--at-color-bg);
     border-color: var(--at-color-border);
 
-    &.atk-err > .atk-text {
-      color: var(--at-color-red) !important;
-    }
-
     & > .atk-loading-icon {
       height: 15px;
       width: 15px;

package/types/context.d.ts

@@ -22,14 +22,13 @@ export default interface ContextApi {
   /** 依赖注入函数 */
   inject<K extends keyof TInjectedServices>(depName: K, obj: TInjectedServices[K]): void
 
+  /** 获取依赖对象 */
+  get<K extends keyof TInjectedServices>(depName: K): TInjectedServices[K]
+
   /** 配置对象 */
   // TODO 修改为 getConf() 和 setConf()
   conf: ArtalkConfig
 
-  /** 用户对象 */
-  // TODO 修改为 getUser()
-  user: User
-
   /** marked 依赖对象 */
   getMarkedInstance(): TMarked | undefined
 

package/dist/src/editor/editor-ui.d.ts

@@ -1,25 +0,0 @@
-declare const Sel: {
-    $header: string;
-    $nick: string;
-    $email: string;
-    $link: string;
-    $textareaWrap: string;
-    $textarea: string;
-    $bottom: string;
-    $submitBtn: string;
-    $notifyWrap: string;
-    $plugBtnWrap: string;
-    $plugPanelWrap: string;
-};
-export interface EditorUI extends Record<keyof typeof Sel, HTMLElement> {
-    $el: HTMLElement;
-    $nick: HTMLInputElement;
-    $email: HTMLInputElement;
-    $link: HTMLInputElement;
-    $textarea: HTMLTextAreaElement;
-    $submitBtn: HTMLButtonElement;
-    $sendReply?: HTMLElement;
-    $editCancelBtn?: HTMLElement;
-}
-export declare function render(): EditorUI;
-export {};