Merge pull request #1200 from seaerchin/feat/keymap-legend-style

Feat/keymap legend style

src/js/commandline-lists.js

@@ -647,6 +647,33 @@ let commandsKeymapStyle = {
   ],
 };
 
+let commandsKeymapLegendStyle = {
+  title: "Change keymap legend style...",
+  list: [
+    {
+      id: "setKeymapLegendStyleLowercase",
+      display: "lowercase",
+      exec: () => {
+        UpdateConfig.setKeymapLegendStyle("lowercase");
+      },
+    },
+    {
+      id: "setKeymapLegendStyleUppercase",
+      display: "uppercase",
+      exec: () => {
+        UpdateConfig.setKeymapLegendStyle("uppercase");
+      },
+    },
+    {
+      id: "setKeymapLegendStyleBlank",
+      display: "blank",
+      exec: () => {
+        UpdateConfig.setKeymapLegendStyle("blank");
+      },
+    },
+  ],
+};
+
 let commandsHighlightMode = {
   title: "Change highlight mode...",
   list: [
@@ -1678,6 +1705,16 @@ export let defaultCommands = {
         Commandline.show();
       },
     },
+    {
+      id: "changeKeymapLegendStyle",
+      display: "Change keymap legend style...",
+      alias: "keyboard",
+      subgroup: true,
+      exec: () => {
+        current.push(commandsKeymapLegendStyle);
+        Commandline.show();
+      },
+    },
     {
       id: "changeKeymapLayout",
       display: "Change keymap layout...",

src/js/config.js

@@ -86,6 +86,7 @@ let defaultConfig = {
   showAllLines: false,
   keymapMode: "off",
   keymapStyle: "staggered",
+  keymapLegendStyle: "lowercase",
   keymapLayout: "qwerty",
   fontFamily: "Roboto_Mono",
   smoothLineScroll: false,
@@ -1266,22 +1267,41 @@ export function setKeymapMode(mode, nosave) {
   if (!nosave) saveToCookie();
 }
 
+export function setKeymapLegendStyle(style, nosave) {
+  // Remove existing styles
+  const keymapLegendStyles = ["lowercase", "uppercase", "blank"];
+  keymapLegendStyles.forEach((name) => {
+    $(".keymapLegendStyle").removeClass(name);
+  });
+
+  style = style || "lowercase";
+
+  // Mutate the keymap in the DOM, if it exists.
+  // 1. Remove everything
+  $(".keymap-key > .letter").css("display", "");
+  $(".keymap-key > .letter").css("text-transform", "");
+
+  // 2. Append special styles onto the DOM elements
+  if (style === "uppercase") {
+    $(".keymap-key > .letter").css("text-transform", "capitalize");
+  }
+  if (style === "blank") {
+    $(".keymap-key > .letter").css("display", "none");
+  }
+
+  // Update and save to cookie for persistence
+  $(".keymapLegendStyle").addClass(style);
+  config.keymapLegendStyle = style;
+  if (!nosave) saveToCookie();
+}
+
 export function setKeymapStyle(style, nosave) {
   $(".keymap").removeClass("matrix");
   $(".keymap").removeClass("split");
   $(".keymap").removeClass("split_matrix");
+  style = style || "staggered";
 
-  if (style == null || style == undefined) {
-    style = "staggered";
-  }
-
-  if (style === "matrix") {
-    $(".keymap").addClass("matrix");
-  } else if (style === "split") {
-    $(".keymap").addClass("split");
-  } else if (style === "split_matrix") {
-    $(".keymap").addClass("split_matrix");
-  }
+  $(".keymap").addClass(style);
   config.keymapStyle = style;
   if (!nosave) saveToCookie();
 }
@@ -1433,6 +1453,7 @@ export function apply(configObj) {
     setTimerOpacity(configObj.timerOpacity, true);
     setKeymapMode(configObj.keymapMode, true);
     setKeymapStyle(configObj.keymapStyle, true);
+    setKeymapLegendStyle(configObj.keymapLegendStyle, true);
     setKeymapLayout(configObj.keymapLayout, true);
     setFontFamily(configObj.fontFamily, true);
     setSmoothCaret(configObj.smoothCaret, true);

src/js/settings.js

@@ -51,9 +51,11 @@ async function initGroups() {
       if (Config.keymapMode === "off") {
         $(".pageSettings .section.keymapStyle").addClass("hidden");
         $(".pageSettings .section.keymapLayout").addClass("hidden");
+        $(".pageSettings .section.keymapLegendStyle").addClass("hidden");
       } else {
         $(".pageSettings .section.keymapStyle").removeClass("hidden");
         $(".pageSettings .section.keymapLayout").removeClass("hidden");
+        $(".pageSettings .section.keymapLegendStyle").removeClass("hidden");
       }
     }
   );
@@ -65,6 +67,10 @@ async function initGroups() {
     "keymapLayout",
     UpdateConfig.setKeymapLayout
   );
+  groups.keymapLegendStyle = new SettingsGroup(
+    "keymapLegendStyle",
+    UpdateConfig.setKeymapLegendStyle
+  );
   groups.showKeyTips = new SettingsGroup(
     "showKeyTips",
     UpdateConfig.setKeyTips,
@@ -578,7 +584,9 @@ $(
   ".pageSettings .section.discordIntegration .buttons .generateCodeButton"
 ).click((e) => {
   Loader.show();
-  CloudFunctions.generatePairingCode({ uid: firebase.auth().currentUser.uid })
+  CloudFunctions.generatePairingCode({
+    uid: firebase.auth().currentUser.uid,
+  })
     .then((ret) => {
       Loader.hide();
       if (ret.data.status === 1 || ret.data.status === 2) {
@@ -715,7 +723,9 @@ $(".pageSettings .sectionGroupTitle").click((e) => {
         {
           duration: 250,
           step: function (now) {
-            $(this).css({ transform: "rotate(" + now + "deg)" });
+            $(this).css({
+              transform: "rotate(" + now + "deg)",
+            });
           },
         }
       );
@@ -729,7 +739,9 @@ $(".pageSettings .sectionGroupTitle").click((e) => {
         {
           duration: 250,
           step: function (now) {
-            $(this).css({ transform: "rotate(" + now + "deg)" });
+            $(this).css({
+              transform: "rotate(" + now + "deg)",
+            });
           },
         }
       );

src/js/settings/settings-group.js

@@ -9,11 +9,7 @@ export default class SettingsGroup {
   ) {
     this.configName = configName;
     this.configValue = Config[configName];
-    if (this.configValue === true || this.configValue === false) {
-      this.onOff = true;
-    } else {
-      this.onOff = false;
-    }
+    this.onOff = typeof this.configValue === "boolean";
     this.toggleFunction = toggleFunction;
     this.setCallback = setCallback;
     this.updateCallback = updateCallback;
@@ -36,8 +32,8 @@ export default class SettingsGroup {
           this.updateButton();
           if (this.setCallback !== null) this.setCallback();
         } else {
-          let value = target.attr(configName);
-          let params = target.attr("params");
+          const value = target.attr(configName);
+          const params = target.attr("params");
           this.setValue(value, params);
         }
       }
@@ -60,14 +56,9 @@ export default class SettingsGroup {
       "active"
     );
     if (this.onOff) {
-      let onoffstring;
-      if (this.configValue) {
-        onoffstring = "on";
-      } else {
-        onoffstring = "off";
-      }
+      const onOffString = this.configvalue ? "on" : "off";
       $(
-        `.pageSettings .section.${this.configName} .buttons .button.${onoffstring}`
+        `.pageSettings .section.${this.configName} .buttons .button.${onOffString}`
       ).addClass("active");
     } else {
       $(

src/sass/style.scss

@@ -3041,6 +3041,7 @@ key {
     &.languageGroups,
     &.layout,
     &.keymapLayout,
+    &.keymapLegendStyle,
     &.fontFamily,
     &.funbox,
     &.keymapStyle,
@@ -3553,6 +3554,7 @@ key {
     .pageSettings .section.language .buttons,
     .pageSettings .section.layout .buttons,
     .pageSettings .section.keymapLayout .buttons,
+    .pageSettings .section.keymapLegendStyle .buttons,
     .pageSettings .section.fontFamily .buttons,
     .pageSettings .section.funbox .buttons,
     .pageSettings .section.keymapStyle .buttons {
@@ -3663,6 +3665,7 @@ key {
     .pageSettings .section.language .buttons,
     .pageSettings .section.layout .buttons,
     .pageSettings .section.keymapLayout .buttons,
+    .pageSettings .section.keymapLegendStyle .buttons,
     .pageSettings .section.fontFamily .buttons,
     .pageSettings .section.funbox .buttons,
     .pageSettings .section.keymapStyle .buttons {

static/index.html

@@ -2769,6 +2769,35 @@
                   </div>
                 </div>
               </div>
+              <div class="section keymapLegendStyle">
+                <h1>keymap legend style</h1>
+                <div class="buttons">
+                  <div
+                    class="button"
+                    keymapLegendStyle="lowercase"
+                    tabindex="0"
+                    onclick="this.blur();"
+                  >
+                    lowercase
+                  </div>
+                  <div
+                    class="button"
+                    keymapLegendStyle="uppercase"
+                    tabindex="0"
+                    onclick="this.blur();"
+                  >
+                    uppercase
+                  </div>
+                  <div
+                    class="button"
+                    keymapLegendStyle="blank"
+                    tabindex="0"
+                    onclick="this.blur();"
+                  >
+                    blank
+                  </div>
+                </div>
+              </div>
               <div class="section keymapLayout">
                 <h1>keymap layout</h1>
                 <div class="buttons"></div>