Merge pull request #1098 from Smithster/master

Quote Search V2.0

src/js/script.js

@@ -3747,44 +3747,81 @@ function hideCustomMode2Popup() {
 
 async function showQuoteSearchPopup() {
   if ($("#quoteSearchPopupWrapper").hasClass("hidden")) {
-    let quotes = await Misc.getQuotes(config.language);
-    let table = $("#quoteSearchPopup .searchResultTable");
-    let numberOfSearchResults = 0;
-    table.find("tbody").empty();
     $("#quoteSearchPopup input").val("");
-    for (let i = 0; i < 5; i++) {
-      let quote = quotes.quotes[i];
-      table.find("tbody").append(`
-      <tr class="searchResult" id=${quote.id}>
-              <td class="alignRight"><div class="fixedHeight">${quote.id}</div></td>
-              <td class="alignRight"><div class="fixedHeight">${quote.length}</div></td>
-              <td>
-                <div class="fixedHeight">${quote.text}</div>
-              </td>
-              <td>
-              <div class="fixedHeight">${quote.source}</div>
-              </td>
-              <td><i class="fas fa-chevron-right"></i></td>
-            </tr>
-      `);
-    }
-    quotes.groups.forEach((group) => {
-      group.forEach((quote) => {
-        numberOfSearchResults++;
-      });
-    });
-    document.getElementById("extraResults").innerHTML =
-      numberOfSearchResults - 5 + " more results";
     $("#quoteSearchPopupWrapper")
       .stop(true, true)
       .css("opacity", 0)
       .removeClass("hidden")
       .animate({ opacity: 1 }, 100, (e) => {
         $("#quoteSearchPopup input").focus().select();
+        updateQuoteSearchResults("");
       });
   }
 }
 
+async function updateQuoteSearchResults(searchText) {
+  let quotes = await Misc.getQuotes(config.language);
+  let reg = new RegExp(searchText, "i");
+  let found = [];
+  quotes.quotes.forEach((quote) => {
+    let quoteText = quote["text"].replace(/[.,'"/#!$%^&*;:{}=\-_`~()]/g, "");
+    let test1 = reg.test(quoteText);
+    if (test1) {
+      found.push(quote);
+    }
+  });
+  quotes.quotes.forEach((quote) => {
+    let quoteSource = quote["source"].replace(
+      /[.,'"/#!$%^&*;:{}=\-_`~()]/g,
+      ""
+    );
+    let quoteId = quote["id"];
+    let test2 = reg.test(quoteSource);
+    let test3 = reg.test(quoteId);
+    if ((test2 || test3) && found.filter((q) => q.id == quote.id).length == 0) {
+      found.push(quote);
+    }
+  });
+  $("#quoteSearchResults").remove();
+  $("#quoteSearchPopup").append(
+    '<div class="quoteSearchResults" id="quoteSearchResults"></div>'
+  );
+  let resultsList = $("#quoteSearchResults");
+  let resultListLength = 0;
+
+  found.forEach(async (quote) => {
+    let lengthDesc;
+    if (quote.length < 101) {
+      lengthDesc = "short";
+    } else if (quote.length < 301) {
+      lengthDesc = "medium";
+    } else if (quote.length < 601) {
+      lengthDesc = "long";
+    } else {
+      lengthDesc = "thicc";
+    }
+    if (resultListLength++ < 100) {
+      resultsList.append(`
+      <div class="searchResult" id="${quote.id}">
+        <div class="text">${quote.text}</div>
+        <div class="id"><div class="sub">id</div>${quote.id}</div>
+        <div class="length"><div class="sub">length</div>${lengthDesc}</div>
+        <div class="source"><div class="sub">source</div>${quote.source}</div>
+        <div class="resultChevron"><i class="fas fa-chevron-right"></i></div>
+      </div>
+      `);
+    }
+  });
+  if (found.length > 100) {
+    $("#extraResults").html(
+      found.length +
+        " results <span style='opacity: 0.5'>(only showing 100)</span>"
+    );
+  } else {
+    $("#extraResults").html(found.length + " results");
+  }
+}
+
 function hideQuoteSearchPopup() {
   if (!$("#quoteSearchPopupWrapper").hasClass("hidden")) {
     $("#quoteSearchPopupWrapper")
@@ -4035,82 +4072,13 @@ $("#customMode2Popup input").keypress((e) => {
 });
 //Quote search
 $("#quoteSearchPopup .searchBox").keydown((e) => {
-  setTimeout(async () => {
-    let quotes = await Misc.getQuotes(config.language);
+  setTimeout(() => {
     let searchText = document.getElementById("searchBox").value;
     searchText = searchText
       .replace(/[.,'"/#!$%^&*;:{}=\-_`~()]/g, "")
       .replace(/[-[\]{}()*+?.,\\^$|#\s]/g, "\\$&");
-    let reg = new RegExp(searchText, "i");
-    let found = [];
-    let numberOfSearchResults = 0;
-    quotes.quotes.forEach((quote) => {
-      let quoteText = quote["text"].replace(/[.,'"/#!$%^&*;:{}=\-_`~()]/g, "");
-      let quoteSource = quote["source"].replace(
-        /[.,'"/#!$%^&*;:{}=\-_`~()]/g,
-        ""
-      );
-      let quoteId = quote["id"];
-      let test1 = reg.test(quoteText);
-      let test2 = reg.test(quoteSource);
-      let test3 = reg.test(quoteId);
 
-      if (test1 || test2 || test3) {
-        found.push(quote);
-        numberOfSearchResults++;
-      }
-    });
-    let table = $("#quoteSearchPopup .searchResultTable");
-    table.find("tbody").empty();
-    for (let i = 0; i < 5; i++) {
-      if (found[i] === undefined) continue;
-      // if(found[i].text.length > 100){
-      //   found[i].text = found[i].text.substring(0, 100) + "...";
-      // }
-      // if(found[i].source.length > 50){
-      //   found[i].source = found[i].source.substring(0, 50) + "...";
-      // }
-      table.find("tbody").append(`
-      <tr class="searchResult" id=${found[i].id}>
-              <td class="alignRight"><div class="fixedHeight">${found[i].id}</div></td>
-              <td class="alignRight"><div class="fixedHeight">${found[i].length}</div></td>
-              <td>
-                <div class="fixedHeight">${found[i].text}</div>
-              </td>
-              <td>
-              <div class="fixedHeight">${found[i].source}</div>
-              </td>
-              <td><i class="fas fa-chevron-right"></i></td>
-            </tr>
-      `);
-    }
-    if (numberOfSearchResults > 5) {
-      $("#extraResults").css("opacity", "1");
-      document.getElementById("extraResults").innerHTML =
-        numberOfSearchResults - 5 + " more results";
-    } else if (numberOfSearchResults < 5) {
-      $("#extraResults").css("opacity", "1");
-      document.getElementById("extraResults").innerHTML = "No other results";
-      for (let i = 0; i < 5 - numberOfSearchResults; i++) {
-        table.find("tbody").append(`
-          <tr class="fillerResult" id="">
-              <td class="alignRight"><div class="fixedHeight">-</div></td>
-              <td class="alignRight"><div class="fixedHeight">-</div></td>
-              <td>
-                <div class="fixedHeight">-</div>
-              </td>
-              <td>
-              <div class="fixedHeight">-</div>
-              </td>
-              <td></td>
-            </tr>
-      `);
-      }
-    }
-    if (numberOfSearchResults == 0) {
-      $("#extraResults").css("opacity", "1");
-      document.getElementById("extraResults").innerHTML = "No search results";
-    }
+    updateQuoteSearchResults(searchText);
   }, 0.1); //arbitrarily v. small time as it's only to allow text to input before searching
 });
 //sets quote id to searched quote clicked
@@ -4131,29 +4099,11 @@ $("#customMode2Popup .button").click(() => {
   applyMode2Popup();
 });
 
-$("#quoteSearchPopup .button").click(() => {
-  if (!isNaN(document.getElementById("searchBox").value)) {
-    applyQuoteSearchPopup();
-  } else {
-    let results = document.getElementsByClassName("searchResult");
-    if (results.length > 0) {
-      selectedQuoteId = parseInt(results[0].getAttribute("id"));
-      applyQuoteSearchPopup(selectedQuoteId);
-    }
-  }
+$(document).on("click", "#quoteSearchResults .searchResult", (e) => {
+  selectedQuoteId = parseInt($(e.currentTarget).attr("id"));
+  applyQuoteSearchPopup(selectedQuoteId);
 });
 
-$(document).on(
-  "click",
-  "#quoteSearchPopup .searchResultTable tbody tr",
-  (e) => {
-    if ($(e.currentTarget).hasClass("searchResult")) {
-      selectedQuoteId = parseInt($(e.currentTarget).attr("id"));
-      applyQuoteSearchPopup(selectedQuoteId);
-    }
-  }
-);
-
 $("#quoteSearchPopup input").keypress((e) => {
   if (e.keyCode == 13) {
     if (!isNaN(document.getElementById("searchBox").value)) {

src/sass/style.scss

@@ -139,6 +139,10 @@ html {
   background: var(--main-color);
 }
 
+::-webkit-scrollbar-corner {
+  background: var(--subcolour);
+}
+
 a {
   color: var(--sub-color);
   transition: 0.25s;
@@ -623,6 +627,8 @@ a:hover {
     display: grid;
     gap: 1rem;
     width: 1000px;
+    height: 80vh;
+    grid-template-rows: auto auto auto 1fr;
 
     #extraResults {
       text-align: center;
@@ -632,99 +638,75 @@ a:hover {
       font-size: 1.5rem;
       color: var(--sub-color);
     }
-
-    .searchResult {
-      height: 2rem;
-      font-size: 0.8rem;
-    }
-    .quoteSearchResults {
+    #quoteSearchResults {
       display: grid;
-      gap: 0.3rem;
-    }
+      gap: 0.5rem;
+      height: auto;
+      overflow: scroll;
 
-    .searchResultTable {
-      width: 100%;
-      border-spacing: 0;
-      border-collapse: collapse;
-      user-select: none;
+      .searchResult {
+        display: grid;
+        grid-template-columns: 1fr 1fr 3fr 0fr;
+        grid-auto-rows: auto;
+        width: 100%;
+        gap: 0.5rem;
+        transition: 0.25s;
+        padding: 1rem;
+        box-sizing: border-box;
+        user-select: none;
+        cursor: pointer;
+        height: min-content;
 
-      tr td:first-child {
-        text-align: center;
-      }
-
-      .alignRight {
-        text-align: right;
-      }
-
-      td {
-        padding: 0.5rem 0.5rem;
-        .fixedHeight {
-          height: 3rem;
-          overflow: hidden;
-          display: grid;
+        .text {
+          grid-column-start: 1;
+          grid-column-end: 4;
+          grid-row-start: 1;
+          grid-row-end: 2;
+          overflow: visible;
+          color: var(--text-color);
+        }
+        .id {
+          grid-column-start: 1;
+          grid-column-end: 2;
+          grid-row-start: 2;
+          grid-row-end: 3;
+          font-size: 0.8rem;
+          color: var(--sub-color);
+        }
+        .length {
+          grid-column-start: 2;
+          grid-column-end: 3;
+          grid-row-start: 2;
+          grid-row-end: 3;
+          font-size: 0.8rem;
+          color: var(--sub-color);
+        }
+        .source {
+          grid-column-start: 3;
+          grid-column-end: 4;
+          grid-row-start: 2;
+          grid-row-end: 3;
+          font-size: 0.8rem;
+          color: var(--sub-color);
+        }
+        .resultChevron {
+          grid-column-start: 4;
+          grid-column-end: 5;
+          grid-row-start: 1;
+          grid-row-end: 3;
+          display: flex;
           align-items: center;
-        }
-        &.me {
-          color: var(--main-color);
-          font-weight: 900;
-        }
-      }
-
-      thead {
-        color: var(--sub-color);
-        font-size: 0.75rem;
-
-        td {
-          padding: 0.5rem;
-          background: var(--bg-color);
-          position: -webkit-sticky;
-          position: sticky;
-          top: 0;
-          z-index: 99;
-        }
-      }
-
-      tbody {
-        color: var(--text-color);
-        .fillerResult td {
+          justify-items: center;
           color: var(--sub-color);
+          font-size: 2rem;
         }
-        td {
-          transition: 0.25s;
-          height: 3rem;
-        }
-        tr td:nth-child(3),
-        tr td:nth-child(4) {
-          font-size: 0.75rem;
-        }
-        tr td:nth-child(5) {
-          color: var(--sub-color);
-        }
-        .searchResult:hover td {
-          background: rgba(0, 0, 0, 0.1);
-          cursor: pointer;
+        .sub {
+          opacity: 0.5;
         }
       }
-
-      tfoot {
-        td {
-          padding: 0.5rem;
-          position: -webkit-sticky;
-          position: sticky;
-          bottom: 0;
-          background: var(--bg-color);
-          color: var(--sub-color);
-          z-index: 4;
-        }
-      }
-
-      tr {
-        td:first-child {
-          padding-left: 1rem;
-        }
-        td:last-child {
-          padding-right: 1rem;
-        }
+      .searchResult:hover {
+        background: rgba(0, 0, 0, 0.1);
+        border-radius: 5px;
       }
     }
   }

static/index.html

@@ -150,29 +150,11 @@
     <div id="quoteSearchPopupWrapper" class="hidden">
       <div id="quoteSearchPopup" mode="">
         <div class="title">Quote Search</div>
-        <input
-          id="searchBox"
-          class="searchBox"
-          type="text"
-          maxlength="200"
-          autocomplete="off"
-        />
-        <table class="searchResultTable">
-          <thead>
-            <tr>
-              <td class="alignRight" width="5%">#</td>
-              <td class="alignRight" width="10%">length</td>
-              <td>text</td>
-              <td width="30%">source</td>
-              <td width="1%"></td>
-            </tr>
-          </thead>
-          <tbody id="searchResultList"></tbody>
-        </table>
-        <div id="extraResults" class="quoteSearchResults">
-          No search results
+        <input id="searchBox" class="searchBox" type="text" maxLength="200" autocomplete="off"/>
+        <div id="extraResults">No search results</div>
+        <div id="quoteSearchResults" class="quoteSearchResults">
+
         </div>
-        <div class="button">ok</div>
       </div>
     </div>
     <div id="tagsWrapper" class="hidden">