Added WP boob filter to actors page.

assets/components/actors/actors.vue

@@ -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;

assets/components/container/container.vue

@@ -28,6 +28,7 @@
 		<div
 			ref="content"
 			class="content"
+			@scroll="scroll"
 		>
 			<router-view @scroll="scrollToTop" />
 		</div>
@@ -76,6 +77,10 @@ function resize(event) {
 	this.events.emit('resize', event);
 }
 
+function scroll(event) {
+	this.events.emit('scroll', event);
+}
+
 function scrollToTop() {
 	this.$refs.content.scrollTop = 0;
 }
@@ -112,6 +117,7 @@ export default {
 		setConsent,
 		blur,
 		resize,
+		scroll,
 		scrollToTop,
 	},
 };

assets/components/filters/filter-bar.vue

@@ -126,43 +126,6 @@ export default {
 <style lang="scss">
 @import 'breakpoints';
 
-.filter {
-	color: var(--shadow);
-	display: inline-flex;
-	align-items: center;
-
-	.icon {
-		fill: var(--shadow);
-		margin: -.1rem 0 0 0;
-	}
-
-	&:hover {
-		cursor: pointer;
-
-		.applied {
-			color: var(--shadow-strong);
-		}
-
-		.icon {
-			fill: var(--shadow-strong);
-		}
-	}
-}
-
-.filter-applied {
-	flex-grow: 1;
-	padding: .75rem .5rem;
-	font-size: 1rem;
-	white-space: nowrap;
-	overflow: hidden;
-	text-overflow: ellipsis;
-	text-align: right;
-
-	&.empty {
-		color: var(--shadow);
-	}
-}
-
 .filter-mode {
 	width: 100%;
 	background: none;
@@ -299,6 +262,44 @@ export default {
     }
 }
 
+::v-deep(.filter) {
+	color: var(--shadow);
+	display: inline-flex;
+	align-items: center;
+
+	.filter-applied {
+		flex-grow: 1;
+		padding: .75rem .5rem;
+		font-size: 1rem;
+		white-space: nowrap;
+		overflow: hidden;
+		text-overflow: ellipsis;
+		text-align: right;
+
+		&.empty {
+			color: var(--shadow);
+		}
+	}
+
+	.icon {
+		fill: var(--shadow);
+		margin: -.1rem 0 0 0;
+	}
+
+	&:hover {
+		cursor: pointer;
+
+		.applied {
+			color: var(--shadow-strong);
+		}
+
+		.icon {
+			fill: var(--shadow-strong);
+		}
+	}
+}
+
+
 .filters {
 	flex-shrink: 0;
 }

assets/components/tooltip/tooltip.vue

@@ -14,6 +14,7 @@
 				ref="tooltip"
 				class="tooltip-wrapper"
 				:style="{ transform: `translate3d(${tooltipX}px, ${tooltipY}px, 0)` }"
+				@click.stop
 			>
 				<div class="tooltip-inner">
 					<div class="tooltip">
@@ -114,6 +115,10 @@ function mounted() {
 	this.events.on('resize', () => {
 		this.calculate();
 	});
+
+	this.events.on('scroll', () => {
+		this.calculate();
+	});
 }
 
 export default {