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

2021年1月17日 (日) 01:15的版本

//<nowiki>
// 由ResourceLoader直接调用，不可使用ES6语法
/**
 * @Function: 定义小工具设置对话框
 * @Methods: constructor：构建mw.SettingsDialog对象
 *           initialize：初始化html
 *           getActionProcess：点击按钮时执行动作
 *           getIndex：获取小工具编号
 *           getName：获取小工具名称
 *           getObject：获取小工具对象
 *           addTab：添加小工具
 *           removeTab：移除小工具
 *           saveOptions：将设置保存到localStorage
 *           clearOptions：还原设置
 * @Dependencies: mediawiki.util, mediawiki.storage, oojs-ui-core, oojs-ui-windows, ext.gadget.site-lib
 * @Author: [[User:Bhsd]]
 */
"use strict";
/* global OO, wgULS */
//避免使用API加载消息，直接手动添加
mw.messages.set( wgULS({
    'gadget-sd-title': '小工具设置', 'gadget-sd-notify': '您的设置已保存！',
    'gadget-sd-save': '保存', 'gadget-sd-cancel': '取消', 'gadget-sd-tooltip': '为当前浏览器设置小工具偏好',
    'gadget-sd-help': '您可以在这里修改小工具偏好，修改仅对当前浏览器有效。', 'gadget-sd-back': '还原'
}, {
    'gadget-sd-title': '小工具偏好設定', 'gadget-sd-notify': '您的偏好設定已儲存！',
    'gadget-sd-save': '儲存', 'gadget-sd-cancel': '取消', 'gadget-sd-tooltip': '為當前瀏覽器設定小工具偏好',
    'gadget-sd-help': '您可以在這裡修改小工具偏好，修改僅對當前瀏覽器有效。', 'gadget-sd-back': '復原'
}) );
// constructor只添加一个CSS类，剩下的交给addTab方法逐一添加小工具
function SettingsDialog() {
    SettingsDialog.super.call(this, {classes: ['settingsDialog']});
    this.gadgets = [];
}
OO.inheritClass(SettingsDialog, OO.ui.ProcessDialog);
// initialize只创建一个OO.ui.IndexLayout对象，剩下的交给addTab方法填入内容
SettingsDialog.prototype.initialize = function() {
    SettingsDialog.super.prototype.initialize.apply(this, arguments);
    this.content = new OO.ui.IndexLayout();
    this.$body.append( [$('<div>', {text: mw.msg('gadget-sd-help')}), this.content.$element] );
};
SettingsDialog.prototype.getActionProcess = function(action) {
    if (action == 'save') {
        mw.notify(mw.msg( 'gadget-sd-notify' ), {type: 'success'});
        this.gadgets.forEach( this.saveOptions );
    }
    else { this.gadgts.forEach( this.clearOptions ); }
    this.close();
    return new OO.ui.Process();
};
// 需要同时添加数据和HTML
SettingsDialog.prototype.addTab = function(params) {
    const settings = mw.gadgets[ params.name ] || {},
        types = [
        ['checkboxes', 'CheckboxInputWidget', [], 'selected', []],
        ['radios', 'RadioSelectInputWidget', ['options'], 'value', ['multioptions-wrap']]
    ];
    types.forEach(function(type) {
        params[ type[0] ] = params[ type[0] ] || [];
        params[ type[0] ].forEach(function(ele) {
            const config = Object.fromEntries( type[2].map(function(e) { return [e, ele[e]]; }) );
            type[2].forEach(function(e) { delete ele[e]; });
            config[ type[3] ] = ele.default;
            ele.widget = new OO.ui[ type[1] ](config);
        });
    });
    const panel = new OO.ui.TabPanelLayout( params.name, {label: params.label} );
    panel.$element.append( types.map(function(type) {
        return params[ type[0] ].map(function(ele) {
            return new OO.ui.FieldLayout(ele.widget, {label: ele.label, align: 'inline', help: ele.help,
                helpinline: true, classes: type[4]}).$element;
        });
    }).flat() );
    [new OO.ui.ButtonWidget({label: mw.msg('gadget-sd-back'), flags: 'destructive'}).on('click', function() {
        this.clearOptions( params.name );
    }), new OO.ui.ButtonWidget({label: mw.msg('gadget-sd-save'), flags: 'progressive'}).on('click', function() {
        this.saveOptions( params.name );
    })].appendTo( panel.$element );
    this.gadgets.push( params );
    this.content.addTabPanels( [panel] );
};
SettingsDialog.prototype.getIndex = function(arg) {
    if (typeof arg == 'string') { return this.gadgets.findIndex(function(ele) { return ele.name == arg; }); }
    else if (typeof arg == 'number') { return arg; }
    else { return this.gadgets.indexOf( arg ); }
};
SettingsDialog.prototype.getName = function(arg) {
    if (typeof arg == 'string') { return arg; }
    else if (typeof arg == 'number') { return this.gadgets[ arg ].name; }
    else { return arg.name; }
};
SettingsDialog.prototype.getObject = function(arg) {
    if (typeof arg == 'string') { return this.gadgets.find(function(ele) { return ele.name == arg; }); }
    else if (typeof arg == 'number') { return this.gadgets[ arg ]; }
    else { return arg; }
};
SettingsDialog.prototype.removeTab = function(arg) {
    const name = this.getName(arg),
        index = this.getIndex(arg);
    if (index == -1) {
        console.warn( '无法删除不存在的小工具设置！' );
        return;
    }
    // 需要同时移除数据和对应的HTML元素
    this.gadgets.splice(index, 1);
    this.content.removeTabPanels( this.content.getTabPanel( name ) );
};
SettingsDialog.prototype.clearOptions = function(arg) {
    const name = this.getName(arg),
        gadget = this.getObject(arg),
        settings = mw.gadgets[ name ] || {};
    // 下面的循环使用容易扩展的写法
    $.each({checkboxes: 'setSelected', radios: 'setValue'}, function(key, val) {
        gadget[key].forEach(function(ele) { ele.widget[val]( settings[ ele.data ] || ele.default ); });
    });
};
SettingsDialog.prototype.saveOptions = function(arg) {
    const name = this.getName(arg),
        gadget = this.getObject(arg),
        // 尽量采用容易扩展的写法
        entries = [['checkboxes', 'isSelected'], ['radios', 'getValue']].map(function(ele) {
        return gadget[ ele[0] ].map(function(e) { return [e.data, e.widget[ ele[1] ]()]; });
    }).flat(),
        settings = Object.fromEntries( entries );
    mw.gadgets[ name ] = settings;
    mw.storage.setObject('gadget-' + name, settings);
    mw.hook( 'settings.update' ).fire( name ); // 视情况根据新设置更新小工具，有些设置可能需要刷新页面才会生效
};
SettingsDialog.static = {name: 'settingsDialog', tagName: 'div', title: mw.msg('gadget-sd-title'),
    actions: [{action: 'save', label: mw.msg('gadget-sd-save'), flags: ['primary', 'progressive']},
        {action: 'cancel', label: mw.msg('gadget-sd-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] ); // 此时已经初始化
// 添加按钮，注意手机版的执行时机
if (mw.config.get('skin') == 'minerva') {
    mw.hook( 'mobile.menu' ).then(function($menu) {
        $('<li>').appendTo( $menu.find('ul:not(.hlist)').last() ).append( $('<a>', {id: 'ca-settingsDialog',
            html: [$('<i>', {class: 'fa fa-user-cog'}), $('<span>', {text: mw.msg('gadget-sd-title')})]
        }) );
    });
} else {
    mw.util.addPortletLink('p-cactions', '#', mw.msg('gadget-sd-title'), 'ca-settingsDialog',
        mw.msg('gadget-sd-tooltip'));
}
$('body').on('click', '#ca-settingsDialog', function(e) {
    e.preventDefault();
    mw.settingsDialog.open();
});
//</nowiki>
// [[category:作为模块的小工具]] [[category:桌面版小工具]] [[category:手机版小工具]] [[category:系统工具]]
// {{DEFAULTSORT:SettingsDialog.js}}