wp-parsely / src / js / admin-parsely-stats.ts

admin-parsely-stats.ts in Parse.ly 3.8.4, at src/js/admin-parsely-stats.ts

116 lines 3.1 KB

Raw Download Zip

1	import { ParselyAPIError, ParselyAPIErrorInfo } from './common.interface';
2
3	export interface ParselyPostsStatsResponse extends ParselyAPIError {
4	data: ParselyStatsMap \| null;
5	}
6
7	interface ParselyStats {
8	page_views?: string;
9	visitors?: string;
10	avg_time?: string;
11	}
12
13	interface ParselyStatsMap {
14	[key: string]: ParselyStats;
15	}
16
17	document.addEventListener( 'DOMContentLoaded', (): void => {
18	showParselyPostsStatsResponse();
19	} );
20
21	/**
22	* Shows Parse.ly Post Stats or Error depending on response.
23	*/
24	export function showParselyPostsStatsResponse(): void {
25	updateParselyStatsPlaceholder();
26
27	if ( ! window.wpParselyPostsStatsResponse ) {
28	return;
29	}
30
31	const response: ParselyPostsStatsResponse = JSON.parse( window.wpParselyPostsStatsResponse );
32
33	if ( response?.error ) {
34	showParselyStatsError( response.error );
35	return;
36	}
37
38	if ( response?.data ) {
39	showParselyStats( response.data );
40	}
41	}
42
43	/**
44	* Replaces Parse.ly Stats placeholder from default to differentiate while the API request
45	* is in progress or completed.
46	*/
47	function updateParselyStatsPlaceholder(): void {
48	getAllPostStatsElements()?.forEach( ( statsElement: Element ): void => {
49	statsElement.innerHTML = '—';
50	} );
51	}
52
53	/**
54	* Shows Parse.ly Stats on available posts.
55	*
56	* @param {ParselyStatsMap} parselyStatsMap Object contains unique keys and Parse.ly Stats for posts.
57	*/
58	function showParselyStats( parselyStatsMap: ParselyStatsMap ): void {
59	if ( ! parselyStatsMap ) {
60	return;
61	}
62
63	getAllPostStatsElements()?.forEach( ( statsElement: Element ): void => {
64	const statsKey = statsElement.getAttribute( 'data-stats-key' );
65
66	if ( statsKey === null \|\| parselyStatsMap[ statsKey ] === undefined ) {
67	return;
68	}
69
70	const stats: ParselyStats = parselyStatsMap[ statsKey ];
71	statsElement.innerHTML = '';
72
73	if ( stats.page_views ) {
74	statsElement.innerHTML += `<span class="parsely-post-page-views">${ stats.page_views }</span><br/>`;
75	}
76
77	if ( stats.visitors ) {
78	statsElement.innerHTML += `<span class="parsely-post-visitors">${ stats.visitors }</span><br/>`;
79	}
80
81	if ( stats.avg_time ) {
82	statsElement.innerHTML += `<span class="parsely-post-avg-time">${ stats.avg_time }</span><br/>`;
83	}
84	} );
85	}
86
87	/**
88	* Shows Parse.ly Stats error as WP Admin Error Notice.
89	*
90	* @param {ParselyAPIErrorInfo} parselyStatsError Object which contians info about error.
91	*/
92	function showParselyStatsError( parselyStatsError: ParselyAPIErrorInfo ): void {
93	const headerEndElement = document.querySelector( '.wp-header-end' ); // WP has this element before admin notices.
94	if ( headerEndElement === null ) {
95	return;
96	}
97
98	headerEndElement.innerHTML += getWPAdminError( parselyStatsError.htmlMessage );
99	}
100
101	/**
102	* Gets all elements inside which we will show Parse.ly Stats.
103	*/
104	function getAllPostStatsElements(): NodeListOf<Element> {
105	return document.querySelectorAll( '.parsely-post-stats' );
106	}
107
108	/**
109	* Gets HTML for showing error message as WP Admin Error Notice.
110	*
111	* @param {string} htmlMessage Message to show inside notice.
112	*/
113	function getWPAdminError( htmlMessage = '' ): string {
114	return `<div class="error notice error-parsely-stats is-dismissible">${ htmlMessage }</div>`;
115	}
116