Merge branch 'master' of https://github.com/Miodec/monkeytype

CONTRIBUTING.md

@@ -5,7 +5,7 @@
 - [Getting Started](#getting-started)
 - [Prerequisites](#prerequisites)
   - [Text Editor](#text-editor)
-  - [Git ](#git)
+  - [Git](#git)
   - [NodeJS and NPM](#nodejs-and-npm)
   - [Firebase](#firebase)
   - [Mongo Setup](#mongo-setup)
@@ -123,7 +123,7 @@ Before submitting a theme make sure...
 - Be sure to add your language to the `_list` and `_groups` files
 - Make sure the number of words in the file corresponds to the file name (for example: `languageName.json` is 200 words, `languageName_1k.json` is 1000 words, and so on)
 
-(If you want to contribute languages but don't know how to, check [LANGUAGES.md](https://github.com/teddinotteddy/monkeytype/blob/30f77fdc271c52743e8541d3bd2d27e23a4f5fab/LANGUAGES.md))
+(If you want to contribute languages but don't know how to, check [LANGUAGES.md](https://github.com/Miodec/monkeytype/blob/master/LANGUAGES.md))
 
 #### Quote Guidelines
 

frontend/src/scripts/misc.ts

@@ -237,10 +237,10 @@ export async function getLanguageList(): Promise<string[]> {
   }
 }
 
-type LanguageGroup = { name: string; languages: string[] };
-
-let languageGroupList: LanguageGroup[] = [];
-export async function getLanguageGroups(): Promise<LanguageGroup[]> {
+let languageGroupList: MonkeyTypes.LanguageGroup[] = [];
+export async function getLanguageGroups(): Promise<
+  MonkeyTypes.LanguageGroup[]
+> {
   if (languageGroupList.length === 0) {
     return $.getJSON("languages/_groups.json", function (data) {
       languageGroupList = data;
@@ -286,8 +286,8 @@ export async function getCurrentLanguage(
 
 export async function findCurrentGroup(
   language: string
-): Promise<LanguageGroup | undefined> {
-  let retgroup: LanguageGroup | undefined;
+): Promise<MonkeyTypes.LanguageGroup | undefined> {
+  let retgroup: MonkeyTypes.LanguageGroup | undefined;
   const groups = await getLanguageGroups();
   groups.forEach((group) => {
     if (retgroup === undefined) {

frontend/src/scripts/pages/settings.ts

@@ -9,8 +9,6 @@ import * as Misc from "../misc";
 // @ts-ignore
 import layouts from "../test/layouts";
 // @ts-ignore
-import * as LanguagePicker from "../settings/language-picker";
-// @ts-ignore
 import * as DB from "../db";
 // @ts-ignore
 import * as Funbox from "../test/funbox";
@@ -33,6 +31,7 @@ type SettingsGroups = {
 };
 
 export const groups: SettingsGroups = {};
+
 async function initGroups(): Promise<void> {
   await UpdateConfig.loadPromise;
   groups["smoothCaret"] = new SettingsGroup(
@@ -404,18 +403,18 @@ export async function fillSettingsPage(): Promise<void> {
     $(".pageSettings .tip").addClass("hidden");
   }
 
+  // Language Selection Combobox
   const languageEl = $(".pageSettings .section.language select").empty();
   const groups = await Misc.getLanguageGroups();
   groups.forEach((group) => {
-    let append = `<optgroup label="${group.name}">`;
-    group.languages.forEach((language) => {
-      append += `<option value="${language}">${language.replace(
-        /_/g,
-        " "
-      )}</option>`;
+    let langComboBox = `<optgroup label="${group.name}">`;
+    group.languages.forEach((language: string) => {
+      langComboBox += `<option value="${language}">
+        ${language.replace(/_/g, " ")}
+      </option>`;
     });
-    append += `</optgroup>`;
-    languageEl.append(append);
+    langComboBox += `</optgroup>`;
+    languageEl.append(langComboBox);
   });
   languageEl.select2();
 
@@ -674,7 +673,7 @@ export function update(): void {
 
   refreshTagsSettingsSection();
   refreshPresetsSettingsSection();
-  LanguagePicker.setActiveGroup();
+  // LanguagePicker.setActiveGroup(); Shifted from grouped btns to combo-box
   setActiveFunboxButton();
   ThemePicker.updateActiveTab();
   ThemePicker.setCustomInputs(true);
@@ -824,14 +823,16 @@ $(document).on("click", ".pageSettings .section.minBurst .button.save", () => {
   );
 });
 
-$(document).on(
-  "click",
-  ".pageSettings .section.languageGroups .button",
-  (e) => {
-    const group = $(e.currentTarget).attr("group");
-    LanguagePicker.setActiveGroup(group, true);
-  }
-);
+// Commented because started using combo-box for choosing languages instead of grouped buttons
+// languages
+// $(document).on(
+//   "click",
+//   ".pageSettings .section.languageGroups .button",
+//   (e) => {
+//     const group = $(e.currentTarget).attr("group");
+//     LanguagePicker.setActiveGroup(group, true);
+//   }
+// );
 
 //funbox
 $(document).on("click", ".pageSettings .section.funbox .button", (e) => {

frontend/src/scripts/settings/language-picker.ts

@@ -1,30 +1,41 @@
 import * as Misc from "../misc";
+// @ts-ignore
 import Config, * as UpdateConfig from "../config";
+import * as Types from "../types/interfaces";
+
+export async function setActiveGroup(
+  groupName: string | undefined,
+  clicked: boolean | undefined = false
+): Promise<void> {
+  let currentGroup: Types.LanguageGroup | undefined;
 
-export async function setActiveGroup(groupName, clicked = false) {
-  let currentGroup;
   if (groupName === undefined) {
     currentGroup = await Misc.findCurrentGroup(Config.language);
   } else {
-    let groups = await Misc.getLanguageGroups();
-    groups.forEach((g) => {
+    const groups: Types.LanguageGroup[] = await Misc.getLanguageGroups();
+    groups.forEach((g: Types.LanguageGroup) => {
       if (g.name === groupName) {
         currentGroup = g;
       }
     });
   }
+
   $(`.pageSettings .section.languageGroups .button`).removeClass("active");
+
+  if (currentGroup === undefined) return;
+
   $(
     `.pageSettings .section.languageGroups .button[group='${currentGroup.name}']`
   ).addClass("active");
 
-  let langEl = $(".pageSettings .section.language .buttons").empty();
-  currentGroup.languages.forEach((language) => {
-    langEl.append(
-      `<div class="language button" language='${language}'>${language.replace(
-        /_/g,
-        " "
-      )}</div>`
+  const langElement: JQuery<HTMLElement> = $(
+    ".pageSettings .section.language .buttons"
+  ).empty();
+  currentGroup.languages.forEach((langName: string) => {
+    langElement.append(
+      `<div class="language button" language='${langName}'>
+        ${langName.replace(/_/g, " ")}
+      </div>`
     );
   });
 

frontend/src/scripts/types/interfaces.ts

@@ -6,6 +6,8 @@ export declare type Mode = "time" | "words" | "quote" | "zen" | CustomModes;
 
 export declare type Mode2<M extends Mode> = keyof PersonalBests[M];
 
+export declare type LanguageGroup = { name: string; languages: string[] };
+
 // export declare type Mode2 = 10 | 15 | 25 | 30 | 50 | 60 | 100 | 120 | 200 | "zen" | "custom";
 
 export declare type NoncustomWordsModes = 10 | 25 | 50 | 100 | 200;