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

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

跳转到导航 跳转到搜索

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

2021年2月14日 (日) 23:56的版本

删除220字节 、​ 2021年2月14日 (日) 23:56
无编辑摘要
小
标签：移动版网页编辑 移动版编辑
/**
* @Function: 定义小工具设置对话框
* @Methods: getIndexgetName: 获取小工具编号名称
* getName: 获取小工具名称▼
* getObject: 获取小工具对象
▲ * getNamegetPanel: 获取小工具名称标签页
* addTab: 添加小工具
* generateOptions: 生成设置对象
"use strict";
/* global OO, hljs, wgULS */
// 1. 设置繁简文字信息
//避免使用API加载消息，直接手动添加
mw.messages.set( wgULS({
'gadget-sd-titlecopy': '小工具设置请将以下代码添加至您的', 'gadget-sd-notify': '您的设置已保存！新设置将于刷新页面后生效。',
'gadget-sd-back': '还原', 'gadget-sd-save': '保存',
'gadget-sd-help': '您可以在这里修改小工具偏好，修改仅对当前浏览器有效。如果想要修改设置对所有浏览器生效，请查阅',
'gadget-sd-helptext': '帮助页面', 'gadget-sd-exportexporthelp': '导出代码', 'gadget-sd-exporthelpjs': '导出代码用户JS',
'gadget-sd-copytitle': '请将以下代码添加至您的小工具设置', 'gadget-sd-jsback': '用户JS还原', 'gadget-sd-save': '保存', 'gadget-sd-export': '导出'
}, {
'gadget-sd-titlecopy': '小工具偏好設定請將以下代碼添加至您的', 'gadget-sd-notify': '您的偏好設定已儲存！新設定將於重新載入頁面後生效。',
'gadget-sd-back': '復原', 'gadget-sd-save': '儲存',
'gadget-sd-help': '您可以在這裡修改小工具偏好，修改僅對當前瀏覽器有效。如果想要修改設定對所有瀏覽器生效，請查閱',
'gadget-sd-helptext': '說明頁面', 'gadget-sd-exportexporthelp': '導出代碼', 'gadget-sd-exporthelpjs': '導出代碼使用者JS',
'gadget-sd-copytitle': '請將以下代碼添加至您的小工具偏好設定', 'gadget-sd-jsback': '使用者JS復原', 'gadget-sd-save': '儲存', 'gadget-sd-export': '導出'
}) );
// 2. 准备HTML元素
var ready = false, dialog; // 是否是第一次打开对话框
const $helpPage = $('<a>', {target: '_blank', text: mw.msg('gadget-sd-helptext')}), // 需要动态设置href
$help = $('<div>', {html: [ mw.msg('gadget-sd-help'), $helpPage, '，或',
mw.msg('gadget-sd-help'), $helpPage, '，或',
$('<a>', {href: '#settingsDialog-btns', text: mw.msg('gadget-sd-exporthelp')}), '。' // 链接跳转到“导出”按钮
]}),
$codeblock = $('<divpre>', {idclass: 'settingsDialog-codejavascript'}), html: [
$code = $('<div>', {id: 'settingsDialog-code', html: [ mw.msg('gadget-sd-copy'),
$('<a>', {href: '/zh/special:mypage/common.js', target: '_blank', text: mw.msg('gadget-sd-js')}),
'：', $block
$('<pre>', {class: 'javascript'})
]}),
$btns = $('<div>', {id: 'settingsDialog-btns', html: [
new OO.ui.ButtonWidget({label: mw.msg('gadget-sd-back'), flags: 'destructive'}).on('click', function() {
const dialog.clearOptions(); = mw}).settingsDialog$element,
name = dialog.content.getCurrentTabPanelName();▼
dialog.clearOptions( name );
}).$element,
new OO.ui.ButtonWidget({label: mw.msg('gadget-sd-export'), flags: 'progressive'}).on('click', function() {
const dialog$panel = mw$btns.settingsDialog,parent();
name =$block.text( dialog.content.getCurrentTabPanelNameexport(), );
$panel = $btns.parent(),
$block = $code.children( 'pre' );
$block.text( dialog.export( name ) );
if (window.hljs) { hljs.highlightBlock( $block[0] ); }
$code.show();
$panel.animate({scrollTop: $panel.prop( 'scrollHeight' )}, 'slow');
}).$element, $code
$code
]}),
// 3. 准备私有工具函数
deleteKeys = function(arr, obj) { arr.forEach(function(ele) { delete obj[ele]; }); },
buildWidget = function(obj) { // 生成单个OOUI widget
obj.widget = new OO.ui[obj.type + 'InputWidget']( obj.config );
const layout = new OO.ui.FieldLayout(obj.widget, {label: mw.msg( obj.label ), help: obj.help});
deleteKeys(['config', 'label', 'help'].forEach(function(ele) { delete, obj[ele]; });
return layout;
};,▼
clearWidgets = function(arr, settings) { // 还原一组OOUI widget
(arr || ele.items[]).forEach(function(eele) { eele.widget.setValue( objsettings ? settings[eele.key] || '' : '' ); });▼
},
getValues = function(arr) { // 获取一组OOUI widget的值
const settings = {};
(gadget.itemsarr || []).filter(function(ele) { return !ele.widget.isDisabled(); })▼
.forEach(function(ele) { settings[ ele.key ] = ele.widget.getValue() || undefined; });▼
return $.extend({}, settings); // 移除undefined
},
buildForm = function(params, $element) {
(params.fields || []).forEach(function(ele) {
const field = new OO.ui.FieldsetLayout({label: mw.msg( ele.label ), help: ele.help, helpInline: true});
deletedeleteKeys(['label', 'help'], ele.label);
field.addItems( (ele.items || []).map( buildWidget ) );
$element.append( field.$element );
}
// 切换标签时添加帮助和按钮，不用写成SettingsDialog的内置方法
$helpPage.attr('href', mw.util.getUrl( 'Help:小工具/' + params.help ));
$element.prepend( $help ).append( $btns );
$code.hide();
openDialog = function(e) {
e.preventDefault();
dialog.open().opening.then(function() { buildForm(paramsdialog.getObject(), dialog.getPanel().$element); });▼
const dialog = mw.settingsDialog,
content = dialog.content,
name = content.getCurrentTabPanelName(),
$element = content.getCurrentTabPanel().$element,
params = dialog.getObject( name );
▲ dialog.open().opening.then(function() { buildForm(params, $element); });
};
// 4. 定义SettingsDialog类
function SettingsDialog() { // constructor只添加一个id，剩下的交给addTab方法逐一添加小工具
SettingsDialog.super.call(this, {id: 'settingsDialog'});
};
SettingsDialog.prototype.getActionProcess = function(action) {
const dialog = this, // ES5不允许箭头函数，无法直接使用this关键字
gadgets = this.gadgets.filter(function(ele) { return ele.ready; }); // 忽略未加载的小工具
if (action == 'save') { gadgets.forEach(function(ele) { dialog.saveOptions( ele ); }); }
else { gadgets.forEach(function(ele) { dialog.clearOptions( ele ); }); }
this.close();
return new OO.ui.Process();
.appendTo( $menu.find('ul:not(.hlist)').last() );
});
} else {
$( mw.util.addPortletLink('p-cactions', '#', mw.msg('gadget-sd-title')) ).click( openDialog );▼
}
▲ 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 : name = dialogthis.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 {Object} 小工具数据（可选），默认为当前小工具
▲ * @Return {NumberOO.ui.TabPanelLayout} 小工具序号标签页
▲ */
▲SettingsDialog.prototype.getIndexgetPanel = function(arg) {
return arg ? this.content.getTabPanel( arg.name || arg ) : this.content.getCurrentTabPanel();
};
/**
* @Description: 生成设置对象
* @Param {String} 小工具名称（可选），默认为当前小工具
* @Param {NumberObject} 小工具序号数据（可选），默认为当前小工具
* @Param {Object} 小工具数据
* @Param {Boolean} 是否用于导出
* @Return {Object} 小工具設置
SettingsDialog.prototype.generateOptions = function(arg, flag) {
const gadget = this.getObject(arg),
settings = {}getValues( gadget.items );
▲ (gadget.items || []).filter(function(ele) { return !ele.widget.isDisabled(); })
▲ .forEach(function(ele) { settings[ ele.key ] = ele.widget.getValue() || undefined; });
(gadget.fields || []).forEach(function(ele) {
const obj = {}getValues( ele.items );
settings[ ele.key ] = flag && $.isEmptyObject( $.extend({}, obj) ) ? undefined : obj;▼
ele.items.filter(function(e) { return !e.widget.isDisabled(); })
.forEach(function(e) { obj[e.key] = e.widget.getValue() || undefined; });
▲ settings[ ele.key ] = flag && $.isEmptyObject( $.extend({}, obj) ) ? undefined : obj;
});
return settings;
/**
* @Description: 保存设置
* @Param {String} 小工具名称（可选），默认为当前小工具
* @Param {NumberObject} 小工具序号数据（可选），默认为当前小工具
* @Param {Object} 小工具数据
*/
SettingsDialog.prototype.saveOptions = function(arg) {
const gadgetname = this.getObjectgetName(arg),
namesettings = this.getNamegenerateOptions(arg name ),;
settings = this.generateOptions( gadget );
mw.gadgets[ name ] = settings;
mw.storage.setObject('gadget-' + name, settings);
/**
* @Description: 还原选项
* @Param {String} 小工具名称（可选），默认为当前小工具
* @Param {NumberObject} 小工具序号数据（可选），默认为当前小工具
* @Param {Object} 小工具数据
*/
SettingsDialog.prototype.clearOptions = function(arg) {
const gadget = this.getObject(arg),
namesettings = thismw.getName(arg),gadgets[ gadget.name ];
clearWidgets(gadget.items, settings = mw.gadgets[ name ]);
(gadget.itemsfields || []).forEach(function(ele) { clearWidgets(ele.widget.setValue(items, 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: 导出JS格式的设置
* @Param {String} 小工具名称（可选），默认为当前小工具
* @Param {Number} 小工具序号
* @Param {Object} 小工具数据
* @Return {String} JS格式的设置
*/
SettingsDialog.prototype.export = function(argname) {
const name = name || this.getName(arg),;
return 'mw.gadgets = $.extend(mw.gadgets, {' + name + ': ' +
settings = this.generateOptions(arg, true);
return 'mw.gadgets = $.extend(mw.gadgets, {' + name + ': ' + JSON.stringify(settings 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 manager = new OO.ui.WindowManager();
manager.$element.appendTo( document.body );
manager.addWindows( [mw.settingsDialogdialog] ); // 此时已经初始化
mw.settingsDialog = dialog; // 创造一个全局对象
//</nowiki>
// [[category:作为模块的小工具]] [[category:桌面版小工具]] [[category:手机版小工具]] [[category:系统工具]]
Bhsd
界面管理员、​监督员、​管理员
16,874

个编辑

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

导航菜单