DebaucheryLibrarian/traxxx
2
1
Fork 1
Code Issues 39 Pull Requests 1 Releases Wiki Activity

Added country filter for actors.

Browse Source
This commit is contained in:
DebaucheryLibrarian
2021-08-23 01:29:46 +02:00
parent 011482ac9d
commit 4ee0dcef9b
23 changed files with 683 additions and 31 deletions
Download Patch File Download Diff File Expand all files Collapse all files

114
assets/components/actors/actors.vue
View File

@@ -11,21 +11,21 @@
<ul class="genders nolist">
<li class="gender">
<router-link
:to="{ name: 'actors', params: { gender: 'all', letter, pageNumber: 1 }, query: $route.query }"
:to="{ name: 'actors', params: { gender: 'all', pageNumber: 1 }, query: $route.query }"
:class="{ selected: gender === 'all' }"
class="gender-link all"
>all</router-link>
</li>
<li class="gender">
<router-link
:to="{ name: 'actors', params: { gender: 'female', letter, pageNumber: 1 }, query: $route.query }"
:to="{ name: 'actors', params: { gender: 'female', pageNumber: 1 }, query: $route.query }"
:class="{ selected: gender === 'female' }"
class="gender-link female"
><Gender gender="female" /></router-link>
</li>
<li class="gender">
<router-link
:to="{ name: 'actors', params: { gender: 'male', letter, pageNumber: 1 }, query: $route.query }"
:to="{ name: 'actors', params: { gender: 'male', pageNumber: 1 }, query: $route.query }"
:class="{ selected: gender === 'male' }"
class="gender-link male"
replace
@@ -33,7 +33,7 @@
</li>
<li class="gender">
<router-link
:to="{ name: 'actors', params: { gender: 'trans', letter, pageNumber: 1 }, query: $route.query }"
:to="{ name: 'actors', params: { gender: 'trans', pageNumber: 1 }, query: $route.query }"
:class="{ selected: gender === 'trans' }"
class="gender-link transsexual"
replace
@@ -41,7 +41,7 @@
</li>
<li class="gender">
<router-link
:to="{ name: 'actors', params: { gender: 'other', letter, pageNumber: 1 }, query: $route.query }"
:to="{ name: 'actors', params: { gender: 'other', pageNumber: 1 }, query: $route.query }"
:class="{ selected: gender === 'other' }"
class="gender-link other"
replace
@@ -49,7 +49,7 @@
</li>
</ul>
<ul class="nolist">
<ul class="filters-attributes nolist">
<li>
<Tooltip class="filter boobs">
<span
@@ -194,6 +194,43 @@
</template>
</Tooltip>
</li>
<li>
<Tooltip class="filter">
<span
:class="{ enabled: country }"
class="filter-trigger"
><img
v-if="$route.query.c"
:src="`/img/flags/${$route.query.c.toLowerCase()}.svg`"
class="flag"
><Icon
v-else
icon="earth2"
/>Country</span>
<template v-slot:tooltip>
<input
v-model="countryQuery"
placeholder="Search"
class="input"
>
<Countries
v-if="!countryQuery"
:countries="topCountries"
:selected-country="country"
:update-value="updateValue"
/>
<Countries
:countries="filteredCountries"
:selected-country="country"
:update-value="updateValue"
/>
</template>
</Tooltip>
</li>
</ul>
</div>
@@ -225,12 +262,14 @@ import dayjs from 'dayjs';
import Actor from './tile.vue';
import Gender from './gender.vue';
import Checkbox from '../form/checkbox.vue';
import Countries from './countries.vue';
import RangeFilter from './filter-range.vue';
import SearchBar from '../search/bar.vue';
import Pagination from '../pagination/pagination.vue';
const toggleValues = [true, null, false];
const boobSizes = 'ABCDEFGHIJKZ'.split('');
const topCountries = ['AU', 'BR', 'DE', 'RU', 'GB', 'US'];
function updateFilters() {
this.$router.push({
@@ -238,13 +277,13 @@ function updateFilters() {
params: {
pageNumber: 1,
gender: this.gender,
letter: this.letter,
},
query: {
nb: this.naturalBoobs !== 1 ? this.naturalBoobs : undefined,
bs: this.boobSizeRequired ? this.boobSize.join(',') : undefined,
h: this.heightRequired ? this.height.join(',') : undefined,
w: this.weightRequired ? this.weight.join(',') : undefined,
c: this.country ? this.country : undefined,
age: this.ageRequired ? this.age.join(',') : undefined,
dob: this.dobRequired ? this.dob : undefined,
query: this.$route.query.query,
@@ -263,7 +302,7 @@ function updateValue(prop, value, load = true) {
async function fetchActors(scroll) {
const curatedGender = this.gender.replace('trans', 'transsexual');
const { actors, totalCount } = await this.$store.dispatch('fetchActors', {
const { actors, countries, totalCount } = await this.$store.dispatch('fetchActors', {
limit: this.limit,
pageNumber: Number(this.$route.params.pageNumber) || 1,
query: this.$route.query.query,
@@ -271,22 +310,32 @@ async function fetchActors(scroll) {
age: this.ageRequired && this.age,
dob: this.dobRequired && this.dob,
boobSize: this.boobSizeRequired && this.boobSize,
country: this.country,
naturalBoobs: toggleValues[this.naturalBoobs] ?? null,
height: this.heightRequired && this.height,
weight: this.weightRequired && this.weight,
});
const countriesByAlpha2 = countries.reduce((acc, country) => ({ ...acc, [country.alpha2]: country }), {});
this.actors = actors;
this.totalCount = totalCount;
this.countries = countries;
this.topCountries = [...(this.country && !topCountries.includes(this.country) ? [this.country] : []), ...topCountries].map(alpha2 => countriesByAlpha2[alpha2]);
if (scroll) {
this.$refs.content.scrollTop = 0;
// this.$refs.filter?.scrollIntoView();
}
}
function letter() {
return this.$route.params.letter || 'all';
function filteredCountries() {
const countryQueryExpression = new RegExp(this.countryQuery, 'i');
return this.countryQuery?.length > 0
? this.countries.filter(country => countryQueryExpression.test(country.name) || countryQueryExpression.test(country.alpha2))
: this.countries;
}
function gender() {
@@ -295,8 +344,7 @@ function gender() {
async function route(to, from) {
const scroll = to.params.pageNumber !== from.params.pageNumber
|| to.params.gender !== from.params.gender
|| to.params.letter !== from.params.letter;
|| to.params.gender !== from.params.gender;
await this.fetchActors(scroll);
}
@@ -311,6 +359,7 @@ export default {
components: {
Actor,
Checkbox,
Countries,
Gender,
RangeFilter,
SearchBar,
@@ -319,6 +368,9 @@ export default {
data() {
return {
actors: [],
countries: [],
topCountries: [],
countryQuery: null,
pageTitle: null,
totalCount: 0,
limit: 50,
@@ -329,6 +381,7 @@ export default {
boobSizes,
boobSize: this.$route.query.bs?.split(',') || ['A', 'Z'],
boobSizeRequired: !!this.$route.query.bs,
country: this.$route.query.c || null,
naturalBoobs: Number(this.$route.query.nb) || 1,
height: this.$route.query.h?.split(',').map(Number) || [50, 220],
heightRequired: !!this.$route.query.h,
@@ -337,8 +390,8 @@ export default {
};
},
computed: {
letter,
gender,
filteredCountries,
},
watch: {
$route: route,
@@ -386,11 +439,13 @@ export default {
.actors {
display: flex;
flex-direction: column;
flex-grow: 1;
}
.tiles {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr));
grid-template-rows: min-content;
grid-gap: .5rem;
padding: 1rem;
flex-grow: 1;
@@ -426,12 +481,10 @@ export default {
padding: 0 .5rem 0 0;
}
.letter,
.gender {
display: inline-block;
}
.letter-link,
.gender-link {
width: 2.5rem;
height: 2.5rem;
@@ -481,7 +534,8 @@ export default {
color: var(--shadow);
font-weight: bold;
.icon {
.icon,
.flag {
fill: var(--shadow);
width: 1rem;
height: 1rem;
@@ -664,7 +718,7 @@ export default {
}
}
@media(max-width: $breakpoint-kilo) {
@media(max-width: $breakpoint-mega) {
.filters {
flex-direction: column-reverse;
}
@@ -676,15 +730,33 @@ export default {
}
}
@media(max-width: $breakpoint) {
@media(max-width: $breakpoint-kilo) {
.filters {
margin: 1rem 0 0 0;
}
.filters-row {
flex-direction: column;
.filter {
padding: 0 1rem 1rem 1rem;
}
}
.filters-attributes {
display: flex;
flex-wrap: wrap;
justify-content: center;
}
.genders {
padding: 0;
margin: 0 0 1.5rem 0;
}
.tiles {
padding: .5rem 1rem 1rem 1rem;
}
}
@media(max-width: $breakpoint-micro) {
@@ -692,10 +764,4 @@ export default {
grid-template-columns: repeat(auto-fill, minmax(8rem, 1fr));
}
}
@media(max-width: $breakpoint-mini) {
.filter .icon {
display: none;
}
}
</style>