Added WP boob filter to actors page.
This commit is contained in:
DebaucheryLibrarian
@@ -58,6 +58,71 @@
|
||||
</ul>
|
||||
</nav>
|
||||
|
||||
<nav class="filter">
|
||||
<ul class="nolist">
|
||||
<li>
|
||||
<Tooltip class="filter boobs">
|
||||
<span class="filter-trigger"><Icon icon="boobs" />Boobs</span>
|
||||
|
||||
<template v-slot:tooltip>
|
||||
<div class="filter-section">
|
||||
<label class="filter-label off">Size</label>
|
||||
|
||||
<span class="range-container">
|
||||
<span
|
||||
class="range-label"
|
||||
@click="boobSize = 0"
|
||||
><Icon icon="boobs-small" /></span>
|
||||
|
||||
<input
|
||||
v-model="boobSize"
|
||||
class="range"
|
||||
type="range"
|
||||
min="0"
|
||||
max="10"
|
||||
>
|
||||
|
||||
<span
|
||||
class="range-label on"
|
||||
@click="boobSize = 10"
|
||||
><Icon icon="boobs-big" /></span>
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div class="filter-section">
|
||||
<label class="filter-label">Enhanced</label>
|
||||
|
||||
<span
|
||||
:class="{ [['off', 'default', 'on'][naturalBoobs]]: true }"
|
||||
class="range-container"
|
||||
>
|
||||
<span
|
||||
class="range-label off"
|
||||
@click="updateValue('naturalBoobs', 0)"
|
||||
>no</span>
|
||||
|
||||
<input
|
||||
v-model="naturalBoobs"
|
||||
class="range-toggle"
|
||||
type="range"
|
||||
min="0"
|
||||
max="2"
|
||||
value="1"
|
||||
@change="updateFilters"
|
||||
>
|
||||
|
||||
<span
|
||||
class="range-label on"
|
||||
@click="updateValue('naturalBoobs', 2)"
|
||||
>yes</span>
|
||||
</span>
|
||||
</div>
|
||||
</template>
|
||||
</Tooltip>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
|
||||
<Pagination
|
||||
ref="pagination"
|
||||
:items-total="totalCount"
|
||||
@@ -88,7 +153,24 @@ import Actor from './tile.vue';
|
||||
import Gender from './gender.vue';
|
||||
import Pagination from '../pagination/pagination.vue';
|
||||
|
||||
async function fetchActors() {
|
||||
const toggleValues = [true, undefined, false];
|
||||
|
||||
function updateFilters() {
|
||||
this.$router.push({
|
||||
name: 'actors',
|
||||
params: this.$route.params,
|
||||
query: {
|
||||
naturalBoobs: toggleValues[this.naturalBoobs],
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
function updateValue(prop, value) {
|
||||
this[prop] = value;
|
||||
this.updateFilters();
|
||||
}
|
||||
|
||||
async function fetchActors(scroll) {
|
||||
const curatedGender = this.gender.replace('trans', 'transsexual');
|
||||
|
||||
const { actors, totalCount } = await this.$store.dispatch('fetchActors', {
|
||||
@@ -96,12 +178,15 @@ async function fetchActors() {
|
||||
pageNumber: Number(this.$route.params.pageNumber) || 1,
|
||||
letter: this.letter.replace('all', ''),
|
||||
gender: curatedGender === 'other' ? null : curatedGender,
|
||||
naturalBoobs: toggleValues[this.naturalBoobs] ?? null,
|
||||
});
|
||||
|
||||
this.actors = actors;
|
||||
this.totalCount = totalCount;
|
||||
|
||||
this.$refs.pagination.$el.scrollIntoView();
|
||||
if (scroll) {
|
||||
this.$refs.pagination.$el.scrollIntoView();
|
||||
}
|
||||
}
|
||||
|
||||
function letter() {
|
||||
@@ -112,8 +197,12 @@ function gender() {
|
||||
return this.$route.params.gender || 'all';
|
||||
}
|
||||
|
||||
async function route() {
|
||||
await this.fetchActors();
|
||||
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;
|
||||
|
||||
await this.fetchActors(scroll);
|
||||
}
|
||||
|
||||
async function mounted() {
|
||||
@@ -129,12 +218,16 @@ export default {
|
||||
Pagination,
|
||||
},
|
||||
data() {
|
||||
const naturalBoobs = ['true', undefined, 'false'].indexOf(this.$route.query.naturalBoobs);
|
||||
|
||||
return {
|
||||
actors: [],
|
||||
pageTitle: null,
|
||||
totalCount: 0,
|
||||
limit: 50,
|
||||
letters: ['all'].concat(Array.from({ length: 26 }, (value, index) => String.fromCharCode(index + 97).toUpperCase())),
|
||||
boobSize: 0,
|
||||
naturalBoobs: naturalBoobs > -1 ? naturalBoobs : 1,
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
@@ -147,6 +240,8 @@ export default {
|
||||
mounted,
|
||||
methods: {
|
||||
fetchActors,
|
||||
updateFilters,
|
||||
updateValue,
|
||||
},
|
||||
};
|
||||
</script>
|
||||
@@ -200,7 +295,11 @@ export default {
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
padding: 0 1rem;
|
||||
margin: 1rem 0;
|
||||
margin: 0 0 1rem 0;
|
||||
|
||||
&:first-child {
|
||||
margin: 1rem 0;
|
||||
}
|
||||
}
|
||||
|
||||
.genders {
|
||||
@@ -260,6 +359,135 @@ export default {
|
||||
}
|
||||
}
|
||||
|
||||
.filter-trigger {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
color: var(--shadow);
|
||||
font-weight: bold;
|
||||
|
||||
.icon {
|
||||
fill: var(--shadow);
|
||||
width: 1.5rem;
|
||||
height: 1.5rem;
|
||||
margin: 0 .5rem 0 0;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
color: var(--shadow-strong);
|
||||
cursor: pointer;
|
||||
|
||||
.icon {
|
||||
fill: var(--shadow-strong);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.filter-section {
|
||||
&:not(:last-child) {
|
||||
margin: 0 0 .5rem 0;
|
||||
}
|
||||
}
|
||||
|
||||
.filter-label {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
padding: 0 .5rem;
|
||||
margin: .5rem 0 0 0;
|
||||
color: var(--shadow);
|
||||
font-weight: bold;
|
||||
font-size: .9rem;
|
||||
|
||||
.icon {
|
||||
margin: 0 .5rem 0 0;
|
||||
}
|
||||
}
|
||||
|
||||
.range-container {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: .5rem 0;
|
||||
|
||||
&.on {
|
||||
.range-label.on {
|
||||
color: var(--enabled);
|
||||
}
|
||||
|
||||
.range-toggle::-webkit-slider-thumb {
|
||||
background: var(--enabled);
|
||||
}
|
||||
}
|
||||
|
||||
&.off {
|
||||
.range-label.off {
|
||||
color: var(--disabled);
|
||||
}
|
||||
|
||||
.range-toggle::-webkit-slider-thumb {
|
||||
background: var(--disabled);
|
||||
}
|
||||
}
|
||||
|
||||
.icon {
|
||||
fill: var(--shadow);
|
||||
width: 1.5rem;
|
||||
height: 1.5rem;
|
||||
|
||||
&:hover {
|
||||
fill: var(--shadow-strong);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.range-label {
|
||||
width: 1.5rem;
|
||||
padding: 0 .5rem;
|
||||
color: var(--shadow);
|
||||
font-weight: bold;
|
||||
font-size: .9rem;
|
||||
|
||||
&.on {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
cursor: pointer;
|
||||
|
||||
&.on {
|
||||
color: var(--enabled);
|
||||
}
|
||||
|
||||
&.off {
|
||||
color: var(--disabled);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.range,
|
||||
.range-toggle {
|
||||
flex-grow: 1;
|
||||
height: 1rem;
|
||||
appearance: none;
|
||||
border-radius: .5rem;
|
||||
background: var(--shadow-hint);
|
||||
cursor: pointer;
|
||||
|
||||
&::-webkit-slider-thumb {
|
||||
appearance: none;
|
||||
background: var(--primary);
|
||||
width: 1rem;
|
||||
height: 1rem;
|
||||
border-radius: .5rem;
|
||||
}
|
||||
}
|
||||
|
||||
.range-toggle {
|
||||
background: radial-gradient(circle at center, var(--shadow-weak) 0, var(--shadow-weak) .5rem, var(--shadow-hint) .5rem);
|
||||
|
||||
&::-webkit-slider-thumb {
|
||||
background: #aaa;
|
||||
}
|
||||
}
|
||||
|
||||
@media(max-width: $breakpoint) {
|
||||
.genders {
|
||||
flex-direction: column;
|
||||
|
||||
Reference in New Issue
Block a user