artalk 2.7.0 → 2.7.2

package/src/comment/comment.ts

@@ -1,192 +0,0 @@
-import type { CommentData, ContextApi } from '~/types'
-import Component from '../lib/component'
-import * as Utils from '../lib/utils'
-import marked from '../lib/marked'
-import UADetect from '../lib/detect'
-import CommentUI from './render'
-import CommentActions from './actions'
-
-export interface CommentConf {
-  isUnread?: boolean
-  openURL?: string
-  isFlatMode: boolean
-  replyTo?: CommentData
-  afterRender?: () => void
-  openEvt?: () => void
-  onReplyBtnClick?: Function
-  onDelete?: Function
-}
-
-export default class Comment extends Component {
-  private renderInstance: CommentUI
-  private actionInstance: CommentActions
-
-  private data: CommentData
-  private cConf: CommentConf
-
-  private parent: Comment|null
-  private children: Comment[] = []
-
-  private nestCurt: number // 当前嵌套层数
-  private nestMax: number  // 最大嵌套层数
-
-  constructor(ctx: ContextApi, data: CommentData, conf: CommentConf) {
-    super(ctx)
-
-    // 最大嵌套数
-    this.nestMax = ctx.conf.nestMax || 3
-
-    this.cConf = conf
-    this.data = { ...data }
-    this.data.date = this.data.date.replace(/-/g, '/') // 解决 Safari 日期解析 NaN 问题
-
-    this.parent = null
-    this.nestCurt = 1 // 现在已嵌套 n 层
-
-    this.actionInstance = new CommentActions(this)
-    this.renderInstance = new CommentUI(this)
-  }
-
-  /** 渲染 UI */
-  public render() {
-    const newEl = this.renderInstance.render()
-
-    if (this.$el) this.$el.replaceWith(newEl)
-    this.$el = newEl
-
-    if (this.cConf.afterRender) this.cConf.afterRender()
-  }
-
-  /** 获取评论操作实例对象 */
-  public getActions() {
-    return this.actionInstance
-  }
-
-  /** 获取评论渲染器实例对象 */
-  public getRender() {
-    return this.renderInstance
-  }
-
-  /** 获取评论数据 */
-  public getData() {
-    return this.data
-  }
-
-  /** 设置数据 */
-  public setData(data: CommentData) {
-    this.data = data
-
-    this.render()
-    this.getRender().playFadeAnimForBody()
-  }
-
-  /** 获取父评论 */
-  public getParent() {
-    return this.parent
-  }
-
-  /** 获取所有子评论 */
-  public getChildren() {
-    return this.children
-  }
-
-  /** 获取当前嵌套层数 */
-  public getNestCurt() {
-    return this.nestCurt
-  }
-
-  /** 判断是否为根评论 */
-  public getIsRoot() {
-    return this.data.rid === 0
-  }
-
-  /** 获取评论 ID */
-  public getID() {
-    return this.data.id
-  }
-
-  /** 置入子评论 */
-  public putChild(childC: Comment, insertMode: 'append'|'prepend' = 'append') {
-    childC.parent = this
-    childC.nestCurt = this.nestCurt + 1 // 嵌套层数 +1
-
-    this.children.push(childC)
-
-    const $children = this.getChildrenEl()
-    if (insertMode === 'append') $children.append(childC.getEl())
-    else if (insertMode === 'prepend') $children.prepend(childC.getEl())
-
-    childC.getRender().playFadeAnim()
-
-    // 内容限高
-    childC.getRender().checkHeightLimit()
-  }
-
-  /** 获取存放子评论的元素对象 */
-  public getChildrenEl(): HTMLElement {
-    let $children = this.getRender().getChildrenWrap()
-
-    if (!$children) {
-      // console.log(this.nestCurt)
-      if (this.nestCurt < this.nestMax) {
-        $children = this.getRender().renderChildrenWrap()
-      } else {
-        $children = this.parent!.getChildrenEl()
-      }
-    }
-
-    return $children
-  }
-
-  /** 获取所有父评论 */
-  public getParents() {
-    const parents: Comment[] = []
-    const once = (c: Comment) => {
-      if (c.parent) {
-        parents.push(c.parent)
-        once(c.parent)
-      }
-    }
-
-    once(this)
-    return parents
-  }
-
-  /** 获取评论元素对象 */
-  public getEl() {
-    return this.$el
-  }
-
-  /** 获取 Gravatar 头像 URL */
-  public getGravatarURL() {
-    return Utils.getGravatarURL({
-      mirror: this.ctx.conf.gravatar.mirror,
-      params: this.ctx.conf.gravatar.params,
-      emailMD5: this.data.email_encrypted,
-    })
-  }
-
-  /** 获取评论 markdown 解析后的内容 */
-  public getContentMarked() {
-    return marked(this.data.content)
-  }
-
-  /** 获取格式化后的日期 */
-  public getDateFormatted() {
-    return Utils.timeAgo(new Date(this.data.date), this.ctx.$t)
-  }
-
-  /** 获取用户 UserAgent 信息 */
-  public getUserUA() {
-    const info = UADetect(this.data.ua)
-    return {
-      browser: `${info.browser} ${info.version}`,
-      os: `${info.os} ${info.osVersion}`
-    }
-  }
-
-  /** 获取配置 */
-  public getConf() {
-    return this.cConf
-  }
-}

package/src/comment/height-limit.ts

@@ -1,100 +0,0 @@
-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/index.ts

@@ -1,3 +0,0 @@
-import Comment from './comment'
-
-export default Comment

package/src/comment/render.ts

@@ -1,150 +0,0 @@
-import type Comment from './comment'
-import ActionBtn from '../components/action-btn'
-import * as Utils from '../lib/utils'
-import * as Ui from '../lib/ui'
-
-import * as HeightLimit from './height-limit'
-import CommentHTML from './comment.html?raw'
-import loadRenders from './renders'
-
-export default class Render {
-  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
-  }
-
-  public render() {
-    // init ui elements
-    this.$el = Utils.createElement(CommentHTML)
-
-    this.$main = this.$el.querySelector('.atk-main')!
-    this.$header = this.$el.querySelector('.atk-header')!
-    this.$body = this.$el.querySelector('.atk-body')!
-    this.$content = this.$body.querySelector('.atk-content')!
-    this.$actions = this.$el.querySelector('.atk-actions')!
-
-    this.$el.setAttribute('id', `atk-comment-${this.data.id}`)
-
-    // call all renders
-    loadRenders(this)
-
-    this.recoveryChildrenWrap()
-
-    return this.$el
-  }
-
-  /** 内容限高检测 */
-  public checkHeightLimit() {
-    const conf = this.ctx.conf.heightLimit
-    if (!conf || !conf.content || !conf.children) return // 关闭限高
-
-    const contentMaxH = conf.content
-    const childrenMaxH = conf.children
-
-    HeightLimit.check({
-      postExpandBtnClick: () => {
-        // 子评论数仅有 1，直接取消限高
-        const children = this.comment.getChildren()
-        if (children.length === 1) HeightLimit.disposeHeightLimit(children[0].getRender().$content)
-      },
-      scrollable: conf.scrollable
-    }, [
-      // 评论内容限高
-      { el: this.$content, max: contentMaxH, imgContains: true },
-      { el: this.$replyTo, max: contentMaxH, imgContains: true },
-      // 子评论区域限高（仅嵌套模式）
-      { el: this.$childrenWrap, max: childrenMaxH, imgContains: false }
-    ])
-  }
-
-  /** 子评论区域移除限高 */
-  public heightLimitRemoveForChildren() {
-    if (!this.$childrenWrap) return
-    HeightLimit.disposeHeightLimit(this.$childrenWrap)
-  }
-
-  /** 渐出动画 */
-  playFadeAnim() {
-    Ui.playFadeInAnim(this.comment.getRender().$el)
-  }
-
-  /** 渐出动画 · 评论内容区域 */
-  playFadeAnimForBody() {
-    Ui.playFadeInAnim(this.comment.getRender().$body)
-  }
-
-  /** 获取子评论 Wrap */
-  public getChildrenWrap() {
-    return this.$childrenWrap
-  }
-
-  /** 初始化子评论区域 Wrap */
-  public renderChildrenWrap() {
-    if (!this.$childrenWrap) {
-      this.$childrenWrap = Utils.createElement('<div class="atk-comment-children"></div>')
-      this.$main.append(this.$childrenWrap)
-    }
-
-    return this.$childrenWrap
-  }
-
-  /** 恢复原有的子评论区域 Wrap */
-  public recoveryChildrenWrap() {
-    if (this.$childrenWrap) {
-      this.$main.append(this.$childrenWrap)
-    }
-  }
-
-  /** 设置已读 */
-  public setUnread(val: boolean) {
-    if (val) this.$el.classList.add('atk-unread')
-    else this.$el.classList.remove('atk-unread')
-  }
-
-  /** 设置为可点击的评论 */
-  public setOpenable(val: boolean) {
-    if (val) this.$el.classList.add('atk-openable')
-    else this.$el.classList.remove('atk-openable')
-  }
-
-  /** 设置点击评论打开置顶 URL */
-  public setOpenURL(url: string) {
-    this.setOpenable(true)
-    this.$el.onclick = (evt) => {
-      evt.preventDefault()
-      window.open(url)
-
-      if (this.cConf.openEvt) this.cConf.openEvt()
-    }
-  }
-
-  /** 设置点击评论时的操作 */
-  public setOpenAction(action: () => void) {
-    this.setOpenable(true)
-    this.$el.onclick = (evt) => {
-      evt.preventDefault()
-      action()
-    }
-  }
-}

package/src/comment/renders/actions.ts

@@ -1,114 +0,0 @@
-import * as Utils from '../../lib/utils'
-import ActionBtn from '../../components/action-btn'
-import type Render from '../render'
-
-/**
- * 评论操作按钮界面
- */
-export default function renderActions(r: Render) {
-  Object.entries({
-    renderVote, renderReply,
-    // 管理员操作
-    renderCollapse, renderModerator, renderPin, renderEdit, renderDel
-  }).forEach(([name, render]) => {
-    render(r)
-  })
-}
-
-
-// 操作按钮 - 投票
-function renderVote(r: Render) {
-  if (!r.ctx.conf.vote) return // 关闭投票功能
-
-  // 赞同按钮
-  r.voteBtnUp = new ActionBtn(() => `${r.ctx.$t('voteUp')} (${r.data.vote_up || 0})`).appendTo(r.$actions)
-  r.voteBtnUp.setClick(() => {
-    r.comment.getActions().vote('up')
-  })
-
-  // 反对按钮
-  if (r.ctx.conf.voteDown) {
-    r.voteBtnDown = new ActionBtn(() => `${r.ctx.$t('voteDown')} (${r.data.vote_down || 0})`).appendTo(r.$actions)
-    r.voteBtnDown.setClick(() => {
-      r.comment.getActions().vote('down')
-    })
-  }
-}
-
-// 操作按钮 - 回复
-function renderReply(r: Render) {
-  if (!r.data.is_allow_reply) return // 不允许回复
-
-  const replyBtn = Utils.createElement(`<span>${r.ctx.$t('reply')}</span>`)
-  r.$actions.append(replyBtn)
-  replyBtn.addEventListener('click', (e) => {
-    e.stopPropagation() // 防止穿透
-    if (!r.cConf.onReplyBtnClick) {
-      r.ctx.replyComment(r.data, r.$el)
-    } else {
-      r.cConf.onReplyBtnClick()
-    }
-  })
-}
-
-// 操作按钮 - 折叠
-function renderCollapse(r: Render) {
-  const collapseBtn = new ActionBtn({
-    text: () => (r.data.is_collapsed ? r.ctx.$t('expand') : r.ctx.$t('collapse')),
-    adminOnly: true
-  })
-  collapseBtn.appendTo(r.$actions)
-  collapseBtn.setClick(() => {
-    r.comment.getActions().adminEdit('collapsed', collapseBtn)
-  })
-}
-
-// 操作按钮 - 审核
-function renderModerator(r: Render) {
-  const pendingBtn = new ActionBtn({
-    text: () => (r.data.is_pending ? r.ctx.$t('pending') : r.ctx.$t('approved')),
-    adminOnly: true
-  })
-  pendingBtn.appendTo(r.$actions)
-  pendingBtn.setClick(() => {
-    r.comment.getActions().adminEdit('pending', pendingBtn)
-  })
-}
-
-// 操作按钮 - 置顶
-function renderPin(r: Render) {
-  const pinnedBtn = new ActionBtn({
-    text: () => (r.data.is_pinned ? r.ctx.$t('unpin') : r.ctx.$t('pin')),
-    adminOnly: true
-  })
-  pinnedBtn.appendTo(r.$actions)
-  pinnedBtn.setClick(() => {
-    r.comment.getActions().adminEdit('pinned', pinnedBtn)
-  })
-}
-
-// 操作按钮 - 编辑
-function renderEdit(r: Render) {
-  const editBtn = new ActionBtn({
-    text: r.ctx.$t('edit'),
-    adminOnly: true
-  })
-  editBtn.appendTo(r.$actions)
-  editBtn.setClick(() => {
-    r.ctx.editComment(r.data, r.$el)
-  })
-}
-
-// 操作按钮 - 删除
-function renderDel(r: Render) {
-  const delBtn = new ActionBtn({
-    text: r.ctx.$t('delete'),
-    confirm: true,
-    confirmText: r.ctx.$t('deleteConfirm'),
-    adminOnly: true,
-  })
-  delBtn.appendTo(r.$actions)
-  delBtn.setClick(() => {
-    r.comment.getActions().adminDelete(delBtn)
-  })
-}

package/src/comment/renders/avatar.ts

@@ -1,22 +0,0 @@
-import * as Utils from '../../lib/utils'
-import type Render from '../render'
-
-/**
- * 评论头像界面
- */
-export default function renderAvatar(r: Render) {
-  const $avatar = r.$el.querySelector<HTMLElement>('.atk-avatar')!
-  const $avatarImg = Utils.createElement<HTMLImageElement>('<img />')
-
-  const avatarURLBuilder = r.conf.avatarURLBuilder
-  $avatarImg.src = avatarURLBuilder ? avatarURLBuilder(r.data) : r.comment.getGravatarURL()
-
-  if (r.data.link) {
-    const $avatarA = Utils.createElement<HTMLLinkElement>('<a target="_blank" rel="noreferrer noopener nofollow"></a>')
-    $avatarA.href = Utils.isValidURL(r.data.link) ? r.data.link : `https://${r.data.link}`
-    $avatarA.append($avatarImg)
-    $avatar.append($avatarA)
-  } else {
-    $avatar.append($avatarImg)
-  }
-}

package/src/comment/renders/content.ts

@@ -1,39 +0,0 @@
-import * as Utils from '../../lib/utils'
-import * as Ui from '../../lib/ui'
-import type Render from '../render'
-
-/**
- * 评论内容界面
- */
-export default function renderContent(r: Render) {
-  if (!r.data.is_collapsed) {
-    r.$content.innerHTML = r.comment.getContentMarked()
-    r.$content.classList.remove('atk-hide', 'atk-collapsed')
-    return
-  }
-
-  // 内容 & 折叠
-  r.$content.classList.add('atk-hide', 'atk-type-collapsed')
-  const collapsedInfoEl = Utils.createElement(`
-    <div class="atk-collapsed">
-      <span class="atk-text">${r.ctx.$t('collapsedMsg')}</span>
-      <span class="atk-show-btn">${r.ctx.$t('expand')}</span>
-    </div>`)
-  r.$body.insertAdjacentElement('beforeend', collapsedInfoEl)
-
-  const contentShowBtn = collapsedInfoEl.querySelector<HTMLElement>('.atk-show-btn')!
-  contentShowBtn.addEventListener('click', (e) => {
-    e.stopPropagation() // 防止穿透
-
-    if (r.$content.classList.contains('atk-hide')) {
-      r.$content.innerHTML = r.comment.getContentMarked()
-      r.$content.classList.remove('atk-hide')
-      Ui.playFadeInAnim(r.$content)
-      contentShowBtn.innerText = r.ctx.$t('collapse')
-    } else {
-      r.$content.innerHTML = ''
-      r.$content.classList.add('atk-hide')
-      contentShowBtn.innerText = r.ctx.$t('expand')
-    }
-  })
-}

package/src/comment/renders/header.ts

@@ -1,84 +0,0 @@
-import * as Utils from '../../lib/utils'
-import type Render from '../render'
-
-/**
- * 评论头部界面
- */
-export default function renderHeader(r: Render) {
-  Object.entries({
-    renderNick, renderVerifyBadge, renderDate, renderUABadge
-  }).forEach(([name, render]) => {
-    render(r)
-  })
-}
-
-function renderNick(r: Render) {
-  r.$headerNick = r.$el.querySelector<HTMLElement>('.atk-nick')!
-
-  if (r.data.link) {
-    const $nickA = Utils.createElement<HTMLLinkElement>('<a target="_blank" rel="noreferrer noopener nofollow"></a>')
-    $nickA.innerText = r.data.nick
-    $nickA.href = Utils.isValidURL(r.data.link) ? r.data.link : `https://${r.data.link}`
-    r.$headerNick.append($nickA)
-  } else {
-    r.$headerNick.innerText = r.data.nick
-  }
-}
-
-function renderVerifyBadge(ctx: Render) {
-  ctx.$headerBadgeWrap = ctx.$el.querySelector<HTMLElement>('.atk-badge-wrap')!
-  ctx.$headerBadgeWrap.innerHTML = ''
-
-  const badgeText = ctx.data.badge_name
-  const badgeColor = ctx.data.badge_color
-  if (badgeText) {
-    const $badge = Utils.createElement(`<span class="atk-badge"></span>`)
-    $badge.innerText = badgeText.replace('管理员', ctx.ctx.$t('admin')) // i18n patch
-    $badge.style.backgroundColor = badgeColor || ''
-    ctx.$headerBadgeWrap.append($badge)
-  }
-
-  if (ctx.data.is_pinned) {
-    const $pinnedBadge = Utils.createElement(`<span class="atk-pinned-badge">${ctx.ctx.$t('pin')}</span>`) // 置顶徽章
-    ctx.$headerBadgeWrap.append($pinnedBadge)
-  }
-}
-
-function renderDate(ctx: Render) {
-  const $date = ctx.$el.querySelector<HTMLElement>('.atk-date')!
-  $date.innerText = ctx.comment.getDateFormatted()
-  $date.setAttribute('data-atk-comment-date', String(+new Date(ctx.data.date)))
-}
-
-function renderUABadge(ctx: Render) {
-  if (!ctx.ctx.conf.uaBadge && !ctx.data.ip_region) return
-
-  let $uaWrap = ctx.$header.querySelector('atk-ua-wrap')
-  if (!$uaWrap) {
-    $uaWrap = Utils.createElement(`<span class="atk-ua-wrap"></span>`)
-    ctx.$header.append($uaWrap)
-  }
-
-  $uaWrap.innerHTML = ''
-
-  if (ctx.data.ip_region) {
-    const $regionBadge = Utils.createElement(`<span class="atk-region-badge"></span>`)
-    $regionBadge.innerText = ctx.data.ip_region
-    $uaWrap.append($regionBadge)
-  }
-
-  if (ctx.ctx.conf.uaBadge) {
-    const { browser, os } = ctx.comment.getUserUA()
-    if (String(browser).trim()) {
-      const $uaBrowser = Utils.createElement(`<span class="atk-ua ua-browser"></span>`)
-      $uaBrowser.innerText = browser
-      $uaWrap.append($uaBrowser)
-    }
-
-    if (String(os).trim()) {
-      const $usOS = Utils.createElement(`<span class="atk-ua ua-os"></span>`)
-      $usOS.innerText = os
-      $uaWrap.append($usOS)
-    }
-  }
-}