Replace findText with a js impl, remove blink

Kuuuube · Dec 3, 2024 · 72f6b93 · 72f6b93
1 parent ef4a126
commit 72f6b93
Show file tree

Hide file tree

Showing 2 changed files with 33 additions and 30 deletions.
diff --git a/generate_grid.py b/generate_grid.py
@@ -45,8 +45,8 @@ def kanjitile(char, bgcolor, count = 0, avg_interval = 0):
     if config.onclickaction == "copy":
         result_html += "<script>function copyText(text) {const range = document.createRange();const tempElem = document.createElement('div');tempElem.textContent = text;document.body.appendChild(tempElem);range.selectNode(tempElem);const selection = window.getSelection();selection.removeAllRanges();selection.addRange(range);document.execCommand('copy');document.body.removeChild(tempElem);}document.addEventListener('click', function(e) {e.preventDefault();if (e.srcElement.tagName == 'A') {copyText(e.srcElement.textContent);}}, false);</script>"
     if not export:
-        result_html += f"<style type=\"text/css\">{SEARCH_BLINK_CSS_SNIPPET}</style>"        
-        result_html += f"<script>{SEARCH_BLINK_JS_SNIPPET}</script>"
+        result_html += f"<style type=\"text/css\">{SEARCH_CSS_SNIPPET}</style>"        
+        result_html += f"<script>{SEARCH_JS_SNIPPET}</script>"
     result_html += "</head>\n"
     result_html += "<body>\n"
     result_html += "<div style=\"font-size: 3em;color: #888;\">Kanji Grid - %s</div>\n" % deckname
@@ -224,32 +224,42 @@ def kanjigrid(mw, config):
                 util.addUnitData(units, ch, i, card, config.kanjionly)
     return units
 
-SEARCH_BLINK_CSS_SNIPPET = """
-.blink {
-  animation: blink 0.2s ease-in-out;
-  animation-iteration-count: 3;
-}
-
-@keyframes blink {
-  0% { opacity: 1; }
-  50% { opacity: 0; }
-  100% { opacity: 1; }
+SEARCH_CSS_SNIPPET = """
+a.highlight {
+  background: black;
+  color: white !important;
 }
 """.strip()
 
-SEARCH_BLINK_JS_SNIPPET = """
-function blinkChar(char) {
+SEARCH_JS_SNIPPET = """
+function findChar(char) {
+  /* for styling the match */
+  const HIGHLIGHT_CLASS = "highlight"
+
+  /* clear the previous match's highlight (if any) */
+  const prevMatchingElem = document.querySelector(`.${HIGHLIGHT_CLASS}`);
+  if (prevMatchingElem !== null)
+    prevMatchingElem.classList.remove(HIGHLIGHT_CLASS);
+
   /* https://stackoverflow.com/questions/3813294/how-to-get-element-by-innertext */
   const xpath = "//a[text()='" + char + "']";
+
   /* this only considers the first matching element, so it assumes the grid kanji are unique */
   const matchingElement = document.evaluate(xpath, document, null, XPathResult.FIRST_ORDERED_NODE_TYPE, null).singleNodeValue;
   if (matchingElement === null)
     return false;
-  matchingElement.classList.add("blink");
-  /* cleanup anim class */
-  matchingElement.addEventListener("animationend", function() {
-    matchingElement.classList.remove("blink");
-  }, { once: true });
+
+  /* we need to open the enclosing <details> block first (if any), or scrollIntoView won't work */
+  let parentDetailsElem = matchingElement.closest('details');
+  if (parentDetailsElem !== null)
+    parentDetailsElem.open = true;
+
+  matchingElement.classList.add(HIGHLIGHT_CLASS);
+
+  /* scroll to match */
+  matchingElement.scrollIntoView({ behavior: "smooth", block: "center" });
+
+  /* ret value indicates whether a match was found */
   return true;
 }
 """.strip()
diff --git a/webview_util.py b/webview_util.py
@@ -43,18 +43,11 @@ def on_find_cmd(wv: AnkiWebView):
         return
 
     def findTextCallback(found):
-        if found:
-            # doesn't seem to be a way to style the text highlighting
-            # and it be hard to spot, so make the target blink
-            wv.eval(f"blinkChar('{char}');")
-        else:
-            tooltip(f"\"{char}\" not found in grid.")
+        if not found:
+          tooltip(f"\"{char}\" not found in grid.")
 
-    # qt handles scrolling to, scrollbar indicator and opening the <details> block
-    # there's an issue with findText where it sometimes doesn't scroll up when the kanji is found upwards/backwards
-    # calling findText twice, although hacky, makes it reliably scroll up
-    wv.findText(char)
-    wv.findText(char, resultCallback=findTextCallback)
+    # qt's findText impl is bugged and inconvenient, so we use our own
+    wv.evalWithCallback(f"findChar('{char}');", findTextCallback)
 
 def add_webview_context_menu_items(wv, expected_wv, menu, config, deckname, char):
     # hook is active while kanjigrid is open, and right clicking on the main window (deck list) will also trigger this, so check wv