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

2021年1月16日 (六) 00:54的版本

//<nowiki>
// 由ResourceLoader直接调用，不可使用ES6语法
/**
 * @Function: 定义小工具设置对话框
 * @Methods: constructor，构建mw.SettingsDialog对象
             initialize，打开窗口时初始化html
             getActionProcess，点击按钮时执行动作
             saveOptions，将设置保存到localStorage
 * @Author: [[User:Bhsd]]
 */
"use strict";
/* global OO, wgULS */
const formalize = function(ele) { return {data: ele.data || ele[0], label: ele.label || ele[1]}; };
mw.SettingsDialog = function(config) {
    config.classes = (config.classes || []).concat( 'settingsDialog' );
    mw.SettingsDialog.super.call(this, config);
    this.name = config.name;
    mw.gadgets = mw.gadgets || {};
    const settings = mw.gadgets[ this.name ] || {}; // 这里不更新mw.gadgets[ this.name ]，因为原则上小工具执行时已经更新过了
    // checkbox输入：[data, label, default]，输出：{data, label, widget}
    this.checkboxes = (config.checkboxes || []).map(function(ele) {
        const option = formalize(ele);
        return $.extend(option, {widget:
            new OO.ui.CheckboxInputWidget( {selected: settings[ option.data ] || ele.default || ele[2]} )
        });
    });
    // radio输入：{0: data, 1: label, 2: default, options}，输出：{data, label, widget}
    this.radios = (config.radios || []).map(function(ele) {
        const option = formalize(ele);
        return $.extend(option, {widget:
            new OO.ui.RadioSelectInputWidget({options: ele.options.map(formalize),
                value: settings[ option.data ] || ele.default || ele[2]}) // 初始值不正确时会自动选取第一个选项
        });
    });
};
OO.inheritClass(mw.SettingsDialog, OO.ui.ProcessDialog);
mw.SettingsDialog.prototype.initialize = function() {
    mw.SettingsDialog.super.prototype.initialize.apply(this, arguments);
    this.$body.append( this.checkboxes.map(function(ele) {
        return new OO.ui.FieldLayout(ele.widget, {label: ele.label, align: 'inline'}).$element;
    }).concat( '<hr>' ).concat( this.radios.map(function(ele) {
        return $('<div>', {class: 'multioptions-wrap', html: [$('<b>', {text: ele.label}), ele.widget.$element]});
    }) ) );
};
mw.SettingsDialog.prototype.getActionProcess = function(action) {
    if (action == 'save') {
        mw.notify(wgULS('您的设置已保存！', '您的設置已保存！'), {type: 'success'});
        this.saveOptions();
    }
    this.close();
    return new OO.ui.Process();
};
mw.SettingsDialog.prototype.saveOptions = function() {
    const settings = Object.fromEntries( this.checkboxes.map(function(ele) {
        return [ele.data, ele.widget.isSelected()];
    }).conat( this.radios.map(function(ele) { return [ele.data, ele.widget.getValue()]; }) ) );
    mw.gadgets[ this.name ] = settings;
    mw.storage.setObject('gadget-' + this.name, settings);
    mw.hook( 'settings.update' ).fire( this.name ); // 视情况根据新设置更新小工具，有些设置可能需要刷新页面才会生效
};
mw.SettingsDialog.static = {name: 'settingsDialog', tagName: 'div', title: wgULS('小工具设置', '小工具設置'),
    actions: [{action: 'save', label: '保存', flags: ['primary', 'progressive']},
        {action: 'cancel', label: '取消', flags: 'safe'}]
};
//</nowiki>
// [[category:作为模块的小工具]] [[category:桌面版小工具]] [[category:手机版小工具]] [[category:系统工具]]
// {{DEFAULTSORT:SettingsDialog.js}}