Merge pull request dimdenGD#553 from Yanstory/master

optimize <CUSTOM FONT> display
Yanstory · Sep 25, 2023 · 3f9d0ce · 3f9d0ce
2 parents b57de39 + e72f8b7
commit 3f9d0ce
Show file tree

Hide file tree

Showing 6 changed files with 46 additions and 10 deletions.
diff --git a/_locales/en/messages.json b/_locales/en/messages.json
@@ -580,5 +580,7 @@
     "share_tweet_to": { "message": "Share tweet to..." },
     "disable_find_hotkey": { "message": "Disable find hotkey (F)" },
     "uploaded": { "message": "Uploaded" },
-    "hide_unfollowers_page": { "message": "Hide unfollowers page" }
+    "hide_unfollowers_page": { "message": "Hide unfollowers page" },
+	"custom_font": { "message": "<CUSTOM>" },
+	"current_font": { "message": "Current font: $FONT$", "placeholders": { "font": { "content": "Arial" } } }
 }
diff --git a/_locales/ru/messages.json b/_locales/ru/messages.json
@@ -571,5 +571,7 @@
     "share_tweet_to": { "message": "Поделиться твитом..." },
     "disable_find_hotkey": { "message": "Выключить горячую клавишу для поиска (F)" },
     "uploaded": { "message": "Загружено" },
-    "hide_unfollowers_page": { "message": "Скрыть страницу отписчиков" }
+    "hide_unfollowers_page": { "message": "Скрыть страницу отписчиков" },
+	"custom_font": { "message": "<КАСТОМНЫЙ>" },
+	"current_font": { "message": "Текущий шрифт: $FONT$", "placeholders": { "font": { "content": "Arial" } } }
 }
diff --git a/_locales/uk/messages.json b/_locales/uk/messages.json
@@ -571,5 +571,7 @@
     "share_tweet_to": { "message": "Поширити твіт..." },
     "disable_find_hotkey": { "message": "Виключити гарячу клавішу для пошуку (F)" },
     "uploaded": { "message": "Завантажено" },
-    "hide_unfollowers_page": { "message": "Сховати сторінку відписників" }
+    "hide_unfollowers_page": { "message": "Сховати сторінку відписників" },
+	"custom_font": { "message": "<КАСТОМНИЙ>" },
+	"current_font": { "message": "Поточний шрифт: $FONT$", "placeholders": { "font": { "content": "Arial" } } }
 }
diff --git a/_locales/zh_CN/messages.json b/_locales/zh_CN/messages.json
@@ -580,5 +580,7 @@
     "share_tweet_to": { "message": "分享推文给..." },
     "disable_find_hotkey": { "message": "禁用搜索热键 (F键)" },
     "uploaded": { "message": "上传成功" },
-    "hide_unfollowers_page": { "message": "隐藏取关者页面" }
+    "hide_unfollowers_page": { "message": "隐藏【取关者】页面入口" },
+	"custom_font": { "message":"<自定义>" },
+	"current_font": { "message": "正在使用："}
 }
diff --git a/_locales/zh_TW/messages.json b/_locales/zh_TW/messages.json
@@ -580,5 +580,7 @@
     "share_tweet_to": { "message": "分享推文給..." },
     "disable_find_hotkey": { "message": "停用搜尋快捷鍵 (F)" },
     "uploaded": { "message": "上傳成功" },
-    "hide_unfollowers_page": { "message": "隱藏「取消跟隨你的人」頁面" }
+    "hide_unfollowers_page": { "message": "隱藏「取消跟隨你的人」頁面" },
+	"custom_font": { "message":"<自訂>" },
+	"current_font": { "message": "正在使用："}
 }
diff --git a/layouts/settings/script.js b/layouts/settings/script.js
@@ -110,6 +110,12 @@ function updateUserData() {
         console.error(e);
     });
 }
+function refreshFontSelectLabels(element, baselabel, fontname) {
+	element.innerHTML = baselabel;
+	if (fontname) {
+		element.innerHTML += "<br>" + LOC.current_font.message.replace('$FONT$', fontname);
+	}
+}
 // Render
 function renderUserData() {
     document.getElementById('user-name').innerText = user.name;
@@ -208,7 +214,13 @@ setTimeout(async () => {
         return [...fontAvailable.values()];
     })();
     let fontElement = document.getElementById('font');
+	let fontElementLabel = [...document.getElementsByTagName('label')].filter((el) =>
+		el.htmlFor == "font"
+	);
     let tweetFontElement = document.getElementById('tweet-font');
+    let tweetFontElementLabel = [...document.getElementsByTagName('label')].filter((el) =>
+		el.htmlFor == "tweet-font"
+	);
     let linkColor = document.getElementById('link-color');
     let heartsNotStars = document.getElementById('hearts-instead-stars');
     let linkColorsInTL = document.getElementById('link-colors-in-tl');
@@ -284,7 +296,7 @@ setTimeout(async () => {
     {
         let option = document.createElement('option');
         option.value = "_custom";
-        option.innerText = '<CUSTOM FONT>';
+        option.innerText = LOC.custom_font.message;
         fontElement.append(option);
         tweetFontElement.append(option.cloneNode(true));
     }
@@ -301,7 +313,10 @@ setTimeout(async () => {
         let font = fontElement.value;
         if(font === '_custom') {
             font = prompt(LOC.enter_custom_font_name.message);
-        }
+			refreshFontSelectLabels(fontElementLabel[0], LOC.font.message, font);
+        } else {
+			refreshFontSelectLabels(fontElementLabel[0], LOC.font.message);
+		}
         root.style.setProperty('--font', `"${font}"`);
         chrome.storage.sync.set({
             font: font
@@ -311,7 +326,10 @@ setTimeout(async () => {
         let font = tweetFontElement.value;
         if(font === '_custom') {
             font = prompt(LOC.enter_custom_font_name.message);
-        }
+			refreshFontSelectLabels(tweetFontElementLabel[0], LOC.tweet_text_font.message, font);
+        } else {
+			refreshFontSelectLabels(tweetFontElementLabel[0], LOC.tweet_text_font.message);
+		}
         root.style.setProperty('--tweet-font', `"${font}"`);
         chrome.storage.sync.set({
             tweetFont: font
@@ -905,12 +923,20 @@ setTimeout(async () => {
         linkColor.style.backgroundColor = '#4bacd2';
     }
     if(vars.font) {
-        fontElement.value = vars.font;
+		fontElement.value = vars.font;
         root.style.setProperty('--font', `"${vars.font}"`);
+		if (fontElement.selectedIndex==-1) {
+			fontElement.value = "_custom";
+			refreshFontSelectLabels(fontElementLabel[0], LOC.font.message, vars.font);
+		}
     }
     if(vars.tweetFont) {
-        tweetFontElement.value = vars.tweetFont;
+		tweetFontElement.value = vars.tweetFont;
         root.style.setProperty('--tweet-font', `"${vars.tweetFont}"`);
+		if (tweetFontElement.selectedIndex==-1) {
+			tweetFontElement.value = "_custom";
+			refreshFontSelectLabels(tweetFontElementLabel[0], LOC.tweet_text_font.message, vars.tweetFont);
+		}
     }
     if(vars.modernUI){
         root.style.setProperty('--icon-font', `"edgeicons", "RosettaIcons"`);