LLWiki正在建设中，欢迎加入我们！

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

跳转到导航 跳转到搜索

MediaWiki:Gadget-SettingsDialog.js (查看源代码)

2023年3月17日 (五) 13:20的版本

添加778字节 、​ 2023年3月17日 (五) 13:20
// 使用Wikiplus小工具快速编辑
小
（// 使用Wikiplus小工具快速编辑）
标签：移动版网页编辑 移动版编辑
 
（未显示同一用户的23个中间版本）
/**
* @Function: 定义小工具设置对话框
* @Methods: constructor：构建mw.SettingsDialog对象getName: 获取小工具名称
* initialize：初始化htmlgetObject: 获取小工具对象
* getActionProcess：点击按钮时执行动作getPanel: 获取小工具标签页
* getIndex：获取addTab: 添加小工具编号
* getName：获取小工具名称generateOptions: 生成设置对象
* getObject：获取小工具对象saveOptions: 将设置保存到localStorage
* addTab：添加小工具clearOptions: 还原设置
* removeTab：移除小工具export: 导出设置
* saveOptions：将设置保存到localStorage
* clearOptions：还原设置
* @Dependencies: mediawiki.util, mediawiki.storage, oojs-ui-windows, oojs-ui-widgets, ext.gadget.site-lib, user
* @Author: [[User:Bhsd]]
*/
"use strict";
/* global OO, hljs, wgULS */
mw.gadgets = mw.gadgets || {};
//避免使用API加载消息，直接手动添加
// 1. 设置繁简文字信息
mw.messages.set( wgULS({
'gadget-sd-titlecopy': '小工具设置请将以下代码添加至您的', 'gadget-sd-notify': '您的设置已保存！新设置将于刷新页面后生效。',
'gadget-sd-tooltip': '为当前浏览器设置小工具偏好', 'gadget-sd-help': '您可以在这里修改小工具偏好，修改仅对当前浏览器有效。如果想要修改设置对所有浏览器生效，请查阅',
'gadget-sd-backhelptext': '还原帮助页面', 'gadget-sd-helppageexporthelp': '如果想要修改设置对所有浏览器生效，请查阅导出代码', 'gadget-sd-savejs': '保存用户JS',
'gadget-sd-title': '小工具设置', 'gadget-sd-back': '还原', 'gadget-sd-save': '保存', 'gadget-sd-export': '导出'
'gadget-sd-helptext': '帮助页面'
}, {
'gadget-sd-titlecopy': '小工具偏好設定請將以下代碼添加至您的', 'gadget-sd-notify': '您的偏好設定已儲存！新設定將於重新載入頁面後生效。',
'gadget-sd-tooltip': '為當前瀏覽器設定小工具偏好', 'gadget-sd-help': '您可以在這裡修改小工具偏好，修改僅對當前瀏覽器有效。如果想要修改設定對所有瀏覽器生效，請查閱',
'gadget-sd-backhelptext': '復原說明頁面', 'gadget-sd-helppageexporthelp': '如果想要修改設定對所有瀏覽器生效，請查閱導出代碼', 'gadget-sd-savejs': '儲存使用者JS',
'gadget-sd-title': '小工具偏好設定', 'gadget-sd-back': '復原', 'gadget-sd-save': '儲存', 'gadget-sd-export': '導出'
'gadget-sd-helptext': '說明頁面'
}) );
// 2. 准备HTML元素
var ready = false;
var ready = false, dialog; // 是否是第一次打开对话框
const buildForm = function(dialog, params) { // 生成表单，只需要执行一次，所有不用写成SettingsDialog的内置方法
const isUser = mw.config.get( 'wgUserGroups' ).includes( 'user' ),
if (params.ready) { return; }
const Helpgadgets = paramsmw.helpgadgets,
$helpPage = $('<a>', {target: '_blank', text: mw.msg('gadget-sd-helptext')}), // 需要动态设置href
$element = dialog.content.getTabPanel( params.name ).$element.append(
$help = $('<div>', {html: [ mw.msg('gadget-sd-help')].concat(, Help$helpPage, ? [mw.msg('gadget-sd-helppage，或'),
$('<a>', {href: mw.util.getUrl('Help:小工具/' + Help), target: '_blank#settingsDialog-btns', text: mw.msg('gadget-sd-helptextexporthelp')}), '。' // 链接跳转到“导出”按钮
]}),
'。'] : [] )}) );
$block = $('<pre>', {class: 'javascript'}),
(params.items || []).forEach(function(ele) {
$code = $('<div>', {id: 'settingsDialog-code', html: [ mw.msg('gadget-sd-copy'),
ele.widget = new OO.ui[ele.type + 'InputWidget']( ele.config );
$('<a>', {href: '/zh/special:mypage/common.js', target: '_blank', text: mw.msg('gadget-sd-js')}),
$element.append( new OO.ui.FieldLayout(ele.widget, {label: mw.msg( ele.label ), help: ele.help}).$element );
'：', $block
delete ele.config;
]});,
$btns = $('<div>', {id: 'settingsDialog-btns', html: [
(params.fields || []).forEach(function(ele) {
const field = new OO.ui.FieldsetLayoutButtonWidget({label: mw.msg( ele.label 'gadget-sd-back'), help: ele.help, helpInlineflags: true'destructive'});
.on('click', function() { dialog.clearOptions(); }).$element,
field.addItems( (ele.items || []).map(function(e) {
new OO.ui.ButtonWidget({label: mw.msg('gadget-sd-export'), flags: 'progressive', disabled: !isUser})
e.widget = new OO.ui[e.type + 'InputWidget']( e.config );
.on('click', function() {
delete e.config;
const $panel = $btns.parent();
return new OO.ui.FieldLayout(e.widget, {label: mw.msg( e.label ), help: e.help});
$block.text( dialog.export() );
if (window.hljs) { hljs.highlightBlock( $block[0] ); }
$code.show();
$panel.animate({scrollTop: $panel.prop( 'scrollHeight' )}, 'slow');
}).$element, $code
]}),
// 3. 准备私有工具函数
deleteKeys = function(arr, obj) { arr.forEach(function(ele) { delete obj[ele]; }); },
buildWidget = function(obj, settings) { // 生成单个OOUI widget
obj.widget = new OO.ui[obj.type + 'InputWidget']( $.extend({value: (settings || {})[ obj.key ]}, obj.config) );
const layout = new OO.ui.FieldLayout(obj.widget, {label: mw.msg( obj.label ), help: obj.help});
deleteKeys(['config', 'label', 'help'], obj);
return layout;
},
clearWidgets = function(arr, settings) { // 还原一组OOUI widget
(arr || []).forEach(function(ele) { ele.widget.setValue( settings ? settings[ele.key] || '' : '' ); });
},
getValues = function(arr) { // 获取一组OOUI widget的值
return Object.fromEntries( (arr || []).map(function(ele) {
return [ele.key, !ele.widget.isDisabled() && ele.widget.getValue()];
}).filter(function(ele) { return ele[1]; }) );
},
buildForm = function(params, $element) {
if (!params.ready) { // 生成表单，只需要执行一次，不用写成SettingsDialog的内置方法
const settings = gadgets[ params.name ];
$element.append( (params.items || []).map(function(ele) { return buildWidget(ele, settings).$element; }) );
$element.append( (params.fields || []).map(function(ele) {
const field = new OO.ui.FieldsetLayout({ label: mw.msg( ele.label ), help: ele.help, helpInline: true,
items: (ele.items || []).map(function(e) { return buildWidget(e, settings[ ele.key ]); }) });
deleteKeys(['label', 'help'], ele);
return field.$element;
}) );
$elementparams.append(ready field.$element= )true;
mw.hook( 'settings.dialog' ).fire( params ); // 生成一个Hook
});
}
$('<div>', {class: 'panel-btns', html: new OO.ui.ButtonWidget({label: mw.msg('gadget-sd-back'),
// 切换标签时添加帮助和按钮，不用写成SettingsDialog的内置方法
flags: 'destructive'}).on('click', function() { dialog.clearOptions( params.name ); }).$element})
$helpPage.attr('href', mw.util.getUrl( 'Help:小工具/' + params.help ));
.appendTo( $element );
$element.prepend( $help ).append( $btns );
params.ready = true;
$code.hide();
mw.hook( 'settings.dialog' ).fire( params ); // 生成一个Hook
},
openDialog = function(e) {
e.preventDefault();
$(document.body).removeClass( 'navigation-enabled primary-navigation-enabled' );
dialog.open().opening.then(function() { buildForm(dialog.getObject(), dialog.getPanel().$element); });
};
// 4. 定义SettingsDialog类
/**
*function @Description:SettingsDialog() { // constructor只添加一个CSS类，id，剩下的交给addTab方法逐一添加小工具
SettingsDialog.super.call(this, {id: 'settingsDialog'});
*/
function SettingsDialog() {
SettingsDialog.super.call(this, {classes: ['settingsDialog']});
this.gadgets = [];
}
OO.inheritClass(SettingsDialog, OO.ui.ProcessDialog);
SettingsDialog.prototype.initialize = function() { // 只创建一个OO.ui.IndexLayout对象，剩下的交给addTab方法填入内容
/**
* @Description: 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( this.content.$element );
};
/**
* @Description: 处理动作
* @Param {String} 动作名
*/
SettingsDialog.prototype.getActionProcess = function(action) {
const dialog = this, // ES5不允许箭头函数，无法直接使用this关键字
gadgetsgadget = this.gadgets.filter(function(ele) { return ele.ready; }); // 忽略未加载的小工具
if (action == 'save') { gadgetsgadget.forEach(function(ele) { dialog.saveOptions( ele ); }); }
else { gadgetsgadget.forEach(function(ele) { dialog.clearOptions( ele ); }); }
this.close();
return new OO.ui.Process();
*/
SettingsDialog.prototype.addTab = function(params) {
const panel = new OO.ui.TabPanelLayout( params.name, {label: mw.msg( params.label )} );
const dialog = this,
panel = new OO.ui.TabPanelLayout(delete params.name, {label: mw.msg( params.label )} );
this.content.addTabPanels( [panel] );
this.gadgets.push( params );
// 必要时才开始加载表单
panel.on('active', function() { buildForm(dialogparams, paramspanel.$element); });
if (ready) { return; }
// 添加按钮，注意手机版的执行时机
if (mw.config.get('skin') == 'minerva') {
$(mw.addMobileLinks( {icon: 'user-cog', msg: 'gadget-sd-title'} )).click( openDialog )
mw.hook( 'mobile.menu' ).add(function($menu) {
.appendTo( $('#mw-mf-page-left').find('ul:not(.hlist)').last() );
console.log('Hook: mobile.menu, 开始添加小工具设置按钮');
mw.addMobileLinks([{icon: 'user-cog', msg: 'gadget-sd-title', attr: {id: 'ca-settingsDialog'}}])[0]
.appendTo( $menu.find('ul:not(.hlist)').last() );
});
} else {
mw.util.addPortletLink('p-cactions', '#', mw.msg('gadget-sd-title'), 'ca-settingsDialog',
mw.msg('gadget-sd-tooltip'));
}
else { $( mw.util.addPortletLink('p-cactions', '#', mw.msg('gadget-sd-title')) ).click( openDialog ); }
ready = true;
};
/**
* @Description: 获取小工具序号
* @Param {String} 小工具名称
* @Param {Object} 小工具数据
* @Return {Number} 小工具序号
*/
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 ); }
};
/**
* @Description: 获取小工具名称
* @Param {NumberObject} 小工具序号数据（可选），默认为当前小工具
* @Param {Object} 小工具数据
* @Return {String} 小工具名称
*/
SettingsDialog.prototype.getName = function(arg) {
return arg ? arg.name || arg : this.content.getCurrentTabPanelName();
if (typeof arg == 'string') { return arg; }
else if (typeof arg == 'number') { return this.gadgets[ arg ].name; }
else { return arg.name; }
};
/**
* @Description: 获取小工具数据
* @Param {String} 小工具名称（可选），默认为当前小工具
* @Param {Number} 小工具序号
* @Return {Object} 小工具数据
*/
SettingsDialog.prototype.getObject = function(arg) {
if (typeof arg == 'stringobject') { return this.gadgets.find(function(ele) { return ele.name == arg; }); }
elseconst ifname (typeof= arg == 'number') { return|| this.gadgets[ arg ]getName(); }
elsereturn this.gadgets.find(function(ele) { return argele.name == name; });
};
/**
* @Description: 移除获取小工具标签页
* @Param {String} 小工具名称（可选），默认为当前小工具
* @Param {NumberObject} 小工具序号数据（可选），默认为当前小工具
* @ParamReturn {ObjectOO.ui.TabPanelLayout} 小工具数据标签页
*/
SettingsDialog.prototype.removeTabgetPanel = function(arg) {
return arg ? this.content.getTabPanel( arg.name || arg ) : this.content.getCurrentTabPanel();
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 ) );
};
/**
* @Description: 还原选项生成设置对象
* @Param {String} 小工具名称（可选），默认为当前小工具
* @Param {NumberObject} 小工具序号数据（可选），默认为当前小工具
* @Param {ObjectBoolean} 小工具数据是否用于导出
* @Return {Object} 小工具設置
*/
SettingsDialog.prototype.clearOptionsgenerateOptions = function(arg, flag) {
const gadget = this.getObject(arg);
return $.extend( getValues( gadget.items ), Object.fromEntries( (gadget.fields || []).map(function(ele) {
if (!gadget) {
const obj = getValues( ele.items );
console.warn( '无法还原不存在的小工具设置！' );
return [ele.key, flag && $.isEmptyObject( obj ) ? undefined : obj];
return;
}) ) );
(gadget.clearOptions || function() {
const name = gadget.name,
settings = mw.gadgets[ name ];
(gadget.items || []).forEach(function(ele) { ele.widget.setValue( settings[ ele.key ] ); });
(gadget.fields || []).forEach(function(ele) {
const obj = settings[ ele.key ] || {};
ele.items.forEach(function(e) { e.widget.setValue( obj[ e.key ] ); });
});
}) ();
};
/**
* @Description: 保存设置
* @Param {String} 小工具名称（可选），默认为当前小工具
* @Param {NumberObject} 小工具序号数据（可选），默认为当前小工具
* @Param {Object} 小工具数据
*/
SettingsDialog.prototype.saveOptions = function(arg) {
const gadgetname = this.getObjectgetName(arg);,
settings = this.generateOptions( name );
if (!gadget) {
gadgets[ name ] = settings;
console.warn( '无法保存不存在的小工具设置！' );
mw.storage.setObject('gadget-' + name, settings);
return;
mw.notify(mw.msg( 'gadget-sd-notify' ), {type: 'success', tag: 'gadget-settings'});
}
};
(gadget.saveOptions || function() {
/**
const name = gadget.name,
* @Description: 还原选项
settings = mw.gadgets[ name ];
* @Param {String} 小工具名称（可选），默认为当前小工具
(gadget.items || []).filter(function(ele) { return !ele.widget.isDisabled(); })
* @Param {Object} 小工具数据（可选），默认为当前小工具
.forEach(function(ele) { settings[ ele.key ] = ele.widget.getValue() || undefined; });
*/
(gadget.fields || []).forEach(function(ele) {
SettingsDialog.prototype.clearOptions = function(arg) {
settings[ ele.key ] = settings[ ele.key ] || {};
const gadget = this.getObject(arg),
const obj = settings[ ele.key ]; // 已经是一个对象了
settings = gadgets[ gadget.name ];
ele.items.filter(function(e) { return !e.widget.isDisabled(); })
clearWidgets(gadget.items, settings);
.forEach(function(e) { obj[ e.key ] = e.widget.getValue() || undefined; });
(gadget.fields || []).forEach(function(ele) { clearWidgets(ele.items, settings[ ele.key ]); });
});
};
mw.storage.setObject('gadget-' + name, settings);
/**
mw.notify(mw.msg( 'gadget-sd-notify' ), {type: 'success', tag: 'gadget-settings'});
* @Description: 导出JS格式的设置
}) ();
* @Param {String} 小工具名称（可选），默认为当前小工具
* @Return {String} JS格式的设置
*/
SettingsDialog.prototype.export = function(name) {
name = name || this.getName();
return 'mw.gadgets = $.extend(mw.gadgets, {' + name + ': ' +
JSON.stringify( this.generateOptions(name, true), null, '\t' ) + ' });';
};
SettingsDialog.static = {name: 'settingsDialog', tagName: 'div', title: mw.msg('gadget-sd-title'), escapable: true,
{action: 'cancel', label: mw.msg('ooui-dialog-message-reject'), flags: 'safe'}]
};
mw// 5.settingsDialog = new 生成SettingsDialog();并保存为全局对象
dialog = new SettingsDialog();
const $body = $(document.body);
const manager = new OO.ui.WindowManager();
if (!mw.windowManager) {
manager.$element.appendTo( document.body );
mw.windowManager = mw.windowmanager || new OO.ui.WindowManager();
manager.addWindows( [dialog] ); // 此时已经初始化
mw.windowManager.$element.appendTo( $body );
mw.settingsDialog = dialog; // 创造一个全局对象
}
mw.windowManager.addWindows( [mw.settingsDialog] ); // 此时已经初始化
$body.on('click', '#ca-settingsDialog', function(e) {
e.preventDefault();
const dialog = mw.settingsDialog,
params = dialog.getObject( dialog.content.getCurrentTabPanelName() );
dialog.open().opening.then(function() {
if (params.ready) { return; }
buildForm(dialog, params);
});
});
//</nowiki>
// [[category:作为模块的小工具]] [[category:桌面版小工具]] [[category:手机版小工具]] [[category:系统工具]]
Bhsd
界面管理员、​监督员、​管理员
16,874

个编辑

取自“https://llwiki.org/zh/Special:移动版差异/22060...56530”

导航菜单