From b98f8619051b1afd1542b4885f1f8eb7ef1ac825 Mon Sep 17 00:00:00 2001
From: SeerLite <seerlite@tuta.io>
Date: Tue, 22 Dec 2020 23:34:04 -0300
Subject: [PATCH] Have smoothCaret change the blinking animation

---
 src/js/script.js     |  6 +++++-
 src/js/userconfig.js | 10 ++++++++++
 src/sass/style.scss  | 16 ++++++++++++++--
 3 files changed, 29 insertions(+), 3 deletions(-)

diff --git a/src/js/script.js b/src/js/script.js
index baa825598..69d404e65 100644
--- a/src/js/script.js
+++ b/src/js/script.js
@@ -1342,7 +1342,11 @@ function stopCaretAnimation() {
 
 function startCaretAnimation() {
   if (caretAnimating === false) {
-    $("#caret").css("animation-name", "caretFlash");
+    if (config.smoothCaret) {
+      $("#caret").css("animation-name", "caretFlashSmooth");
+    } else {
+      $("#caret").css("animation-name", "caretFlashHard");
+    }
     caretAnimating = true;
   }
 }
diff --git a/src/js/userconfig.js b/src/js/userconfig.js
index 92b1e4966..14d8d4304 100644
--- a/src/js/userconfig.js
+++ b/src/js/userconfig.js
@@ -972,11 +972,21 @@ function setWordCount(wordCount, nosave) {
 function setSmoothCaret(mode, nosave) {
   config.smoothCaret = mode;
   if (!nosave) saveConfigToCookie();
+  if (mode) {
+    $("#caret").css("animation-name", "caretFlashSmooth");
+  } else {
+    $("#caret").css("animation-name", "caretFlashHard");
+  }
 }
 
 function toggleSmoothCaret() {
   config.smoothCaret = !config.smoothCaret;
   saveConfigToCookie();
+  if (config.smoothCaret) {
+    $("#caret").css("animation-name", "caretFlashSmooth");
+  } else {
+    $("#caret").css("animation-name", "caretFlashHard");
+  }
 }
 
 //startgraphsatzero
diff --git a/src/sass/style.scss b/src/sass/style.scss
index af2a17edf..b7a657477 100644
--- a/src/sass/style.scss
+++ b/src/sass/style.scss
@@ -994,7 +994,7 @@ a:hover {
 #caret {
   height: 1.5rem;
   background: var(--caret-color);
-  animation-name: caretFlash;
+  animation-name: caretFlashSmooth;
   /* animation-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955); */
   animation-iteration-count: infinite;
   animation-duration: 1s;
@@ -1079,7 +1079,7 @@ a:hover {
   }
 }
 
-@keyframes caretFlash {
+@keyframes caretFlashSmooth {
   0%,
   100% {
     opacity: 0;
@@ -1090,6 +1090,18 @@ a:hover {
   }
 }
 
+@keyframes caretFlashHard {
+  0%,
+  50% {
+    opacity: 0;
+  }
+
+  51%,
+  100% {
+    opacity: 1;
+  }
+}
+
 #menu {
   font-size: 1rem;
   line-height: 1rem;