artalk 2.7.1 → 2.7.2

package/src/lib/utils.ts

@@ -1,236 +0,0 @@
-export function createElement<E extends HTMLElement = HTMLElement>(htmlStr: string = ''): E {
-  const div = document.createElement('div')
-  div.innerHTML = htmlStr.trim()
-  return (div.firstElementChild || div) as E
-}
-
-export function getHeight(el: HTMLElement) {
-  return parseFloat(getComputedStyle(el, null).height.replace('px', ''))
-}
-
-export function htmlEncode(str: string) {
-  const temp = document.createElement('div')
-  temp.innerText = str
-  const output = temp.innerHTML
-  return output
-}
-
-export function htmlDecode(str: string) {
-  const temp = document.createElement('div')
-  temp.innerHTML = str
-  const output = temp.innerText
-  return output
-}
-
-export function getQueryParam(name: string) {
-  const match = RegExp(`[?&]${name}=([^&]*)`).exec(window.location.search);
-  return match && decodeURIComponent(match[1].replace(/\+/g, ' '));
-}
-
-export function getOffset(el: HTMLElement, relativeTo?: HTMLElement) {
-  const getOffsetRecursive = (element: HTMLElement): { top: number, left: number } => {
-    const rect = element.getBoundingClientRect()
-    const scrollLeft = window.pageXOffset || document.documentElement.scrollLeft
-    const scrollTop = window.pageYOffset || document.documentElement.scrollTop
-    return {
-      top: rect.top + scrollTop,
-      left: rect.left + scrollLeft
-    }
-  }
-
-  const elOffset = getOffsetRecursive(el)
-  if (!relativeTo) return elOffset
-
-  const relativeToOffset = getOffsetRecursive(relativeTo)
-
-  return {
-    top: elOffset.top - relativeToOffset.top,
-    left: elOffset.left - relativeToOffset.left
-  }
-}
-
-export function padWithZeros(vNumber: number, width: number) {
-  let numAsString = vNumber.toString()
-  while (numAsString.length < width) {
-    numAsString = `0${numAsString}`
-  }
-  return numAsString
-}
-
-export function dateFormat(date: Date) {
-  const vDay = padWithZeros(date.getDate(), 2)
-  const vMonth = padWithZeros(date.getMonth() + 1, 2)
-  const vYear = padWithZeros(date.getFullYear(), 2)
-  // var vHour = padWithZeros(date.getHours(), 2);
-  // var vMinute = padWithZeros(date.getMinutes(), 2);
-  // var vSecond = padWithZeros(date.getSeconds(), 2);
-  return `${vYear}-${vMonth}-${vDay}`
-}
-
-export function timeAgo(date: Date, $t: Function = (n: string) => n) {
-  try {
-    const oldTime = date.getTime()
-    const currTime = new Date().getTime()
-    const diffValue = currTime - oldTime
-
-    const days = Math.floor(diffValue / (24 * 3600 * 1000))
-    if (days === 0) {
-      // 计算相差小时数
-      const leave1 = diffValue % (24 * 3600 * 1000) // 计算天数后剩余的毫秒数
-      const hours = Math.floor(leave1 / (3600 * 1000))
-      if (hours === 0) {
-        // 计算相差分钟数
-        const leave2 = leave1 % (3600 * 1000) // 计算小时数后剩余的毫秒数
-        const minutes = Math.floor(leave2 / (60 * 1000))
-        if (minutes === 0) {
-          // 计算相差秒数
-          const leave3 = leave2 % (60 * 1000) // 计算分钟数后剩余的毫秒数
-          const seconds = Math.round(leave3 / 1000)
-          if (seconds < 10) return $t('now')
-          return `${seconds} ${$t('seconds')}`
-        }
-        return `${minutes} ${$t('minutes')}`
-      }
-      return `${hours} ${$t('hours')}`
-    }
-    if (days < 0) return $t('now')
-
-    if (days < 8) {
-      return `${days} ${$t('days')}`
-    }
-
-    return dateFormat(date)
-  } catch (error) {
-    console.error(error)
-    return ' - '
-  }
-}
-
-/** 所有图片加载完毕后执行 */
-export function onImagesLoaded($container: HTMLElement, event: Function) {
-  if (!$container) return
-  const images = $container.getElementsByTagName('img')
-  if (!images.length) return
-  let loaded = images.length
-  for (let i = 0; i < images.length; i++) {
-    if (images[i].complete) {
-      loaded--
-    } else {
-      // eslint-disable-next-line @typescript-eslint/no-loop-func
-      images[i].addEventListener('load', () => {
-        loaded--
-        if (loaded === 0) event()
-      })
-    }
-
-    if (loaded === 0) event()
-  }
-}
-
-export function getGravatarURL(opts: { params: string, mirror: string, emailMD5: string }) {
-  return `${opts.mirror.replace(/\/$/, '')}/${opts.emailMD5}?${opts.params.replace(/^\?/, '')}`
-}
-
-export function sleep(ms: number) {
-  return new Promise(resolve => { setTimeout(resolve, ms) });
-}
-
-/** 版本号比较（a < b :-1 | 0 | b < a :1） */
-export function versionCompare(a: string, b: string) {
-  const pa = a.split('.')
-  const pb = b.split('.')
-  for (let i = 0; i < 3; i++) {
-      const na = Number(pa[i])
-      const nb = Number(pb[i])
-      if (na > nb) return 1
-      if (nb > na) return -1
-      if (!Number.isNaN(na) && Number.isNaN(nb)) return 1
-      if (Number.isNaN(na) && !Number.isNaN(nb)) return -1
-  }
-  return 0
-}
-
-/** 获取修正后的 UserAgent */
-export async function getCorrectUserAgent() {
-  const uaRaw = navigator.userAgent
-  if (!(navigator as any).userAgentData || !(navigator as any).userAgentData.getHighEntropyValues) {
-    return uaRaw
-  }
-
-  // @link https://web.dev/migrate-to-ua-ch/
-  // @link https://web.dev/user-agent-client-hints/
-  const uaData = (navigator as any).userAgentData
-  let uaGot: any = null
-  try {
-    uaGot = await uaData.getHighEntropyValues(["platformVersion"])
-  } catch (err) { console.error(err); return uaRaw }
-  const majorPlatformVersion = Number(uaGot.platformVersion.split('.')[0])
-
-  if (uaData.platform === "Windows") {
-    if (majorPlatformVersion >= 13) { // @link https://docs.microsoft.com/en-us/microsoft-edge/web-platform/how-to-detect-win11
-      // @date 2022-4-29
-      // Win 11 样本："Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/98.0.4758.102 Safari/537.36"
-      return uaRaw.replace(/Windows NT 10.0/, 'Windows NT 11.0')
-    }
-  }
-  if (uaData.platform === "macOS") {
-    if (majorPlatformVersion >= 11) { // 11 => BigSur
-      // @date 2022-4-29
-      // (Intel Chip) macOS 12.3 样本："Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/100.0.4896.127 Safari/537.36"
-      // (Arm Chip) macOS 样本："Mozilla/5.0 (Macintosh; ARM Mac OS X 10_15_6) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/14.0.2 Safari/605.1.15"
-      return uaRaw.replace(/(Mac OS X \d+_\d+_\d+|Mac OS X)/, `Mac OS X ${uaGot.platformVersion.replace(/\./g, '_')}`)
-    }
-  }
-
-  return uaRaw
-}
-
-/** 是否为完整的 URL */
-export function isValidURL(urlRaw: string) {
-  // @link https://www.rfc-editor.org/rfc/rfc3986
-  let url: URL
-  try {
-    url = new URL(urlRaw)
-  } catch (_) { return false }
-  return url.protocol === "http:" || url.protocol === "https:"
-}
-
-/** 获取基于 conf.server 的 URL */
-export function getURLBasedOnApi(opts: { base: string, path: string }) {
-  return getURLBasedOn(opts.base, opts.path)
-}
-
-/** 获取基于某个 baseURL 的 URL */
-export function getURLBasedOn(baseURL: string, path: string) {
-  return `${baseURL.replace(/\/$/, '')}/${path.replace(/^\//, '')}`
-}
-
-/**
- * Performs a deep merge of `source` into `target`.
- * Mutates `target` only but not its objects and arrays.
- *
- * @author inspired by [jhildenbiddle](https://stackoverflow.com/a/48218209).
- * @link https://gist.github.com/ahtcx/0cd94e62691f539160b32ecda18af3d6
- */
-export function mergeDeep(target: any, source: any) {
-  const isObject = (obj: any) => obj && typeof obj === 'object'
-
-  if (!isObject(target) || !isObject(source)) {
-    return source
-  }
-
-  Object.keys(source).forEach(key => {
-    const targetValue = target[key]
-    const sourceValue = source[key]
-
-    if (Array.isArray(targetValue) && Array.isArray(sourceValue)) {
-      target[key] = targetValue.concat(sourceValue)
-    } else if (isObject(targetValue) && isObject(sourceValue)) {
-      target[key] = mergeDeep({ ...targetValue}, sourceValue)
-    } else {
-      target[key] = sourceValue
-    }
-  })
-
-  return target
-}

package/src/list/comment.ts

@@ -1,20 +0,0 @@
-import type { ContextApi, CommentData } from '~/types'
-import Comment from '../comment/comment'
-
-export function createComment(ctx: ContextApi, comment: CommentData, ctxComments: CommentData[]): Comment {
-  const instance = new Comment(ctx, comment, {
-    isFlatMode: ctx.getData().getListLastFetch()?.params.flatMode!,
-    afterRender: () => {
-      ctx.trigger('comment-rendered', instance)
-    },
-    onDelete: (c: Comment) => {
-      ctx.getData().deleteComment(c.getID())
-    },
-    replyTo: (comment.rid ? ctxComments.find(c => c.id === comment.rid) : undefined)
-  })
-
-  // 渲染元素
-  instance.render()
-
-  return instance
-}

package/src/list/layout.ts

@@ -1,120 +0,0 @@
-import type { CommentData } from '~/types'
-import * as Ui from '@/lib/ui'
-import Comment from '../comment/comment'
-import * as ListNest from './nest'
-
-export interface LayoutOptions {
-  $commentsWrap: HTMLElement
-  nestSortBy: ListNest.SortByType
-  nestMax: number
-  flatMode: boolean
-
-  createCommentNode(comment: CommentData, ctxComments: CommentData[]): Comment
-  findCommentNode(id: number): Comment|undefined
-  getCommentDataList(): CommentData[]
-}
-
-export default class ListLayout {
-  constructor(private options: LayoutOptions) {}
-
-  // TODO refactor `if syntax` to strategy pattern
-  import(comments: CommentData[]) {
-    if (this.options.flatMode) {
-      comments.forEach((commentData: CommentData) => {
-        this.putCommentFlatMode(commentData, comments, 'append')
-      })
-    } else {
-      this.importCommentsNestMode(comments)
-    }
-  }
-
-  insert(comment: CommentData) {
-    if (!this.options.flatMode) {
-      this.insertCommentNest(comment)
-    } else {
-      this.insertCommentFlatMode(comment)
-    }
-  }
-
-  // 导入评论 · 嵌套模式
-  private importCommentsNestMode(srcData: CommentData[]) {
-    // 遍历 root 评论
-    const rootNodes = ListNest.makeNestCommentNodeList(srcData, this.options.nestSortBy, this.options.nestMax)
-    rootNodes.forEach((rootNode: ListNest.CommentNode) => {
-      const rootC = this.options.createCommentNode(rootNode.comment, srcData)
-
-      // 显示并播放渐入动画
-      this.options.$commentsWrap?.appendChild(rootC.getEl())
-      rootC.getRender().playFadeAnim()
-
-      // 加载子评论
-      const loadChildren = (parentC: Comment, parentNode: ListNest.CommentNode) => {
-        parentNode.children.forEach((node: ListNest.CommentNode) => {
-          const childD = node.comment
-          const childC = this.options.createCommentNode(childD, srcData)
-
-          // 插入到父评论中
-          parentC.putChild(childC)
-
-          // 递归加载子评论
-          loadChildren(childC, node)
-        })
-      }
-      loadChildren(rootC, rootNode)
-
-      // 限高检测
-      rootC.getRender().checkHeightLimit()
-    })
-  }
-
-  /** 导入评论 · 平铺模式 */
-  private putCommentFlatMode(cData: CommentData, ctxData: CommentData[], insertMode: 'append'|'prepend') {
-    if (cData.is_collapsed) cData.is_allow_reply = false
-    const comment = this.options.createCommentNode(cData, ctxData)
-
-    // 可见评论添加到界面
-    // 注：不可见评论用于显示 “引用内容”
-    if (cData.visible) {
-      if (insertMode === 'append') this.options.$commentsWrap?.append(comment.getEl())
-      if (insertMode === 'prepend') this.options.$commentsWrap?.prepend(comment.getEl())
-      comment.getRender().playFadeAnim()
-    }
-
-    // 平铺评论插入后 · 内容限高检测
-    comment.getRender().checkHeightLimit()
-
-    return comment
-  }
-
-  private insertCommentNest(commentData: CommentData) {
-    // 嵌套模式
-    const comment = this.options.createCommentNode(commentData, this.options.getCommentDataList())
-
-    if (commentData.rid === 0) {
-      // root评论 新增
-      this.options.$commentsWrap?.prepend(comment.getEl())
-    } else {
-      // 子评论 新增
-      const parent = this.options.findCommentNode(commentData.rid)
-      if (parent) {
-        parent.putChild(comment, (this.options.nestSortBy === 'DATE_ASC' ? 'append' : 'prepend'))
-
-        // 若父评论存在 “子评论部分” 限高，取消限高
-        comment.getParents().forEach((p) => {
-          p.getRender().heightLimitRemoveForChildren()
-        })
-      }
-    }
-
-    comment.getRender().checkHeightLimit()
-
-    Ui.scrollIntoView(comment.getEl()) // 滚动到可以见
-    comment.getRender().playFadeAnim() // 播放评论渐出动画
-  }
-
-  private insertCommentFlatMode(commentData: CommentData) {
-    // 平铺模式
-    const comment = this.putCommentFlatMode(commentData, this.options.getCommentDataList(), 'prepend')
-    Ui.scrollIntoView(comment.getEl()) // 滚动到可见
-  }
-}

package/src/list/list.html

@@ -1,20 +0,0 @@
-<div class="atk-list">
-  <div class="atk-list-header">
-    <div class="atk-comment-count">
-      <div class="atk-text"></div>
-    </div>
-    <div class="atk-right-action">
-      <span data-action="admin-close-comment" class="atk-hide" atk-only-admin-show></span>
-      <span data-action="open-sidebar" class="atk-hide atk-on">
-        <span class="atk-unread-badge" style="display: none;"></span>
-        <div class="atk-text"></div>
-      </span>
-    </div>
-  </div>
-  <div class="atk-list-body">
-    <div class="atk-list-comments-wrap"></div>
-  </div>
-  <div class="atk-list-footer">
-    <div class="atk-copyright"></div>
-  </div>
-</div>

package/src/list/list.ts

@@ -1,79 +0,0 @@
-import type { ContextApi } from '~/types'
-import Component from '../lib/component'
-import * as Utils from '../lib/utils'
-import CommentNode from '../comment/comment'
-import ListHTML from './list.html?raw'
-import ListLayout from './layout'
-import { createComment as createCommentNode } from './comment'
-import { initListPaginatorFunc } from './page'
-
-export default class List extends Component {
-  /** 列表评论集区域元素 */
-  $commentsWrap!: HTMLElement
-  public getCommentsWrapEl() { return this.$commentsWrap }
-
-  protected commentNodes: CommentNode[] = []
-  getCommentNodes() { return this.commentNodes }
-
-  constructor (ctx: ContextApi) {
-    super(ctx)
-
-    // Init base element
-    this.$el = Utils.createElement(ListHTML)
-    this.$commentsWrap = this.$el.querySelector('.atk-list-comments-wrap')!
-
-    // Init paginator
-    initListPaginatorFunc(ctx)
-
-    // Bind events
-    this.initCrudEvents()
-  }
-
-  getListLayout() {
-    return new ListLayout({
-      $commentsWrap: this.$commentsWrap,
-      nestSortBy: this.ctx.conf.nestSort,
-      nestMax: this.ctx.conf.nestMax,
-      flatMode: this.ctx.conf.flatMode as boolean,
-      // flatMode must be boolean because it had been handled when Artalk.init
-      createCommentNode: (d, c) => {
-        const node = createCommentNode(this.ctx, d, c)
-        this.commentNodes.push(node)
-        return node
-      },
-      findCommentNode: (id) => this.commentNodes.find(c => c.getID() === id),
-      getCommentDataList: () => this.ctx.getData().getComments(),
-    })
-  }
-
-  private initCrudEvents() {
-    this.ctx.on('list-load', (comments) => {
-      // 导入数据
-      this.getListLayout().import(comments)
-    })
-
-    this.ctx.on('list-loaded', (comments) => {
-      if (comments.length === 0) this.$commentsWrap.innerHTML = ''
-    })
-
-    // When comment insert
-    this.ctx.on('comment-inserted', (comment) => {
-      this.getListLayout().insert(comment)
-    })
-
-    // When comment delete
-    this.ctx.on('comment-deleted', (comment) => {
-      const node = this.commentNodes.find(c => c.getID() === comment.id)
-      if (!node) { console.error(`comment node id=${comment.id} not found`);return }
-      node.getEl().remove()
-      this.commentNodes = this.commentNodes.filter(c => c.getID() !== comment.id)
-      // TODO remove child nodes
-    })
-
-    // When comment update
-    this.ctx.on('comment-updated', (comment) => {
-      const node = this.commentNodes.find(c => c.getID() === comment.id)
-      node && node.setData(comment)
-    })
-  }
-}

package/src/list/nest.ts

@@ -1,66 +0,0 @@
-import type { CommentData } from '~/types'
-
-export type CommentNode = {
-  id: number
-  comment: CommentData
-  children: CommentNode[]
-  parent?: CommentNode
-  level: number
-}
-
-export type SortByType = 'DATE_DESC'|'DATE_ASC'|'SRC_INDEX'|'VOTE_UP_DESC'
-
-// 构建树状结构列表
-export function makeNestCommentNodeList(srcData: CommentData[], sortBy: SortByType = 'DATE_DESC', nestMax = 2) {
-  const nodeList: CommentNode[] = []
-
-  const roots = srcData.filter((o) => o.rid === 0)
-  roots.forEach((root: CommentData) => {
-    const rootNode: CommentNode = {
-      id: root.id,
-      comment: root,
-      children: [],
-      level: 1,
-    }
-
-    rootNode.parent = rootNode
-    nodeList.push(rootNode)
-
-    ;(function loadChildren(parentNode: CommentNode) {
-      const children = srcData.filter((o) => o.rid === parentNode.id)
-      if (children.length === 0) return
-      if (parentNode.level >= nestMax) parentNode = parentNode.parent!
-      children.forEach((child: CommentData) => {
-        const childNode: CommentNode = {
-          id: child.id,
-          comment: child,
-          children: [],
-          parent: parentNode,
-          level: parentNode.level + 1,
-        }
-
-        parentNode.children.push(childNode)
-        loadChildren(childNode)
-      })
-    })(rootNode)
-  })
-
-  // 排序
-  const sortFunc = (a: CommentNode, b: CommentNode): number => {
-    let v = a.id - b.id
-    if (sortBy === 'DATE_ASC') v = +new Date(a.comment.date) - +new Date(b.comment.date)
-    else if (sortBy === 'DATE_DESC') v = +new Date(b.comment.date) - +new Date(a.comment.date)
-    else if (sortBy === 'SRC_INDEX') v = srcData.indexOf(a.comment) - srcData.indexOf(b.comment)
-    else if (sortBy === 'VOTE_UP_DESC') v = b.comment.vote_up - a.comment.vote_up
-    return v
-  }
-
-  (function sortLevels(nodes: CommentNode[]) {
-    nodes.forEach((node) => {
-      node.children = node.children.sort(sortFunc)
-      sortLevels(node.children)
-    })
-  })(nodeList)
-
-  return nodeList
-}

package/src/list/page.ts

@@ -1,97 +0,0 @@
-import type { ArtalkConfig, ContextApi } from '~/types'
-import $t from '@/i18n'
-import { Paginator } from './paginator'
-import ReadMorePaginator from './paginator/read-more'
-import UpDownPaginator from './paginator/up-down'
-
-function createPaginatorByConf(conf: ArtalkConfig): Paginator {
-  if (conf.pagination.readMore) return new ReadMorePaginator()
-  return new UpDownPaginator()
-}
-
-function getPageDataByLastData(ctx: ContextApi): { offset: number, total: number } {
-  const last = ctx.getData().getListLastFetch()
-  const r = { offset: 0, total: 0 }
-  if (!last) return r
-
-  r.offset = last.params.offset
-  if (last.data) r.total = last.params.flatMode ? last.data.total : last.data.total_roots
-
-  return r
-}
-
-export const initListPaginatorFunc = (ctx: ContextApi) => {
-  let paginator: Paginator|null = null
-
-  // Init paginator when conf loaded
-  ctx.on('conf-loaded', (conf) => {
-    const list = ctx.get('list')
-
-    if (paginator) paginator.dispose() // if had been init, dispose it
-
-    // create paginator instance
-    paginator = createPaginatorByConf(conf)
-
-    // create paginator dom
-    const { offset, total } = getPageDataByLastData(ctx)
-    const $paginator = paginator.create({
-      ctx, pageSize: conf.pagination.pageSize, total,
-
-      readMoreAutoLoad: conf.pagination.autoLoad,
-    })
-
-    // mount paginator dom
-    list.$commentsWrap.after($paginator)
-
-    // update paginator info
-    paginator?.update(offset, total)
-  })
-
-  // When list loaded
-  ctx.on('list-loaded', (comments) => {
-    // update paginator info
-    const { offset, total } = getPageDataByLastData(ctx)
-    paginator?.update(offset, total)
-  })
-
-  // When list fetch
-  ctx.on('list-fetch', (params) => {
-    // if clear comments when fetch new page data
-    if (ctx.getData().getComments().length > 0 && paginator?.getIsClearComments(params)) {
-      ctx.getData().clearComments()
-    }
-  })
-
-  // When list error
-  ctx.on('list-error', () => {
-    paginator?.showErr?.($t('loadFail'))
-  })
-
-  // List goto auto next page when comment not found
-  const autoSwitchPageForFindComment = (commentID: number) => {
-    const comment = ctx.getData().findComment(commentID)
-    if (!!comment || !paginator?.getHasMore()) return
-
-    // wait for list loaded
-    ctx.on('list-loaded', () => {
-      autoSwitchPageForFindComment(commentID) // recursive, until comment found or no more page
-    }, { once: true })
-
-    // TODO 自动范围改为直接跳转到计算后的页面
-    setTimeout(() => {
-      paginator?.next()
-    }, 80)
-  }
-
-  ctx.on('list-goto', (commentID) => {
-    autoSwitchPageForFindComment(commentID)
-  })
-
-  // loading
-  ctx.on('list-fetch', (params) => {
-    paginator?.setLoading(true)
-  })
-  ctx.on('list-fetched', ({ params }) => {
-    paginator?.setLoading(false)
-  })
-}

package/src/list/paginator/index.ts

@@ -1,25 +0,0 @@
-import type { ContextApi, ListFetchParams } from '~/types'
-import UpDownPaginator from './up-down'
-import ReadMorePaginator from './read-more'
-
-export interface IPgHolderOpt {
-  ctx: ContextApi
-  total: number
-  pageSize: number
-
-  readMoreAutoLoad?: boolean
-}
-
-export interface Paginator {
-  create(opts: IPgHolderOpt): HTMLElement
-  setLoading(val: boolean): void
-  update(offset: number, total: number): void
-  next(): void
-  showErr?(msg: string): void
-  getHasMore(): boolean
-  /** Clear comments when fetch new page data */
-  getIsClearComments(params: Partial<ListFetchParams>): boolean
-  dispose(): void
-}
-
-export default { UpDownPaginator, ReadMorePaginator }