Merge pull request #67 from jsarchibald/55_59

Issues 55 and 59
cs50 · Jul 20, 2020 · 3727b46 · 3727b46
2 parents e708c7b + e747ba0
commit 3727b46
Show file tree

Hide file tree

Showing 3 changed files with 44 additions and 14 deletions.
diff --git a/compare50/_renderer/static/match.css b/compare50/_renderer/static/match.css
@@ -74,6 +74,10 @@ pre {
     counter-reset: none;
 }
 
+.file_name {
+    word-break: break-word;
+}
+
 /* highlighted code fragments */
 .match {
     background-color: #ffd0a8;
@@ -135,7 +139,7 @@ pre {
     margin-bottom: 10%;
 }
 
-#next_group {
+.matches_group {
     margin-bottom: .4em;
 }
 

diff --git a/compare50/_renderer/static/match.js b/compare50/_renderer/static/match.js
@@ -215,15 +215,26 @@ function init_group_button(groups, view_name) {
     }
 
     // init group counter
-    let group_index = 0;
-    update_group_counter();
+    let group_index = -1;
+    go_to_adjacent_group(new Event("InitializeHighlights"), 1);
 
-    function go_to_next_group(event) {
+    function go_to_adjacent_group(event, direction) {
         // if view is not active (current), nothing to do here
         if (CURRENT_VIEW !== view_name) {
             return;
         }
 
+        // increment index
+        group_index += direction;
+
+        // wrap around
+        if (group_index >= sorted_groups.length) {
+            group_index = 0;
+        }
+        else if (group_index < 0) {
+            group_index = sorted_groups.length - 1;
+        }
+
         update_group_counter();
 
         // find first fragment of group
@@ -241,18 +252,30 @@ function init_group_button(groups, view_name) {
 
         // scroll to frag
         frag.scroll_to();
-
-        // increment index
-        group_index = (group_index + 1) % sorted_groups.length;
-
     }
+
     // On click move to next group from sorted_groups
     let next_group_button = document.getElementById("next_group");
-    next_group_button.addEventListener("click", go_to_next_group);
+    next_group_button.addEventListener("click", (event) => {
+        go_to_adjacent_group(event, 1);
+    });
+    document.addEventListener("keyup", (event) =>  {
+        if (event.key === ' ' || event.key == "]") {
+            event.preventDefault();
+            go_to_adjacent_group(event, 1); 
+        }
+    });
+
+    // On click move to previous group from sorted_groups
+    let previous_group_button = document.getElementById("previous_group");
+    previous_group_button.addEventListener("click", (event) => {
+        go_to_adjacent_group(event, -1);
+    });
     document.addEventListener("keyup", (event) =>  {
-        if (event.key === ' ') {
-            event.preventDefault()
-            go_to_next_group(event); 
+        // left bracket key will go to previous group
+        if (event.key === "[") {
+            event.preventDefault();
+            go_to_adjacent_group(event, -1);
         }
     });
 }

diff --git a/compare50/_renderer/templates/match_page.html b/compare50/_renderer/templates/match_page.html
@@ -27,8 +27,11 @@ <h4><a href="index.html" class="index-link"><b>compare50</b></a></h4>
                 {% endfor %}
                 </div>
                 <div id="group_nav">
-                  <button type="button" class="btn btn-outline-light next_group" id="next_group">next</button>
-                  <div class="text-light" id="group_counter"></div>
+                    <div class="btn-group" role="group" aria-label="NextPrevGroup">
+                        <button type="button" class="btn btn-outline-light matches_group" id="previous_group">&lt;</button>
+                        <button type="button" class="btn btn-outline-light matches_group" id="next_group">&gt;</button>
+                    </div>
+                    <div class="text-light" id="group_counter"></div>
                 </div>
             </nav>
             <div id="content">