MediaViki:Gadget-toolbox-stats.js

/* <nowiki> */
"use strict";

mw.loader.using(['mediawiki.util', 'mediawiki.api', '@wikimedia/codex', 'vue'], function (require) {
	const { createMwApp } = require('vue');
	const { CdxDialog, CdxButton } = require('@wikimedia/codex');
	const api = new mw.Api();

	const portletLink = mw.util.addPortletLink(
		'p-ap',
		'javascript:void(0);',
		'Statistika',
		't-ap-stats',
		'Məqalə haqqında statistik məlumatları göstər'
	);

	function cleanWikitext(wikitext) {
		return wikitext
			.replace(/\{\{[^{}]*\}\}/g, '')
			.replace(/<ref[^>]*>.*?<\/ref>/gis, '')
			.replace(/\[\[Kateqoriya:[^\]]+\]\]/gi, '')
			.replace(/\[\[[^\|\]]*\|([^\]]+)\]\]/g, '$1')
			.replace(/\[\[([^\]]+)\]\]/g, '$1')
			.replace(/''+/g, '')
			.replace(/<[^>]+>/g, '')
			.replace(/&[a-z]+;/gi, '');
	}

	function countWords(text) {
		const normalized = text.replace(/\s+/g, ' ').trim();
		const matches = normalized.match(/\b[\wəöüıçşğƏÖÜÇŞĞİ]+\b/gui) || [];
		return matches.length;
	}

	const app = createMwApp({
		data: () => ({
			dialogShown: false,
			loading: false,
			error: '',
			stats: null
		}),
		watch: {
			dialogShown(newVal) {
				if (newVal) this.fetchStats();
				else {
					this.stats = null;
					this.error = '';
				}
			}
		},
		methods: {
			async fetchStats() {
				this.loading = true;
				this.error = '';
				this.stats = null;
				try {
					const res = await api.get({
						action: 'query',
						prop: 'revisions',
						titles: mw.config.get('wgPageName'),
						rvprop: 'content',
						formatversion: 2
					});

					let content = '';
					if (
						res &&
						res.query &&
						res.query.pages &&
						res.query.pages.length > 0 &&
						res.query.pages[0].revisions &&
						res.query.pages[0].revisions.length > 0 &&
						res.query.pages[0].revisions[0].content
					) {
						content = res.query.pages[0].revisions[0].content;
					}

					const plain = cleanWikitext(content);
					const normalizedPlain = plain.replace(/\s+/g, ' ').trim();
					const normalizedContent = content.replace(/\s+/g, ' ').trim();
					this.stats = {
						fullBytes: new Blob([content]).size,
						cleanBytes: new Blob([plain]).size,
						allWords: countWords(normalizedContent),
						words: countWords(normalizedPlain),
						totalChars: content.length,
					};
				} catch (e) {
					console.error(e);
					this.error = 'Məlumat alınarkən xəta baş verdi.';
				}
				this.loading = false;
			}
		},
		template: `
			<cdx-dialog
				v-model:open="dialogShown"
				title="Məqalə statistikası"
				use-close-button
				close-button-label="Bağla"
			>
				<template #default>
					<div v-if="loading">Hesablanır…</div>
					<div v-else-if="stats">
						<ul style="margin-left: 20px; padding-left: 0;">
							<li><strong>Səhifənin ümumi həcmi (baytla):</strong> {{ stats.fullBytes.toLocaleString() }}</li>
							<li><strong>Mətnin real həcmi (baytla):</strong> {{ stats.cleanBytes.toLocaleString() }}</li>
							<li><strong>Ümumi söz sayı:</strong> {{ stats.allWords.toLocaleString() }}</li>
							<li><strong>Real söz sayı:</strong> {{ stats.words.toLocaleString() }}</li>
							<li><strong>Ümumi simvol sayı:</strong> {{ stats.totalChars.toLocaleString() }}</li>
						</ul>
					</div>
					<p v-if="error" style="color: red;">{{ error }}</p>
				</template>
			</cdx-dialog>
		`,
		mounted() {
			portletLink.addEventListener('click', () => {
				this.dialogShown = true;
			});
		}
	});

	app
		.component('cdx-dialog', CdxDialog)
		.component('cdx-button', CdxButton)
		.mount(document.body.appendChild(document.createElement('div')));
});
/* </nowiki> */