1 | import { getPageview, updatePageview } from './api';
|
2 | import { errorHandler, getQuery, getServerURL } from './utils';
|
3 |
|
4 | import type { WalineAbort } from './typings';
|
5 |
|
6 | export interface WalinePageviewCountOptions {
|
7 | |
8 |
|
9 |
|
10 |
|
11 |
|
12 | serverURL: string;
|
13 |
|
14 | |
15 |
|
16 |
|
17 |
|
18 |
|
19 |
|
20 |
|
21 | selector?: string;
|
22 |
|
23 | |
24 |
|
25 |
|
26 |
|
27 |
|
28 |
|
29 |
|
30 | path?: string;
|
31 |
|
32 | |
33 |
|
34 |
|
35 |
|
36 |
|
37 |
|
38 |
|
39 | update?: boolean;
|
40 |
|
41 | |
42 |
|
43 |
|
44 |
|
45 |
|
46 |
|
47 |
|
48 | lang?: string;
|
49 | }
|
50 |
|
51 | const renderVisitorCount = (
|
52 | counts: number[],
|
53 | countElements: HTMLElement[]
|
54 | ): void => {
|
55 | countElements.forEach((element, index) => {
|
56 | element.innerText = counts[index].toString();
|
57 | });
|
58 | };
|
59 |
|
60 | export const pageviewCount = ({
|
61 | serverURL,
|
62 | path = window.location.pathname,
|
63 | selector = '.waline-pageview-count',
|
64 | update = true,
|
65 | lang = navigator.language,
|
66 | }: WalinePageviewCountOptions): WalineAbort => {
|
67 | const controller = new AbortController();
|
68 |
|
69 | const elements = Array.from(
|
70 |
|
71 | document.querySelectorAll<HTMLElement>(selector)
|
72 | );
|
73 |
|
74 | const filter = (element: HTMLElement): boolean => {
|
75 | const query = getQuery(element);
|
76 |
|
77 | return query !== null && path !== query;
|
78 | };
|
79 |
|
80 | const fetch = (elements: HTMLElement[]): Promise<void> =>
|
81 | getPageview({
|
82 | serverURL: getServerURL(serverURL),
|
83 | paths: elements.map((element) => getQuery(element) || path),
|
84 | lang,
|
85 | signal: controller.signal,
|
86 | })
|
87 | .then((counts) => renderVisitorCount(counts, elements))
|
88 | .catch(errorHandler);
|
89 |
|
90 |
|
91 | if (update) {
|
92 | const normalElements = elements.filter((element) => !filter(element));
|
93 | const elementsNeedstoBeFetched = elements.filter(filter);
|
94 |
|
95 | void updatePageview({
|
96 | serverURL: getServerURL(serverURL),
|
97 | path,
|
98 | lang,
|
99 | }).then((count) =>
|
100 | renderVisitorCount(
|
101 | new Array<number>(normalElements.length).fill(count),
|
102 | normalElements
|
103 | )
|
104 | );
|
105 |
|
106 |
|
107 | if (elementsNeedstoBeFetched.length) {
|
108 | void fetch(elementsNeedstoBeFetched);
|
109 | }
|
110 | }
|
111 |
|
112 | else {
|
113 | void fetch(elements);
|
114 | }
|
115 |
|
116 | return controller.abort.bind(controller);
|
117 | };
|