artalk 2.6.4 → 2.7.1

package/src/layer/layer.ts

@@ -1,51 +1,17 @@
-import Context from '~/types/context'
-import Component from '../lib/component'
-import * as Utils from '../lib/utils'
-import * as Ui from '../lib/ui'
+import type { LayerWrap } from './wrap'
 
-export default class Layer extends Component {
-  private name: string
-  private $wrap: HTMLElement
-  private $mask: HTMLElement
+export class Layer {
+  private $el: HTMLElement
+  private wrap: LayerWrap
+  private onAfterHide?: () => void
 
-  private maskClickHideEnable: boolean = true
-
-  public static BodyOrgOverflow: string
-  public static BodyOrgPaddingRight: string
-
-  public afterHide?: Function
-
-  constructor (ctx: Context, name: string, el?: HTMLElement) {
-    super(ctx)
-
-    this.name = name
-    const { $wrap, $mask } = getLayerWrap()
-    this.$wrap = $wrap
-    this.$mask = $mask
-
-    this.$el = this.$wrap.querySelector(`[data-layer-name="${name}"].atk-layer-item`)!
-    if (this.$el === null) {
-      // 若传递 layer 元素为空
-      if (!el) {
-        this.$el = Utils.createElement()
-        this.$el.classList.add('atk-layer-item')
-      } else {
-        this.$el = el
-      }
-    }
-    this.$el.setAttribute('data-layer-name', name)
-    this.$el.style.display = 'none'
-
-    // 添加到 layers wrap 中
-    this.$wrap.append(this.$el)
-  }
-
-  getName() {
-    return this.name
+  constructor(wrap: LayerWrap, name: string, el?: HTMLElement) {
+    this.wrap = wrap
+    this.$el = this.wrap.createItem(name, el)
   }
 
-  getWrapEl() {
-    return this.$wrap
+  setOnAfterHide(func: () => void) {
+    this.onAfterHide = func
   }
 
   getEl() {
@@ -53,111 +19,21 @@ export default class Layer extends Component {
   }
 
   show() {
-    this.fireAllActionTimer()
-
-    this.$wrap.style.display = 'block'
-    this.$mask.style.display = 'block'
-    this.$mask.classList.add('atk-fade-in')
     this.$el.style.display = ''
-
-    this.$mask.onclick = () => {
-      if (this.maskClickHideEnable) this.hide()
-    }
-
-    // body style 禁止滚动 + 防抖
-    this.pageBodyScrollBarHide()
-  }
-
-  hide () {
-    if (this.afterHide) this.afterHide()
-    this.$wrap.classList.add('atk-fade-out')
-    this.$el.style.display = 'none'
-
-    // body style 禁止滚动解除
-    this.pageBodyScrollBarShow()
-
-    this.newActionTimer(() => {
-      this.$wrap.style.display = 'none'
-      this.checkCleanLayer()
-    }, 450)
-    this.newActionTimer(() => {
-      this.$wrap.style.display = 'none'
-      this.$wrap.classList.remove('atk-fade-out')
-    }, 200)
+    this.wrap.show()
   }
 
-  setMaskClickHide (enable: boolean) {
-    this.maskClickHideEnable = enable
-  }
-
-  // 页面滚动条隐藏
-  pageBodyScrollBarHide() {
-    document.body.style.overflow = 'hidden'
-
-    const bpr = parseInt(window.getComputedStyle(document.body, null).getPropertyValue('padding-right'), 10)
-    document.body.style.paddingRight = `${Ui.getScrollBarWidth() + bpr || 0}px`
-  }
-
-  // 页面滚动条显示
-  pageBodyScrollBarShow() {
-    document.body.style.overflow = Layer.BodyOrgOverflow
-    document.body.style.paddingRight = Layer.BodyOrgPaddingRight
-  }
-
-  // Timers
-  private static actionTimers: {act: Function, tid: number}[] = []
-
-  private newActionTimer(func: Function, delay: number) {
-    const act = () => {
-      func() // 执行
-      Layer.actionTimers = Layer.actionTimers.filter(o => o.act !== act) // 删除
-    }
-
-    const tid = window.setTimeout(() => act(), delay)
-
-    Layer.actionTimers.push({ act, tid })
-  }
-
-  private fireAllActionTimer() {
-    Layer.actionTimers.forEach(item => {
-      clearTimeout(item.tid)
-      item.act() // 立即执行
+  hide() {
+    this.wrap.hide(() => {
+      this.$el.style.display = 'none'
+      this.onAfterHide && this.onAfterHide()
     })
   }
 
-  /** 销毁 - 无动画 */
-  disposeNow() {
-    this.$el.remove()
-    this.pageBodyScrollBarShow()
-    // this.$el dispose
-    this.checkCleanLayer()
-  }
-
-  /** 销毁 */
-  dispose() {
-    this.hide()
-    this.$el.remove()
-    // this.$el dispose
-    this.checkCleanLayer()
-  }
-
-  checkCleanLayer() {
-    if (this.getWrapEl().querySelectorAll('.atk-layer-item').length === 0) {
-      this.$wrap.style.display = 'none'
-    }
-  }
-}
-
-export function getLayerWrap(): { $wrap: HTMLElement, $mask: HTMLElement } {
-  let $wrap = document.querySelector<HTMLElement>(`.atk-layer-wrap`)
-  if (!$wrap) {
-    $wrap = Utils.createElement(
-      `<div class="atk-layer-wrap" style="display: none;"><div class="atk-layer-mask"></div></div>`
-    )
-    document.body.appendChild($wrap)
+  destroy() {
+    this.wrap.hide(() => {
+      this.$el.remove()
+      this.onAfterHide && this.onAfterHide()
+    })
   }
-
-  const $mask = $wrap.querySelector<HTMLElement>('.atk-layer-mask')!
-
-  return { $wrap, $mask }
 }

package/src/layer/scrollbar-helper.ts

@@ -0,0 +1,24 @@
+import * as Ui from '@/lib/ui'
+
+let bodyOrgOverflow: string
+let bodyOrgPaddingRight: string
+
+export function getScrollbarHelper() {
+  return {
+    init() {
+      bodyOrgOverflow = document.body.style.overflow
+      bodyOrgPaddingRight = document.body.style.paddingRight
+    },
+
+    unlock() {
+      document.body.style.overflow = bodyOrgOverflow
+      document.body.style.paddingRight = bodyOrgPaddingRight
+    },
+
+    lock() {
+      document.body.style.overflow = 'hidden'
+      const barPaddingRight = parseInt(window.getComputedStyle(document.body, null).getPropertyValue('padding-right'), 10)
+      document.body.style.paddingRight = `${Ui.getScrollBarWidth() + barPaddingRight || 0}px`
+    }
+  }
+}

package/src/layer/sidebar-layer.ts

@@ -1,14 +1,10 @@
-import Context from '~/types/context'
+import type { ContextApi, SidebarShowPayload } from '~/types'
 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 {
-  view?: 'comments'|'sites'|'pages'|'transfer'
-}
+import type { Layer } from './layer'
 
 export default class SidebarLayer extends Component {
   public layer?: Layer
@@ -17,7 +13,7 @@ export default class SidebarLayer extends Component {
   public $iframeWrap: HTMLElement
   public $iframe?: HTMLIFrameElement
 
-  constructor(ctx: Context) {
+  constructor(ctx: ContextApi) {
     super(ctx)
 
     this.$el = Utils.createElement(SidebarHTML)
@@ -40,72 +36,31 @@ export default class SidebarLayer extends Component {
     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.editorTravelBack()
-        }
-      }
-    }
-    this.layer.show()
-
-    // viewWrap 滚动条归位
-    // this.$viewWrap.scrollTo(0, 0)
+    this.initLayer()
+    this.layer!.show()
 
     // 管理员身份验证 (若身份失效，弹出验证窗口)
-    ;(async () => {
-      const resp = await this.ctx.getApi().user.loginStatus()
-      if (resp.is_admin && !resp.is_login) {
-        this.layer?.hide()
-        this.firstShow = true
-
-        this.ctx.checkAdmin({
-          onSuccess: () => {
-            setTimeout(() => {
-              this.show(conf)
-            }, 500)
-          },
-          onCancel: () => {}
-        })
-      }
-    })()
+    this.authCheck({
+      onSuccess: () => this.show(conf) // retry show after auth check
+    })
 
     // 第一次加载
     if (this.firstShow) {
       this.$iframeWrap.innerHTML = ''
-      this.$iframe = Utils.createElement<HTMLIFrameElement>('<iframe></iframe>')
-
-      // 准备 Iframe 参数
-      const baseURL = (import.meta.env.DEV)  ? 'http://localhost:23367/'
-        : Utils.getURLBasedOnApi(this.ctx, '/sidebar/')
-
-      const query: any = {
-        pageKey: this.conf.pageKey,
-        site: this.conf.site || '',
-        user: JSON.stringify(User.data),
-        time: +new Date()
-      }
-
-      if (conf.view) query.view = conf.view
-      if (this.conf.darkMode) query.darkMode = '1'
-      if (typeof this.conf.locale === 'string') query.locale = this.conf.locale
-
-      const urlParams = new URLSearchParams(query);
-      this.iframeLoad(`${baseURL}?${urlParams.toString()}`)
-
+      this.$iframe = this.createIframe(conf.view)
       this.$iframeWrap.append(this.$iframe)
       this.firstShow = false
     } else {
+      const $iframe = this.$iframe!
+
       // 夜间模式
-      const isIframeSrcDarkMode = this.$iframe!.src.includes('darkMode=1')
+      const isIframeSrcDarkMode = $iframe.src.includes('darkMode=1')
 
       if (this.conf.darkMode && !isIframeSrcDarkMode)
-        this.iframeLoad(`${this.$iframe!.src}&darkMode=1`)
+        this.iframeLoad($iframe, `${this.$iframe!.src}&darkMode=1`)
 
       if (!this.conf.darkMode && isIframeSrcDarkMode)
-        this.iframeLoad(this.$iframe!.src.replace('&darkMode=1', ''))
+        this.iframeLoad($iframe, this.$iframe!.src.replace('&darkMode=1', ''))
     }
 
     // 执行滑动显示动画
@@ -115,7 +70,7 @@ export default class SidebarLayer extends Component {
 
     // 清空 unread
     setTimeout(() => {
-      this.ctx.updateNotifies([])
+      this.ctx.getData().updateUnreads([])
     }, 0)
 
     this.ctx.trigger('sidebar-show')
@@ -131,14 +86,69 @@ export default class SidebarLayer extends Component {
     this.ctx.trigger('sidebar-hide')
   }
 
-  private iframeLoad(src: string) {
-    if (!this.$iframe) return
+  // --------------------------------------------------
+
+  private async authCheck(opts: { onSuccess: () => void }) {
+    const resp = await this.ctx.getApi().user.loginStatus()
+    if (resp.is_admin && !resp.is_login) {
+      this.firstShow = true
+
+      this.ctx.checkAdmin({
+        onSuccess: () => {
+          setTimeout(() => {
+            opts.onSuccess()
+          }, 500)
+        },
+        onCancel: () => {
+          this.hide()
+        }
+      })
+    }
+  }
+
+  private initLayer() {
+    if (this.layer) return
+
+    this.layer = this.ctx.get('layerManager').create('sidebar', this.$el)
+    this.layer.setOnAfterHide(() => {
+      // 防止评论框被吞
+      this.ctx.editorResetState()
+    })
+  }
+
+  private createIframe(view?: string) {
+    const $iframe = Utils.createElement<HTMLIFrameElement>('<iframe></iframe>')
+
+    // 准备 Iframe 参数
+    const baseURL = (import.meta.env.DEV)  ? 'http://localhost:23367/'
+      : Utils.getURLBasedOnApi({
+        base: this.ctx.conf.server,
+        path: '/sidebar/',
+      })
+
+    const query: any = {
+      pageKey: this.conf.pageKey,
+      site: this.conf.site || '',
+      user: JSON.stringify(User.data),
+      time: +new Date()
+    }
+
+    if (view) query.view = view
+    if (this.conf.darkMode) query.darkMode = '1'
+    if (typeof this.conf.locale === 'string') query.locale = this.conf.locale
+
+    const urlParams = new URLSearchParams(query);
+    this.iframeLoad($iframe, `${baseURL}?${urlParams.toString()}`)
+
+    return $iframe
+  }
 
-    this.$iframe.src = src
+  private iframeLoad($iframe: HTMLIFrameElement, src: string) {
+    $iframe.src = src
 
     // 加载动画
     Ui.showLoading(this.$iframeWrap)
-    this.$iframe.onload = () => {
+    $iframe.onload = () => {
       Ui.hideLoading(this.$iframeWrap)
     }
   }

package/src/layer/wrap.ts

@@ -0,0 +1,77 @@
+import * as Utils from '@/lib/utils'
+import { getScrollbarHelper } from './scrollbar-helper'
+
+export class LayerWrap {
+  private $wrap: HTMLElement
+  private $mask: HTMLElement
+  private allowMaskClose: boolean = true
+  private items: HTMLElement[] = []
+
+  constructor() {
+    this.$wrap = Utils.createElement(
+      `<div class="atk-layer-wrap" style="display: none;"><div class="atk-layer-mask"></div></div>`
+    )
+    this.$mask = this.$wrap.querySelector<HTMLElement>('.atk-layer-mask')!
+  }
+
+  createItem(name: string, el?: HTMLElement) {
+    if (!el) {
+      el = document.createElement('div')
+      el.classList.add('atk-layer-item')
+      el.setAttribute('data-layer-name', name)
+      el.style.display = 'none'
+    }
+    this.$wrap.appendChild(el)
+    this.items.push(el)
+    return el
+  }
+
+  getWrap() {
+    return this.$wrap
+  }
+
+  getMask() {
+    return this.$mask
+  }
+
+  setMaskClose(enabled: boolean) {
+    this.allowMaskClose = enabled
+  }
+
+  show() {
+    this.$wrap.style.display = 'block'
+    this.$mask.style.display = 'block'
+    this.$mask.classList.add('atk-fade-in')
+    this.$mask.onclick = () => {
+      if (this.allowMaskClose) this.hide()
+    }
+    getScrollbarHelper().lock()
+  }
+
+  hide(callback?: () => void) {
+    // if wrap contains more than one item, do not hide entire wrap
+    if (this.items.filter(e => e.isConnected && e.style.display !== 'none').length > 1) {
+      callback && callback()
+      return
+    }
+
+    const onAfterHide = () => {
+      this.$wrap.style.display = 'none'
+      this.$wrap.classList.remove('atk-fade-out')
+
+      callback && callback()
+
+      getScrollbarHelper().unlock()
+
+      this.$wrap.onanimationend = null
+    }
+
+    // perform animation
+    this.$wrap.classList.add('atk-fade-out')
+    if (window.getComputedStyle(this.$wrap)['animation-name'] !== 'none') {
+      this.$wrap.onanimationend = () => onAfterHide()
+    } else {
+      onAfterHide()
+    }
+  }
+}

package/src/lib/component.ts

@@ -1,19 +1,12 @@
-import ArtalkConfig from '~/types/artalk-config'
-import Context from '~/types/context'
-import { I18n } from '../i18n'
+import type { ArtalkConfig, ContextApi } from '~/types'
 
 export default abstract class Component {
   public $el!: HTMLElement
-
-  public ctx: Context
   public readonly conf: ArtalkConfig
 
-  public constructor(ctx: Context) {
-    this.ctx = ctx
+  public constructor(
+    public ctx: ContextApi
+  ) {
     this.conf = ctx.conf
   }
-
-  public $t(key: keyof I18n, args: {[key: string]: string} = {}): string {
-    return this.ctx.$t(key, args)
-  }
 }

package/src/lib/detect.ts

@@ -1,7 +1,7 @@
 const win = (window as any) || {}
 const nav = navigator || {}
 
-function Detect (userAgent?: string) {
+function Detect(userAgent?: string) {
   const u = String(userAgent || nav.userAgent)
   const dest = {
     os: '',

package/src/lib/event-manager.ts

@@ -0,0 +1,47 @@
+export type EventHandler<T> = (payload: T) => void
+export interface Event<PayloadMap, K extends keyof PayloadMap = keyof PayloadMap> extends EventOptions {
+  name: K
+  handler: EventHandler<PayloadMap[K]>
+}
+export interface EventOptions {
+  once?: boolean
+}
+
+export interface EventManagerFuncs<PayloadMap> {
+  on<K extends keyof PayloadMap>(name: K, handler: EventHandler<PayloadMap[K]>, opts?: EventOptions): void
+  off<K extends keyof PayloadMap>(name: K, handler: EventHandler<PayloadMap[K]>): void
+  trigger<K extends keyof PayloadMap>(name: K, payload?: PayloadMap[K]): void
+}
+
+export default class EventManager<PayloadMap> implements EventManagerFuncs<PayloadMap> {
+  private events: Event<PayloadMap>[] = []
+
+  /**
+   * Add an event listener for a specific event name
+   */
+  public on<K extends keyof PayloadMap>(name: K, handler: EventHandler<PayloadMap[K]>, opts: EventOptions = {}) {
+    this.events.push({ name, handler: handler as EventHandler<PayloadMap[keyof PayloadMap]>, ...opts })
+  }
+
+  /**
+   * Remove an event listener for a specific event name and handler
+   */
+  public off<K extends keyof PayloadMap>(name: K, handler: EventHandler<PayloadMap[K]>) {
+    if (!handler) return // not allow remove all events with same name
+    this.events = this.events.filter((evt) =>
+      !(evt.name === name && evt.handler === handler))
+  }
+
+  /**
+   * Trigger an event with an optional payload
+   */
+  public trigger<K extends keyof PayloadMap>(name: K, payload?: PayloadMap[K]) {
+    this.events
+      .slice(0) // make a copy, in case listeners are removed while iterating
+      .filter((evt) => evt.name === name && typeof evt.handler === 'function')
+      .forEach((evt) => {
+        if (evt.once) this.off(name, evt.handler)
+        evt.handler(payload!)
+      })
+  }
+}

package/src/lib/highlight.ts

@@ -0,0 +1,5 @@
+import hanabi from 'hanabi'
+
+export function renderCode(code: string) {
+  return hanabi(code)
+}

package/src/lib/marked-renderer.ts

@@ -0,0 +1,32 @@
+import { marked as libMarked } from 'marked'
+import { renderCode } from './highlight'
+
+export function getRenderer() {
+  const renderer = new libMarked.Renderer()
+  renderer.link = markedLinkRenderer(renderer, renderer.link)
+  renderer.code = markedCodeRenderer()
+  return renderer
+}
+
+export const markedLinkRenderer = (renderer: any, orgLinkRenderer: Function) => (href: string, title: string, text: string): string => {
+  const localLink = href?.startsWith(`${window.location.protocol}//${window.location.hostname}`);
+  const html = orgLinkRenderer.call(renderer, href, title, text);
+  return html.replace(/^<a /, `<a target="_blank" ${!localLink ? `rel="noreferrer noopener nofollow"` : ''} `);
+}
+
+export const markedCodeRenderer = () => (block: string, lang: string | undefined): string => {
+  // Colorize the block only if the language is known to highlight.js
+  const realLang = (!lang ? 'plaintext' : lang)
+  let colorized = block
+  if ((window as any).hljs) {
+    if (realLang && (window as any).hljs.getLanguage(realLang)) {
+      colorized = (window as any).hljs.highlight(realLang, block).value
+    }
+  } else {
+    colorized = renderCode(block)
+  }
+
+  return `<pre rel="${realLang}">\n`
+    + `<code class="hljs language-${realLang}">${colorized.replace(/&amp;/g, '&')}</code>\n`
+    + `</pre>`
+}