MediaViki:Gadget-toolbox-rev.js

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

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

	const portletLink = mw.util.addPortletLink(
		'p-ap',
		'javascript:void(0);',
		'Versiya',
		't-ap-rev',
		'Son versiyanın ID nömrəsini kopiyala'
	);

	const app = createMwApp({
		data: () => ({
			dialogShown: false,
			revisionId: '',
			lastEditor: '',
			error: '',
			loading: false,
			successMessage: ''
		}),
		methods: {
			toggleDialog() {
				this.dialogShown = !this.dialogShown;
				this.successMessage = '';
				this.error = '';
				if (this.dialogShown && !this.revisionId) {
					this.fetchRevisionId();
				}
			},
			async fetchRevisionId() {
				this.loading = true;
				try {
					const res = await api.get({
						action: 'query',
						prop: 'revisions',
						rvprop: 'ids|user',
						titles: mw.config.get('wgPageName'),
						formatversion: 2
					});
					const page = res.query.pages[0];
					if (page && page.revisions && page.revisions[0]) {
						const revision = page.revisions[0];
						this.revisionId = revision.revid.toString();
						this.lastEditor = revision.user;
					} else {
						this.error = 'Versiya ID tapılmadı.';
					}
				} catch (e) {
					console.error(e);
					this.error = 'Xəta baş verdi.';
				}
				this.loading = false;
			},
			async copyText(text) {
				try {
					await navigator.clipboard.writeText(text);
					this.successMessage = `Kopiyalandı: ${text}`;
				} catch (e) {
					console.error(e);
					this.error = 'Kopiyalama mümkün olmadı.';
				}
			}
		},
		template: `
			<cdx-dialog
				v-model:open="dialogShown"
				title="Son versiya nömrəsini kopiyala"
				use-close-button
				close-button-label="Bağla"
			>
				<template #default>
					<div v-if="loading">Yüklənir…</div>
					<div v-else-if="revisionId">
						<p>
							<strong>Versiya ID: </strong>
							<a :href="'/wiki/Xüsusi:DaimiKeçid/' + revisionId" target="_blank">{{ revisionId }}</a>,
							son redaktor:
							<a :href="'/wiki/İstifadəçi:' + lastEditor" target="_blank">{{ lastEditor }}</a>
						</p>

						<div style="margin-top: 10px;">
							<code>{{ revisionId }}</code>
							<cdx-button @click="copyText(revisionId)" style="margin-left: 10px;">Kopiyala</cdx-button>
						</div>

						<div style="margin-top: 10px;">
							<code>Xüsusi:DaimiKeçid/{{ revisionId }}</code>
							<cdx-button @click="copyText('Xüsusi:DaimiKeçid/' + revisionId)" style="margin-left: 10px;">Kopiyala</cdx-button>
						</div>

						<div style="margin-top: 10px;">
							<code>[[Xüsusi:DaimiKeçid/{{ revisionId }}]]</code>
							<cdx-button @click="copyText('[[Xüsusi:DaimiKeçid/' + revisionId + ']]')" style="margin-left: 10px;">Kopiyala</cdx-button>
						</div>

						<div style="margin-top: 10px;">
							<code>Xüsusi:Fərq/{{ revisionId }}</code>
							<cdx-button @click="copyText('Xüsusi:Fərq/' + revisionId)" style="margin-left: 10px;">Kopiyala</cdx-button>
						</div>

						<div style="margin-top: 10px;">
							<code>[[Xüsusi:Fərq/{{ revisionId }}]]</code>
							<cdx-button @click="copyText('[[Xüsusi:Fərq/' + revisionId + ']]')" style="margin-left: 10px;">Kopiyala</cdx-button>
						</div>

						<p v-if="successMessage" style="color: green; margin-top: 10px;">{{ successMessage }}</p>
					</div>
					<p v-if="error" style="color: red; margin-top: 10px;">{{ error }}</p>
				</template>
			</cdx-dialog>
		`,
		mounted() {
			portletLink.addEventListener('click', this.toggleDialog);
		},
		unmounted() {
			portletLink.removeEventListener('click', this.toggleDialog);
		}
	});

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