Skip to content

Commit

Permalink
refactor(ui/list): separate the functions of list
Browse files Browse the repository at this point in the history
  • Loading branch information
qwqcode committed Oct 26, 2023
1 parent 87a6296 commit ff8fa83
Show file tree
Hide file tree
Showing 43 changed files with 835 additions and 738 deletions.
4 changes: 2 additions & 2 deletions ui/packages/artalk-sidebar/src/global.ts
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
import Artalk from 'artalk'
import type { LocalUser } from 'artalk/types/artalk-config'
import { useUserStore } from './stores/user'
const { t } = useI18n()

export let artalk: Artalk|null = null

Expand All @@ -25,14 +26,13 @@ export function createArtalkInstance() {
artalkEl.style.display = 'none'
document.body.append(artalkEl)

Artalk.DisabledComponents = ['list']
return Artalk.init({
el: artalkEl,
server: (import.meta.env.DEV) ? 'http://localhost:23366' : '../',
pageKey: bootParams.pageKey,
site: bootParams.site,
darkMode: bootParams.darkMode,
useBackendConf: true
useBackendConf: true,
})
}

Expand Down
51 changes: 24 additions & 27 deletions ui/packages/artalk-sidebar/src/pages/comments.vue
Original file line number Diff line number Diff line change
Expand Up @@ -33,54 +33,51 @@ onMounted(() => {
}
watch(curtTab, (curtTab) => {
list.fetchComments(0)
artalk!.ctx.fetch({
offset: 0
})
})
watch(curtSite, (value) => {
list.reload()
artalk!.ctx.reload()
})
// 初始化评论列表
const list = new Artalk.List(artalk!.ctx, {
liteMode: true,
flatMode: true,
unreadHighlight: true,
scrollListenerAt: wrapEl.value,
pageMode: 'pagination',
// pageSize: 20 // TODO consider fixed pageSize value in sidebar
noCommentText: `<div class="atk-sidebar-no-content">${t('noContent')}</div>`,
renderComment: (comment) => {
const pageURL = comment.getData().page_url
comment.getRender().setOpenURL(`${pageURL}#atk-comment-${comment.getID()}`)
comment.getConf().onReplyBtnClick = () => {
artalk!.ctx.replyComment(comment.getData(), comment.getEl())
}
artalk!.ctx.updateConf({
noComment: `<div class="atk-sidebar-no-content">${t('noContent')}</div>`,
pagination: {
pageSize: 20,
readMore: false,
autoLoad: false,
},
paramsEditor: (params) => {
listUnreadHighlight: true,
listFetchParamsModifier: (params) => {
params.type = curtTab.value // 列表数据类型
params.site_name = curtSite.value // 站点名
if (search.value) params.search = search.value
}
},
listScrollListenerAt: wrapEl.value,
})
artalk!.ctx.inject('list', list)
artalk!.on('list-inserted', (data) => {
wrapEl.value!.scrollTo(0, 0)
artalk!.ctx.on('comment-rendered', (comment) => {
const pageURL = comment.getData().page_url
comment.getRender().setOpenURL(`${pageURL}#atk-comment-${comment.getID()}`)
comment.getConf().onReplyBtnClick = () => {
artalk!.ctx.replyComment(comment.getData(), comment.getEl())
}
})
list.reload()
artalk!.reload()
listEl.value?.append(list.$el)
listEl.value?.append(artalk!.ctx.get('list')!.$el)
// 搜索功能
nav.enableSearch((value: string) => {
search.value = value
list.reload()
artalk!.reload()
}, () => {
if (search.value === '') return
search.value = ''
list.reload()
artalk!.reload()
})
})
</script>
Expand Down
2 changes: 1 addition & 1 deletion ui/packages/artalk/src/artalk.ts
Original file line number Diff line number Diff line change
Expand Up @@ -83,7 +83,7 @@ export default class Artalk {

/** Reload comment list of Artalk */
public reload() {
this.ctx.listReload()
this.ctx.reload()
}

/** Destroy instance of Artalk */
Expand Down
4 changes: 4 additions & 0 deletions ui/packages/artalk/src/components/pagination.ts
Original file line number Diff line number Diff line change
Expand Up @@ -99,6 +99,10 @@ export default class Pagination {
this.change(page)
}

public getHasMore() {
return this.page + 1 <= this.maxPage
}

public change(page: number) {
this.page = page
this.conf.onChange(this.offset)
Expand Down
8 changes: 8 additions & 0 deletions ui/packages/artalk/src/config.ts
Original file line number Diff line number Diff line change
Expand Up @@ -40,6 +40,14 @@ export function handelBaseConf(customConf: Partial<ArtalkConfig>): ArtalkConfig
conf.locale = navigator.language
}

// flatMode
if (conf.flatMode === true || Number(conf.nestMax) <= 1)
conf.flatMode = true

// 自动判断启用平铺模式
if (conf.flatMode === 'auto')
conf.flatMode = window.matchMedia("(max-width: 768px)").matches

return conf
}

Expand Down
80 changes: 18 additions & 62 deletions ui/packages/artalk/src/context.ts
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import type ArtalkConfig from '~/types/artalk-config'
import type { CommentData, NotifyData, PageData } from '~/types/artalk-data'
import type { CommentData, ListFetchParams } from '~/types/artalk-data'
import type { EventPayloadMap } from '~/types/event'
import type ContextApi from '~/types/context'
import type { TInjectedServices } from './service'
Expand All @@ -9,11 +9,12 @@ import * as DarkMode from './lib/dark-mode'
import * as marked from './lib/marked'
import { CheckerCaptchaPayload, CheckerPayload } from './lib/checker'

import { DataManager } from './data'
import * as I18n from './i18n'
import { getLayerWrap } from './layer'
import { SidebarShowPayload } from './layer/sidebar-layer'
import Comment from './comment'
import EventManager from './lib/event-manager'
import { handelBaseConf } from './config'

// Auto dependency injection
interface Context extends TInjectedServices { }
Expand All @@ -24,13 +25,10 @@ interface Context extends TInjectedServices { }
class Context implements ContextApi {
/* 运行参数 */
public conf: ArtalkConfig
public data: DataManager
public $root: HTMLElement
public markedReplacers: ((raw: string) => string)[] = []

private commentList: Comment[] = [] // Note: 无层级结构 + 无须排列
private page?: PageData
private unreadList: NotifyData[] = []

/* Event Manager */
private events = new EventManager<EventPayloadMap>()

Expand All @@ -40,6 +38,8 @@ class Context implements ContextApi {
this.$root = $root || document.createElement('div')
this.$root.classList.add('artalk')
this.$root.innerHTML = ''

this.data = new DataManager(this.events)
}

public inject(depName: string, obj: any) {
Expand All @@ -54,37 +54,8 @@ class Context implements ContextApi {
return this.api
}

/* 评论操作 */
public getCommentList() {
return this.commentList
}

public clearCommentList() {
this.commentList = []
}

public getCommentDataList() {
return this.commentList.map(c => c.getData())
}

public findComment(id: number): Comment|undefined {
return this.commentList.find(c => c.getData().id === id)
}

public deleteComment(id: number) {
this.list?.deleteComment(id)
}

public clearAllComments() {
this.list?.clearAllComments()
}

public insertComment(commentData: CommentData) {
this.list?.insertComment(commentData)
}

public updateComment(commentData: CommentData): void {
this.list?.updateComment(commentData)
public getData() {
return this.data
}

public replyComment(commentData: CommentData, $comment: HTMLElement): void {
Expand All @@ -95,33 +66,18 @@ class Context implements ContextApi {
this.editor.setEditComment(commentData, $comment)
}

/** 未读通知 */
public getUnreadList() {
return this.unreadList
}

public updateUnreadList(notifies: NotifyData[]): void {
this.unreadList = notifies
this.trigger('unread-updated', notifies)
}

/** 页面数据 */
getPage(): PageData|undefined {
return this.page
}

updatePage(pageData: PageData): void {
this.page = pageData
this.trigger('page-loaded', pageData)
public fetch(params: Partial<ListFetchParams>): void {
this.data.fetchComments(params)
}

/* 评论列表 */
public listReload(): void {
this.list?.reload()
public reload(): void {
this.data.fetchComments({
offset: 0,
})
}

public reload(): void {
this.listReload()
public listGotoFirst(): void {
this.trigger('list-goto-first')
}

/* 编辑器 */
Expand Down Expand Up @@ -202,8 +158,8 @@ class Context implements ContextApi {
}

public updateConf(nConf: Partial<ArtalkConfig>): void {
this.conf = Utils.mergeDeep(this.conf, nConf)
this.trigger('conf-loaded')
this.conf = Utils.mergeDeep(this.conf, handelBaseConf(nConf))
this.trigger('conf-loaded', this.conf)
}

public getMarkedInstance() {
Expand Down
111 changes: 111 additions & 0 deletions ui/packages/artalk/src/data.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,111 @@
import type { NotifyData, PageData, CommentData, DataManagerApi, ListFetchParams, ListLastFetchData } from '~/types/artalk-data'
import type { EventPayloadMap } from '~/types/event'
import EventManager from './lib/event-manager'

export class DataManager implements DataManagerApi {
private loading: boolean = false
private listLastFetch?: ListLastFetchData
private comments: CommentData[] = [] // Note: 无层级结构 + 无须排列
private unreads: NotifyData[] = []
private page?: PageData

constructor(
protected events: EventManager<EventPayloadMap>
) {}

getLoading() {
return this.loading
}

setLoading(val: boolean) {
this.loading = val
}

getListLastFetch() {
return this.listLastFetch
}

setListLastFetch(val: ListLastFetchData) {
this.listLastFetch = val
}

// -------------------------------------------------------------------
// Comments
// -------------------------------------------------------------------
getComments() {
return this.comments
}

fetchComments(params: Partial<ListFetchParams>) {
this.events.trigger('list-fetch', params)
}

findComment(id: number) {
return this.comments.find(c => c.id === id)
}

clearComments() {
this.comments = []
this.events.trigger('list-loaded', this.comments)
}

loadComments(comments: CommentData[]) {
this.events.trigger('list-load', comments)

this.comments = comments

this.events.trigger('list-loaded', comments)
}

insertComment(comment: CommentData) {
this.comments.push(comment)

this.events.trigger('comment-inserted', comment)
this.events.trigger('list-loaded', this.comments) // list-loaded should always keep the last
}

updateComment(comment: CommentData) {
this.comments = this.comments.map(c => {
if (c.id === comment.id) return comment
return c
})

this.events.trigger('comment-updated', comment)
this.events.trigger('list-loaded', this.comments)
}

deleteComment(id: number) {
const comment = this.comments.find(c => c.id === id)
if (!comment) throw new Error(`Comment ${id} not found`)
this.comments = this.comments.filter(c => c.id !== id)

this.events.trigger('comment-deleted', comment)
this.events.trigger('list-loaded', this.comments)
}

// -------------------------------------------------------------------
// Unreads
// -------------------------------------------------------------------
getUnreads() {
return this.unreads
}

updateUnreads(unread: NotifyData[]) {
this.unreads = unread

this.events.trigger('unreads-updated', this.unreads)
}

// -------------------------------------------------------------------
// Page
// -------------------------------------------------------------------
getPage() {
return this.page
}

updatePage(pageData: PageData) {
this.page = pageData

this.events.trigger('page-loaded', pageData)
}
}
2 changes: 1 addition & 1 deletion ui/packages/artalk/src/layer/sidebar-layer.ts
Original file line number Diff line number Diff line change
Expand Up @@ -113,7 +113,7 @@ export default class SidebarLayer extends Component {

// 清空 unread
setTimeout(() => {
this.ctx.updateUnreadList([])
this.ctx.getData().updateUnreads([])
}, 0)

this.ctx.trigger('sidebar-show')
Expand Down
Loading

0 comments on commit ff8fa83

Please sign in to comment.