feat(plugin/page_vote): add page_vote plugin

ArtalkJS · Sep 21, 2024 · 81bf6de · 81bf6de
1 parent 8707f4f
commit 81bf6de
Show file tree

Hide file tree

Showing 5 changed files with 78 additions and 0 deletions.
diff --git a/ui/artalk/index.html b/ui/artalk/index.html
@@ -139,6 +139,7 @@
         <span id="ArtalkPV"></span>
         |
         <span id="ArtalkCount"></span>
+        <div class="artalk-page-vote"></div>
       </div>
       <div class="social">
         <a

diff --git a/ui/artalk/src/defaults.ts b/ui/artalk/src/defaults.ts
@@ -19,6 +19,8 @@ const defaults: ArtalkConfig = {
 
   emoticons: 'https://cdn.jsdelivr.net/gh/ArtalkJS/Emoticons/grps/default.json',
 
+  pageVote: true,
+
   vote: true,
   voteDown: false,
   uaBadge: true,

diff --git a/ui/artalk/src/plugins/index.ts b/ui/artalk/src/plugins/index.ts
@@ -6,6 +6,7 @@ import { PvCountWidget } from './stat'
 import { VersionCheck } from './version-check'
 import { AdminOnlyElem } from './admin-only-elem'
 import { DarkMode } from './dark-mode'
+import { PageVoteWidget } from './page-vote'
 import type { ArtalkPlugin } from '@/types'
 
 export const DefaultPlugins: ArtalkPlugin[] = [
@@ -17,4 +18,5 @@ export const DefaultPlugins: ArtalkPlugin[] = [
   PvCountWidget,
   VersionCheck,
   DarkMode,
+  PageVoteWidget,
 ]
diff --git a/ui/artalk/src/plugins/page-vote.ts b/ui/artalk/src/plugins/page-vote.ts
@@ -0,0 +1,61 @@
+import ActionBtn from '../components/action-btn'
+import type { ArtalkPlugin, ContextApi } from '@/types'
+import { Api } from '@/api'
+import $t from '@/i18n'
+
+export interface PageVoteOptions {
+  getApi(): Api
+
+  pageKey: string
+  vote: boolean
+  voteDown: boolean
+  btnEl: string
+  el: string
+}
+
+export const PageVoteWidget: ArtalkPlugin = (ctx) => {
+  ctx.watchConf(['pageKey', 'pageVote'], (conf) => {
+    const defaultOptions = {
+      getApi: () => ctx.getApi(),
+      pageKey: conf.pageKey,
+      vote: true,
+      voteDown: false,
+      btnEl: '.artalk-page-vote',
+      el: '.artalk-page-vote-count',
+    }
+
+    if (!conf.pageVote) return
+    const pageVoteConfig = typeof conf.pageVote === 'object' ? conf.pageVote : {}
+    initPageVoteWidget(ctx, { ...defaultOptions, ...pageVoteConfig })
+  })
+}
+
+function initPageVoteWidget(ctx: ContextApi, options: PageVoteOptions) {
+  if (!options.vote) return
+
+  const btnContainer = document.querySelector(options.btnEl) as HTMLElement
+  if (!btnContainer) throw Error(`page vote's config \`btnEl\` selector ${options.btnEl} not found`)
+
+  const api = options.getApi()
+
+  ctx.on('list-fetched', ({ data }) => {
+    const voteUpBtn = new ActionBtn(() => `${$t('voteUp')}${data!.page.vote_up || 0}`).appendTo(btnContainer)
+    voteUpBtn.setClick(() => {
+      api.votes.vote('page_up', data!.page.id, {
+        ...api.getUserFields()
+      }).then(res => {
+        // todo: update vote count
+        console.log(res)
+      })
+    })
+
+    if (options.voteDown) {
+      const voteDownBtn = new ActionBtn(() => `${$t('voteDown')}`).appendTo(btnContainer)
+      voteDownBtn.setClick(() => {
+        api.votes.vote('page_down', data!.page.id, {
+          ...api.getUserFields()
+        })
+      })
+    }
+  })
+}
diff --git a/ui/artalk/src/types/config.ts b/ui/artalk/src/types/config.ts
@@ -73,6 +73,18 @@ export interface ArtalkConfig {
   /** 评论投票反对按钮 */
   voteDown: boolean
 
+  /** 页面投票按钮 */
+  pageVote?: {
+    /** 页面投票反对按钮 */
+    voteDown: boolean
+
+    /** 页面投票按钮绑定 Selector */
+    btnEl: string
+
+    /** 页面投票数绑定 Selector */
+    el: string
+  } | boolean
+
   /** 评论预览功能 */
   preview: boolean