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

2021年1月16日 (六) 13:38的版本

//<nowiki>
// 由ResourceLoader直接调用，不可使用ES6语法
/**
 * @Function: 定义小工具设置对话框
 * @Methods: constructor：构建mw.SettingsDialog对象
 *           initialize：打开窗口时初始化html
 *           getActionProcess：点击按钮时执行动作
 *           addTab：添加小工具
 *           removeTab：移除小工具
 *           saveOptions：将设置保存到localStorage
 *           clearOptions：还原设置
 * @Author: [[User:Bhsd]]
 */
"use strict";
/* global OO, wgULS */
mw.messages.setting( wgULS({'gadget-sd-title': '小工具设置', 'gadget-sd-notify': '您的设置已保存！'},
    {'gadget-sd-title': '小工具偏好設定', 'gadget-sd-notify': '您的偏好設定已儲存！'}) );
// constructor只添加一个CSS类，剩下的交给addTab方法逐一添加小工具或initialize方法生成html
function SettingsDialog(config) {
    config.classes = (config.classes || []).concat( 'settingsDialog' );
    SettingsDialog.super.call(this, config);
}
OO.inheritClass(SettingsDialog, OO.ui.ProcessDialog);
SettingsDialog.prototype.initialize = function() {
    SettingsDialog.super.prototype.initialize.apply(this, arguments);
    this.content = new OO.ui.IndexLayout();
    this.gadgets.forEach(function(gadget) {
        gadget.panel = new OO.ui.TabPanelLayout( gadget.name, {label: gadget.label} );
        gadget.checkboxes.forEach(function(ele) {
            ele.widget = new OO.ui.CheckboxInputWidget();
        });
        gadget.radios.forEach(function(ele) {
            ele.widget = new OO.ui.RadioSelectInputWidget({options: ele.options});
        });
        gadget.panel.$element.append( gadget.checkboxes.map(function(ele) {
            return new OO.ui.FieldLayout(ele.widget, {label: ele.label, align: 'inline', help: ele.help,
                helpinline: true}).$element;
        }) ).append( gadget.radios.map(function(ele) {
            return new OO.ui.FieldLayout(ele.widget, {label: ele.label, align: 'inline', help: ele.help,
                helpinline: true, classes: ['multioptions-wrap']}).$element;
        }) );
    });
    this.clearOptions();
    this.content.addTabPanels( this.gadget.map(function(gadget) { return gadget.panel; }) );
};
SettingsDialog.prototype.getActionProcess = function(action) {
    if (action == 'save') {
        mw.notify(mw.msg( 'gadget-sd-notify' ), {type: 'success'});
        this.saveOptions();
    }
    else { this.clearOptions(); }
    this.close();
    return new OO.ui.Process();
};
SettingsDialog.prototype.addTab = function(params) {
    const gadget = {name: params.name || params[0], label: params.label || params[1]};
    gadget.checkboxes = params.checkboxes.map(function(ele) {
        return {data: ele.data || ele[0], label: ele.label || ele[1], default: ele.default || ele[2]};
    });
    gadget.radios = params.radios.map(function(ele) {
        return {data: ele.data || ele[0], label: ele.label || ele[1], default: ele.default || ele[3],
            options: ele.options || ele[2]};
    });
    this.gadgets.push( gadget );
};
SettingsDialog.prototype.removeTab = function(index) {
    this.gadgets.splice(index, 1);
};
SettingsDialog.prototype.clearOptions = function() {
    this.gadgets.forEach(function(gadget) {
        const settings = mw.gadgets[ gadget.name ] || {};
        gadget.checkboxes.forEach(function(ele) {
            ele.widget.setSelected( settings[ ele.data ] || ele.default );
        });
        gadget.radios.forEach(function(ele) {
            ele.widget.setValue( settings[ ele.data ] || ele.default );
        });
    });
};
SettingsDialog.prototype.saveOptions = function() {
    this.gadgets.forEach(function(gadget) {
        const settings = Object.fromEntries( gadget.checkboxes.map(function(ele) {
            return [ele.data, ele.widget.isSelected()];
        }).conat( gadget.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 ); // 视情况根据新设置更新小工具，有些设置可能需要刷新页面才会生效
    });
};
SettingsDialog.static = {name: 'settingsDialog', tagName: 'div', title: mw.msg('gadget-sd-title'),
    actions: [{action: 'save', label: mw.msg('upload-dialog-button-save'), flags: ['primary', 'progressive']},
        {action: 'cancel', label: mw.msg('upload-dialog-button-cancel'), flags: 'safe'}]
};
mw.settingsDialog = new SettingsDialog();
if (!mw.windowManager) {
    mw.windowManager = mw.windowmanager || new OO.ui.WindowManager();
    mw.windowManager.$element.appendTo( 'body' );
}
mw.windowManager.addWindows( [mw.settingsDialog] );
//</nowiki>
// [[category:作为模块的小工具]] [[category:桌面版小工具]] [[category:手机版小工具]] [[category:系统工具]]
// {{DEFAULTSORT:SettingsDialog.js}}