|
|
| 第1行： |
第1行： |
| mw.loader.using(['oojs-ui-core', 'oojs-ui-windows']).then(function () { | | // 等待页面加载完成 |
|
| | mw.loader.using(['vue', 'codex']).then(function() { |
| var btn_submit = new OO.ui.ButtonWidget({
| | // 创建 Vue 应用 |
| label: '提交页面',
| | const app = Vue.createApp({ |
| icon: 'check',
| | data() { |
| flags: [
| | return { |
| 'primary', | | showDialog: false |
| 'progressive'
| | }; |
| ]
| | }, |
| }),
| | methods: { |
| btn_code = new OO.ui.ButtonWidget({
| | openDialog() { |
| label: '生成源代码',
| | this.showDialog = true; |
| icon: 'code',
| | }, |
| flags: [
| | closeDialog() { |
| 'progressive' | | this.showDialog = false; |
| ]
| | } |
| }),
| | }, |
| btn_add = new OO.ui.ButtonWidget({
| | template: ` |
| label: '增加作品',
| | <div> |
| icon: 'add'
| | <cdx-button |
| }),
| | weight="primary" |
| btn_reduce = new OO.ui.ButtonWidget({
| | @click="openDialog" |
| label: '减少作品',
| | > |
| icon: 'subtract'
| | 打开对话框 |
| });
| | </cdx-button> |
|
| |
| var input_writer_name = new OO.ui.TextInputWidget( {
| |
| required: true,
| |
| validate: 'non-empty',
| |
| placeholder: '请输入文手名'
| |
| } ),
| |
| input_writer_tag = new OO.ui.DropdownInputWidget( {
| |
| placeholder: '请选择文手标签（默认：同人）',
| |
| options: [
| |
| { data: '同人', label: '同人' }
| |
| ]
| |
| } ),
| |
| input_writer_platform = new OO.ui.TextInputWidget( {
| |
| placeholder: '请输入文手活跃平台'
| |
| } ),
| |
| check_isoverwrite = new OO.ui.CheckboxInputWidget( {
| |
| selected: false
| |
| } );
| |
|
| |
|
| var result_area = new OO.ui.MultilineTextInputWidget({
| | <cdx-dialog |
| autosize: true,
| | v-model:open="showDialog" |
| rows: 10,
| | title="提示" |
| value: ''
| | @close="closeDialog" |
| });
| | > |
|
| | <p>这是一个使用 Codex 和 Vue 实现的对话框示例。</p> |
| var fieldset = new OO.ui.FieldsetLayout( {
| | <template #footer> |
| label: '文手页面快速生成器',
| | <cdx-button |
| classes: [ 'container' ]
| | weight="primary" |
| } ),
| | @click="closeDialog" |
| fieldset_work = new OO.ui.FieldsetLayout( {
| | > |
| classes: [ 'container' ]
| | 确定 |
| } );
| | </cdx-button> |
| | | </template> |
| fieldset.addItems( [
| | </cdx-dialog> |
| new OO.ui.FieldLayout( input_writer_name, {
| | </div> |
| label: '文手名：',
| | ` |
| align: 'top',
| | }); |
| help: '名称请使用符合URL规则的纯文本（可以使用unicode），不要使用任何wikitext、HTML之类的语法。由于MediaWiki限制，空格会被转为下划线',
| |
| helpInline: true
| |
| } ),
| |
|
| |
| new OO.ui.FieldLayout( input_writer_tag, {
| |
| label: '文手标签：',
| |
| align: 'top'
| |
| } ),
| |
| | |
| new OO.ui.FieldLayout( input_writer_platform, {
| |
| label: '文手活跃平台：',
| |
| align: 'top'
| |
| } ),
| |
| | |
| new OO.ui.FieldLayout( check_isoverwrite, {
| |
| label: '覆盖已存在的页面【危险！可能会覆盖手工加入的信息】',
| |
| align: 'inline' | |
| } ), | |
|
| |
|
| new OO.ui.FieldLayout( | | // 创建容器元素 |
| new OO.ui.Widget( {
| | const container = document.createElement('div'); |
| content: [ new OO.ui.HorizontalLayout( {
| | container.id = 'codex-demo'; |
| items: [
| | document.body.appendChild(container); |
| new OO.ui.FieldLayout( btn_add ),
| |
| new OO.ui.FieldLayout( btn_reduce ),
| |
| new OO.ui.FieldLayout( btn_code ),
| |
| new OO.ui.FieldLayout( btn_submit )
| |
| ]
| |
| } ) ]
| |
| } )
| |
| ),
| |
|
| |
|
| new OO.ui.FieldsetLayout( fieldset_work ), | | // 挂载 Vue 应用 |
| | | app.mount('#codex-demo'); |
| new OO.ui.FieldLayout( result_area, {
| |
| label: '生成结果：',
| |
| align: 'top'
| |
| } ),
| |
| ] );
| |
| | |
| const getWork = (no) => {
| |
| var input_work_name = new OO.ui.TextInputWidget( {
| |
| placeholder: '作品名称'
| |
| } );
| |
| var input_work_pub_date = new OO.ui.TextInputWidget( {
| |
| placeholder: '发布日期（yyyy-MM-dd）'
| |
| } );
| |
| var input_work_update_date = new OO.ui.TextInputWidget( {
| |
| placeholder: '更新日期（可选）'
| |
| } );
| |
| var input_work_platform = new OO.ui.TextInputWidget( {
| |
| placeholder: '发布平台'
| |
| } );
| |
| var input_work_url = new OO.ui.TextInputWidget( {
| |
| placeholder: '作品链接'
| |
| } );
| |
| var input_work_status = new OO.ui.TextInputWidget( {
| |
| placeholder: '存档情况'
| |
| } );
| |
| var input_work_note = new OO.ui.TextInputWidget( {
| |
| placeholder: '备注（支持wikitext）'
| |
| } );
| |
| | |
| var work_field = new OO.ui.FieldsetLayout( {
| |
| label: '作品信息'+no,
| |
| classes: [ 'container' ]
| |
| } );
| |
| work_field.addItems( [ | |
| new OO.ui.FieldLayout(
| |
| new OO.ui.Widget( {
| |
| content: [ new OO.ui.HorizontalLayout( {
| |
| items: [
| |
| new OO.ui.FieldLayout( input_work_name, {
| |
| label: '作品名称：',
| |
| align: 'top'
| |
| }),
| |
| new OO.ui.FieldLayout( input_work_pub_date, {
| |
| label: '发布日期（yyyy-MM-dd）：',
| |
| align: 'top'
| |
| }),
| |
| new OO.ui.FieldLayout( input_work_update_date, {
| |
| label: '更新日期（可选）：',
| |
| align: 'top'
| |
| }),
| |
| new OO.ui.FieldLayout( input_work_platform, {
| |
| label: '发布平台：',
| |
| align: 'top'
| |
| }),
| |
| new OO.ui.FieldLayout( input_work_url, {
| |
| label: '作品链接：',
| |
| align: 'top'
| |
| }),
| |
| new OO.ui.FieldLayout( input_work_status, {
| |
| label: '存档情况：',
| |
| align: 'top'
| |
| }),
| |
| new OO.ui.FieldLayout( input_work_note, {
| |
| label: '备注（支持wikitext）：',
| |
| align: 'top'
| |
| })
| |
| ]
| |
| } ) ]
| |
| } )
| |
| )
| |
| ] );
| |
| | |
| return {
| |
| input_work_name: input_work_name,
| |
| input_work_pub_date: input_work_pub_date,
| |
| input_work_update_date: input_work_update_date,
| |
| input_work_platform: input_work_platform,
| |
| input_work_url: input_work_url,
| |
| input_work_status: input_work_status,
| |
| input_work_note: input_work_note,
| |
| work_field: work_field
| |
| };
| |
| }
| |
| | |
| var work_list = [];
| |
| | |
| btn_add.on('click', function () {
| |
| new_work = getWork(work_list.length+1);
| |
| work_list.push(new_work);
| |
| fieldset_work.addItems( [ new_work.work_field ] );
| |
| })
| |
| | |
| btn_reduce.on('click', function () {
| |
| last_work = work_list.pop();
| |
| fieldset_work.removeItems( [last_work.work_field] );
| |
| })
| |
| | |
| btn_code.on('click', function () {
| |
| var writer_name = input_writer_name.getValue();
| |
| var windowManager = new OO.ui.WindowManager();
| |
| var messageDialog = new OO.ui.MessageDialog();
| |
| if (writer_name === null || writer_name === '') {
| |
| $('body').append(windowManager.$element);
| |
| windowManager.addWindows([messageDialog]);
| |
| windowManager.openWindow(messageDialog, {
| |
| message: '请输入文手名！',
| |
| title: '错误：'
| |
| });
| |
| return;
| |
| }
| |
| var writer_tag = input_writer_tag.getValue();
| |
| var writer_platform = input_writer_platform.getValue();
| |
| result = '{{文手信息\n|文手名 = '+writer_name;
| |
| result += '\n|文手标签 = '+writer_tag;
| |
| result += '\n|文手活跃平台 = '+writer_platform;
| |
| result += '\n}}\n== 发布文章 ==\n';
| |
| if (work_list.length > 0) {
| |
| result += '{{文章信息框架|列表=\n';
| |
| for (var i = 0; i < work_list.length; i++) {
| |
| var work = work_list[i];
| |
| console.log(work);
| |
| var work_name = work.input_work_name.getValue();
| |
| var work_pub_date = work.input_work_pub_date.getValue();
| |
| var work_update_date = work.input_work_update_date.getValue();
| |
| var work_platform = work.input_work_platform.getValue();
| |
| var work_url = work.input_work_url.getValue();
| |
| var work_status = work.input_work_status.getValue();
| |
| var work_note = work.input_work_note.getValue();
| |
|
| |
| work_str = '{{文章信息\n|作品名称 = '+work_name;
| |
| work_str += '\n|发布日期 = '+work_pub_date;
| |
| work_str += '\n|更新日期 = '+work_update_date;
| |
| work_str += '\n|发布平台 = '+work_platform;
| |
| work_str += '\n|作品链接 = '+work_url;
| |
| work_str += '\n|存档情况 = '+work_status;
| |
| work_str += '\n|备注 = '+work_note;
| |
| work_str += '\n}}';
| |
|
| |
| result += work_str + '\n';
| |
| }
| |
| result += '}}\n';
| |
| }
| |
| result += '\n==外部链接与注释==\n';
| |
| | |
| result_area.setValue(result);
| |
| }); | | }); |
|
| |
| btn_submit.on('click', function () {
| |
| var result = result_area.getValue()
| |
| var windowManager = new OO.ui.WindowManager();
| |
| var messageDialog = new OO.ui.MessageDialog();
| |
| var writer_name = input_writer_name.getValue();
| |
| if (writer_name === null || writer_name === '') {
| |
| $('body').append(windowManager.$element);
| |
| windowManager.addWindows([messageDialog]);
| |
| windowManager.openWindow(messageDialog, {
| |
| message: '请输入文手名！',
| |
| title: '错误：'
| |
| });
| |
| return;
| |
| }
| |
| if (result === null || result === '') {
| |
| $('body').append(windowManager.$element);
| |
| windowManager.addWindows([messageDialog]);
| |
| windowManager.openWindow(messageDialog, {
| |
| message: '请先点击生成代码，再创建页面！',
| |
| title: '创建页面：' + writer_name
| |
| });
| |
| return;
| |
| }
| |
| var api = new mw.Api();
| |
| var isoverwrite = check_isoverwrite.isSelected();
| |
| api.postWithToken('csrf', {
| |
| action: 'edit',
| |
| title: writer_name,
| |
| text: result,
| |
| createonly: !isoverwrite,
| |
| summary: '文手页面生成器 by 玲子'
| |
| }).done(function (data) {
| |
| $('body').append(windowManager.$element);
| |
| windowManager.addWindows([messageDialog]);
| |
| windowManager.openWindow(messageDialog, {
| |
| message: '页面创建成功！',
| |
| title: '创建页面：' + writer_name
| |
| });
| |
| }).fail(function (data) {
| |
| $('body').append(windowManager.$element);
| |
| windowManager.addWindows([messageDialog]);
| |
| windowManager.openWindow(messageDialog, {
| |
| message: '页面创建失败：' + JSON.stringify(data),
| |
| title: '创建页面：' + writer_name
| |
| });
| |
| });
| |
| });
| |
|
| |
| // 添加到页面顶部
| |
| $('#mw-content-text').prepend(
| |
| fieldset.$element
| |
| );
| |
| });
| |
