Added refocusing after clicking on next wordnet sense

UAlbertaALTLab · Dec 17, 2024 · 0b1df4f · 0b1df4f
1 parent ac0023d
commit 0b1df4f
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 4 deletions.
diff --git a/frontend/index.js b/frontend/index.js
@@ -70,6 +70,7 @@ document.addEventListener("DOMContentLoaded", () => {
   } else if (route === "/search") {
     // Search page
     prepareSearchResults(getSearchResultList());
+    setupRefocus();
   } else if (route.match(/^[/]word[/].+/)) {
     // Word detail/paradigm page. This one has the 🔊 button.
     setSubtitle(getEntryHead());
@@ -330,3 +331,17 @@ function createAudioButton(recordingURL, element) {
 function getSearchResultList() {
   return document.getElementById("search-result-list");
 }
+
+function setupRefocus(){
+  // add an action on click to refocus when data-md-focus is available
+  document.querySelectorAll("[data-md-focus]").forEach((object) => {
+    let focus_obj = document.getElementById(object.getAttribute("data-md-focus"))
+    focus_obj.addEventListener("shown.bs.collapse", function(){
+      focus_obj.scrollIntoView({
+        beahior:"smooth",
+        block:"start",
+        inline:"start"
+      });
+    })
+  })
+}
diff --git a/src/morphodict/frontend/templates/morphodict/wordnet-results.html b/src/morphodict/frontend/templates/morphodict/wordnet-results.html
@@ -7,12 +7,12 @@ <h3>Messages from search run</h3>
             <pre>{{ verbose_messages }}</pre>
         </li>
     {% endif %}
-    <div id="resultsContainer">
+    <div id="resultsContainer" style="scroll-behavior: smooth;">
     {% for result in search_results %}
     {% with has_more=search_results|has_next:forloop.counter0 %}
     {% with has_previous=search_results|has_previous:forloop.counter0 %}
 
-    <div class="synset" style="background-color: var(--menu-hover-bg-color); border: 4px solid var(--prose-title-color); border-radius:5px; padding: 10px; margin-left:10px; margin-right:10px; margin-top:.5cm; margin-bottom:.5cm;">
+    <div id="result-synset-{{result.wn_entry.nltk_name}}" class="synset" style="background-color: var(--menu-hover-bg-color); border: 4px solid var(--prose-title-color); border-radius:5px; padding: 10px; margin-left:10px; margin-right:10px; margin-top:.5cm; margin-bottom:.5cm;">
         <a name="result-synset-{{result.wn_entry.nltk_name}}"></a>
         <section class="prose box box--spaced">
             <h2 class="prose__section-title">{{result.wn_entry.numbering}}. {{result.wn_entry.original_str}} ({% relabel_one result.wn_entry.paren_pos %})</h2>
@@ -27,13 +27,15 @@ <h2 class="prose__section-title">{{result.wn_entry.numbering}}. {{result.wn_entr
             <div style="display:flex; justify-content:flex-end;">
             {% if has_previous %}
             {% with previous_element=search_results|previous:forloop.counter0 %}
-            <a href="#result-synset-{{previous_element.wn_entry.nltk_name}}" style="text-decoration:none;" data-bs-toggle="collapse" data-bs-target="#synset-results-{{previous_element.wn_entry.nltk_name}}" aria-expanded="false" aria-controls="synset-results-{{previous_element.wn_entry.nltk_name}}" style="text-align:right;">⏪</a>
+            <label for="result-synset-{{previous_element.wn_entry.nltk_name}}" style="text-decoration:none;" data-bs-toggle="collapse" data-bs-target="#synset-results-{{previous_element.wn_entry.nltk_name}}" aria-expanded="false" aria-controls="synset-results-{{previous_element.wn_entry.nltk_name}}" style="text-align:right;"
+            data-md-focus="result-synset-{{previous_element.wn_entry.nltk_name}}">⏪</label>
             {% endwith %}
             {% endif %}
             <a href="#" class="expand-accordion" style="text-decoration:none;" data-bs-toggle="collapse" data-bs-target="#synset-results-{{result.wn_entry.nltk_name}}" aria-expanded="{%if forloop.counter0 == 0 %}true{%else%}false{%endif%}" aria-controls="synset-results-{{result.wn_entry.nltk_name}}"></a>
             {% if has_more %}
             {% with next_element=search_results|next:forloop.counter0 %}
-            <a href="#result-synset-{{next_element.wn_entry.nltk_name}}" style="text-decoration:none;" data-bs-toggle="collapse" data-bs-target="#synset-results-{{next_element.wn_entry.nltk_name}}" aria-expanded="false" aria-controls="synset-results-{{next_element.wn_entry.nltk_name}}" style="text-align:right;">⏩</a>
+            <label class="refocus-accordion" for="result-synset-{{next_element.wn_entry.nltk_name}}" style="text-decoration:none;" data-bs-toggle="collapse" data-bs-target="#synset-results-{{next_element.wn_entry.nltk_name}}" aria-expanded="false" aria-controls="synset-results-{{next_element.wn_entry.nltk_name}}" style="text-align:right;"
+            data-md-focus="result-synset-{{next_element.wn_entry.nltk_name}}">⏩</label>
             {% endwith %}
             {% endif %}
             </div>