미디어위키:Gadget-preview-params.js
참고: 설정을 저장한 후에 바뀐 점을 확인하기 위해서는 브라우저의 캐시를 새로 고쳐야 합니다.
- 파이어폭스 / 사파리: Shift 키를 누르면서 새로 고침을 클릭하거나, Ctrl-F5 또는 Ctrl-R을 입력 (Mac에서는 ⌘-R)
- 구글 크롬: Ctrl-Shift-R키를 입력 (Mac에서는 ⌘-Shift-R)
- 인터넷 익스플로러 / 엣지: Ctrl 키를 누르면서 새로 고침을 클릭하거나, Ctrl-F5를 입력.
- 오페라: Ctrl-F5를 입력.
$('.mw-editform .editOptions').after('<div class="preview-params" />');
const form = $('form.mw-editform')[0];
const url = new URL(form.action);
const originalSearch = url.search;
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: `
<cdx-field :is-fieldset="true">
<template #label>urlget 파라미터 테스트</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>
</cdx-field>
`
}).mount('.mw-editform .preview-params');