feat(plugin/page_vote): add page_vote plugin

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

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,

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,
 ]

ui/artalk/src/plugins/page-vote.ts

@@ -0,0 +1,75 @@
+import ActionBtn from '../components/action-btn'
+import type { ArtalkPlugin, ContextApi } from '@/types'
+import $t from '@/i18n'
+
+interface PageVoteOptions {
+  pageKey: string
+  vote: boolean
+  voteDown: boolean
+  btnEl: string
+}
+
+export const PageVoteWidget: ArtalkPlugin = (ctx) => {
+  ctx.watchConf(['pageKey', 'pageVote', 'darkMode'], (conf) => {
+    if (!conf.pageVote) return
+
+    const defaultOptions = {
+      pageKey: conf.pageKey,
+      vote: true,
+      voteDown: false,
+      btnEl: '.artalk-page-vote',
+    }
+
+    const pageVoteConfig = typeof conf.pageVote === 'object' ? conf.pageVote : {}
+    initPageVoteWidget(ctx, { ...defaultOptions, ...pageVoteConfig })
+  })
+}
+
+function initPageVoteWidget(ctx: ContextApi, options: PageVoteOptions) {
+  const btnContainer = document.querySelector<HTMLElement>(options.btnEl)
+  if (!btnContainer) return // throw Error(`page vote's config \`btnEl\` selector ${options.btnEl} not found`)
+  btnContainer.classList.add('atk-page-vote')
+  if (ctx.getConf().darkMode) btnContainer.classList.add('atk-dark-mode')
+  else btnContainer.classList.remove('atk-dark-mode')
+
+  const api = ctx.getApi()
+
+  ctx.on('list-fetched', ({ data }) => {
+    if (!data) return
+
+    const voteUpBtn = new ActionBtn(() => `${$t('voteUp')} (${data.page.vote_up || 0})`).appendTo(btnContainer)
+    const voteDownBtn = options.voteDown
+      ? new ActionBtn(() => `${$t('voteDown')} (${data.page.vote_down || 0})`).appendTo(btnContainer)
+      : null
+
+    voteUpBtn.setClick(() => {
+      api.votes.vote('page_up', data.page.id, {
+        ...api.getUserFields()
+      }).then(({ data: { up, down } }) => {
+        data.page.vote_up = up
+        data.page.vote_down = down
+        voteUpBtn.updateText()
+        voteDownBtn?.updateText()
+      }).catch((err) => {
+        voteUpBtn.setError($t('voteFail'))
+        console.error(err)
+      })
+    })
+
+    if (voteDownBtn) {
+      voteDownBtn.setClick(() => {
+        api.votes.vote('page_down', data.page.id, {
+          ...api.getUserFields()
+        }).then(({ data: { up, down } }) => {
+          data.page.vote_up = up
+          data.page.vote_down = down
+          voteUpBtn.updateText()
+          voteDownBtn.updateText()
+        }).catch((err) => {
+          voteDownBtn.setError($t('voteFail'))
+          console.error(err)
+        })
+      })
+    }
+  })
+}

ui/artalk/src/style/_action-btn.scss

@@ -0,0 +1,21 @@
+%action-btn {
+  color: var(--at-color-meta);
+  font-size: 13px;
+  line-height: 25px;
+  display: inline-flex;
+  cursor: pointer;
+  user-select: none;
+
+  &.atk-error,
+  &.atk-error:hover {
+    color: var(--at-color-red);
+  }
+
+  &:not(:last-child):not(.atk-hide) {
+    margin-right: 16px;
+  }
+
+  &:hover {
+    color: var(--at-color-deep);
+  }
+}

ui/artalk/src/style/_color.scss

@@ -1,5 +1,6 @@
 .artalk,
-.atk-layer-wrap {
+.atk-layer-wrap,
+.atk-page-vote {
   --at-color-font: #2a2e2e;
   --at-color-deep: #2a2e2e;
   --at-color-sub: #757575;

ui/artalk/src/style/comment.scss

@@ -1,3 +1,5 @@
+@import 'action-btn';
+
 .atk-comment-wrap {
   overflow: hidden;
   position: relative;
@@ -263,25 +265,7 @@
         flex-wrap: wrap;
 
         & > span {
-          color: var(--at-color-meta);
-          font-size: 13px;
-          line-height: 25px;
-          display: inline-flex;
-          cursor: pointer;
-          user-select: none;
-
-          &.atk-error,
-          &.atk-error:hover {
-            color: var(--at-color-red);
-          }
-
-          &:not(:last-child):not(.atk-hide) {
-            margin-right: 16px;
-          }
-
-          &:hover {
-            color: var(--at-color-deep);
-          }
+          @extend %action-btn;
         }
       }
     }

ui/artalk/src/style/main.scss

@@ -1,3 +1,4 @@
+@import 'action-btn';
 @import './_color.scss';
 @import './comment.scss';
 @import './list.scss';
@@ -542,6 +543,9 @@
 
 /* Common Action Btn */
 .atk-common-action-btn {
+
+  @extend %action-btn;
+
   &.atk-btn-confirm {
     color: var(--at-color-yellow) !important;
   }

ui/artalk/src/types/config.ts

@@ -73,6 +73,15 @@ export interface ArtalkConfig {
   /** 评论投票反对按钮 */
   voteDown: boolean
 
+  /** 页面投票按钮 */
+  pageVote?: {
+    /** 页面投票反对按钮 */
+    voteDown: boolean
+
+    /** 页面投票按钮绑定 Selector */
+    btnEl?: string
+  } | boolean
+
   /** 评论预览功能 */
   preview: boolean