미디어위키:Gadget-preview-params.js

$('.mw-editform .editOptions').after('<div class="preview-params" />');
const isNullish = (v, then, el) => ((v !== undefined && v !== null)? then(v) : el);
const form = $('form.mw-editform')[0];
const url = new URL(form.action);
const originalSearch = url.search;
const currentSearch = new URLSearchParams(location.search);
const {createMwApp, defineComponent} = require('vue');	
const {CdxField, CdxTextInput, CdxButton, CdxIcon} = require('@wikimedia/codex');
//const {cdxIconAdd, cdxIconTrash} = require('@wikimedia/codex-icons');
/** codex-icons 코드 시작
 * @see {@npm @wikimedia/codex-icons}
 * @see {@link https://www.npmjs.com/package/@wikimedia/codex-icons}
 * @license MIT
 * @copyright Copyright (c) 2011-2022 Wikimedia Design & OOUI team and other contributors.
 */
const cdxIconAdd = '<path d="M11 9V4H9v5H4v2h5v5h2v-5h5V9z"/>';
const cdxIconTrash = '<path d="M17 2h-3.5l-1-1h-5l-1 1H3v2h14zM4 17a2 2 0 002 2h8a2 2 0 002-2V5H4z"/>';
const cdxIconHelpNotice = {
    "ltr": "<path d=\"M10 0a10 10 0 1010 10A10 10 0 0010 0m1 16H9v-2h2zm2.71-7.6a2.6 2.6 0 01-.33.74 3.2 3.2 0 01-.48.55l-.54.48c-.21.18-.41.35-.58.52a2.5 2.5 0 00-.47.56A2.3 2.3 0 0011 12a3.8 3.8 0 00-.11 1H9.08a9 9 0 01.07-1.25 3.3 3.3 0 01.25-.9 2.8 2.8 0 01.41-.67 4 4 0 01.58-.58c.17-.16.34-.3.51-.44a3 3 0 00.43-.44 1.8 1.8 0 00.3-.55 2 2 0 00.11-.72 2.1 2.1 0 00-.17-.86 1.7 1.7 0 00-1-.9 1.7 1.7 0 00-.5-.1 1.77 1.77 0 00-1.53.68 3 3 0 00-.5 1.82H6.16a4.7 4.7 0 01.28-1.68 3.6 3.6 0 01.8-1.29 3.9 3.9 0 011.28-.83A4.6 4.6 0 0110.18 4a4.4 4.4 0 011.44.23 3.5 3.5 0 011.15.65 3.1 3.1 0 01.78 1.06 3.5 3.5 0 01.29 1.45 3.4 3.4 0 01-.13 1.01\"/>",
    "shouldFlip": true,
    "shouldFlipExceptions": [
        "he",
        "yi"
    ]
};
// codex-icons 코드 끝
const helpLink = 'https://www.mediawiki.org/wiki/Manual:Parameters_to_index.php/ko';
const ParamField = defineComponent({
	name: 'param-field',
	components: {CdxField, CdxTextInput, CdxButton, CdxIcon},
	props: {
		param: String,
		value: String
	},
	data() {
		return {cdxIconTrash};
	},
	emits: ['update:param', 'update:value', 'destroy'],
	template: `
		<cdx-field
			class="param-field"
			:is-fieldset="true"
		>
			<cdx-field class="param-field--key-field">
				<template #label>키</template>
				<cdx-text-input
					placeholder="키"
					:model-value="param"
					@update:model-value="newparam => $emit('update:param', newparam)"
				/>
			</cdx-field>
			<div class="param-field--middle-eq">=</div>
			<cdx-field class="param-field--value-field">
				<template #label>값</template>
				<cdx-text-input
					placeholder="값"
					:model-value="value"
					@update:model-value="newvalue => $emit('update:value', newvalue)"
				/>
			</cdx-field>
			<cdx-button
				class="param-field--destroy-button"
				@click="$emit('destroy', this.index)"
				aria-label="삭제"
				action="destructive"
				weight="quiet"
			>
				<cdx-icon :icon="cdxIconTrash" />
			</cdx-button>
    	</cdx-field>
    `
});
createMwApp({
	components: {ParamField, CdxField, CdxButton, CdxIcon},
	data() {
		return {
			index: 0,
			params: [],
            helpLink,
			cdxIconAdd,
            cdxIconHelpNotice
		};
	},
	computed: {
		keys() {
			return this.params.map(([index, key, value]) => key);
		},
		urlSearchParams() {
			return (this.params.length)
				? this.params
					.map(([index, key, value]) => `${encodeURIComponent(key)}=${encodeURIComponent(value)}`)
					.join('&')
				: '';
		}
	},
	methods: {
		addParam() {
			this.params.push([this.index++, '', '']);
		}
	},
	watch: {
		urlSearchParams: {
			handler(search) {
				url.search = (this.params.length)? originalSearch + '&' + search + '&previewparams=' + this.keys.map(encodeURIComponent).join('|') : originalSearch;
				form.action = url;
			}
		}
	},
	created() {
		this.params.push(...isNullish(currentSearch.get('previewparams'), v=>v.split('|'), []).map(key => [this.index++, key, currentSearch.get(key)]));
	},
	template: `
        <a class="preview-params-help" :href="helpLink" target="_blank">
            <cdx-icon :icon="cdxIconHelpNotice" /> 도움말
        </a>
		<cdx-field :is-fieldset="true">
			<template #label>미리 보기용 urlget 매개변수</template>
			<param-field v-for="(entries, index) in params"
				:key="entries[0]"
				@destroy="this.params.splice(index, 1)"
				v-model:param="entries[1]"
				v-model:value="entries[2]"
			/>
			<cdx-button
				class="preview-params-add"
				type="button"
				@click="addParam"
				action="progressive"
			>
				<cdx-icon :icon="cdxIconAdd" /> 매개변수 추가
			</cdx-button>
			<input type="hidden"
				name="previewparams"
				:value="keys.join('|')"
			/>
		</cdx-field>
	`
}).mount('.mw-editform .preview-params');