Merge pull request #95 from bhomie:caret-options

Add caret options

Author: Miodec

public/css/style.scss

@@ -299,7 +299,6 @@ a:hover {
 }
 
 #caret {
-  width: 2px;
   height: 1.5rem;
   background: var(--caret-color);
   animation-name: caretFlash;
@@ -309,32 +308,54 @@ a:hover {
   position: absolute;
   border-radius: var(--roundness);
   // transition: 0.05s;
+  transform-origin: top left;
 }
 
-#caret.size125{
-  height: 2rem;
+#caret.default{
   width: 2px;
 }
 
+#caret.block{
+  width: .7em;
+  margin-left: 0.25em;
+  border-radius: 0;
+}
+
+#caret.outline{
+  @extend #caret, .block;
+  background: transparent;
+  border: 1px solid var(--caret-color);
+}
+
+#caret.underline{
+  height: 2px;
+  width: 0.8em;
+  margin-top: 1.3em;
+  margin-left: 0.3em;
+}
+
+#caret.underline.size125{margin-top: 1.8em;}
+#caret.underline.size15{margin-top: 2.1em;}
+#caret.underline.size2{margin-top: 2.7em;}
+
+#caret.size125{
+  transform: scale(1.25);
+}
+
 #caret.size15{
-  height: 2.25rem;
-  width: 3px;
+  transform: scale(1.45);
 }
 
 #caret.size2{
-  height: 3rem;
-  width: 4px;
+  transform: scale(1.9);
 }
 
 @keyframes caretFlash {
-  0% {
-    background: transparent;
+  0%, 100% {
+    opacity: 0;
   }
   50% {
-    background: var(--caret-color);
-  }
-  100% {
-    background: transparent;
+    opacity: 1;
   }
 }
 
@@ -942,7 +963,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{

public/index.html

@@ -262,6 +262,16 @@ <h1>smooth caret</h1>
             <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>

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: [

public/js/script.js

@@ -313,7 +313,7 @@ function showCaret() {
 
 function stopCaretAnimation() {
   $("#caret").css("animation-name", "none");
-  $("#caret").css("background-color", "var(--caret-color)");
+  $("#caret").css("opacity", "1");
 }
 
 function startCaretAnimation() {

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();
-})
+})
+
+//caret style
+$(document).on("click",".pageSettings .section.caretStyle .button", (e) => {
+    let caretStyle = $(e.currentTarget).attr('caret');
+    setCaretStyle(caretStyle);
+    showNotification('Caret style updated', 1000);
+    setActiveCaretStyleButton();
+})

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;