Add Capslock Indicator Settings Option (#2173) by Ferotiq

* Add Capslock Indicator Settings Option

* moved setting to a different section

* renamed to warning

* rename

Co-authored-by: Jack <bartnikjack@gmail.com>

src/js/commandline-lists.js

@@ -1625,6 +1625,29 @@ let commandsSingleListCommandLine = {
   ],
 };
 
+let commandsCapsLockWarning = {
+  title: "Caps lock warning...",
+  configKey: "capsLockWarning",
+  list: [
+    {
+      id: "capsLockWarningOn",
+      display: "on",
+      configValue: true,
+      exec: () => {
+        UpdateConfig.setCapsLockWarning(true);
+      },
+    },
+    {
+      id: "capsLockWarningOff",
+      display: "off",
+      configValue: false,
+      exec: () => {
+        UpdateConfig.setCapsLockWarning(false);
+      },
+    },
+  ],
+};
+
 let commandsTimerOpacity = {
   title: "Timer/progress opacity...",
   configKey: "timerOpacity",
@@ -2529,6 +2552,12 @@ export let defaultCommands = {
       icon: "fa-list",
       subgroup: commandsSingleListCommandLine,
     },
+    {
+      id: "capsLockWarning",
+      display: "Caps lock warning...",
+      icon: "fa-exclamation-triangle",
+      subgroup: commandsCapsLockWarning,
+    },
     {
       id: "changeMinWpm",
       display: "Minimum wpm...",

src/js/config.js

@@ -96,6 +96,7 @@ let defaultConfig = {
   alwaysShowDecimalPlaces: false,
   alwaysShowWordsHistory: false,
   singleListCommandLine: "manual",
+  capsLockWarning: true,
   playSoundOnError: false,
   playSoundOnClick: "off",
   startGraphsAtZero: true,
@@ -634,6 +635,15 @@ export function setSingleListCommandLine(option, nosave) {
   if (!nosave) saveToLocalStorage();
 }
 
+//caps lock warning
+export function setCapsLockWarning(val, nosave) {
+  if (val == undefined) {
+    val = false;
+  }
+  config.capsLockWarning = val;
+  if (!nosave) saveToLocalStorage();
+}
+
 //show all lines
 export function toggleShowAllLines() {
   let sal = !config.showAllLines;
@@ -1657,6 +1667,7 @@ export function apply(configObj) {
     setAlwaysShowDecimalPlaces(configObj.alwaysShowDecimalPlaces, true);
     setAlwaysShowWordsHistory(configObj.alwaysShowWordsHistory, true);
     setSingleListCommandLine(configObj.singleListCommandLine, true);
+    setCapsLockWarning(configObj.capsLockWarning, true);
     setPlaySoundOnError(configObj.playSoundOnError, true);
     setPlaySoundOnClick(configObj.playSoundOnClick, true);
     setStopOnError(configObj.stopOnError, true);

src/js/settings.js

@@ -139,6 +139,10 @@ async function initGroups() {
     "singleListCommandLine",
     UpdateConfig.setSingleListCommandLine
   );
+  groups.capsLockWarning = new SettingsGroup(
+    "capsLockWarning",
+    UpdateConfig.setCapsLockWarning
+  );
   groups.flipTestColors = new SettingsGroup(
     "flipTestColors",
     UpdateConfig.setFlipTestColors

src/js/test/caps-warning.js

@@ -1,3 +1,5 @@
+import Config from "./config";
+
 function show() {
   if ($("#capsWarning").hasClass("hidden")) {
     $("#capsWarning").removeClass("hidden");
@@ -12,7 +14,10 @@ function hide() {
 
 $(document).keydown(function (event) {
   try {
-    if (event.originalEvent.getModifierState("CapsLock")) {
+    if (
+      event.originalEvent.getModifierState("CapsLock") &&
+      Config.capsLockWarning
+    ) {
       show();
     } else {
       hide();

static/index.html

@@ -3990,6 +3990,18 @@
                   </div>
                 </div>
               </div>
+              <div class="section capsLockWarning">
+                <h1>caps lock warning</h1>
+                <div class="text">Displays a warning when caps lock is on.</div>
+                <div class="buttons">
+                  <div class="button off" tabindex="0" onclick="this.blur();">
+                    off
+                  </div>
+                  <div class="button on" tabindex="0" onclick="this.blur();">
+                    on
+                  </div>
+                </div>
+              </div>
               <div class="sectionSpacer"></div>
             </div>