Remove Checkbox

Author: mclemente

src/lang/en.json

@@ -40,10 +40,6 @@
 			"hint": "Enables all the chat features, such as the language selector in the chat and message scrambling.",
 			"title": "Enable Chat Features"
 		},
-		"DisplayCheckbox": {
-			"hint": "Displays a checkbox next to the language selector in the chat.",
-			"title": "Display Checkbox"
-		},
 		"DisplayTranslated.hint": "For languages that are translated in the chat window, display the original text and a translation below.",
 		"DisplayTranslated.title": "Display Translations",
 		"enableAllFonts": {

src/module/forms/GeneralSettings.js

@@ -115,7 +115,6 @@ export class PolyglotGeneralSettings extends FormApplication {
 			if (game.settings.get("polyglot", "enableChatFeatures")) {
 				data.settings.chat = {
 					...data.settings.chat,
-					displayCheckbox: this._prepSetting("displayCheckbox"),
 					"display-translated": this._prepSetting("display-translated"),
 					hideTranslation: this._prepSetting("hideTranslation"),
 					allowOOC: this._prepSetting("allowOOC"),
@@ -171,7 +170,6 @@ export class PolyglotGeneralSettings extends FormApplication {
 						"comprehendLanguages",
 						"truespeech",
 						"enableChatFeatures",
-						"displayCheckbox",
 						"display-translated",
 						"hideTranslation",
 						"allowOOC",

src/module/hooks.js

@@ -5,19 +5,22 @@ export default class PolyglotHooks {
 	 */
 	static renderChatLog(chatlog, html, data) {
 		game.polyglot.renderChatLog = true;
-		const input = game.settings.get("polyglot", "displayCheckbox")
-			? `<input id="polyglot-checkbox" type="checkbox" ${game.settings.get("polyglot", "checkbox") ? "checked" : ""}>`
-			: "";
 		const polyglotDiv = document.createElement("div");
 		polyglotDiv.setAttribute("id", "polyglot");
 		polyglotDiv.classList.add("polyglot", "polyglot-lang-select", "flexrow");
-		polyglotDiv.innerHTML = `${input}<select id='polyglot-language' name='polyglot-language'></select>`;
+		polyglotDiv.innerHTML = "<select id='polyglot-language' name='polyglot-language'></select>";
+		polyglotDiv.addEventListener("contextmenu", (event) => {
+			const setting = !game.settings.get("polyglot", "checkbox");
+			game.settings.set("polyglot", "checkbox", setting);
+			if (setting) game.polyglot.tomSelect.enable();
+			else game.polyglot.tomSelect.disable();
+		});
 		html.querySelector(".chat-controls").insertAdjacentElement("afterend", polyglotDiv);
 		html.querySelector(".polyglot-lang-select select").addEventListener("change", (ev) => {
 			const lang = ev.target.value;
 			game.polyglot.lastSelection = lang;
 		});
-		html.querySelector("input[id='polyglot-checkbox']").addEventListener("change", (ev) => {
+		html.querySelector("input[id='polyglot-checkbox']")?.addEventListener("change", (ev) => {
 			game.settings.set("polyglot", "checkbox", ev.target.checked);
 		});
 		game.polyglot.updateUserLanguages(html);
@@ -60,8 +63,7 @@ export default class PolyglotHooks {
 	 * @returns {Boolean}
 	 */
 	static preCreateChatMessage(message, data, options, userId) {
-		const isCheckboxEnabled = !game.settings.get("polyglot", "displayCheckbox")
-			|| game.polyglot.chatElement.querySelector("input#polyglot-checkbox").checked;
+		const isCheckboxEnabled = !game.settings.get("polyglot", "checkbox");
 		const isMessageLink = game.polyglot._isMessageLink(data.content);
 		const isMessageInlineRoll = /\[\[(.*?)\]\]/g.test(data.content);
 		// Message preprended by /desc from either Cautious GM Tools or Narrator Tools modules

src/module/logic.js

@@ -319,6 +319,7 @@ export class Polyglot {
 					console.log(dropdown);
 				}
 			});
+			if (!game.settings.get("polyglot", "checkbox")) this.tomSelect.disable();
 		} else {
 			this.tomSelect.close();
 			this.tomSelect.clearOptions();

src/module/settings.js

@@ -179,13 +179,6 @@ export function registerSettings() {
 		type: Boolean,
 		requiresReload: true,
 	});
-	addMenuSetting("displayCheckbox", {
-		name: "POLYGLOT.DisplayCheckbox.title",
-		hint: "POLYGLOT.DisplayCheckbox.hint",
-		default: true,
-		type: Boolean,
-		requiresReload: true,
-	});
 	addMenuSetting("display-translated", {
 		name: "POLYGLOT.DisplayTranslated.title",
 		hint: "POLYGLOT.DisplayTranslated.hint",

src/styles/_language-selector.scss

@@ -54,6 +54,9 @@
 		}
 	}
 	.ts-wrapper {
+		&.disabled {
+			text-decoration: line-through;
+		}
 		.ts-control {
 			background: rgba(0, 0, 0, 0.1);
 			border: none;