mirror of
https://github.com/monkeytypegame/monkeytype.git
synced 2025-11-09 13:44:29 +08:00
Quote Search V2.0
This commit is contained in:
BuildTools
parent
c422e0c548
commit
435cad586a
3 changed files with 130 additions and 206 deletions
159
src/js/script.js
159
src/js/script.js
|
|
@ -4027,32 +4027,36 @@ 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++;
|
||||
})
|
||||
let oldResults = document.getElementById("quoteSearchResults");
|
||||
oldResults.remove();
|
||||
$("#quoteSearchPopup").append('<div class="quoteSearchResults" id="quoteSearchResults"></div>');
|
||||
let resultsList = $("#quoteSearchResults");
|
||||
let resultsShown = 0;
|
||||
quotes.quotes.forEach(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(resultsShown++ < 200){
|
||||
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>
|
||||
`)
|
||||
}
|
||||
})
|
||||
document.getElementById("extraResults").innerHTML = (numberOfSearchResults - 5) + " more results";
|
||||
document.getElementById("extraResults").innerHTML = resultsShown + " results";
|
||||
$("#quoteSearchPopupWrapper")
|
||||
.stop(true, true)
|
||||
.css("opacity", 0)
|
||||
|
|
@ -4314,7 +4318,6 @@ $("#quoteSearchPopup .searchBox").keydown((e) => {
|
|||
searchText = searchText.replace(/[-[\]{}()*+?.,\\^$|#\s]/g, "\\$&");
|
||||
let reg = new RegExp(searchText, "i");
|
||||
let found = [];
|
||||
let numberOfSearchResults = 0;
|
||||
quotes.quotes.forEach(quote =>{
|
||||
let quoteText = quote["text"];
|
||||
let quoteSource = quote["source"];
|
||||
|
|
@ -4322,72 +4325,42 @@ $("#quoteSearchPopup .searchBox").keydown((e) => {
|
|||
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>
|
||||
`)
|
||||
let oldResults = document.getElementById("quoteSearchResults");
|
||||
oldResults.remove();
|
||||
$("#quoteSearchPopup").append('<div class="quoteSearchResults" id="quoteSearchResults"></div>');
|
||||
let resultsList = $("#quoteSearchResults");
|
||||
let resultListLength = 0;
|
||||
found.forEach(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 (numberOfSearchResults == 0){
|
||||
$("#extraResults").css("opacity", "1");
|
||||
document.getElementById("extraResults").innerHTML = "No search results";
|
||||
}
|
||||
if (resultListLength++ < 200){
|
||||
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>
|
||||
`)
|
||||
}
|
||||
})
|
||||
document.getElementById("extraResults").innerHTML = resultListLength + " results";
|
||||
}, 0.1) //arbitrarily v. small time as it's only to allow text to input before searching
|
||||
});
|
||||
//sets quote id to searched quote clicked
|
||||
$("#quoteSearchResults").click((e) => {
|
||||
if($(e.target).hasClass("quoteSearchButton")){
|
||||
document.getElementById("inputNumber").value = e.target.getAttribute("id");
|
||||
applyMode2Popup();
|
||||
}
|
||||
})
|
||||
|
||||
$("#quoteSearchPopupWrapper").click((e) => {
|
||||
if ($(e.target).attr("id") === "quoteSearchPopupWrapper") {
|
||||
hideQuoteSearchPopup();
|
||||
|
|
@ -4398,23 +4371,9 @@ $("#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", "#quoteSearchPopup .searchResultTable tbody tr", (e) => {
|
||||
if($(e.currentTarget).hasClass("searchResult")){
|
||||
selectedQuoteId = parseInt($(e.currentTarget).attr("id"));
|
||||
applyQuoteSearchPopup(selectedQuoteId);
|
||||
}
|
||||
$(document).on("click", "#quoteSearchResults .searchResult", (e) => {
|
||||
selectedQuoteId = parseInt($(e.currentTarget).attr("id"));
|
||||
applyQuoteSearchPopup(selectedQuoteId);
|
||||
});
|
||||
|
||||
$("#quoteSearchPopup input").keypress((e) => {
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
@ -633,100 +639,75 @@ a:hover {
|
|||
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;
|
||||
|
||||
.alignRight{
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
tr td:first-child {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
td {
|
||||
padding: 0.5rem 0.5rem;
|
||||
.fixedHeight{
|
||||
height: 2rem;
|
||||
overflow: hidden;
|
||||
display: grid;
|
||||
.searchResult{
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr 3fr 0fr;
|
||||
grid-auto-rows: auto;
|
||||
width: 100%;
|
||||
gap: 1rem;
|
||||
Transition: 0.25s;
|
||||
padding: 1rem;
|
||||
box-sizing:border-box;
|
||||
user-select: none;
|
||||
cursor: pointer;
|
||||
.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: .75rem;
|
||||
}
|
||||
tr td:nth-child(5){
|
||||
color: var(--sub-color);
|
||||
}
|
||||
.searchResult:hover td{
|
||||
background: rgba(0, 0, 0, 0.1);
|
||||
.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;
|
||||
}
|
||||
.searchResult:hover{
|
||||
background: rgba(0, 0, 0, 0.1);
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
tr {
|
||||
td:first-child {
|
||||
padding-left: 1rem;
|
||||
}
|
||||
td:last-child {
|
||||
padding-right: 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -152,26 +152,10 @@
|
|||
<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</div>
|
||||
<div class="button">ok</div>
|
||||
<div id="extraResults">No search results</div>
|
||||
<div id="quoteSearchResults" class="quoteSearchResults">
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="tagsWrapper" class="hidden">
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue