Bommels05/Modrinth
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Platform filters

Browse Source
This commit is contained in:
Jai A 2020-09-10 18:12:43 -07:00
parent cacc5ac803
commit a7bc6b4f36
2 changed files with 47 additions and 28 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
layouts/default.vue
View File

@ -157,7 +157,6 @@
</svg> </svg>
</div> </div>
</header> --> </header> -->
<nuxt /> <nuxt />
</main> </main>
</div> </div>

74
pages/mods.vue
View File

@ -117,7 +117,10 @@
<div> <div>
<section class="filter-group"> <section class="filter-group">
<h3>Categories</h3> <h3>Categories</h3>
<p id="technology" @click="toggleFilter('technology')"> <p
id="categories:technology"
@click="toggleFacet('categories:technology')"
>
<svg <svg
viewBox="0 0 24 24" viewBox="0 0 24 24"
fill="none" fill="none"
@ -135,7 +138,10 @@
</svg> </svg>
Technology Technology
</p> </p>
<p id="adventure" @click="toggleFilter('adventure')"> <p
id="categories:adventure"
@click="toggleFacet('categories:adventure')"
>
<svg <svg
viewBox="0 0 24 24" viewBox="0 0 24 24"
fill="none" fill="none"
@ -151,7 +157,7 @@
</svg> </svg>
Adventure Adventure
</p> </p>
<p id="magic" @click="toggleFilter('magic')"> <p id="categories:magic" @click="toggleFacet('categories:magic')">
<svg <svg
viewBox="0 0 24 24" viewBox="0 0 24 24"
fill="none" fill="none"
@ -166,7 +172,7 @@
</svg> </svg>
Magic Magic
</p> </p>
<p id="utility" @click="toggleFilter('utility')"> <p id="categories:utility" @click="toggleFacet('categories:utility')">
<svg <svg
viewBox="0 0 24 24" viewBox="0 0 24 24"
fill="none" fill="none"
@ -180,7 +186,10 @@
</svg> </svg>
Utility Utility
</p> </p>
<p id="decoration" @click="toggleFilter('decoration')"> <p
id="categories:decoration"
@click="toggleFacet('categories:decoration')"
>
<svg <svg
viewBox="0 0 24 24" viewBox="0 0 24 24"
fill="none" fill="none"
@ -194,7 +203,7 @@
</svg> </svg>
Decoration Decoration
</p> </p>
<p id="library" @click="toggleFilter('library')"> <p id="categories:library" @click="toggleFacet('categories:library')">
<svg <svg
viewBox="0 0 24 24" viewBox="0 0 24 24"
fill="none" fill="none"
@ -210,7 +219,7 @@
</svg> </svg>
Library Library
</p> </p>
<p id="cursed" @click="toggleFilter('cursed')"> <p id="categories:cursed" @click="toggleFacet('categories:cursed')">
<svg <svg
viewBox="0 0 24 24" viewBox="0 0 24 24"
fill="none" fill="none"
@ -235,7 +244,10 @@
</svg> </svg>
Cursed Cursed
</p> </p>
<p id="worldgen" @click="toggleFilter('worldgen')"> <p
id="categories:worldgen"
@click="toggleFacet('categories:worldgen')"
>
<svg <svg
viewBox="0 0 24 24" viewBox="0 0 24 24"
fill="none" fill="none"
@ -250,7 +262,7 @@
</svg> </svg>
Worldgen Worldgen
</p> </p>
<p id="storage" @click="toggleFilter('storage')"> <p id="categories:storage" @click="toggleFacet('categories:storage')">
<svg <svg
viewBox="0 0 24 24" viewBox="0 0 24 24"
fill="none" fill="none"
@ -265,7 +277,7 @@
</svg> </svg>
Storage Storage
</p> </p>
<p id="food" @click="toggleFilter('food')"> <p id="categories:food" @click="toggleFacet('categories:food')">
<svg <svg
viewBox="0 0 24 24" viewBox="0 0 24 24"
fill="none" fill="none"
@ -282,7 +294,10 @@
</svg> </svg>
Food Food
</p> </p>
<p id="equipment" @click="toggleFilter('equipment')"> <p
id="categories:equipment"
@click="toggleFacet('categories:equipment')"
>
<svg <svg
viewBox="0 0 24 24" viewBox="0 0 24 24"
fill="none" fill="none"
@ -303,7 +318,7 @@
</svg> </svg>
Equipment Equipment
</p> </p>
<p id="misc" @click="toggleFilter('misc')"> <p id="categories:misc" @click="toggleFacet('categories:misc')">
<svg <svg
viewBox="0 0 24 24" viewBox="0 0 24 24"
fill="none" fill="none"
@ -321,8 +336,19 @@
Misc Misc
</p> </p>
<h3>Loaders</h3> <h3>Loaders</h3>
<p id="forge" @click="toggleFilter('forge')">Forge</p> <p id="categories:forge" @click="toggleFacet('categories:forge')">
<p id="fabric" @click="toggleFilter('fabric')">Fabric</p> Forge
</p>
<p id="categories:fabric" @click="toggleFacet('categories:fabric')">
Fabric
</p>
<h3>Platforms</h3>
<p id="host:modrinth" @click="toggleFacet('host:modrinth')">
Modrinth
</p>
<p id="host:curseforge" @click="toggleFacet('host:curseforge')">
Curseforge
</p>
<h3>Versions</h3> <h3>Versions</h3>
<p>WIP</p> <p>WIP</p>
</section> </section>
@ -343,7 +369,7 @@ export default {
data() { data() {
return { return {
query: '', query: '',
filters: [], facets: [],
results: [], results: [],
pages: [], pages: [],
currentPage: 1, currentPage: 1,
@ -373,16 +399,16 @@ export default {
await this.onSearchChange(this.currentPage) await this.onSearchChange(this.currentPage)
} }
}, },
async toggleFilter(elementName) { async toggleFacet(elementName) {
const element = document.getElementById(elementName) const element = document.getElementById(elementName)
const index = this.filters.indexOf(element.id) const index = this.facets.indexOf(element.id)
if (index !== -1) { if (index !== -1) {
element.classList.remove('filter-active') element.classList.remove('filter-active')
this.filters.splice(index, 1) this.facets.splice(index, 1)
} else { } else {
element.classList.add('filter-active') element.classList.add('filter-active')
this.filters.push(element.id) this.facets.push(element.id)
} }
await this.onSearchChange(1) await this.onSearchChange(1)
@ -407,14 +433,8 @@ export default {
params.push(`query=${this.query.replace(/ /g, '+')}`) params.push(`query=${this.query.replace(/ /g, '+')}`)
} }
if (this.filters.length > 0) { if (this.facets.length > 0) {
const facets = [] params.push(`facets=${JSON.stringify([this.facets])}`)
for (const facet of this.filters) {
facets.push(['categories:' + facet])
}
params.push(`facets=${JSON.stringify(facets)}`)
} }
if (newPageNumber !== 1) { if (newPageNumber !== 1) {