artalk 2.0.4 → 2.1.1

package/src/components/list.ts

@@ -0,0 +1,172 @@
+import '../style/list.less'
+
+import Context from '../context'
+import * as Utils from '../lib/utils'
+import * as Ui from '../lib/ui'
+import Api from '../api'
+import ListHTML from './html/list.html?raw'
+import ListLite from './list-lite'
+import { ListData } from '~/types/artalk-data'
+
+export default class List extends ListLite {
+  private $closeCommentBtn!: HTMLElement
+  private $openSidebarBtn!: HTMLElement
+  private $unreadBadge!: HTMLElement
+
+  constructor (ctx: Context) {
+    const el = Utils.createElement(ListHTML)
+
+    super(ctx, el)
+
+    // 把 listLite $el 变为子元素
+    el.querySelector('.atk-list-body')!.append(this.$el)
+    this.$el = el
+
+    // 平铺模式
+    let flatMode = false
+    if (this.ctx.conf.flatMode === 'auto') {
+      if (window.matchMedia("(max-width: 768px)").matches)
+        flatMode = true
+    } else if (this.ctx.conf.flatMode === true) {
+      flatMode = true
+    }
+    this.flatMode = flatMode
+
+    // 分页模式
+    this.pageMode = this.conf.pagination?.readMore ? 'read-more' : 'pagination'
+
+    // 操作按钮
+    this.initListActionBtn()
+
+    // copyright
+    this.$el.querySelector<HTMLElement>('.atk-copyright')!.innerHTML = `Powered By <a href="https://artalk.js.org" target="_blank" title="Artalk v${ARTALK_VERSION}">Artalk</a>`
+
+    // event listen
+    this.ctx.on('list-reload', () => (this.reqComments(0))) // 刷新评论
+    this.ctx.on('list-refresh-ui', () => (this.refreshUI()))
+    this.ctx.on('list-import', (data) => (this.importComments(data)))
+    this.ctx.on('list-insert', (data) => (this.insertComment(data)))
+    this.ctx.on('list-delete', (comment) => (this.deleteComment(comment.id)))
+    this.ctx.on('list-update', (updateData) => { updateData(this.data);this.refreshUI() } )
+    this.ctx.on('unread-update', (data) => (this.showUnreadBadge(data.notifies?.length || 0)))
+  }
+
+  private initListActionBtn () {
+    // 侧边栏呼出按钮
+    this.$openSidebarBtn = this.$el.querySelector('[data-action="open-sidebar"]')!
+    this.$closeCommentBtn = this.$el.querySelector('[data-action="admin-close-comment"]')!
+    this.$unreadBadge = this.$el.querySelector('.atk-unread-badge')!
+
+    this.$openSidebarBtn.addEventListener('click', () => {
+      this.ctx.trigger('sidebar-show')
+    })
+
+    // 关闭评论按钮
+    this.$closeCommentBtn.addEventListener('click', () => {
+      if (!this.data) return
+
+      this.data.page.admin_only = !this.data.page.admin_only
+      this.adminPageEditSave()
+    })
+  }
+
+  /** 刷新界面 */
+  public refreshUI () {
+    super.refreshUI()
+
+    this.$el.querySelector<HTMLElement>('.atk-comment-count-num')!.innerText = String(this.commentsCount)
+
+    // 已输入个人信息
+    if (!!this.ctx.user.data.nick && !!this.ctx.user.data.email) {
+      this.$openSidebarBtn.classList.remove('atk-hide')
+    } else {
+      this.$openSidebarBtn.classList.add('atk-hide')
+    }
+
+    // 仅管理员显示控制
+    this.ctx.trigger('check-admin-show-el')
+    this.$openSidebarBtn.innerText = (!this.ctx.user.data.isAdmin) ? '通知中心' : '控制中心'
+
+    // 关闭评论
+    if (!!this.data && !!this.data.page && this.data.page.admin_only === true) {
+      this.ctx.trigger('editor-close')
+      this.$closeCommentBtn.innerHTML = '打开评论'
+    } else {
+      this.ctx.trigger('editor-open')
+      this.$closeCommentBtn.innerHTML = '关闭评论'
+    }
+  }
+
+  public onLoad(data: ListData, offset: number) {
+    super.onLoad(data, offset)
+
+    // 检测锚点跳转
+    this.checkGoToCommentByUrlHash()
+  }
+
+  /** 跳到评论项位置 - 根据 `location.hash` */
+  public async checkGoToCommentByUrlHash () {
+    let commentId = Number(Utils.getQueryParam('atk_comment')) // same as backend GetReplyLink()
+    if (!commentId) {
+      const match = window.location.hash.match(/#atk-comment-([0-9]+)/)
+      if (!match || !match[1] || Number.isNaN(Number(match[1]))) return
+      commentId = Number(match[1])
+    }
+    if (!commentId) return
+
+    // 已阅 API
+    const notifyKey = Utils.getQueryParam('atk_notify_key')
+    if (notifyKey) {
+      new Api(this.ctx).markRead(notifyKey)
+        .then(() => {
+          this.unread = this.unread.filter(o => o.comment_id !== commentId)
+          this.ctx.trigger('unread-update', {
+            notifies: this.unread
+          })
+        })
+    }
+
+    const comment = this.findComment(commentId)
+    // TODO 若找不到评论的情况
+    // if (!comment) { // 若找不到评论
+    //   if (this.hasMoreComments) { // 阅读更多，并重试
+    //     await this.reqComments()
+    //   }
+    // }
+
+    if (!comment) return
+
+    Ui.scrollIntoView(comment.getEl(), false)
+    window.setTimeout(() => {
+      comment.getEl().classList.add('atk-flash-once')
+    }, 800)
+  }
+
+  /** 管理员设置页面信息 */
+  public adminPageEditSave () {
+    if (!this.data || !this.data.page) return
+
+    this.ctx.trigger('editor-show-loading')
+    new Api(this.ctx).pageEdit(this.data.page)
+      .then((page) => {
+        if (this.data)
+          this.data.page = { ...page }
+        this.refreshUI()
+      })
+      .catch(err => {
+        this.ctx.trigger('editor-notify', { msg: `修改页面数据失败：${err.msg || String(err)}`, type: 'e'})
+      })
+      .finally(() => {
+        this.ctx.trigger('editor-hide-loading')
+      })
+  }
+
+  public showUnreadBadge (count: number) {
+    if (count > 0) {
+      this.$unreadBadge.innerText = `${Number(count || 0)}`
+      this.$unreadBadge.style.display = 'block'
+    } else {
+      this.$unreadBadge.style.display = 'none'
+    }
+  }
+}

package/src/components/pagination.ts

@@ -0,0 +1,150 @@
+import '../style/pagination.less'
+import * as Utils from '../lib/utils'
+import * as Ui from '../lib/ui'
+
+export interface PaginationConf {
+  /** 每页条数 */
+  pageSize?: number
+
+  /** 回调函数 */
+  onChange: (offset: number) => void
+}
+
+export default class Pagination {
+  private conf: PaginationConf
+  public total: number
+  public $el: HTMLElement
+  public $input: HTMLInputElement
+  public inputTimer?: number
+  public $prevBtn: HTMLElement
+  public $nextBtn: HTMLElement
+
+  public page: number = 1
+  get pageSize(): number {
+    return this.conf.pageSize || 15
+  }
+  get offset(): number {
+    return this.pageSize * (this.page - 1)
+  }
+  get maxPage(): number {
+    return Math.ceil(this.total / this.pageSize)
+  }
+
+  public constructor(total: number, conf: PaginationConf) {
+    this.total = total
+    this.conf = conf
+
+    this.$el = Utils.createElement(
+      `<div class="atk-pagination-wrap">
+        <div class="atk-pagination">
+          <div class="atk-btn atk-btn-prev">Prev</div>
+          <input type="text" class="atk-input" />
+          <div class="atk-btn atk-btn-next">Next</div>
+        </div>
+      </div>`)
+    this.$input = this.$el.querySelector('.atk-input')!
+    this.$input.value = `${this.page}`
+
+    this.$input.oninput = () => this.input()
+    this.$input.onkeydown = (e) => this.keydown(e)
+
+    this.$prevBtn = this.$el.querySelector('.atk-btn-prev')!
+    this.$nextBtn = this.$el.querySelector('.atk-btn-next')!
+
+    this.$prevBtn.onclick = () => this.prev()
+    this.$nextBtn.onclick = () => this.next()
+
+    this.checkDisabled()
+  }
+
+  public update(offset: number, total: number) {
+    this.page = Math.ceil(offset / this.pageSize) + 1
+    this.total = total
+
+    this.setInput(this.page)
+    this.checkDisabled()
+  }
+
+  public setInput(page: number) {
+    this.$input.value = `${page}`
+  }
+
+  public input(now: boolean = false) {
+    window.clearTimeout(this.inputTimer)
+
+    const value = this.$input.value.trim()
+
+    const modify = () => {
+      if (value === '') { this.setInput(this.page);return }
+      let page = Number(value)
+      if (Number.isNaN(page)) { this.setInput(this.page);return }
+      if (page < 1) { this.setInput(this.page);return }
+      if (page > this.maxPage) { this.setInput(this.maxPage);page = this.maxPage }
+      this.change(page)
+    }
+
+    // 延迟 800ms 执行
+    if (!now) this.inputTimer = window.setTimeout(() => modify(), 800)
+    else modify()
+  }
+
+  public prev() {
+    const page = this.page - 1
+    if (page < 1) { return }
+    this.change(page)
+  }
+
+  public next() {
+    const page = this.page + 1
+    if (page > this.maxPage) { return }
+    this.change(page)
+  }
+
+  public change(page: number) {
+    this.page = page
+    this.conf.onChange(this.offset)
+    this.setInput(page)
+    this.checkDisabled()
+  }
+
+  public checkDisabled() {
+    if (this.page + 1 > this.maxPage) {
+      this.$nextBtn.classList.add('atk-disabled')
+    } else {
+      this.$nextBtn.classList.remove('atk-disabled')
+    }
+
+    if (this.page - 1 < 1) {
+      this.$prevBtn.classList.add('atk-disabled')
+    } else {
+      this.$prevBtn.classList.remove('atk-disabled')
+    }
+  }
+
+  public keydown(e: KeyboardEvent) {
+    const keyCode = e.keyCode || e.which
+
+    if (keyCode === 38) {
+      // 上键
+      const page = Number(this.$input.value) + 1
+      if (page > this.maxPage) { return }
+      this.setInput(page);
+      this.input()
+    } else if (keyCode === 40) {
+      // 下键
+      const page = Number(this.$input.value) - 1
+      if (page < 1) { return }
+      this.setInput(page)
+      this.input()
+    } else if (keyCode === 13) {
+      // 回车
+      this.input(true)
+    }
+  }
+
+  /** 加载 */
+  setLoading (isLoading: boolean) {
+    if (isLoading) Ui.showLoading(this.$el)
+    else Ui.hideLoading(this.$el)
+  }
+}

package/src/components/read-more-btn.ts

@@ -0,0 +1,71 @@
+import * as Utils from '../lib/utils'
+
+export interface ReadMoreBtnConf {
+  /** 每页条数 */
+  pageSize?: number
+
+  /** 数据总数 */
+  total: number
+
+  /** 回调函数 */
+  onClick: () => void
+}
+
+/**
+ * 阅读更多按钮
+ */
+export default class ReadMoreBtn {
+  public conf: ReadMoreBtnConf
+  public $el: HTMLElement
+  private $loading: HTMLElement
+  private $text: HTMLElement
+
+  public constructor(conf: ReadMoreBtnConf) {
+    this.conf = conf
+
+    this.$el = Utils.createElement(
+    `<div class="atk-list-read-more" style="display: none;">
+      <div class="atk-list-read-more-inner">
+        <div class="atk-loading-icon" style="display: none;"></div>
+        <span class="atk-text">查看更多</span>
+      </div>
+    </div>`)
+
+    this.$loading = this.$el.querySelector<HTMLElement>('.atk-loading-icon')!
+    this.$text = this.$el.querySelector<HTMLElement>('.atk-text')!
+
+    this.$el.onclick = () => this.click()
+  }
+
+  click() {
+    this.conf.onClick()
+  }
+
+  /** 显示 */
+  show() {
+    this.$el.style.display = ''
+  }
+
+  /** 隐藏 */
+  hide() {
+    this.$el.style.display = 'none'
+  }
+
+  /** 加载 */
+  setLoading (isLoading: boolean) {
+    this.$loading.style.display = isLoading ? '' : 'none'
+    this.$text.style.display = isLoading ? 'none' : ''
+  }
+
+  /** 错误提示 */
+  showErr(errMsg: string) {
+    this.setLoading(false)
+
+    this.$text.innerText = errMsg
+    this.$el.classList.add('atk-err')
+    window.setTimeout(() => {
+      this.$text.innerText = '查看更多'
+      this.$el.classList.remove('atk-err')
+    }, 2000) // 2s后错误提示复原
+  }
+}

package/src/components/sidebar-view.ts

@@ -0,0 +1,26 @@
+import Context from '../context'
+import Component from '../lib/component'
+import * as Utils from '../lib/utils'
+import Comment from './comment'
+
+export default class SidebarView extends Component {
+  static viewName = ''
+  static viewTitle = ''
+  static viewAdminOnly = false
+
+  viewTabs = {}
+  viewActiveTab = ''
+
+  protected $parent: HTMLElement
+
+  constructor(ctx: Context, $parent: HTMLElement) {
+    super(ctx)
+
+    this.$parent = $parent
+    this.$el = Utils.createElement(`<div class="atk-sidebar-view"></div>`)
+  }
+
+  mount(siteName: string) {}
+
+  switchTab(tab: string, siteName: string): boolean|void {}
+}

package/src/components/sidebar-views/comments-view.ts

@@ -0,0 +1,66 @@
+import Context from '../../context'
+import SidebarView from '../sidebar-view'
+import * as Utils from '../../lib/utils'
+import ListLite from '../list-lite'
+
+export default class MessageView extends SidebarView {
+  static viewName = 'comments'
+  static viewTitle = '评论'
+
+  viewTabs: any = {}
+  viewActiveTab = ''
+
+  list!: ListLite
+
+  mount(siteName: string) {
+    // tabs
+    if (this.ctx.user.data.isAdmin) {
+      this.viewTabs = {
+        admin_all: '全部',
+        admin_pending: '待审',
+        all: '个人',
+      }
+      this.viewActiveTab = 'admin_all'
+    } else {
+      this.viewTabs = {
+        mentions: '提及',
+        all: '全部',
+        mine: '我的',
+        pending: '待审',
+      }
+      this.viewActiveTab = 'mentions'
+    }
+
+    this.list = new ListLite(this.ctx, this.$el)
+    this.list.flatMode = true
+    this.list.unreadHighlight = true
+    this.list.autoLoadListenerAt = this.$parent
+    this.list.pageMode = 'pagination'
+    this.list.noCommentText = '<div class="atk-sidebar-no-content">无内容</div>'
+    this.list.renderComment = (comment) => {
+      comment.setOpenURL(`${comment.data.page_key}#atk-comment-${comment.data.id}`)
+    }
+    this.list.paramsEditor = (params) => {
+      params.site_name = siteName
+    }
+
+    this.$el.innerHTML = ''
+    this.$el.append(this.list.$el)
+
+    this.switchTab(this.viewActiveTab, siteName)
+  }
+
+  switchTab(tab: string, siteName: string): boolean|void {
+    //console.log(tab, siteName)
+    this.viewActiveTab = tab
+    this.list.type = tab as any;
+    this.list.isFirstLoad = true
+    this.list.paramsEditor = (params) => {
+      params.site_name = siteName
+    }
+    this.list.reqComments()
+
+    return true
+  }
+}
+

package/src/components/sidebar-views/pages-view.ts

@@ -0,0 +1,61 @@
+import Api from '~/src/api'
+import Context from '../../context'
+import Component from '../../lib/component'
+import * as Utils from '../../lib/utils'
+import * as Ui from '../../lib/ui'
+import PageList from '../admin/page-list'
+import Comment from '../comment'
+import Pagination, { PaginationConf } from '../pagination'
+import SidebarView from '../sidebar-view'
+
+const PAGE_SIZE = 20
+
+export default class PagesView extends SidebarView {
+  static viewName = 'pages'
+  static viewTitle = '页面'
+  static viewAdminOnly = true
+
+  viewTabs = {}
+  viewActiveTab = ''
+
+  pageList!: PageList
+  pagination!: Pagination
+
+  mount(siteName: string) {
+    if (!this.pageList) {
+      this.pageList = new PageList(this.ctx)
+      this.$el.append(this.pageList.$el)
+    }
+
+    this.switchTab(this.viewActiveTab, siteName)
+  }
+
+  switchTab(tab: string, siteName: string): boolean|void {
+    this.reqPages(siteName, 0)
+  }
+
+  async reqPages(siteName: string, offset: number) {
+    this.pageList.clearAll()
+    ;(this.$el.parentNode as any)?.scrollTo(0, 0)
+
+    Ui.showLoading(this.$el)
+
+    const data = await new Api(this.ctx).pageGet(siteName, offset, PAGE_SIZE)
+    this.pageList.importPages(data.pages || [])
+
+    Ui.hideLoading(this.$el)
+
+    if (!this.pagination) {
+      this.pagination = new Pagination(data.total, {
+        pageSize: PAGE_SIZE,
+        onChange: (o: number) => {
+          this.reqPages(siteName, o)
+        }
+      })
+
+      this.$el.append(this.pagination.$el)
+    }
+    if (this.pagination && offset === 0)
+      this.pagination.update(offset, data.total)
+  }
+}

package/src/components/sidebar-views/setting-view.ts

@@ -0,0 +1,21 @@
+import Api from '~/src/api'
+import Context from '../../context'
+import Component from '../../lib/component'
+import * as Utils from '../../lib/utils'
+import SiteList from '../admin/site-list'
+import Comment from '../comment'
+import SidebarView from '../sidebar-view'
+
+export default class SettingView extends SidebarView {
+  static viewName = 'setting'
+  static viewTitle = '配置'
+  static viewAdminOnly = true
+
+  viewTabs = {}
+  viewActiveTab = ''
+
+  mount(siteName: string) {
+  }
+
+  switchTab(tab: string, siteName: string) {}
+}

package/src/components/sidebar-views/sites-view.ts

@@ -0,0 +1,42 @@
+import Api from '~/src/api'
+import Context from '../../context'
+import Component from '../../lib/component'
+import * as Utils from '../../lib/utils'
+import SiteList from '../admin/site-list'
+import Comment from '../comment'
+import SidebarView from '../sidebar-view'
+
+export default class SitesView extends SidebarView {
+  static viewName = 'sites'
+  static viewTitle = '站点'
+  static viewAdminOnly = true
+
+  viewTabs = {}
+  viewActiveTab = ''
+
+  siteList!: SiteList
+
+  constructor(ctx: Context) {
+    super(ctx)
+
+    this.$el = Utils.createElement(`<div class="atk-sidebar-view"></div>`)
+  }
+
+  mount(siteName: string) {
+    if (!this.siteList) {
+      this.siteList = new SiteList(this.ctx)
+      this.$el.append(this.siteList.$el)
+    }
+
+    this.reqSites()
+  }
+
+  switchTab(tab: string, siteName: string) {
+    this.reqSites()
+  }
+
+  async reqSites() {
+    const sites = await new Api(this.ctx).siteGet()
+    this.siteList.loadSites(sites)
+  }
+}