사용자:Hsl0/common.js

if(mw.config.get('wgAction') === 'edit') {
	$('.mw-editform .editOptions').after('<div class="preview-params" />');
	const form = $('form.mw-editform')[0];
	const url = new URL(form.action);
	const originalSearch = url.search;
	mw.loader.using(['vue', '@wikimedia/codex']).then(function(require) {
		const {createMwApp, defineComponent} = require('vue');	
		const {CdxField, CdxTextInput, CdxButton, CdxIcon} = require('@wikimedia/codex');
		//const {cdxIconAdd, cdxIconTrash} = require('@wikimedia/codex-icons');
		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, CdxButton, CdxIcon},
			data() {
				return {
					index: 0,
					params: [],
					//cdxIconAdd
				};
			},
			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 = originalSearch + '&' + search;
						form.action = url;
					}
				}
			},
			template: `
				<input type="hidden"
					name="previewparams"
					:value="keys.join('|')"
				/>
				<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
					type="button"
					@click="addParam"
					action="progressive"
				>
					<cdx-icon :icon="cdxIconAdd" />파라미터 추가
				</cdx-button>
			`
		}).mount('.mw-editform .preview-params');
	});
}