Add statusbar to quickly select to language

friebetill · Nov 2, 2022 · f5c5b30 · f5c5b30
1 parent 8aec890
commit f5c5b30
Show file tree

Hide file tree

Showing 4 changed files with 70 additions and 2 deletions.
diff --git a/src/deepl/toLanguages.ts b/src/deepl/toLanguages.ts
@@ -1,6 +1,6 @@
 export const defaultToLanguage = "DE";
 
-export const toLanguages = {
+export const toLanguages: Record<string, string> = {
 	BG: "Bulgarian",
 	CS: "Czech",
 	DA: "Danish",

diff --git a/src/main.ts b/src/main.ts
@@ -1,4 +1,5 @@
-import { Editor, Notice, Plugin } from "obsidian";
+import { Editor, Menu, MenuItem, Notice, Plugin } from "obsidian";
+import { toLanguages } from "src/deepl/toLanguages";
 import { DeepLException } from "./deepl/deeplException";
 import { DeepLService } from "./deepl/deeplService";
 import {
@@ -10,13 +11,16 @@ import { SettingTab } from "./settings/settingTab";
 export default class DeepLPlugin extends Plugin {
 	public deeplService: DeepLService;
 	public settings: DeepLPluginSettings;
+	private statusBar: HTMLElement;
 
 	async onload() {
 		await this.loadSettings();
 
 		this.deeplService = new DeepLService(this.settings.apiKey);
 		this.addSettingTab(new SettingTab(this));
 
+		this.addStatusBar();
+
 		this.addCommand({
 			id: "deepl-translate",
 			name: "Translate",
@@ -55,5 +59,55 @@ export default class DeepLPlugin extends Plugin {
 
 	async saveSettings() {
 		await this.saveData(this.settings);
+
+		if (this.settings.showStatusBar === true) {
+			this.statusBar.show();
+			this.statusBar.setText(
+				`🌐 ${toLanguages[this.settings.toLanguage]}`
+			);
+		} else {
+			this.statusBar.hide();
+		}
+	}
+
+	addStatusBar() {
+		this.statusBar = this.addStatusBarItem();
+
+		if (this.settings.showStatusBar === false) {
+			this.statusBar.hide();
+		}
+
+		this.statusBar.addClass("statusbar-deepl");
+		this.statusBar.addClass("mod-clickable");
+
+		const toLanguage = toLanguages[this.settings.toLanguage];
+
+		this.statusBar.createEl("span", { text: `🌐 ${toLanguage}` });
+
+		this.statusBar.onClickEvent(this.handleStatusBarClick.bind(this));
+	}
+
+	async handleStatusBarClick(mouseEvent: MouseEvent) {
+		const menu = new Menu();
+
+		// Remove current language from list
+		const filteredToLanguages = Object.entries(toLanguages).filter(
+			([key]) => key !== this.settings.toLanguage
+		);
+
+		for (const [key, value] of filteredToLanguages) {
+			menu.addItem(
+				function (item: MenuItem) {
+					return item.setTitle(value).onClick(async () => {
+						this.settings.toLanguage = key;
+						await this.saveSettings();
+					});
+				}
+					// Bind to access this https://bit.ly/3WpEXbs
+					.bind(this)
+			);
+		}
+
+		menu.showAtMouseEvent(mouseEvent);
 	}
 }
diff --git a/src/settings/pluginSettings.ts b/src/settings/pluginSettings.ts
@@ -5,10 +5,12 @@ export interface DeepLPluginSettings {
 	apiKey: string;
 	fromLanguage: string;
 	toLanguage: string;
+	showStatusBar: boolean;
 }
 
 export const defaultSettings: Partial<DeepLPluginSettings> = {
 	apiKey: "",
 	fromLanguage: defaultFromLanguage,
 	toLanguage: defaultToLanguage,
+	showStatusBar: true,
 };
diff --git a/src/settings/settingTab.ts b/src/settings/settingTab.ts
@@ -56,5 +56,17 @@ export class SettingTab extends PluginSettingTab {
 						await this.plugin.saveSettings();
 					})
 			);
+
+		new Setting(containerEl)
+			.setName("Show in status bar")
+			.setDesc("Select the to language in the status bar.")
+			.addToggle((toggle) =>
+				toggle
+					.setValue(this.plugin.settings.showStatusBar)
+					.onChange(async (value) => {
+						this.plugin.settings.showStatusBar = value;
+						await this.plugin.saveSettings();
+					})
+			);
 	}
 }