artalk 2.4.3 → 2.5.0

package/src/comment/renders/header.ts

@@ -0,0 +1,84 @@
+import * as Utils from '../../lib/utils'
+import RenderCtx from '../render-ctx'
+
+/**
+ * 评论头部界面
+ */
+export default function renderHeader(ctx: RenderCtx) {
+  Object.entries({
+    renderNick, renderVerifyBadge, renderDate, renderUABadge
+  }).forEach(([name, render]) => {
+    render(ctx)
+  })
+}
+
+function renderNick(ctx: RenderCtx) {
+  ctx.$headerNick = ctx.$el.querySelector<HTMLElement>('.atk-nick')!
+
+  if (ctx.data.link) {
+    const $nickA = Utils.createElement<HTMLLinkElement>('<a target="_blank" rel="noreferrer noopener nofollow"></a>')
+    $nickA.innerText = ctx.data.nick
+    $nickA.href = Utils.isValidURL(ctx.data.link) ? ctx.data.link : `https://${ctx.data.link}`
+    ctx.$headerNick.append($nickA)
+  } else {
+    ctx.$headerNick.innerText = ctx.data.nick
+  }
+}
+
+function renderVerifyBadge(ctx: RenderCtx) {
+  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: RenderCtx) {
+  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: RenderCtx) {
+  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)
+    }
+  }
+}

package/src/comment/renders/index.ts

@@ -0,0 +1,19 @@
+import RenderCtx from '../render-ctx'
+import Avatar from './avatar'
+import Header from './header'
+import Content from './content'
+import ReplyAt from './reply-at'
+import ReplyTo from './reply-to'
+import Pending from './pending'
+import Actions from './actions'
+
+const Renders = {
+  Avatar, Header, Content, ReplyAt,
+  ReplyTo, Pending, Actions
+}
+
+export default function loadRenders(ctx: RenderCtx) {
+  Object.entries(Renders).forEach(([ name, render ]) => {
+    render(ctx)
+  })
+}

package/src/comment/renders/pending.ts

@@ -0,0 +1,12 @@
+import * as Utils from '../../lib/utils'
+import RenderCtx from '../render-ctx'
+
+/**
+ * 待审核状态界面
+ */
+export default function renderPending(ctx: RenderCtx) {
+  if (!ctx.data.is_pending) return
+
+  const pendingEl = Utils.createElement(`<div class="atk-pending">${ctx.ctx.$t('pendingMsg')}</div>`)
+  ctx.$body.prepend(pendingEl)
+}

package/src/comment/renders/reply-at.ts

@@ -0,0 +1,16 @@
+import * as Utils from '../../lib/utils'
+import RenderCtx from '../render-ctx'
+
+/**
+ * 层级嵌套模式显示 AT 界面
+ */
+export default function renderReplyAt(ctx: RenderCtx) {
+  if (ctx.cConf.isFlatMode || ctx.data.rid === 0) return // not 平铺模式 或 根评论
+  if (!ctx.cConf.replyTo) return
+
+  ctx.$replyAt = Utils.createElement(`<span class="atk-item atk-reply-at"><span class="atk-arrow"></span><span class="atk-nick"></span></span>`)
+  ctx.$replyAt.querySelector<HTMLElement>('.atk-nick')!.innerText = `${ctx.cConf.replyTo.nick}`
+  ctx.$replyAt.onclick = () => { ctx.comment.getActions().goToReplyComment() }
+
+  ctx.$headerBadgeWrap.insertAdjacentElement('afterend', ctx.$replyAt)
+}

package/src/comment/renders/reply-to.ts

@@ -0,0 +1,24 @@
+import * as Utils from '../../lib/utils'
+import marked from '../../lib/marked'
+import RenderCtx from '../render-ctx'
+
+/**
+ * 回复的对象界面
+ */
+export default function renderReplyTo(ctx: RenderCtx) {
+  if (!ctx.cConf.isFlatMode) return // 仅平铺模式显示
+  if (!ctx.cConf.replyTo) return
+
+  ctx.$replyTo = Utils.createElement(`
+    <div class="atk-reply-to">
+      <div class="atk-meta">${ctx.ctx.$t('reply')} <span class="atk-nick"></span>:</div>
+      <div class="atk-content"></div>
+    </div>`)
+  const $nick = ctx.$replyTo.querySelector<HTMLElement>('.atk-nick')!
+  $nick.innerText = `@${ctx.cConf.replyTo.nick}`
+  $nick.onclick = () => { ctx.comment.getActions().goToReplyComment() }
+  let replyContent = marked(ctx.ctx, ctx.cConf.replyTo.content)
+  if (ctx.cConf.replyTo.is_collapsed) replyContent = `[${ctx.ctx.$t('collapsed')}]`
+  ctx.$replyTo.querySelector<HTMLElement>('.atk-content')!.innerHTML = replyContent
+  ctx.$body.prepend(ctx.$replyTo)
+}

package/src/config.ts

@@ -0,0 +1,65 @@
+import type ArtalkConfig from '~/types/artalk-config'
+import * as Utils from './lib/utils'
+import Defaults from './defaults'
+
+export default { handelBaseConf }
+
+/** 基本配置初始化 */
+export function handelBaseConf(customConf: Partial<ArtalkConfig>): ArtalkConfig {
+  // 合并默认配置
+  const conf: ArtalkConfig = Utils.mergeDeep(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}`
+  }
+
+  // 自适应语言
+  if (conf.locale === 'auto') {
+    conf.locale = navigator.language
+  }
+
+  return conf
+}
+
+export function handleBackendRefConf(conf: Partial<ArtalkConfig>) {
+  const DisabledKeys: (keyof ArtalkConfig)[] = [
+    'el', 'pageKey', 'pageTitle', 'server', 'site', 'darkMode'
+  ]
+  Object.keys(conf).forEach(k => {
+    if (DisabledKeys.includes(k as any)) delete conf[k]
+  })
+
+  // Patch: `emoticons` config string to json
+  if (conf.emoticons && typeof conf.emoticons === "string") {
+    conf.emoticons = conf.emoticons.trim()
+    if (conf.emoticons.startsWith("[") || conf.emoticons.startsWith("{")) {
+      conf.emoticons = JSON.parse(conf.emoticons) // pase json
+    } else if (conf.emoticons === "false") {
+      conf.emoticons = false
+    }
+  }
+
+  return conf
+}

package/src/context.ts

@@ -1,37 +1,31 @@
-import { marked as libMarked } from 'marked'
-import ArtalkConfig from '~/types/artalk-config'
-import { CommentData, NotifyData } from '~/types/artalk-data'
-import { Event } from '~/types/event'
-import getI18n, { I18n } from './i18n'
-import User from './lib/user'
+import type ArtalkConfig from '~/types/artalk-config'
+import type { CommentData, NotifyData } from '~/types/artalk-data'
+import type { Event } from '~/types/event'
+import type ContextApi from '~/types/context'
+import type { TInjectedServices } from './service'
+
 import * as Utils from './lib/utils'
-import ContextApi from '../types/context'
-import Editor from './editor'
+import * as DarkMode from './lib/dark-mode'
+import * as marked from './lib/marked'
+import { CheckerCaptchaPayload, CheckerPayload } from './lib/checker'
+
+import * as I18n from './i18n'
+import { getLayerWrap } from './layer'
+import { SidebarShowPayload } from './layer/sidebar-layer'
 import Comment from './comment'
-import ListLite from './list/list-lite'
-import SidebarLayer, { SidebarShowPayload } from './layer/sidebar-layer'
-import CheckerLauncher, { CheckerCaptchaPayload, CheckerPayload } from './lib/checker'
-import Layer, { GetLayerWrap } from './layer'
 import Api from './api'
 import List from './list'
 
+// Auto dependency injection
+interface Context extends TInjectedServices { }
+
 /**
  * Artalk Context
  */
-export default class Context implements ContextApi {
-  /* 持有同事类 */
-  private api!: Api
-  private editor!: Editor
-  private list?: ListLite
-  private sidebarLayer!: SidebarLayer
-  private checkerLauncher!: CheckerLauncher
-
+class Context implements ContextApi {
   /* 运行参数 */
-  public cid: number // Context 唯一标识
   public conf: ArtalkConfig
-  public user: User
   public $root: HTMLElement
-  public markedInstance?: typeof libMarked
   public markedReplacers: ((raw: string) => string)[] = []
 
   private commentList: Comment[] = [] // Note: 无层级结构 + 无须排列
@@ -40,41 +34,17 @@ export default class Context implements ContextApi {
   private eventList: Event[] = []
 
   public constructor(conf: ArtalkConfig, $root?: HTMLElement) {
-    this.cid = +new Date()
     this.conf = conf
-    this.user = new User(this)
 
     this.$root = $root || document.createElement('div')
-    this.$root.setAttribute('atk-run-id', this.cid.toString())
     this.$root.classList.add('artalk')
     this.$root.innerHTML = ''
 
     this.api = new Api(this)
-
-    this.on('conf-loaded', () => {
-      this.refreshDarkModeConf()
-    })
-  }
-
-  /* 设置持有的同事类 */
-  public setApi(api: Api): void {
-    this.api = api
-  }
-
-  public setEditor(editor: Editor): void {
-    this.editor = editor
-  }
-
-  public setList(list: ListLite): void {
-    this.list = list
   }
 
-  public setSidebarLayer(sidebarLayer: SidebarLayer): void {
-    this.sidebarLayer = sidebarLayer
-  }
-
-  public setCheckerLauncher(checkerLauncher: CheckerLauncher): void {
-    this.checkerLauncher = checkerLauncher
+  public inject(depName: string, obj: any) {
+    this[depName] = obj
   }
 
   public getApi() {
@@ -164,7 +134,7 @@ export default class Context implements ContextApi {
   }
 
   public listHashGotoCheck(): void {
-    if (!this.list || this.list !instanceof List) return
+    if (!this.list || !(this.list instanceof List)) return
     const list = this.list as List
 
     list.goToCommentDelay = false
@@ -224,7 +194,7 @@ export default class Context implements ContextApi {
     this.$root.querySelectorAll<HTMLElement>(`[atk-only-admin-show]`).forEach(item => items.push(item))
 
     // for layer
-    const { $wrap: $layerWrap } = GetLayerWrap(this)
+    const { $wrap: $layerWrap } = getLayerWrap()
     if ($layerWrap) $layerWrap.querySelectorAll<HTMLElement>(`[atk-only-admin-show]`).forEach(item => items.push(item))
 
     // for sidebar
@@ -258,49 +228,22 @@ export default class Context implements ContextApi {
   }
 
   /* i18n */
-  public $t(key: keyof I18n, args: {[key: string]: string} = {}): string {
-    return getI18n(this.conf.locale, key, args)
+  public $t(key: I18n.I18nKeys, args: {[key: string]: string} = {}): string {
+    return I18n.t(key, args)
   }
 
   public setDarkMode(darkMode: boolean): void {
-    if (this.conf.darkMode === darkMode) return
-
-    const darkModeClassName = 'atk-dark-mode'
-
-    this.conf.darkMode = darkMode
-
-    if (darkMode) this.$root.classList.add(darkModeClassName)
-    else this.$root.classList.remove(darkModeClassName)
-
-    // for Layer
-    const { $wrap: $layerWrap } = GetLayerWrap(this)
-    if ($layerWrap) {
-      if (darkMode) $layerWrap.classList.add(darkModeClassName)
-      else $layerWrap.classList.remove(darkModeClassName)
-    }
+    DarkMode.setDarkMode(this, darkMode)
   }
 
-  private darkModeMedia = window.matchMedia('(prefers-color-scheme: dark)')
-  private darkModeAutoFunc?: (evt: MediaQueryListEvent) => void
-  private refreshDarkModeConf(): void {
-    if (this.conf.darkMode === 'auto') {
-      // 自动切换暗黑模式，事件监听
-      this.setDarkMode(this.darkModeMedia.matches)
-      if (!this.darkModeAutoFunc) {
-        this.darkModeAutoFunc = (evt) => { this.setDarkMode(evt.matches) }
-        this.darkModeMedia.addEventListener('change', this.darkModeAutoFunc)
-      }
-    } else {
-      if (this.darkModeAutoFunc) {
-        // 解除事件监听绑定
-        this.darkModeMedia.removeEventListener('change', this.darkModeAutoFunc)
-      }
-      this.setDarkMode(this.conf.darkMode || false)
-    }
+  public updateConf(nConf: Partial<ArtalkConfig>): void {
+    this.conf = Utils.mergeDeep(this.conf, nConf)
+    this.trigger('conf-loaded')
   }
 
-  public updateConf(conf: Partial<ArtalkConfig>): void {
-    this.conf = Utils.mergeDeep(this.conf, conf)
-    this.trigger('conf-loaded')
+  public getMarkedInstance() {
+    return marked.getInstance()
   }
 }
+
+export default Context

package/src/defaults.ts

@@ -41,6 +41,7 @@ const defaults: ArtalkConfig = {
   heightLimit: {
     content: 300,
     children: 400,
+    scrollable: false,
   },
 
   imgUpload: true,

package/src/editor/edit-mode.ts

@@ -0,0 +1,102 @@
+import type { CommentData } from '~/types/artalk-data'
+import * as Utils from '../lib/utils'
+import Editor from './editor'
+
+export interface EditModeManager {
+  editor: Editor
+  comment?: CommentData
+  setEdit: (comment: CommentData, $comment: HTMLElement) => void
+  cancelEdit: () => void
+}
+
+export function createEditModeManager(editor: Editor) {
+  const m: EditModeManager = {
+    editor,
+    comment: undefined,
+    setEdit: (c, e) => edit(m, c, e),
+    cancelEdit: () => cancelEdit(m)
+  }
+
+  initEditModeSubmit(m)
+
+  return m
+}
+
+function edit(m: EditModeManager, comment: CommentData, $comment: HTMLElement) {
+  cancelEdit(m)
+  m.editor.cancelReply()
+
+  const ui = m.editor.getUI()
+  if (!ui.$editCancelBtn) {
+    const $btn = Utils.createElement(
+      `<div class="atk-send-reply">` +
+        `${m.editor.$t('editCancel')} ` +
+        `<span class="atk-cancel">×</span>` +
+      `</div>`
+    )
+    $btn.onclick = () => {
+      cancelEdit(m)
+    }
+    ui.$textareaWrap.append($btn)
+    ui.$editCancelBtn = $btn
+  }
+  m.comment = comment
+
+  ui.$header.style.display = 'none' // TODO support modify header information
+
+  m.editor.travel($comment)
+
+  ui.$nick.value = comment.nick || ''
+  ui.$email.value = comment.email || ''
+  ui.$link.value = comment.link || ''
+
+  m.editor.setContent(comment.content)
+  ui.$textarea.focus()
+
+  m.editor.refreshSendBtnText()
+}
+
+function cancelEdit(m: EditModeManager) {
+  if (!m.comment) return
+
+  const ui = m.editor.getUI()
+
+  if (ui.$editCancelBtn) {
+    ui.$editCancelBtn.remove()
+    ui.$editCancelBtn = undefined
+  }
+
+  m.comment = undefined
+  m.editor.travelBack()
+
+  const { nick, email, link } = m.editor.ctx.user.data
+  ui.$nick.value = nick
+  ui.$email.value = email
+  ui.$link.value = link
+
+  m.editor.setContent('')
+  m.editor.refreshSendBtnText()
+
+  ui.$header.style.display = '' // TODO support modify header information
+}
+
+function initEditModeSubmit(m: EditModeManager) {
+  m.editor.getSubmitManager()!.registerCustom({
+    activeCond: () => !!m.comment, // active this custom submit when edit mode
+    req: async () => {
+      const saveData = {
+        content: m.editor.getFinalContent(),
+        nick: m.editor.getUI().$nick.value,
+        email: m.editor.getUI().$email.value,
+        link: m.editor.getUI().$link.value,
+      }
+      const nComment = await m.editor.ctx.getApi().comment.commentEdit({
+        ...m.comment, ...saveData
+      })
+      return nComment
+    },
+    post: (nComment: CommentData) => {
+      m.editor.ctx.updateComment(nComment)
+    }
+  })
+}