“MediaWiki:Gadget-SettingsDialog.js”的版本间差异

2021年1月14日 (四) 14:28的版本

"use strict";
/* jshint jquery:true */
/* global mw, OO, wgULS */
(() => {
    const formalize = function(options) {
        return options.map(ele => ({data: ele[0], label: ele[1]}));
    };
    
    class SettingsDialog extends OO.ui.ProcessDialog {
        constructor(config) {
            config.classes = [...(config.classes || []), 'settingsDialog']; // jshint ignore: line
            super(config);
            this.name = config.name;
            mw.gadgets = mw.gadgets || {};
            const settings = mw.gadgets[ this.name ] || {};
            // checkbox输入：[data, label]，输出：{data, label, widget}
            this.checkboxes = (config.checkboxes || []).map(ele => ({data: ele[0], label: ele[1],
                widget: new OO.ui.CheckboxInputWidget( {selected: settings[ ele[0] ] || ele[2]} )}));
            // radio输入：[data, label, options]，输出：{data, label, widget}
            this.radios = (config.radios || []).map(ele => ({ data: ele[0], label: ele[1],
                widget: new OO.ui.RadioSelectInputWidget({options: formalize(ele.options),
                    value: settings[ ele[0] ] || ele[2]}) })); // 初始值不正确时会自动选取第一个选项
        }
        initialize() {
            super.initialize();
            this.$body.append( [
                ...this.checkboxes.map(ele => new OO.ui.FieldLayout(ele.widget, {label: ele.label, align: 'inline'})
                    .$element),
                '<hr>',
                ...this.radios.map(ele => $('<div>', {class: 'multioptions-wrap',
                    html: [$('<b>', {text: ele.label}), ele.widget.$element]}))
            ] );
        }
        getActionProcess(action) {
            if (action == 'save') {
                mw.notify(wgULS('您的设置已保存！', '您的設置已保存！'), {type: 'success'});
                this.saveOptions();
            }
            this.close();
            return new OO.ui.Process();
        }
        saveOptions() {
            const settings = Object.fromEntries( [...this.checkboxes.map(ele => [ele.data, ele.widget.isSelected()]),
                ...this.radios.map(ele => [ele.data, ele.widget.getValue()])] );
            mw.gadgets[ this.name ] = settings;
            mw.storage.setObject(`gadget-${this.name}`, settings);
            mw.hook( 'settings.update' ).fire( this.name );
        }
    }
    // Safari不支持static属性
    SettingsDialog.static = {
        name: 'settingsDialog',
        tagName: 'div',
        title: wgULS('小工具设置', '小工具設置'),
        actions: [
            {action: 'save', label: '保存', flags: ['primary', 'progressive']},
            {action: 'cancel', label: '取消', flags: 'safe'}
        ]
    };
}) ();