Add categories + Infinite Scroll

This commit is contained in:
Jai A 2020-05-23 21:06:36 -07:00
parent 506a68ee6a
commit c24ab9831a
12 changed files with 287 additions and 26 deletions

View File

@ -10,6 +10,7 @@ use diesel::prelude::*;
use actix_web::client::Connector; use actix_web::client::Connector;
use meilisearch_sdk::settings::Settings; use meilisearch_sdk::settings::Settings;
use meilisearch_sdk::progress::SettingsUpdate; use meilisearch_sdk::progress::SettingsUpdate;
use serde_json::from_str;
#[derive(Serialize, Deserialize, Debug)] #[derive(Serialize, Deserialize, Debug)]
struct Attachment { struct Attachment {
@ -44,6 +45,7 @@ struct CurseForgeMod {
downloadCount: f32, downloadCount: f32,
categories: Vec<Category>, categories: Vec<Category>,
gameVersionLatestFiles: Vec<CurseVersion>, gameVersionLatestFiles: Vec<CurseVersion>,
dateCreated: String,
dateModified: String, dateModified: String,
} }
@ -59,6 +61,7 @@ struct SearchMod {
page_url: String, page_url: String,
icon_url: String, icon_url: String,
author_url: String, author_url: String,
date_created: String,
date_modified: String, date_modified: String,
latest_version: String, latest_version: String,
empty: String, empty: String,
@ -77,6 +80,7 @@ pub struct SearchRequest {
q: Option<String>, q: Option<String>,
f: Option<String>, f: Option<String>,
v: Option<String>, v: Option<String>,
o: Option<String>,
} }
#[post("search")] #[post("search")]
@ -110,10 +114,11 @@ fn search(web::Query(info): web::Query<SearchRequest>) -> Vec<SearchMod> {
let mut search_query = "".to_string(); let mut search_query = "".to_string();
let mut filters = "".to_string(); let mut filters = "".to_string();
let mut offset = 0;
match info.q { match info.q {
Some(q) => search_query = q, Some(q) => search_query = q,
None => search_query = "pdsaojdakdka".to_string() None => search_query = "{}{}{}".to_string()
} }
if let Some(f) = info.f { if let Some(f) = info.f {
@ -129,10 +134,14 @@ fn search(web::Query(info): web::Query<SearchRequest>) -> Vec<SearchMod> {
} }
} }
let mut query = Query::new(&search_query).with_limit(10); if let Some(o) = info.o {
offset = o.parse().unwrap();
}
let mut query = Query::new(&search_query).with_limit(10).with_offset(offset);
if !filters.is_empty() { if !filters.is_empty() {
query = Query::new(&search_query).with_limit(10).with_filters(&filters); query = Query::new(&search_query).with_limit(10).with_filters(&filters).with_offset(offset);
} }
client.get_index("mods").unwrap().search::<SearchMod>(&query).unwrap().hits client.get_index("mods").unwrap().search::<SearchMod>(&query).unwrap().hits
@ -168,9 +177,10 @@ pub async fn index_mods(conn : PgConnection) {
page_url: "".to_string(), page_url: "".to_string(),
icon_url: "".to_string(), icon_url: "".to_string(),
author_url: "".to_string(), author_url: "".to_string(),
date_created: "".to_string(),
date_modified: "".to_string(), date_modified: "".to_string(),
latest_version: "".to_string(), latest_version: "".to_string(),
empty: String::from("pdsaojdakdka") empty: String::from("{}{}{}")
}); });
} }
@ -197,10 +207,6 @@ pub async fn index_mods(conn : PgConnection) {
let mut mod_categories = vec![]; let mut mod_categories = vec![];
if using_forge {
mod_categories.push(String::from("Forge"));
}
for category in curseforge_mod.categories { for category in curseforge_mod.categories {
match &category.name[..] { match &category.name[..] {
"World Gen" => mod_categories.push(String::from("worldgen")), "World Gen" => mod_categories.push(String::from("worldgen")),
@ -213,15 +219,16 @@ pub async fn index_mods(conn : PgConnection) {
"Processing" => mod_categories.push(String::from("technology")), "Processing" => mod_categories.push(String::from("technology")),
"Player Transport" => mod_categories.push(String::from("technology")), "Player Transport" => mod_categories.push(String::from("technology")),
"Energy, Fluid, and Item Transport" => mod_categories.push(String::from("technology")), "Energy, Fluid, and Item Transport" => mod_categories.push(String::from("technology")),
"Farming" => mod_categories.push(String::from("technology")), "Food" => mod_categories.push(String::from("food")),
"Farming" => mod_categories.push(String::from("food")),
"Energy" => mod_categories.push(String::from("technology")), "Energy" => mod_categories.push(String::from("technology")),
"Redstone" => mod_categories.push(String::from("technology")), "Redstone" => mod_categories.push(String::from("technology")),
"Genetics" => mod_categories.push(String::from("technology")), "Genetics" => mod_categories.push(String::from("technology")),
"Magic" => mod_categories.push(String::from("magic")), "Magic" => mod_categories.push(String::from("magic")),
"Storage" => mod_categories.push(String::from("technology")), "Storage" => mod_categories.push(String::from("storage")),
"API and Library" => mod_categories.push(String::from("library")), "API and Library" => mod_categories.push(String::from("library")),
"Adventure and RPG" => mod_categories.push(String::from("adventure")), "Adventure and RPG" => mod_categories.push(String::from("adventure")),
"Map and Information" => mod_categories.push(String::from("adventure")), "Map and Information" => mod_categories.push(String::from("utility")),
"Cosmetic" => mod_categories.push(String::from("decoration")), "Cosmetic" => mod_categories.push(String::from("decoration")),
"Addons" => mod_categories.push(String::from("misc")), "Addons" => mod_categories.push(String::from("misc")),
"Thermal Expansion" => mod_categories.push(String::from("misc")), "Thermal Expansion" => mod_categories.push(String::from("misc")),
@ -235,7 +242,7 @@ pub async fn index_mods(conn : PgConnection) {
"Applied Energistics 2" => mod_categories.push(String::from("misc")), "Applied Energistics 2" => mod_categories.push(String::from("misc")),
"CraftTweaker" => mod_categories.push(String::from("misc")), "CraftTweaker" => mod_categories.push(String::from("misc")),
"Miscellaneous" => mod_categories.push(String::from("misc")), "Miscellaneous" => mod_categories.push(String::from("misc")),
"Armor, Tools, and Weapons" => mod_categories.push(String::from("technology")), "Armor, Tools, and Weapons" => mod_categories.push(String::from("equipment")),
"Server Utility" => mod_categories.push(String::from("utility")), "Server Utility" => mod_categories.push(String::from("utility")),
"Fabric" => mod_categories.push(String::from("fabric")), "Fabric" => mod_categories.push(String::from("fabric")),
_ => {} _ => {}
@ -246,6 +253,10 @@ pub async fn index_mods(conn : PgConnection) {
mod_categories.dedup(); mod_categories.dedup();
mod_categories.truncate(3); mod_categories.truncate(3);
if using_forge {
mod_categories.push(String::from("forge"));
}
let mut mod_attachments = curseforge_mod.attachments; let mut mod_attachments = curseforge_mod.attachments;
mod_attachments.retain(|x| x.isDefault); mod_attachments.retain(|x| x.isDefault);
@ -273,9 +284,10 @@ pub async fn index_mods(conn : PgConnection) {
page_url: curseforge_mod.websiteUrl, page_url: curseforge_mod.websiteUrl,
icon_url: (mod_attachments[0].url).to_string(), icon_url: (mod_attachments[0].url).to_string(),
author_url: (&curseforge_mod.authors[0].url).to_string(), author_url: (&curseforge_mod.authors[0].url).to_string(),
date_created: curseforge_mod.dateCreated.chars().take(10).collect(),
date_modified: curseforge_mod.dateModified.chars().take(10).collect(), date_modified: curseforge_mod.dateModified.chars().take(10).collect(),
latest_version: latest_version, latest_version: latest_version,
empty: String::from("pdsaojdakdka") empty: String::from("{}{}{}")
}) })
} }
@ -305,6 +317,7 @@ pub async fn index_mods(conn : PgConnection) {
"page_url".to_string(), "page_url".to_string(),
"icon_url".to_string(), "icon_url".to_string(),
"author_url".to_string(), "author_url".to_string(),
"date_created".to_string(),
"date_modified".to_string(), "date_modified".to_string(),
"latest_version".to_string(), "latest_version".to_string(),
"empty".to_string(), "empty".to_string(),

View File

@ -299,4 +299,39 @@
.misc-badge { .misc-badge {
color: white; color: white;
background-color: deepskyblue; background-color: deepskyblue;
}
.storage-badge {
color: wheat;
background-color: #e1a15a;
}
.food-badge {
color: white;
background-color: royalblue;
}
.equipment-badge {
color: white;
background-color: black;
}
.forge {
padding-top: 5px !important;
}
.back-to-top {
position: fixed;
top: 80%;
left: 19%;
background-color: #0b75d8;
text-align: center;
padding: 20px;
display: none;
}
.back-to-top img {
width: 50px;
height: 50px;
} }

View File

@ -0,0 +1,52 @@
<?xml version="1.0" encoding="iso-8859-1"?>
<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 512 512" style="enable-background:new 0 0 512 512;" xml:space="preserve">
<path style="fill:#FEA832;" d="M482,316v105H30V316c0-73.5,36.4-138.6,91-179.7l15,44.7l15-63.9C182.5,100.6,218.2,91,256,91
s73.5,9.6,105,26.1l15,63.9l15-44.7C445.6,177.4,482,242.5,482,316z"/>
<path style="fill:#FE9923;" d="M482,316v105H256V91c37.8,0,73.5,9.6,105,26.1l15,63.9l15-44.7C445.6,177.4,482,242.5,482,316z"/>
<path style="fill:#FEDB41;" d="M331,106v150c0,8.399-6.599,15-15,15H196c-8.401,0-15-6.601-15-15V106c0-24.901,20.099-45,45-45h60
C310.901,61,331,81.099,331,106z"/>
<path style="fill:#FCBF29;" d="M376,241c8.291,0,15-6.709,15-15v-89.692c-9.481-7.136-19.438-13.649-30-19.235V226
C361,234.291,367.709,241,376,241z"/>
<g>
<path style="fill:#FEDB41;" d="M136,241c8.291,0,15-6.709,15-15V117.072c-10.562,5.587-20.519,12.1-30,19.235V226
C121,234.291,127.709,241,136,241z"/>
<path style="fill:#FEDB41;" d="M512,421c0,16.5-13.5,30-30,30H30c-16.5,0-30-13.5-30-30s13.5-30,30-30h452
C498.5,391,512,404.5,512,421z"/>
</g>
<g>
<path style="fill:#FCBF29;" d="M316,271h-60V61h30c24.901,0,45,20.099,45,45v150C331,264.399,324.401,271,316,271z"/>
<path style="fill:#FCBF29;" d="M512,421c0,16.5-13.5,30-30,30H256v-60h226C498.5,391,512,404.5,512,421z"/>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
</svg>

After

Width:  |  Height:  |  Size: 1.7 KiB

View File

@ -0,0 +1,48 @@
<?xml version="1.0" encoding="iso-8859-1"?>
<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 503.894 503.894" style="enable-background:new 0 0 503.894 503.894;" xml:space="preserve">
<path style="fill:#7FB241;" d="M253.483,120.441c-72.72,6.416-126.336-47.216-119.936-119.92
C206.267-5.895,259.883,47.737,253.483,120.441z"/>
<path style="fill:#8E6D53;" d="M256.267,171.097c-6.272-1.568-11.2-6.88-11.952-13.68c-3.44-31.152,5.472-61.76,25.056-86.208
c19.6-24.448,47.552-39.808,78.688-43.232c8.736-0.944,16.576,5.344,17.52,14.064c0.96,8.72-5.328,16.56-14.048,17.536
c-22.704,2.496-43.072,13.68-57.36,31.504s-20.768,40.128-18.272,62.832c0.96,8.736-5.328,16.576-14.064,17.552
C259.915,171.689,258.043,171.545,256.267,171.097z"/>
<path style="fill:#E14B4B;" d="M374.075,120.249c-17.344-4.624-35.28-3.664-52.88,2c-45.216,14.576-93.296,14.576-138.512,0
c-17.6-5.664-35.536-6.624-52.88-2c-69.248,18.448-102.656,118.624-74.64,223.76s106.848,175.392,176.096,156.944
c0.08-0.016,0.144-0.032,0.224-0.064c13.456-3.632,27.472-3.632,40.928,0c0.08,0.016,0.144,0.032,0.224,0.064
c69.232,18.448,148.08-51.824,176.096-156.944C476.731,238.873,443.307,138.697,374.075,120.249z"/>
<path style="fill:#D03F3F;" d="M448.715,343.993c-28,105.12-106.88,175.36-176.16,156.96h-0.16c-13.44-3.68-27.52-3.68-40.96,0
h-0.16c-26.08,6.88-53.44,1.28-78.88-13.92c135.84-52.48,237.6-184.96,258.88-346.4
C454.315,179.193,471.115,259.993,448.715,343.993z"/>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
</svg>

After

Width:  |  Height:  |  Size: 1.8 KiB

View File

@ -0,0 +1,14 @@
<?xml version="1.0" encoding="utf-8"?>
<svg version="1.1" id="Ebene_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 120 66.7" style="enable-background:new 0 0 120 66.7;" xml:space="preserve">
<style type="text/css">
.st1{fill:#ffffff;}
</style>
<g>
<path class="st1" d="M91.6,16.7l-37.8-1.9l46.2,0v-3.7H47.8l0,7.8v6.2c0,0.1-1.5-9.1-1.9-11.7h-4.1v6.8v6.2
c0,0.1-1.8-10.9-1.9-12.3c-10.4,0-27.9,0-27.9,0c1.9,1.6,12.4,10.6,19.9,14.3c3.7,1.8,8.3,1.9,12.4,2c2.1,0.1,4.2,0.2,5.8,1.8
c2.3,2.2,2.8,5.7,0.8,8.3c-1.9,2.6-7.3,3.2-7.3,3.2L39,49.1v6.4h10.3l0.3-6.3l8.9-6.3c-0.9,0.8-3.1,2.8-6.2,7.7
c-0.7,1.1-1.3,2.3-1.7,3.5c2.2-1.9,6.8-3.2,12.2-3.2c5.3,0,9.9,1.3,12.1,3.2c-0.4-1.2-1-2.4-1.7-3.5c-3.2-4.9-5.3-6.9-6.2-7.7
l8.9,6.3l0.3,6.3h9.6v-6.4l-4.5-5.5c0,0-6.7-0.4-8.4-3.2C67.7,32.6,74.8,20.4,91.6,16.7z"/>
</g>
</svg>

After

Width:  |  Height:  |  Size: 881 B

Binary file not shown.

Before

Width:  |  Height:  |  Size: 5.4 KiB

View File

@ -0,0 +1,14 @@
<?xml version="1.0" encoding="utf-8"?>
<svg version="1.1" id="Ebene_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 120 66.7" style="enable-background:new 0 0 120 66.7;" xml:space="preserve">
<style type="text/css">
.st1{fill:#1e2d44;}
</style>
<g>
<path class="st1" d="M91.6,16.7l-37.8-1.9l46.2,0v-3.7H47.8l0,7.8v6.2c0,0.1-1.5-9.1-1.9-11.7h-4.1v6.8v6.2
c0,0.1-1.8-10.9-1.9-12.3c-10.4,0-27.9,0-27.9,0c1.9,1.6,12.4,10.6,19.9,14.3c3.7,1.8,8.3,1.9,12.4,2c2.1,0.1,4.2,0.2,5.8,1.8
c2.3,2.2,2.8,5.7,0.8,8.3c-1.9,2.6-7.3,3.2-7.3,3.2L39,49.1v6.4h10.3l0.3-6.3l8.9-6.3c-0.9,0.8-3.1,2.8-6.2,7.7
c-0.7,1.1-1.3,2.3-1.7,3.5c2.2-1.9,6.8-3.2,12.2-3.2c5.3,0,9.9,1.3,12.1,3.2c-0.4-1.2-1-2.4-1.7-3.5c-3.2-4.9-5.3-6.9-6.2-7.7
l8.9,6.3l0.3,6.3h9.6v-6.4l-4.5-5.5c0,0-6.7-0.4-8.4-3.2C67.7,32.6,74.8,20.4,91.6,16.7z"/>
</g>
</svg>

After

Width:  |  Height:  |  Size: 881 B

View File

@ -0,0 +1 @@
<svg id="Layer_1" enable-background="new 0 0 480 480" height="512" viewBox="0 0 480 480" width="512" xmlns="http://www.w3.org/2000/svg"><path d="m472 60.88v41.23c0 17.68-14.33 32-32 32h-2v285.01c0 17.68-14.33 32-32 32h-332c-17.67 0-32-14.32-32-32v-285.01h-2c-17.67 0-32-14.32-32-32v-41.23c0-17.68 14.33-32 32-32h400c17.67 0 32 14.32 32 32z" fill="#ffaa64"/><path d="m472 60.88v41.23c0 17.68-14.33 32-32 32-18.763 0-381.015 0-400 0-17.67 0-32-14.32-32-32v-41.23c0-17.68 14.33-32 32-32h400c17.67 0 32 14.32 32 32z" fill="#ffbd7b"/><path d="m320 217v10c0 13.25-10.75 24-24 24h-112c-13.25 0-24-10.75-24-24v-10c0-13.25 10.75-24 24-24h112c13.25 0 24 10.75 24 24z" fill="#fa9a4b"/><path d="m440.119 68.88h-360.119c-17.673 0-32 14.327-32 32v1.35c0 25.762-38.767 27.127-39.965 1.393-.057-1.235-.035-43.743-.035-42.743 0-17.673 14.327-32 32-32h400c27.503 0 26.19 40 .119 40z" fill="#ffd3a6"/><path d="m42 134.11h396v35.33h-396z" fill="#faa157"/><path d="m480 60.876v41.237c0 22.056-17.944 40-40 40h-15.5c-4.418 0-8-3.582-8-8s3.582-8 8-8h15.5c13.233 0 24-10.767 24-24v-41.237c0-13.233-10.767-24-24-24h-400c-13.233 0-24 10.767-24 24v41.237c0 13.233 10.767 24 24 24h333c4.418 0 8 3.582 8 8s-3.582 8-8 8h-323v277.011c0 13.233 10.767 24 24 24h332c13.233 0 24-10.767 24-24v-242.124c0-4.418 3.582-8 8-8s8 3.582 8 8v242.124c0 22.056-17.944 40-40 40h-332c-22.056 0-40-17.944-40-40v-277.462c-19.219-2.904-34-19.532-34-39.549v-41.237c0-22.056 17.944-40 40-40h400c22.056 0 40 17.944 40 40zm-296 198.124c-17.645 0-32-14.355-32-32v-10c0-17.645 14.355-32 32-32h112c17.645 0 32 14.355 32 32v10c0 17.645-14.355 32-32 32zm0-16h112c8.822 0 16-7.178 16-16v-10c0-8.822-7.178-16-16-16h-112c-8.822 0-16 7.178-16 16v10c0 8.822 7.178 16 16 16zm-24 102h-56c-4.418 0-8 3.582-8 8s3.582 8 8 8h56c4.418 0 8-3.582 8-8s-3.582-8-8-8zm0 40h-56c-4.418 0-8 3.582-8 8s3.582 8 8 8h56c4.418 0 8-3.582 8-8s-3.582-8-8-8z"/></svg>

After

Width:  |  Height:  |  Size: 1.8 KiB

View File

@ -0,0 +1,5 @@
<?xml version="1.0"?>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Capa_1" x="0px" y="0px" viewBox="0 0 490.544 490.544" style="enable-background:new 0 0 490.544 490.544;" xml:space="preserve" width="512px" height="512px" class="hovered-paths"><g><g>
<path style="fill:#FFFFFF" d="M18.098,274.151L245.213,47.015l227.115,227.136c4.237,4.093,10.99,3.975,15.083-0.262 c3.993-4.134,3.993-10.687,0-14.821L252.744,24.401c-4.165-4.164-10.917-4.164-15.083,0L2.994,259.068 c-4.093,4.237-3.975,10.99,0.262,15.083c4.134,3.992,10.687,3.992,14.82,0H18.098z" data-original="#607D8B" class="hovered-path active-path" data-old_color="#607D8B"/>
<path style="fill:#FFFFFF" d="M252.765,216.38c-4.165-4.164-10.917-4.164-15.083,0L3.016,451.047 c-4.093,4.237-3.976,10.99,0.262,15.083c4.134,3.993,10.687,3.993,14.821,0l227.115-227.115l227.115,227.136 c4.237,4.093,10.99,3.976,15.083-0.261c3.993-4.134,3.993-10.688,0-14.821L252.765,216.38z" data-original="#607D8B" class="hovered-path active-path" data-old_color="#607D8B"/>
</g><path d="M479.88,277.266c-2.831,0.005-5.548-1.115-7.552-3.115L245.213,47.015L18.098,274.151 c-4.237,4.093-10.99,3.975-15.083-0.262c-3.992-4.134-3.992-10.687,0-14.82L237.682,24.401c4.165-4.164,10.917-4.164,15.083,0 l234.667,234.667c4.159,4.172,4.148,10.926-0.024,15.085C485.409,276.146,482.702,277.265,479.88,277.266z" data-original="#000000" class="" style="fill:#FFFFFF" data-old_color="#000000"/><path d="M479.88,469.266c-2.831,0.005-5.548-1.115-7.552-3.115L245.213,239.015L18.098,466.151 c-4.237,4.093-10.99,3.976-15.083-0.262c-3.993-4.134-3.993-10.687,0-14.821l234.667-234.667c4.165-4.164,10.917-4.164,15.083,0 l234.667,234.667c4.159,4.172,4.148,10.926-0.024,15.085C485.409,468.146,482.702,469.265,479.88,469.266z" data-original="#000000" class="" style="fill:#FFFFFF" data-old_color="#000000"/></g> </svg>

After

Width:  |  Height:  |  Size: 1.8 KiB

View File

@ -9,6 +9,9 @@ let category_inputs = {
"library": false, "library": false,
"worldgen": false, "worldgen": false,
"cursed": false, "cursed": false,
"storage": false,
"food": false,
"equipment": false,
"misc": false, "misc": false,
"forge": false, "forge": false,
"fabric": false, "fabric": false,
@ -93,7 +96,7 @@ function clearFilters() {
} }
} }
handleSearch(); handleSearch(0);
} }
function toggleVisibility(e) { function toggleVisibility(e) {
@ -124,7 +127,7 @@ function activateCategory(element) {
document.getElementById(element.id + "-ghost").className = "category-ghost"; document.getElementById(element.id + "-ghost").className = "category-ghost";
} }
handleSearch(); handleSearch(0);
} }
function activateVersion(element) { function activateVersion(element) {
@ -138,16 +141,42 @@ function activateVersion(element) {
element.style.boxShadow = "0 0"; element.style.boxShadow = "0 0";
} }
handleSearch(); handleSearch(0);
} }
function handleSearch() { let body = document.documentElement;
let backToTop = document.getElementById("backToTop");
let currentlyLoadingExtra = false;
let currentOffset = 0;
function loadExtra() {
console.log(body.scrollTop)
if (body.scrollTop > 400) {
backToTop.style.display = "block";
} else {
backToTop.style.display = "none";
}
if(!currentlyLoadingExtra) {
let scrollOffset = (body.scrollTop) / (body.scrollHeight - body.clientHeight);
if(scrollOffset > 0.9) {
currentOffset += 10;
handleSearch(currentOffset);
currentlyLoadingExtra = true;
}
}
}
function handleSearch(index) {
let queryString = "search"; let queryString = "search";
if(input.value.length > 0) { if(input.value.length > 0) {
queryString += "?q=" + encodeURIComponent(input.value).replace(/%20/g,'+'); queryString += "?q=" + encodeURIComponent(input.value).replace(/%20/g,'+');
} else { } else {
queryString += "?q=pdsaojdakdka" queryString += "?q={}{}{}"
} }
let filterString = ""; let filterString = "";
@ -182,16 +211,30 @@ function handleSearch() {
queryString += "&v=" + encodeURIComponent( "versions=" + versionString).replace(/%20/g,'+'); queryString += "&v=" + encodeURIComponent( "versions=" + versionString).replace(/%20/g,'+');
} }
if(index === 0)
window.history.pushState('Search', 'Search', queryString);
else
queryString += "&o=" + index;
console.log(queryString);
let xmlHttp = new XMLHttpRequest(); let xmlHttp = new XMLHttpRequest();
xmlHttp.onreadystatechange = function() { xmlHttp.onreadystatechange = function() {
if (xmlHttp.readyState === 4 && xmlHttp.status === 200) { if (xmlHttp.readyState === 4 && xmlHttp.status === 200) {
resultContainer.innerHTML = xmlHttp.responseText; if(index === 0) {
resultContainer.innerHTML = xmlHttp.responseText;
currentOffset = 0;
currentlyLoadingExtra = false;
}
else {
resultContainer.innerHTML += xmlHttp.responseText;
currentlyLoadingExtra = false;
}
} }
} }
xmlHttp.open("POST", queryString, true); xmlHttp.open("POST", queryString, true);
xmlHttp.send(null); xmlHttp.send(null);
window.history.pushState('Search', 'Search', queryString);
} }

View File

@ -12,7 +12,7 @@
<title>Search</title> <title>Search</title>
</head> </head>
<body> <body onscroll="loadExtra()">
<header class="site-header"> <header class="site-header">
<div class="temp-circle-logo"></div> <div class="temp-circle-logo"></div>
@ -26,6 +26,10 @@
</div> </div>
</header> </header>
<a href="#" class="back-to-top" id="backToTop">
<img src="static/images/icon/up.svg" alt="up">
</a>
<div class="main-flex"> <div class="main-flex">
<div class="left-flex"> <div class="left-flex">
<div class="filters"> <div class="filters">
@ -73,6 +77,18 @@
<img alt="cursed" src="static/images/icon/cursed.png" class="result-image"/> <img alt="cursed" src="static/images/icon/cursed.png" class="result-image"/>
<p>CURSED</p> <p>CURSED</p>
</a> </a>
<a class="storage-badge category-badge" id="storage" onclick="activateCategory(this)">
<img alt="storage" src="static/images/icon/storage.svg" class="result-image"/>
<p>STORAGE</p>
</a>
<a class="food-badge category-badge" id="food" onclick="activateCategory(this)">
<img alt="food" src="static/images/icon/food.svg" class="result-image"/>
<p>FOOD</p>
</a>
<a class="equipment-badge category-badge" id="equipment" onclick="activateCategory(this)">
<img alt="equipment" src="static/images/icon/equipment.svg" class="result-image"/>
<p>EQUIPMENT</p>
</a>
<a class="misc-badge category-badge" id="misc" onclick="activateCategory(this)"> <a class="misc-badge category-badge" id="misc" onclick="activateCategory(this)">
<img alt="misc" src="static/images/icon/misc.svg" class="result-image"/> <img alt="misc" src="static/images/icon/misc.svg" class="result-image"/>
<p>MISC</p> <p>MISC</p>
@ -84,7 +100,7 @@
<p>Loaders</p> <p>Loaders</p>
</a> </a>
<a class="forge-badge category-badge" id="forge" onclick="activateCategory(this)"> <a class="forge-badge category-badge" id="forge" onclick="activateCategory(this)">
<img alt="forge" src="static/images/icon/forge.jpg" class="result-image"/> <img alt="forge" src="static/images/icon/forge-alt.svg" class="result-image"/>
<p>FORGE</p> <p>FORGE</p>
</a> </a>
<a class="fabric-badge category-badge" id="fabric" onclick="activateCategory(this)"> <a class="fabric-badge category-badge" id="fabric" onclick="activateCategory(this)">
@ -96,7 +112,7 @@
<div class="search-main"> <div class="search-main">
<div class="search-div"> <div class="search-div">
<input class="search-bar" type="text" id="search-input" placeholder="Search for mods..." oninput="handleSearch()"> <input class="search-bar" type="text" id="search-input" placeholder="Search for mods..." oninput="handleSearch(0)">
</div> </div>
<div id="results" class="results"> <div id="results" class="results">
@ -130,7 +146,6 @@
</div> </div>
</div> </div>
<script src="static/js/search.js"></script> <script src="static/js/search.js"></script>
</body> </body>

View File

@ -11,6 +11,9 @@
<img src="static/images/icon/download.svg" alt="download" title="Downloads"/> <img src="static/images/icon/download.svg" alt="download" title="Downloads"/>
<p title="Downloads">{{format this.downloads}}</p> <p title="Downloads">{{format this.downloads}}</p>
<img src="static/images/icon/created.svg" alt="created" title="Created"/>
<p title="Created">{{this.date_created}}</p>
<img src="static/images/icon/updated.svg" alt="updated" title="Last Updated"/> <img src="static/images/icon/updated.svg" alt="updated" title="Last Updated"/>
<p title="Last Updated">{{this.date_modified}}</p> <p title="Last Updated">{{this.date_modified}}</p>
@ -19,7 +22,7 @@
<div class="loader-icons"> <div class="loader-icons">
{{#contains this.keywords "forge"}} {{#contains this.keywords "forge"}}
<img alt="forge" src="static/images/icon/forge.jpg" class="forge"/> <img alt="forge" src="static/images/icon/forge.svg" class="forge"/>
{{/contains}} {{/contains}}
{{#contains this.keywords "fabric"}} {{#contains this.keywords "fabric"}}
<img alt="fabric" src="static/images/icon/fabric.png"/> <img alt="fabric" src="static/images/icon/fabric.png"/>
@ -76,6 +79,24 @@
<p>CURSED</p> <p>CURSED</p>
</div> </div>
{{/contains}} {{/contains}}
{{#contains this.keywords "storage"}}
<div class="storage-badge result-badge">
<img alt="storage" src="static/images/icon/storage.svg" class="result-image"/>
<p>STORAGE</p>
</div>
{{/contains}}
{{#contains this.keywords "food"}}
<div class="food-badge result-badge">
<img alt="food" src="static/images/icon/food.svg" class="result-image"/>
<p>FOOD</p>
</div>
{{/contains}}
{{#contains this.keywords "equipment"}}
<div class="equipment-badge result-badge">
<img alt="equipment" src="static/images/icon/equipment.svg" class="result-image"/>
<p>EQUIPMENT</p>
</div>
{{/contains}}
{{#contains this.keywords "misc"}} {{#contains this.keywords "misc"}}
<div class="misc-badge result-badge"> <div class="misc-badge result-badge">
<img alt="misc" src="static/images/icon/misc.svg" class="result-image"/> <img alt="misc" src="static/images/icon/misc.svg" class="result-image"/>