|
|
| 1번째 줄: |
1번째 줄: |
| 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');
| |
| });
| |
| }
| |