From 845a19a615efb6de35d86d7e0402c53e9edcde37 Mon Sep 17 00:00:00 2001
From: bhomie <hi@briansander.com>
Date: Thu, 28 May 2020 21:32:38 -0700
Subject: [PATCH] Add caret styles

---
 public/css/style.scss    | 34 +++++++++++++++++++++++++++----
 public/index.html        | 10 ++++++++++
 public/js/commandline.js | 43 ++++++++++++++++++++++++++++++++++++++++
 public/js/settings.js    | 16 ++++++++++++++-
 public/js/userconfig.js  | 23 +++++++++++++++++++++
 5 files changed, 121 insertions(+), 5 deletions(-)

diff --git a/public/css/style.scss b/public/css/style.scss
index cbe62d654..a2e9b2c11 100644
--- a/public/css/style.scss
+++ b/public/css/style.scss
@@ -311,6 +311,26 @@ a:hover {
   // transition: 0.05s;
 }
 
+#caret.block{
+  width: .7em;
+  margin-left: 0.25em;
+  border-radius: 0;
+}
+
+#caret.outline{
+  @extend #caret, .block;
+  background: transparent;
+  border: 1px solid var(--caret-color);
+  animation-name: caretOutlineFlash;
+}
+
+#caret.underline{
+  height: 2px;
+  width: .7em;
+  margin-top: 1.2em;
+  padding-left: .5em;
+}
+
 #caret.size125{
   height: 2rem;
   width: 2px;
@@ -327,14 +347,20 @@ a:hover {
 }
 
 @keyframes caretFlash {
-  0% {
+  0%, 100% {
     background: transparent;
   }
   50% {
     background: var(--caret-color);
   }
-  100% {
-    background: transparent;
+}
+
+@keyframes caretOutlineFlash {
+  0%, 100% {
+    border-color: transparent;
+  }
+  50% {
+    border-color: var(--caret-color);
   }
 }
 
@@ -942,7 +968,7 @@ key {
       margin-left: 2rem;
       display: grid;
       grid-auto-flow: column;
-      grid-template-columns: 1fr 1fr;
+      grid-auto-columns: 1fr;
       gap: .5rem;
       grid-area: buttons;
       .button{
diff --git a/public/index.html b/public/index.html
index 83cea556d..a746243a6 100644
--- a/public/index.html
+++ b/public/index.html
@@ -262,6 +262,16 @@
             <div class="button off" tabindex="0" onclick="this.blur();">off</div>
           </div>
         </div>
+        <div class="section caretStyle" section="">
+          <h1>caret style</h1>
+          <div class="text">What the caret will look like in the test</div>
+          <div class="buttons">
+            <div class="button" caret="default" tabindex="0" onclick="this.blur();">|</div>
+            <div class="button" caret="block" tabindex="0" onclick="this.blur();">▮</div>
+            <div class="button" caret="outline" tabindex="0" onclick="this.blur();">▯</div>
+            <div class="button" caret="underline" tabindex="0" onclick="this.blur();">_</div>
+          </div>
+        </div>
         <div class="section quickTab">
           <h1>quick tab mode</h1>
           <div class="text">Press <key>tab</key> to quickly restart the test. This function disables tab navigation on some parts of the website.</div>
diff --git a/public/js/commandline.js b/public/js/commandline.js
index 2bd1842ba..33904a451 100644
--- a/public/js/commandline.js
+++ b/public/js/commandline.js
@@ -58,6 +58,15 @@ let commands = {
                 showCommandLine();
             }
         },
+        {
+            id: "changeCaretStyle",
+            display: "Change caret...",
+            subgroup: true,
+            exec: () => {
+                currentCommands.push(commandsCaretStyle);
+                showCommandLine();
+            }
+        },
         {
             id: "changeTheme",
             display: "Change theme...",
@@ -189,6 +198,40 @@ let commandsDifficulty = {
 }
 
 
+let commandsCaretStyle = {
+    title: "Change caret...",
+    list: [
+        {
+            id: "setCaretStyleDefault",
+            display: "line",
+            exec: () => {
+                setCaretStyle('default');
+            }
+        },
+        {
+            id: "setCaretStyleBlock",
+            display: "block",
+            exec: () => {
+                setCaretStyle('block');
+            }
+        },
+        {
+            id: "setCaretStyleOutline",
+            display: "outline-block",
+            exec: () => {
+                setCaretStyle('outline');
+            }
+        },
+        {
+            id: "setCaretStyleUnderline",
+            display: "underline",
+            exec: () => {
+                setCaretStyle('underline');
+            }
+        }
+    ]
+}
+
 let commandsWordCount = {
     title: "Change word count...",
     list: [
diff --git a/public/js/settings.js b/public/js/settings.js
index 648f19c43..e965b9413 100644
--- a/public/js/settings.js
+++ b/public/js/settings.js
@@ -21,6 +21,7 @@ function updateSettingsPage(){
     setActiveLanguageButton();
     setActiveFontSizeButton();
     setActiveDifficultyButton();
+    setActiveCaretStyleButton();
 
     if (config.showKeyTips) {
         $(".pageSettings .tip").removeClass('hidden');
@@ -51,6 +52,11 @@ function setActiveLanguageButton() {
     $(`.pageSettings .section.languages .language[language=${config.language}]`).addClass('active'); 
 }
 
+function setActiveCaretStyleButton() {
+    $(`.pageSettings .section.caretStyle .buttons .button`).removeClass('active');
+    $(`.pageSettings .section.caretStyle .buttons .button[caret=`+config.caretStyle+`]`).addClass('active');
+}
+
 function setSettingsButton(buttonSection,tf) {
     if (tf) {
         $(".pageSettings .section."+buttonSection+" .buttons .button.on").addClass('active');
@@ -175,4 +181,12 @@ $(document).on("click",".pageSettings .section.difficulty .button", (e) => {
     setDifficulty(difficulty);
     showNotification('Difficulty changed', 1000);
     setActiveDifficultyButton();
-})
\ No newline at end of file
+})
+
+//caret style
+$(document).on("click",".pageSettings .section.caretStyle .button", (e) => {
+    let caretStyle = $(e.currentTarget).attr('caret');
+    setCaretStyle(caretStyle);
+    showNotification('Caret style updated', 1000);
+    setActiveCaretStyleButton();
+})
diff --git a/public/js/userconfig.js b/public/js/userconfig.js
index e5ed54389..84e8873c4 100644
--- a/public/js/userconfig.js
+++ b/public/js/userconfig.js
@@ -41,6 +41,7 @@ function loadConfigFromCookie() {
         changeLanguage(newConfig.language,true);
         changeFontSize(newConfig.fontSize,true);
         setFreedomMode(newConfig.freedomMode,true);
+        setCaretStyle(newConfig.caretStyle,true);
         setDifficulty(newConfig.difficulty,true);
         if(newConfig.resultFilters == null || newConfig.resultFilters == undefined){
             newConfig.resultFilters = ["all"];
@@ -67,6 +68,28 @@ function setDifficulty(diff, nosave){
     if(!nosave) saveConfigToCookie();
 }
 
+function setCaretStyle(caretStyle, nosave) {
+    if (caretStyle == null || caretStyle == undefined) {
+        caretStyle = 'default';
+    }
+    config.caretStyle = caretStyle;
+    $("#caret").removeClass('default');
+    $("#caret").removeClass('underline');
+    $("#caret").removeClass('outline');
+    $("#caret").removeClass('block');
+
+    if (caretStyle == 'default') {
+        $("#caret").addClass('default');
+    } else if (caretStyle == 'block') {   
+        $("#caret").addClass('block');     
+    } else if (caretStyle == 'outline') {
+        $("#caret").addClass('outline');
+    } else if (caretStyle == 'underline') {
+        $("#caret").addClass('underline');
+    }
+    if(!nosave) saveConfigToCookie();
+}
+
 //key tips
 function setKeyTips(keyTips, nosave) {
     config.showKeyTips = keyTips;