IsekaiWidgets/src/createPage/ext.isekai.createPage.js

import { registerModule } from '../moduleRegister';

class CreatePageWidget {
    constructor(dom) {
        this.baseDom = dom;
        this.pageUrl = null;
        this.api = new mw.Api();

        this.hasError = false;

        this.initDom();
    }

    initDom() {
        let namespaces = mw.config.get('wgIsekaiCreatePageNamespaces');
        if (!Array.isArray(namespaces) || namespaces.length === 0) {
            namespaces = [
                {
                    name: 'Main',
                    prefix: '',
                }
            ];
        }

        this.selectNamespaceDropdown = new OO.ui.DropdownInputWidget({
            options: namespaces.map((nsInfo) => ({
                data: nsInfo.prefix,
                label: nsInfo.name,
            })),
        });
        this.selectNamespaceDropdown.on('change', this.onNamespaceChange.bind(this));

        this.pageNameInput = new isekai.ui.CreatePageInputWidget({
            placeholder: mw.message('isekai-createpage-page-title').parse(),
        });
        this.pageNameInput.on('enter', this.createPage.bind(this));
        this.pageNameInput.on('change', this.onPageNameChange.bind(this));

        this.createButton = new OO.ui.ButtonWidget({
            label: mw.message('isekai-createpage-create-page-button').parse(),
            flags: [
                'primary',
                'progressive'
            ]
        });
        this.createButton.on('click', this.createPage.bind(this));

        this.inputGroup = new OO.ui.ActionFieldLayout(this.pageNameInput, this.createButton, {
            align: 'top'
        });

        this.formGroup = new OO.ui.HorizontalLayout({
            items: [
                this.selectNamespaceDropdown,
                this.inputGroup
            ]
        });

        this.baseDom.find('.card-body .card-content').append(this.formGroup.$element);
    }

    createPage() {
        let title = this.selectNamespaceDropdown.getValue() + this.pageNameInput.getValue();
        console.log(title);
        if (this.hasError) {
            this.clearError(); //清除errors
        }
        if (title.trim().length > 0) {
            this.createButton.setDisabled(true);
            this.pageExists(title).then((exists) => {
                if (exists) {
                    this.createButton.setDisabled(false);
                    this.setError(mw.message('isekai-createpage-page-exists').parse()); //提示页面已经存在
                } else {
                    let targetUrl = mw.util.getUrl(title, { veaction: 'edit' });
                    this.inputGroup.setSuccess([
                        mw.message('isekai-createpage-redirecting').parse()
                    ]); //提示正在跳转
                    location.href = targetUrl;
                }
            });
        } else {
            this.setError(mw.message('isekai-createpage-title-empty').parse());
        }
    }

    onPageNameChange() {
        if (this.hasError) {
            this.clearError();
        }

        let value = this.pageNameInput.getValue();
        if (value.indexOf('：') !== -1 || value.indexOf('`') !== -1) {
            let range = this.pageNameInput.getRange();
            value = value.replace(/：/g, ':').replace(/`/g, '·');
            this.pageNameInput.setValue(value);
            this.pageNameInput.selectRange(range.from, range.to);
        }
    }

    onNamespaceChange() {
        this.pageNameInput.setPagePrefix(this.selectNamespaceDropdown.getValue());
    }

    setError(msg) {
        this.inputGroup.setErrors([msg]); //提示页面已经存在
        this.hasError = true;
    }

    clearError() {
        this.inputGroup.setErrors([]);
        this.hasError = false;
    }

    pageExists(title) {
        return new Promise((resolve, reject) => {
            this.api.get({
                action: 'query',
                titles: title,
            }).done((data) => {
                if (data.query && data.query.pages) {
                    if (data.query.pages["-1"]) {
                        resolve(false);
                    } else {
                        resolve(true);
                    }
                } else {
                    resolve(false);
                }
            }).fail(reject);
        });
    }

    setTitle(title) {
        this.title.text(title);
    }
}

registerModule('ui.CreatePageWidget', CreatePageWidget);