artalk 2.4.3 → 2.5.0

package/src/artalk.ts

@@ -1,29 +1,24 @@
-import './style/main.less'
+import './style/main.scss'
 
-import ArtalkConfig from '~/types/artalk-config'
-import { EventPayloadMap, Handler } from '~/types/event'
-import ArtalkPlug from '~/types/plug'
-import Context from '~/types/context'
+import type ArtalkConfig from '~/types/artalk-config'
+import type { EventPayloadMap, Handler } from '~/types/event'
+import type ArtalkPlug from '~/types/plug'
+import type Context from '~/types/context'
 import ConcreteContext from './context'
 import defaults from './defaults'
-
-import ListLite from './list/list-lite'
-import CheckerLauncher from './lib/checker'
-import Editor from './editor'
-import List from './list'
-import SidebarLayer from './layer/sidebar-layer'
-
-import Layer from './layer'
-import * as Utils from './lib/utils'
-import * as Ui from './lib/ui'
+import { handelBaseConf } from './config'
+import Services from './service'
 import * as Stat from './lib/stat'
+import ListLite from './list/list-lite'
 
 /**
  * Artalk
  *
- * @website https://artalk.js.org
+ * @see https://artalk.js.org
  */
 export default class Artalk {
+  private static instance?: Artalk
+
   public static ListLite = ListLite
   public static readonly defaults: ArtalkConfig = defaults
 
@@ -31,192 +26,140 @@ export default class Artalk {
   public ctx!: Context
   public $root!: HTMLElement
 
-  /** Plugins (in global scope)  */
-  protected static Plugins: ArtalkPlug[] = [ Stat.PvCountWidget ]
-
-  /** Plugins (in a instance scope) */
-  protected instancePlugins: ArtalkPlug[] = []
-
-  /** 禁用的组件 */
+  /** Plugins */
+  protected static plugins: ArtalkPlug[] = [ Stat.PvCountWidget ]
   public static DisabledComponents: string[] = []
 
-  constructor(customConf: Partial<ArtalkConfig>) {
-    /* 初始化基本配置 */
-    this.conf = Artalk.HandelBaseConf(customConf)
+  constructor(conf: Partial<ArtalkConfig>) {
+    if (Artalk.instance) return Artalk.instance.update(conf)
+
+    // 初始化基本配置
+    this.conf = handelBaseConf(conf)
     if (this.conf.el instanceof HTMLElement) this.$root = this.conf.el
 
-    /* 初始化 Context */
+    // 初始化 Context
     this.ctx = new ConcreteContext(this.conf, this.$root)
 
-    /* 初始化组件 */
-    this.initComponents()
-  }
-
-  /** 组件初始化 */
-  private initComponents() {
-    this.initLocale()
-    this.initLayer()
-    Utils.initMarked(this.ctx)
-
-    const Components: { [name: string]: () => void } = {
-      // CheckerLauncher
-      checkerLauncher: () => {
-        const checkerLauncher = new CheckerLauncher(this.ctx)
-        this.ctx.setCheckerLauncher(checkerLauncher)
-      },
-
-      // 编辑器
-      editor: () => {
-        const editor = new Editor(this.ctx)
-        this.ctx.setEditor(editor)
-        this.$root.appendChild(editor.$el)
-      },
-
-      // 评论列表
-      list: () => {
-        // 评论列表
-        const list = new List(this.ctx)
-        this.ctx.setList(list)
-        this.$root.appendChild(list.$el)
-
-        // 评论获取
-        list.fetchComments(0)
-      },
-
-      // 侧边栏 Layer
-      sidebarLayer: () => {
-        const sidebarLayer = new SidebarLayer(this.ctx)
-        this.ctx.setSidebarLayer(sidebarLayer)
-      },
-
-      // 默认事件绑定
-      eventsDefault: () => {
-        this.initEventBind()
-      }
-    }
-
-    // 组件初始化
-    Object.entries(Components).forEach(([name, initComponent]) => {
+    // 内建服务初始化
+    Object.entries(Services).forEach(([name, initService]) => {
       if (Artalk.DisabledComponents.includes(name)) return
-
-      initComponent()
+      const obj = initService(this.ctx)
+      if (obj) this.ctx.inject(name as any, obj) // auto inject deps to ctx
     })
 
     // 插件初始化 (global scope)
-    Artalk.Plugins.forEach(plugin => {
+    Artalk.plugins.forEach(plugin => {
       if (typeof plugin === 'function')
         plugin(this.ctx)
     })
   }
 
-  /** 基本配置初始化 */
-  public static HandelBaseConf(customConf: Partial<ArtalkConfig>): ArtalkConfig {
-    // 合并默认配置
-    const conf: ArtalkConfig = Utils.mergeDeep(Artalk.defaults, customConf)
-
-    // 绑定元素
-    if (typeof conf.el === 'string' && !!conf.el) {
-      try {
-        const findEl = document.querySelector<HTMLElement>(conf.el)
-        if (!findEl) throw Error(`Target element "${conf.el}" was not found.`)
-        conf.el = findEl
-      } catch (e) {
-        console.error(e)
-        throw new Error('Please check your Artalk `el` config.')
-      }
-    }
-
-    // 服务器配置
-    conf.server = conf.server.replace(/\/$/, '').replace(/\/api\/?$/, '')
-
-    // 默认 pageKey
-    if (!conf.pageKey) {
-      // @link http://bl.ocks.org/abernier/3070589
-      conf.pageKey = `${window.location.pathname}`
-    }
-
-    // 默认 pageTitle
-    if (!conf.pageTitle) {
-      conf.pageTitle = `${document.title}`
-    }
-
-    return conf
-  }
-
-  /** 事件绑定初始化 */
-  private initEventBind() {
-    // 锚点快速跳转评论
-    window.addEventListener('hashchange', () => {
-      this.ctx.listHashGotoCheck()
-    })
+  /** Init Artalk */
+  public static init(conf: Partial<ArtalkConfig>): Artalk {
+    if (this.instance) return this.instance.update(conf) // 单例模式
+    this.instance = new Artalk(conf)
+    return this.instance
+  }
 
-    // 本地用户数据变更
-    this.ctx.on('user-changed', () => {
-      this.ctx.checkAdminShowEl()
-      this.ctx.listRefreshUI()
-    })
+  /** Use Plugin (plugin will be called in instance `use` func) */
+  public use(plugin: ArtalkPlug) {
+    Artalk.plugins.push(plugin)
+    if (typeof plugin === 'function') plugin(this.ctx)
   }
 
-  /** 语言初始化 */
-  private initLocale() {
-    if (this.conf.locale === 'auto') { // 自适应语言
-      this.conf.locale = navigator.language
-    }
+  /** Update config of Artalk */
+  public update(conf: Partial<ArtalkConfig>) {
+    if (!Artalk.instance) throw Error('cannot call `update` function before call `load`')
+    Artalk.instance.ctx.updateConf(conf)
+    return Artalk.instance
   }
 
-  /** Layer 初始化 */
-  private initLayer() {
-    // 记录页面原始 Styles
-    Layer.BodyOrgOverflow = document.body.style.overflow
-    Layer.BodyOrgPaddingRight = document.body.style.paddingRight
+  /** Reload comment list of Artalk */
+  public reload() {
+    this.ctx.listReload()
   }
 
-  /** 监听事件 */
+  /** Destroy instance of Artalk */
+  public destroy() {
+    if (!Artalk.instance) throw Error('cannot call `destroy` function before call `load`')
+    Artalk.instance.$root.remove()
+    delete Artalk.instance
+  }
+
+  /** Add an event listener */
   public on<K extends keyof EventPayloadMap>(name: K, handler: Handler<EventPayloadMap[K]>) {
     this.ctx.on(name, handler, 'external')
   }
 
-  /** 解除监听事件 */
+  /** Remove an event listener */
   public off<K extends keyof EventPayloadMap>(name: K, handler: Handler<EventPayloadMap[K]>) {
     this.ctx.off(name, handler, 'external')
   }
 
-  /** 触发事件 */
+  /** Trigger an event */
   public trigger<K extends keyof EventPayloadMap>(name: K, payload?: EventPayloadMap[K]) {
     this.ctx.trigger(name, payload, 'external')
   }
 
-  /** 重新加载 */
-  public reload() {
-    this.ctx.listReload()
-  }
-
-  /** 设置暗黑模式 */
+  /** Set dark mode */
   public setDarkMode(darkMode: boolean) {
     this.ctx.setDarkMode(darkMode)
   }
 
-  /** Use Plugin (specific instance) */
-  public use(plugin: ArtalkPlug) {
-    this.instancePlugins.push(plugin)
-    if (typeof plugin === 'function') plugin(this.ctx)
-  }
+  // ===========================
+  //       Static methods
+  // ===========================
 
-  /** Use Plugin (static method for global scope) */
+  /** Use Plugin (static method) */
   public static use(plugin: ArtalkPlug) {
-    this.Plugins.push(plugin)
+    this.plugins.push(plugin)
+    if (this.instance && typeof plugin === 'function') plugin(this.instance.ctx)
   }
 
-  /** @deprecated Please replace it with lowercase function name `use(...)`. */
-  public static Use(plugin: ArtalkPlug) {
-    this.use(plugin)
-    console.warn('`Use(...)` is deprecated, replace it with lowercase `use(...)`.')
+  /** Update config of Artalk */
+  public static update(conf: Partial<ArtalkConfig>) {
+    return this.instance?.update(conf)
   }
 
-  /** 装载数量统计元素 */
-  public static LoadCountWidget(customConf: Partial<ArtalkConfig>) {
-    const conf = this.HandelBaseConf(customConf)
-    const ctx = new ConcreteContext(conf)
+  /** Reload comment list of Artalk */
+  public static reload() {
+    this.instance?.reload()
+  }
+
+  /** Destroy instance of Artalk */
+  public static destroy() {
+    this.instance?.destroy()
+  }
+
+  /** Add an event listener */
+  public static on<K extends keyof EventPayloadMap>(name: K, handler: Handler<EventPayloadMap[K]>) {
+    this.instance?.on(name, handler)
+  }
+
+  /** Remove an event listener */
+  public static off<K extends keyof EventPayloadMap>(name: K, handler: Handler<EventPayloadMap[K]>) {
+    this.instance?.off(name, handler)
+  }
+
+  /** Trigger an event */
+  public static trigger<K extends keyof EventPayloadMap>(name: K, payload?: EventPayloadMap[K]) {
+    this.instance?.trigger(name, payload)
+  }
+
+  /** Set dark mode */
+  public static setDarkMode(darkMode: boolean) {
+    this.instance?.setDarkMode(darkMode)
+  }
+
+  /** Load count widget */
+  public static loadCountWidget(conf: Partial<ArtalkConfig>) {
+    const ctx = new ConcreteContext(handelBaseConf(conf))
     Stat.initCountWidget({ ctx, pvAdd: false })
   }
+
+  /** @deprecated Please use `loadCountWidget` instead */
+  public static LoadCountWidget(conf: Partial<ArtalkConfig>) {
+    console.warn('The method `LoadCountWidget` is deprecated, please use `loadCountWidget` instead.')
+    this.loadCountWidget(conf)
+  }
 }

package/src/comment/comment.ts

@@ -2,8 +2,9 @@ import { CommentData } from '~/types/artalk-data'
 import Context from '~/types/context'
 import Component from '../lib/component'
 import * as Utils from '../lib/utils'
+import marked from '../lib/marked'
 import UADetect from '../lib/detect'
-import CommentRender from './render'
+import CommentUI from './render'
 import CommentActions from './actions'
 
 export interface CommentConf {
@@ -18,7 +19,7 @@ export interface CommentConf {
 }
 
 export default class Comment extends Component {
-  private renderInstance: CommentRender
+  private renderInstance: CommentUI
   private actionInstance: CommentActions
 
   private data: CommentData
@@ -44,7 +45,7 @@ export default class Comment extends Component {
     this.nestCurt = 1 // 现在已嵌套 n 层
 
     this.actionInstance = new CommentActions(this)
-    this.renderInstance = new CommentRender(this)
+    this.renderInstance = new CommentUI(this)
   }
 
   /** 渲染 UI */
@@ -119,7 +120,7 @@ export default class Comment extends Component {
     childC.getRender().playFadeAnim()
 
     // 内容限高
-    childC.getRender().checkHeightLimitArea('content')
+    childC.getRender().checkHeightLimit()
   }
 
   /** 获取存放子评论的元素对象 */
@@ -131,7 +132,7 @@ export default class Comment extends Component {
       if (this.nestCurt < this.nestMax) {
         $children = this.getRender().renderChildrenWrap()
       } else {
-          $children = this.parent!.getChildrenEl()
+        $children = this.parent!.getChildrenEl()
       }
     }
 
@@ -164,7 +165,7 @@ export default class Comment extends Component {
 
   /** 获取评论 markdown 解析后的内容 */
   public getContentMarked() {
-    return Utils.marked(this.ctx, this.data.content)
+    return marked(this.ctx, this.data.content)
   }
 
   /** 获取格式化后的日期 */

package/src/comment/height-limit.ts

@@ -0,0 +1,100 @@
+import * as Utils from '../lib/utils'
+import $t from '../i18n'
+
+export interface IHeightLimitConf {
+  /** Post expand btn click */
+  postExpandBtnClick?: (e: MouseEvent) => void
+  /** Allow Scroll */
+  scrollable?: boolean
+}
+
+export interface IHeightLimitRule {
+  /** Target element need to check */
+  el: HTMLElement|null|undefined
+
+  /** Max height (unit: px) */
+  max: number
+
+  /** Whether or not the element contains `<img />` */
+  imgContains?: boolean
+}
+
+export type THeightLimitRuleSet = IHeightLimitRule[]
+
+/** Check all elements below the max height limit */
+export function check(conf: IHeightLimitConf, rules: THeightLimitRuleSet) {
+  rules.forEach(({
+    el, max: maxHeight, imgContains
+  }) => {
+    const _apply = () => {
+      if (!el) return
+      if (!conf.scrollable)
+        applyHeightLimit({ el, maxHeight, postBtnClick: conf.postExpandBtnClick })
+      else
+        applyScrollableHeightLimit({ el, maxHeight })
+    }
+
+    // checking
+    const _check = () => {
+      if (el && Utils.getHeight(el) > maxHeight) _apply() // 是否超过高度
+    }
+    _check() // check now
+    if (imgContains && el) // check again if img contains
+      Utils.onImagesLoaded(el, () => _check())
+  })
+}
+
+/** Height limit CSS class name */
+const HEIGHT_LIMIT_CSS = 'atk-height-limit'
+
+/** Apply height limit on an element and add expand btn */
+export function applyHeightLimit(obj: {
+  el: HTMLElement,
+  maxHeight: number,
+  postBtnClick?: (e: MouseEvent) => void
+}) {
+  if (!obj.el) return
+  if (!obj.maxHeight) return
+  if (obj.el.classList.contains(HEIGHT_LIMIT_CSS)) return
+
+  obj.el.classList.add(HEIGHT_LIMIT_CSS)
+  obj.el.style.height = `${obj.maxHeight}px`
+  obj.el.style.overflow = 'hidden'
+
+  /* Expand button */
+  const $expandBtn = Utils.createElement(`<div class="atk-height-limit-btn">${$t('readMore')}</span>`)
+  $expandBtn.onclick = (e) => {
+    e.stopPropagation()
+    disposeHeightLimit(obj.el)
+
+    if (obj.postBtnClick) obj.postBtnClick(e)
+  }
+  obj.el.append($expandBtn)
+}
+
+/** Dispose height limit on an element and remove expand btn */
+export function disposeHeightLimit($el: HTMLElement) {
+  if (!$el) return
+  if (!$el.classList.contains(HEIGHT_LIMIT_CSS)) return
+
+  $el.classList.remove(HEIGHT_LIMIT_CSS)
+  Array.from($el.children).forEach((e) => {
+    if (e.classList.contains('atk-height-limit-btn')) e.remove()
+  })
+  $el.style.height = ''
+  $el.style.overflow = ''
+}
+
+/** Height limit scrollable CSS class name */
+const HEIGHT_LIMIT_SCROLL_CSS = 'atk-height-limit-scroll'
+
+/** Apply scrollable height limit */
+export function applyScrollableHeightLimit(obj: {
+  el: HTMLElement,
+  maxHeight: number
+}) {
+  if (!obj.el) return
+  if (obj.el.classList.contains(HEIGHT_LIMIT_SCROLL_CSS)) return
+  obj.el.classList.add(HEIGHT_LIMIT_SCROLL_CSS)
+  obj.el.style.height = `${obj.maxHeight}px`
+}

package/src/comment/render-ctx.ts

@@ -0,0 +1,30 @@
+import Comment from './comment'
+import ActionBtn from '../components/action-btn'
+
+export default class RenderCtx {
+  public comment: Comment
+
+  public get ctx() { return this.comment.ctx }
+  public get data() { return this.comment.getData() }
+  public get conf() { return this.comment.conf }
+  public get cConf() { return this.comment.getConf() }
+
+  public $el!: HTMLElement
+  public $main!: HTMLElement
+  public $header!: HTMLElement
+  public $headerNick!: HTMLElement
+  public $headerBadgeWrap!: HTMLElement
+  public $body!: HTMLElement
+  public $content!: HTMLElement
+  public $childrenWrap!: HTMLElement|null
+  public $actions!: HTMLElement
+  public voteBtnUp?: ActionBtn
+  public voteBtnDown?: ActionBtn
+
+  public $replyTo?: HTMLElement // 回复评论内容 (平铺下显示)
+  public $replyAt?: HTMLElement // 回复 AT（层级嵌套下显示）
+
+  public constructor(comment: Comment) {
+    this.comment = comment
+  }
+}