Added tag filter dialog.

assets/components/dialog/dialog.vue

@@ -0,0 +1,106 @@
+<template>
+	<teleport to="body">
+		<div
+			class="container"
+			@click="$emit('close')"
+		>
+			<div
+				class="dialog"
+				@click.stop
+			>
+				<div
+					v-if="title || $slots.header"
+					class="header"
+				>
+					<slot name="header">
+						<h2 class="header-title">{{ title }}</h2>
+					</slot>
+
+					<Icon
+						icon="cross2"
+						class="close"
+						@click="$emit('close')"
+					/>
+				</div>
+
+				<div class="body">
+					<slot />
+				</div>
+			</div>
+		</div>
+	</teleport>
+</template>
+
+<script>
+export default {
+	props: {
+		title: {
+			type: String,
+			default: null,
+		},
+	},
+	emits: ['close'],
+};
+</script>
+
+<style lang="scss" scoped>
+.container {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	position: fixed;
+	top: 0;
+	left: 0;
+	width: 100%;
+	height: 100%;
+	box-sizing: border-box;
+	padding: 1rem;
+	background: var(--darken);
+	z-index: 10;
+}
+
+.dialog {
+	display: flex;
+	flex-direction: column;
+	max-width: 100%;
+	max-height: 100%;
+	background: var(--background);
+	box-shadow: 0 0 3px var(--darken-weak);
+}
+
+.header {
+	display: flex;
+	justify-content: space-between;
+	align-items: center;
+	background: var(--primary);
+	color: var(--text-light);
+	font-size: 1.5rem;
+	font-weight: bold;
+	text-transform: capitalize;
+}
+
+.header-title {
+	padding: .5rem .5rem .5rem 1rem;
+	margin: 0;
+	overflow: hidden;
+	text-overflow: ellipsis;
+	font-size: 1.25rem;
+}
+
+.close {
+	height: 100%;
+	padding: 0 1rem;
+	fill: var(--lighten);
+
+	&:hover {
+		fill: var(--lighten-strong);
+		cursor: pointer;
+	}
+}
+
+.body {
+	padding: 1rem;
+	flex-grow: 1;
+	overflow: auto;
+}
+</style>

assets/components/form/checkbox.vue

@@ -0,0 +1,99 @@
+<template>
+	<label class="check-container noselect">
+		<span class="check-label">{{ label }}</span>
+
+		<input
+			v-show="false"
+			:id="`checkbox-${uid}`"
+			:checked="checked"
+			type="checkbox"
+			class="check-checkbox"
+			@change="$emit('change', $event.target.checked)"
+		>
+
+		<label
+			:for="`checkbox-${uid}`"
+			class="check"
+		/>
+	</label>
+</template>
+
+<script>
+export default {
+	props: {
+		checked: {
+			type: Boolean,
+			default: false,
+		},
+		label: {
+			type: String,
+			default: null,
+		},
+	},
+	emits: ['change'],
+};
+</script>
+
+<style lang="scss" scoped>
+@import 'breakpoints';
+
+.check-container {
+    display: flex;
+    justify-content: space-between;
+    cursor: pointer;
+}
+
+.check {
+    width: 1.25rem;
+    height: 1.25rem;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+	flex-shrink: 0;
+	position: relative;
+	background-color: var(--shadow-hint);
+    cursor: pointer;
+    transition: background .15s ease;
+
+    &::after {
+        content: '';
+        width: .5rem;
+        height: .3rem;
+        border: solid 2px var(--text-light);
+        border-top: none;
+        border-right: none;
+        margin: -.2rem 0 0 0;
+        transform: rotateZ(-45deg) scaleX(0);
+        transition: transform .15s ease;
+    }
+}
+
+.check-cross .check::before {
+	content: '';
+	width: 100%;
+	height: 100%;
+	position: absolute;
+	background: url('/img/icons/cross3.svg') no-repeat center/80%;
+	opacity: .15;
+	transition: transform .1s ease;
+}
+
+.check-checkbox:checked + .check {
+    background: var(--primary);
+
+    &::after {
+        transform: rotateZ(-45deg) scaleX(1);
+    }
+
+	&::before {
+        transform: scaleX(0);
+	}
+}
+
+.check-label {
+	overflow: hidden;
+	text-transform: capitalize;
+	text-overflow: ellipsis;
+	margin: 0 .5rem 0 0;
+}
+</style>

assets/components/header/filters.vue

@@ -0,0 +1,69 @@
+<template>
+	<Dialog
+		title="filters"
+		@close="$emit('close')"
+	>
+		<h3 class="form-heading">Show me</h3>
+
+		<ul class="tags nolist">
+			<li
+				v-for="tag in tags"
+				:key="tag"
+				class="tags-item"
+			>
+				<Checkbox
+					:checked="!tagFilter.includes(tag)"
+					:label="tag"
+					class="tag"
+					@change="(state) => filterTag(tag, state)"
+				/>
+			</li>
+		</ul>
+	</Dialog>
+</template>
+
+<script>
+import Checkbox from '../form/checkbox.vue';
+
+function tagFilter() {
+	return this.$store.state.ui.tagFilter;
+}
+
+function filterTag(tag, isChecked) {
+	if (isChecked) {
+		this.$store.dispatch('setTagFilter', this.tagFilter.filter(filteredTag => filteredTag !== tag));
+	} else {
+		this.$store.dispatch('setTagFilter', this.tagFilter.concat(tag));
+	}
+}
+
+export default {
+	components: {
+		Checkbox,
+	},
+	data() {
+		return {
+			tags: ['anal', 'gay', 'transsexual', 'bisexual', 'pissing'],
+		};
+	},
+	computed: {
+		tagFilter,
+	},
+	emits: ['close'],
+	methods: {
+		filterTag,
+	},
+};
+</script>
+
+<style lang="scss" scoped>
+.tags-item {
+	width: 20rem;
+	max-width: 100%;
+	display: block;
+}
+
+.tag {
+	padding: .5rem 0;
+}
+</style>

assets/components/header/header.vue

@@ -147,8 +147,8 @@
 							</li>
 
 							<li
-								class="menu-item disabled"
+								class="menu-item"
-								@click.stop
+								@click="showFilters = true"
 							>
 								<Icon icon="filter" />Filters
 							</li>
@@ -157,6 +157,11 @@
 				</template>
 			</Tooltip>
 
+			<Filters
+				v-if="showFilters"
+				@close="showFilters = false"
+			/>
+
 			<Search class="search-full" />
 
 			<Tooltip
@@ -189,6 +194,7 @@
 import { mapState } from 'vuex';
 
 import Search from './search.vue';
+import Filters from './filters.vue';
 
 import logo from '../../img/logo.svg';
 
@@ -211,6 +217,7 @@ function setSfw(enabled) {
 export default {
 	components: {
 		Search,
+		Filters,
 	},
 	props: {
 		toggleSidebar: {
@@ -222,6 +229,7 @@ export default {
 		return {
 			logo,
 			searching: false,
+			showFilters: false,
 		};
 	},
 	computed: {

assets/css/_forms.scss

@@ -0,0 +1,5 @@
+.form-heading {
+	margin: 0 0 .5rem 0;
+	font-size: 1rem;
+	font-weight: bold;
+}

assets/css/style.scss

@@ -1,4 +1,5 @@
 @import 'theme';
+@import 'forms';
 @import 'inputs';
 @import 'states';
 @import 'tooltip';

assets/js/entities/actions.js

@@ -159,7 +159,7 @@ function initEntitiesActions(store, router) {
 			orderBy,
 			afterTime: store.getters.after,
 			beforeTime: store.getters.before,
-			exclude: store.state.ui.filter,
+			exclude: store.state.ui.tagFilter,
 		});
 
 		if (!entity) {

assets/js/main.js

@@ -15,8 +15,11 @@ import Container from '../components/container/container.vue';
 import Icon from '../components/icon/icon.vue';
 import Footer from '../components/footer/footer.vue';
 import Tooltip from '../components/tooltip/tooltip.vue';
+import Dialog from '../components/dialog/dialog.vue';
 
 async function init() {
+	let uid = 0;
+
 	const store = initStore(router);
 	const app = createApp(Container);
 	const events = mitt();
@@ -38,6 +41,7 @@ async function init() {
 			Footer,
 			Tooltip,
 			'v-popover': Tooltip,
+			Dialog,
 		},
 		data() {
 			return {
@@ -60,6 +64,10 @@ async function init() {
 			isAfter: (dateA, dateB) => dayjs(dateA).isAfter(dateB),
 			isBefore: (dateA, dateB) => dayjs(dateA).isBefore(dateB),
 		},
+		beforeCreate() {
+			this.uid = uid;
+			uid += 1;
+		},
 	});
 
 	app.directive('tooltip', {

assets/js/releases/actions.js

@@ -24,7 +24,7 @@ function initReleasesActions(store, router) {
 			after,
 			before,
 			orderBy,
-			exclude: store.state.ui.filter,
+			exclude: store.state.ui.tagFilter,
 		});
 
 		return {

assets/js/tags/actions.js

@@ -99,7 +99,7 @@ function initTagsActions(store, _router) {
 			before,
 			orderBy: orderBy === 'DATE_DESC' ? 'DATE_DESC' : 'DATE_ASC',
 			offset: Math.max(0, (pageNumber - 1)) * limit,
-			exclude: store.state.ui.filter,
+			exclude: store.state.ui.tagFilter.filter(tagFilter => tagFilter !== tagSlug),
 		});
 
 		return {

assets/js/ui/actions.js

@@ -2,9 +2,11 @@ import { graphql } from '../api';
 import { curateRelease, curateActor } from '../curate';
 
 function initUiActions(_store, _router) {
-	function setFilter({ commit }, filter) {
+	function setTagFilter({ commit }, filter) {
-		commit('setFilter', filter);
+		const tagFilter = Array.from(new Set(filter));
-		localStorage.setItem('filter', filter);
+
+		commit('setTagFilter', tagFilter);
+		localStorage.setItem('tagFilter', tagFilter);
 	}
 
 	function setRange({ commit }, range) {
@@ -184,7 +186,7 @@ function initUiActions(_store, _router) {
 
 	return {
 		search,
-		setFilter,
+		setTagFilter,
 		setRange,
 		setBatch,
 		setSfw,

assets/js/ui/mutations.js

@@ -1,5 +1,5 @@
-function setFilter(state, filter) {
+function setTagFilter(state, tagFilter) {
-	state.filter = filter;
+	state.tagFilter = tagFilter;
 }
 
 function setRange(state, range) {
@@ -19,7 +19,7 @@ function setTheme(state, theme) {
 }
 
 export default {
-	setFilter,
+	setTagFilter,
 	setRange,
 	setBatch,
 	setSfw,

assets/js/ui/state.js

@@ -1,10 +1,10 @@
-const storedFilter = localStorage.getItem('filter');
+const storedTagFilter = localStorage.getItem('tagFilter');
 const storedBatch = localStorage.getItem('batch');
 const storedSfw = localStorage.getItem('sfw');
 const storedTheme = localStorage.getItem('theme');
 
 export default {
-	filter: storedFilter ? storedFilter.split(',') : [],
+	tagFilter: storedTagFilter ? storedTagFilter.split(',') : [],
 	range: 'latest',
 	batch: storedBatch || 'all',
 	sfw: storedSfw === 'true' || false,

public/img/icons/cross.svg

@@ -0,0 +1,5 @@
+<!-- Generated by IcoMoon.io -->
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
+<title>cross</title>
+<path d="M15.854 12.854c-0-0-0-0-0-0l-4.854-4.854 4.854-4.854c0-0 0-0 0-0 0.052-0.052 0.090-0.113 0.114-0.178 0.066-0.178 0.028-0.386-0.114-0.529l-2.293-2.293c-0.143-0.143-0.351-0.181-0.529-0.114-0.065 0.024-0.126 0.062-0.178 0.114 0 0-0 0-0 0l-4.854 4.854-4.854-4.854c-0-0-0-0-0-0-0.052-0.052-0.113-0.090-0.178-0.114-0.178-0.066-0.386-0.029-0.529 0.114l-2.293 2.293c-0.143 0.143-0.181 0.351-0.114 0.529 0.024 0.065 0.062 0.126 0.114 0.178 0 0 0 0 0 0l4.854 4.854-4.854 4.854c-0 0-0 0-0 0-0.052 0.052-0.090 0.113-0.114 0.178-0.066 0.178-0.029 0.386 0.114 0.529l2.293 2.293c0.143 0.143 0.351 0.181 0.529 0.114 0.065-0.024 0.126-0.062 0.178-0.114 0-0 0-0 0-0l4.854-4.854 4.854 4.854c0 0 0 0 0 0 0.052 0.052 0.113 0.090 0.178 0.114 0.178 0.066 0.386 0.029 0.529-0.114l2.293-2.293c0.143-0.143 0.181-0.351 0.114-0.529-0.024-0.065-0.062-0.126-0.114-0.178z"></path>
+</svg>

public/img/icons/cross2.svg

@@ -0,0 +1,5 @@
+<!-- Generated by IcoMoon.io -->
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
+<title>cross2</title>
+<path d="M13.957 3.457l-1.414-1.414-4.543 4.543-4.543-4.543-1.414 1.414 4.543 4.543-4.543 4.543 1.414 1.414 4.543-4.543 4.543 4.543 1.414-1.414-4.543-4.543z"></path>
+</svg>

public/img/icons/cross3.svg

@@ -0,0 +1,5 @@
+<!-- Generated by IcoMoon.io -->
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
+<title>cross3</title>
+<path d="M12.207 10.793l-1.414 1.414-2.793-2.793-2.793 2.793-1.414-1.414 2.793-2.793-2.793-2.793 1.414-1.414 2.793 2.793 2.793-2.793 1.414 1.414-2.793 2.793 2.793 2.793z"></path>
+</svg>

seeds/00_tags.js

@@ -709,7 +709,7 @@ const tags = [
 	{
 		name: 'pissing',
 		slug: 'pissing',
-		priority: 6,
+		priority: 8,
 	},
 	{
 		name: 'POV',

src/scrapers/kink.js

@@ -6,7 +6,7 @@ function scrapeAll(scenes) {
 	return scenes.map(({ query }) => {
 		const release = {};
 
-		const href = query.url('.shoot-thumb-title a');
+		const href = query.url('.shoot-thumb-info > a');
 		release.url = `https://kink.com${href}`;
 
 		release.shootId = href.split('/').slice(-1)[0];