refactor(ShortURL): use i18n (#604)

Signed-off-by: WaitSpring <me@waitspring.com>

.mailmap

@@ -8,6 +8,6 @@
 # For format details, see "MAPPING AUTHORS" in "man git-shortlog".
 #
 
-AnYi <AnYi@git.qiuwen.wiki> <AnYi@git.qiuwen.net.cn> <i@anyi.in>
-WaitSpring <WaitSpring@git.qiuwen.wiki> <WaitSpring@git.qiuwen.net.cn> <me@waitspring.com>
-Zorua <Zorua@git.qiuwen.wiki> <Zorua@git.qiuwen.net.cn> <Zorua@vip.qq.com>
+AnYi <anyi@git.qiuwen.wiki> <anyi@git.qiuwen.net.cn> <i@anyi.in>
+WaitSpring <waitspring@git.qiuwen.wiki> <waitspring@git.qiuwen.net.cn> <me@waitspring.com>
+Zorua <zorua@git.qiuwen.wiki> <zorua@git.qiuwen.net.cn> <zorua@vip.qq.com>

src/ShortURL/modules/core.ts

@@ -1,5 +1,5 @@
 /* eslint-disable unicorn/prefer-add-event-listener */
-import {alertTitle, portletText, portletTooltip} from './messages';
+import {getMessage} from './i18n';
 import {initMwApi} from '../../util';
 
 export const shortURL = (): void => {
@@ -10,7 +10,13 @@ export const shortURL = (): void => {
 		const portletId: 'p-cactions' | 'p-tb' = document.querySelector('#p-cactions') ? 'p-cactions' : 'p-tb';
 		let element: HTMLLIElement | null = document.querySelector('#t-shortlink');
 		if (!element) {
-			element = mw.util.addPortletLink(portletId, '#', portletText, 't-shortlink', portletTooltip);
+			element = mw.util.addPortletLink(
+				portletId,
+				'#',
+				getMessage('Short URL'),
+				't-shortlink',
+				getMessage('Show short URL')
+			);
 		}
 		if (element) {
 			((element.firstElementChild ?? element) as HTMLElement).onclick = (event: MouseEvent): void => {
@@ -21,7 +27,7 @@ export const shortURL = (): void => {
 						new mw.widgets.CopyTextLayout({align: 'top', copyText: `https://${domain}${link}`}).$element
 					);
 				}
-				OO.ui.alert($element, {title: alertTitle, size: 'medium'});
+				OO.ui.alert($element, {title: getMessage('Short URL copied to clipboard'), size: 'medium'});
 			};
 			if (isCitizen && !isInit) {
 				isInit = true;
@@ -37,15 +43,15 @@ export const shortURL = (): void => {
 					$('<a>')
 						.attr({
 							href: '#',
-							'aria-label': portletText,
+							'aria-label': getMessage('Short URL'),
 						})
-						.append($('<span>').addClass('shortlink-icon').text(portletText))
+						.append($('<span>').addClass('shortlink-icon').text(getMessage('Short URL')))
 				);
 			$headerElement.prependTo('.mw-indicators');
 			headerElement = $headerElement.find('a').get(0) as HTMLAnchorElement;
 			tippy(headerElement, {
 				arrow: true,
-				content: portletText,
+				content: getMessage('Short URL'),
 				placement: 'bottom',
 			});
 		}
@@ -54,7 +60,7 @@ export const shortURL = (): void => {
 			event.preventDefault();
 			mw.notify(
 				$('<span>')
-					.text(alertTitle)
+					.text(getMessage('Short URL copied to clipboard'))
 					.append(
 						$('<br>'),
 						$('<a>')

src/ShortURL/modules/i18n.ts

@@ -0,0 +1,29 @@
+const getI18nMessages = () => {
+	const {localize} = i18n;
+
+	return {
+		'Short URL': localize({
+			en: 'Short URL',
+			'zh-hans': '短链接',
+			'zh-hant': '短網址',
+		}),
+		'Short URL copied to clipboard': localize({
+			en: 'The short URL has been copied to clipboard:',
+			'zh-hans': '已复制本页短链接：',
+			'zh-hant': '已復製本頁短網址：',
+		}),
+		'Show short URL': localize({
+			en: 'Show short URL',
+			'zh-hans': '显示该页短链接',
+			'zh-hant': '顯示該頁短網址',
+		}),
+	};
+};
+
+const i18nMessages = getI18nMessages();
+
+const getMessage: GetMessages<typeof i18nMessages> = (key) => {
+	return i18nMessages[key] || key;
+};
+
+export {getMessage};

src/ShortURL/modules/messages.ts

@@ -1,5 +0,0 @@
-const portletText: string = window.wgULS('短链接', '短網址'),
-	alertTitle: string = window.wgULS('已复制本页短链接：', '已復製本頁短網址：'),
-	portletTooltip: string = window.wgULS('显示该页短链接', '顯示該頁短網址');
-
-export {portletText, alertTitle, portletTooltip};