grouping languages on the setttings page

src/js/misc.js

@@ -132,6 +132,31 @@ export async function getLanguageList() {
   }
 }
 
+let languageGroupList = null;
+export async function getLanguageGroups() {
+  if (languageGroupList == null) {
+    return $.getJSON("languages/_groups.json", function (data) {
+      languageGroupList = data;
+      return languageGroupList;
+    });
+  } else {
+    return languageGroupList;
+  }
+}
+
+export async function findCurrentGroup(language) {
+  let retgroup = undefined;
+  let groups = await getLanguageGroups();
+  groups.forEach((group) => {
+    if (retgroup === undefined) {
+      if (group.languages.includes(language)) {
+        retgroup = group;
+      }
+    }
+  });
+  return retgroup;
+}
+
 let challengeList = null;
 export async function getChallengeList() {
   if (challengeList == null) {

src/js/settings.js

@@ -268,14 +268,13 @@ fillSettingsPage();
 async function fillSettingsPage() {
   refreshThemeButtons();
 
-  let langEl = $(".pageSettings .section.language .buttons").empty();
-  Misc.getLanguageList().then((languages) => {
-    languages.forEach((language) => {
-      langEl.append(
-        `<div class="language button" language='${language}'>${language.replace(
-          /_/g,
-          " "
-        )}</div>`
+  let langGroupsEl = $(
+    ".pageSettings .section.languageGroups .buttons"
+  ).empty();
+  Misc.getLanguageGroups().then((groups) => {
+    groups.forEach((group) => {
+      langGroupsEl.append(
+        `<div class="languageGroup button" group='${group.name}'>${group.name}</div>`
       );
     });
   });
@@ -401,6 +400,8 @@ function updateSettingsPage() {
   });
 
   refreshTagsSettingsSection();
+  // setActiveLanguageGroup();
+  setActiveLanguageGroup();
   setActiveFunboxButton();
   setActiveThemeButton();
   setActiveThemeTab();
@@ -618,6 +619,45 @@ function setActiveFunboxButton() {
   );
 }
 
+async function setActiveLanguageGroup(groupName, clicked = false) {
+  let currentGroup;
+  if (groupName === undefined) {
+    currentGroup = await Misc.findCurrentGroup(config.language);
+  } else {
+    let groups = await Misc.getLanguageGroups();
+    groups.forEach((g) => {
+      if (g.name === groupName) {
+        currentGroup = g;
+      }
+    });
+  }
+  $(`.pageSettings .section.languageGroups .button`).removeClass("active");
+  $(
+    `.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>`
+    );
+  });
+
+  if (clicked) {
+    $($(`.pageSettings .section.language .buttons .button`)[0]).addClass(
+      "active"
+    );
+    setLanguage(currentGroup.languages[0]);
+  } else {
+    $(
+      `.pageSettings .section.language .buttons .button[language=${config.language}]`
+    ).addClass("active");
+  }
+}
+
 function setActiveThemeButton() {
   $(`.pageSettings .section.themes .theme`).removeClass("active");
   $(`.pageSettings .section.themes .theme[theme=${config.theme}]`).addClass(
@@ -746,6 +786,15 @@ $(document).on(
   }
 );
 
+$(document).on(
+  "click",
+  ".pageSettings .section.languageGroups .button",
+  (e) => {
+    let group = $(e.currentTarget).attr("group");
+    setActiveLanguageGroup(group, true);
+  }
+);
+
 //discord
 $(
   ".pageSettings .section.discordIntegration .buttons .generateCodeButton"

src/js/userconfig.js

@@ -1592,6 +1592,8 @@ function applyConfig(configObj) {
     setMode(configObj.mode, true);
     setMonkey(configObj.monkey, true);
 
+    setActiveLanguageGroup();
+
     try {
       setEnableAds(configObj.enableAds, true);
       let addemo = false;

src/sass/style.scss

@@ -2613,6 +2613,7 @@ key {
 
     &.themes,
     &.language,
+    &.languageGroups,
     &.layout,
     &.keymapLayout,
     &.fontFamily,

static/index.html

@@ -1889,6 +1889,10 @@
                   />
                 </div>
               </div>
+              <div class="section languageGroups">
+                <h1>language groups</h1>
+                <div class="buttons"></div>
+              </div>
               <div class="section language">
                 <h1>language</h1>
                 <div class="buttons"></div>

static/languages/_groups.json

@@ -0,0 +1,171 @@
+[
+  {
+    "name": "english",
+    "languages": ["english", "english_1k", "english_10k", "english_450k"]
+  },
+  {
+    "name": "spanish",
+    "languages": ["spanish", "spanish_1k"]
+  },
+  {
+    "name": "french",
+    "languages": ["french", "french_1k", "french_2k", "french_10k"]
+  },
+  {
+    "name": "arabic",
+    "languages": ["arabic"]
+  },
+  {
+    "name": "malay",
+    "languages": ["malay"]
+  },
+  {
+    "name": "mongolian",
+    "languages": ["mongolian", "mongolian_10k"]
+  },
+  {
+    "name": "russian",
+    "languages": ["russian", "russian_1k", "russian_10k"]
+  },
+  {
+    "name": "portuguese",
+    "languages": ["portuguese"]
+  },
+  {
+    "name": "indonesian",
+    "languages": ["indonesian", "indonesian_1k"]
+  },
+  {
+    "name": "german",
+    "languages": ["german", "german_1k", "swiss_german", "swiss_german_1k"]
+  },
+  {
+    "name": "greek",
+    "languages": ["greek"]
+  },
+  {
+    "name": "turkish",
+    "languages": ["turkish"]
+  },
+  {
+    "name": "italian",
+    "languages": ["italian", "italian_1k", "italian_7k"]
+  },
+  {
+    "name": "thai",
+    "languages": ["thai"]
+  },
+  {
+    "name": "polish",
+    "languages": ["polish", "polish_2k"]
+  },
+  {
+    "name": "czech",
+    "languages": ["czech", "czech_1k", "czech_10k"]
+  },
+  {
+    "name": "slovak",
+    "languages": ["slovak"]
+  },
+  {
+    "name": "slovenian",
+    "languages": ["slovenian"]
+  },
+  {
+    "name": "croatian",
+    "languages": ["croatian"]
+  },
+  {
+    "name": "dutch",
+    "languages": ["dutch", "dutch_1k", "dutch_10k"]
+  },
+  {
+    "name": "filipino",
+    "languages": ["filipino", "filipino_1k"]
+  },
+  {
+    "name": "danish",
+    "languages": ["danish", "danish_1k", "danish_10k"]
+  },
+  {
+    "name": "hungarian",
+    "languages": ["hungarian", "hungarian_2.5k"]
+  },
+  {
+    "name": "norwegian",
+    "languages": ["norwegian"]
+  },
+  {
+    "name": "hebrew",
+    "languages": ["hebrew"]
+  },
+  {
+    "name": "icelandic",
+    "languages": ["icelandic_1k"]
+  },
+  {
+    "name": "romanian",
+    "languages": ["romanian"]
+  },
+  {
+    "name": "finnish",
+    "languages": ["finnish", "finnish_1k", "finnish_10k"]
+  },
+  {
+    "name": "persian",
+    "languages": ["persian"]
+  },
+  {
+    "name": "kazakh",
+    "languages": ["kazakh"]
+  },
+  {
+    "name": "vietnamese",
+    "languages": ["vietnamese", "vietnamese_1k", "vietnamese_5k"]
+  },
+  {
+    "name": "swedish",
+    "languages": ["swedish", "swedish_1k"]
+  },
+  {
+    "name": "serbian",
+    "languages": ["serbian"]
+  },
+  {
+    "name": "yoruba",
+    "languages": ["yoruba_1k"]
+  },
+  {
+    "name": "swahili",
+    "languages": ["swahili_1k"]
+  },
+  {
+    "name": "maori",
+    "languages": ["maori_1k"]
+  },
+  {
+    "name": "code",
+    "languages": [
+      "code_python",
+      "code_c",
+      "code_csharp",
+      "code_c++",
+      "code_javascript",
+      "code_javascript_1k",
+      "code_html",
+      "code_java",
+      "code_go",
+      "code_rust"
+    ]
+  },
+  {
+    "name": "other",
+    "languages": [
+      "lojban_gismu",
+      "lojban_cmavo",
+      "toki_pona",
+      "pig_latin",
+      "twitch_emotes"
+    ]
+  }
+]

static/languages/_list.json

@@ -64,10 +64,12 @@
   ,"serbian"
   ,"yoruba_1k"
   ,"swahili_1k"
+  ,"maori_1k"
   ,"lojban_gismu"
   ,"lojban_cmavo"
   ,"toki_pona"
-  ,"maori_1k"
+  ,"twitch_emotes"
+  ,"pig_latin"
   ,"code_python"
   ,"code_c"
   ,"code_csharp"
@@ -78,6 +80,4 @@
   ,"code_java"
   ,"code_go"
   ,"code_rust"
-  ,"twitch_emotes"
-  ,"pig_latin"
 ]