forked from DebaucheryLibrarian/traxxx
Added tag filter dialog.
This commit is contained in:
parent
f27af19670
commit
7bbb2f3557
|
@ -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>
|
|
@ -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>
|
|
@ -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>
|
|
@ -147,8 +147,8 @@
|
||||||
</li>
|
</li>
|
||||||
|
|
||||||
<li
|
<li
|
||||||
class="menu-item disabled"
|
class="menu-item"
|
||||||
@click.stop
|
@click="showFilters = true"
|
||||||
>
|
>
|
||||||
<Icon icon="filter" />Filters
|
<Icon icon="filter" />Filters
|
||||||
</li>
|
</li>
|
||||||
|
@ -157,6 +157,11 @@
|
||||||
</template>
|
</template>
|
||||||
</Tooltip>
|
</Tooltip>
|
||||||
|
|
||||||
|
<Filters
|
||||||
|
v-if="showFilters"
|
||||||
|
@close="showFilters = false"
|
||||||
|
/>
|
||||||
|
|
||||||
<Search class="search-full" />
|
<Search class="search-full" />
|
||||||
|
|
||||||
<Tooltip
|
<Tooltip
|
||||||
|
@ -189,6 +194,7 @@
|
||||||
import { mapState } from 'vuex';
|
import { mapState } from 'vuex';
|
||||||
|
|
||||||
import Search from './search.vue';
|
import Search from './search.vue';
|
||||||
|
import Filters from './filters.vue';
|
||||||
|
|
||||||
import logo from '../../img/logo.svg';
|
import logo from '../../img/logo.svg';
|
||||||
|
|
||||||
|
@ -211,6 +217,7 @@ function setSfw(enabled) {
|
||||||
export default {
|
export default {
|
||||||
components: {
|
components: {
|
||||||
Search,
|
Search,
|
||||||
|
Filters,
|
||||||
},
|
},
|
||||||
props: {
|
props: {
|
||||||
toggleSidebar: {
|
toggleSidebar: {
|
||||||
|
@ -222,6 +229,7 @@ export default {
|
||||||
return {
|
return {
|
||||||
logo,
|
logo,
|
||||||
searching: false,
|
searching: false,
|
||||||
|
showFilters: false,
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
computed: {
|
computed: {
|
||||||
|
|
|
@ -0,0 +1,5 @@
|
||||||
|
.form-heading {
|
||||||
|
margin: 0 0 .5rem 0;
|
||||||
|
font-size: 1rem;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
|
@ -1,4 +1,5 @@
|
||||||
@import 'theme';
|
@import 'theme';
|
||||||
|
@import 'forms';
|
||||||
@import 'inputs';
|
@import 'inputs';
|
||||||
@import 'states';
|
@import 'states';
|
||||||
@import 'tooltip';
|
@import 'tooltip';
|
||||||
|
|
|
@ -159,7 +159,7 @@ function initEntitiesActions(store, router) {
|
||||||
orderBy,
|
orderBy,
|
||||||
afterTime: store.getters.after,
|
afterTime: store.getters.after,
|
||||||
beforeTime: store.getters.before,
|
beforeTime: store.getters.before,
|
||||||
exclude: store.state.ui.filter,
|
exclude: store.state.ui.tagFilter,
|
||||||
});
|
});
|
||||||
|
|
||||||
if (!entity) {
|
if (!entity) {
|
||||||
|
|
|
@ -15,8 +15,11 @@ import Container from '../components/container/container.vue';
|
||||||
import Icon from '../components/icon/icon.vue';
|
import Icon from '../components/icon/icon.vue';
|
||||||
import Footer from '../components/footer/footer.vue';
|
import Footer from '../components/footer/footer.vue';
|
||||||
import Tooltip from '../components/tooltip/tooltip.vue';
|
import Tooltip from '../components/tooltip/tooltip.vue';
|
||||||
|
import Dialog from '../components/dialog/dialog.vue';
|
||||||
|
|
||||||
async function init() {
|
async function init() {
|
||||||
|
let uid = 0;
|
||||||
|
|
||||||
const store = initStore(router);
|
const store = initStore(router);
|
||||||
const app = createApp(Container);
|
const app = createApp(Container);
|
||||||
const events = mitt();
|
const events = mitt();
|
||||||
|
@ -38,6 +41,7 @@ async function init() {
|
||||||
Footer,
|
Footer,
|
||||||
Tooltip,
|
Tooltip,
|
||||||
'v-popover': Tooltip,
|
'v-popover': Tooltip,
|
||||||
|
Dialog,
|
||||||
},
|
},
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
|
@ -60,6 +64,10 @@ async function init() {
|
||||||
isAfter: (dateA, dateB) => dayjs(dateA).isAfter(dateB),
|
isAfter: (dateA, dateB) => dayjs(dateA).isAfter(dateB),
|
||||||
isBefore: (dateA, dateB) => dayjs(dateA).isBefore(dateB),
|
isBefore: (dateA, dateB) => dayjs(dateA).isBefore(dateB),
|
||||||
},
|
},
|
||||||
|
beforeCreate() {
|
||||||
|
this.uid = uid;
|
||||||
|
uid += 1;
|
||||||
|
},
|
||||||
});
|
});
|
||||||
|
|
||||||
app.directive('tooltip', {
|
app.directive('tooltip', {
|
||||||
|
|
|
@ -24,7 +24,7 @@ function initReleasesActions(store, router) {
|
||||||
after,
|
after,
|
||||||
before,
|
before,
|
||||||
orderBy,
|
orderBy,
|
||||||
exclude: store.state.ui.filter,
|
exclude: store.state.ui.tagFilter,
|
||||||
});
|
});
|
||||||
|
|
||||||
return {
|
return {
|
||||||
|
|
|
@ -99,7 +99,7 @@ function initTagsActions(store, _router) {
|
||||||
before,
|
before,
|
||||||
orderBy: orderBy === 'DATE_DESC' ? 'DATE_DESC' : 'DATE_ASC',
|
orderBy: orderBy === 'DATE_DESC' ? 'DATE_DESC' : 'DATE_ASC',
|
||||||
offset: Math.max(0, (pageNumber - 1)) * limit,
|
offset: Math.max(0, (pageNumber - 1)) * limit,
|
||||||
exclude: store.state.ui.filter,
|
exclude: store.state.ui.tagFilter.filter(tagFilter => tagFilter !== tagSlug),
|
||||||
});
|
});
|
||||||
|
|
||||||
return {
|
return {
|
||||||
|
|
|
@ -2,9 +2,11 @@ import { graphql } from '../api';
|
||||||
import { curateRelease, curateActor } from '../curate';
|
import { curateRelease, curateActor } from '../curate';
|
||||||
|
|
||||||
function initUiActions(_store, _router) {
|
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) {
|
function setRange({ commit }, range) {
|
||||||
|
@ -184,7 +186,7 @@ function initUiActions(_store, _router) {
|
||||||
|
|
||||||
return {
|
return {
|
||||||
search,
|
search,
|
||||||
setFilter,
|
setTagFilter,
|
||||||
setRange,
|
setRange,
|
||||||
setBatch,
|
setBatch,
|
||||||
setSfw,
|
setSfw,
|
||||||
|
|
|
@ -1,5 +1,5 @@
|
||||||
function setFilter(state, filter) {
|
function setTagFilter(state, tagFilter) {
|
||||||
state.filter = filter;
|
state.tagFilter = tagFilter;
|
||||||
}
|
}
|
||||||
|
|
||||||
function setRange(state, range) {
|
function setRange(state, range) {
|
||||||
|
@ -19,7 +19,7 @@ function setTheme(state, theme) {
|
||||||
}
|
}
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
setFilter,
|
setTagFilter,
|
||||||
setRange,
|
setRange,
|
||||||
setBatch,
|
setBatch,
|
||||||
setSfw,
|
setSfw,
|
||||||
|
|
|
@ -1,10 +1,10 @@
|
||||||
const storedFilter = localStorage.getItem('filter');
|
const storedTagFilter = localStorage.getItem('tagFilter');
|
||||||
const storedBatch = localStorage.getItem('batch');
|
const storedBatch = localStorage.getItem('batch');
|
||||||
const storedSfw = localStorage.getItem('sfw');
|
const storedSfw = localStorage.getItem('sfw');
|
||||||
const storedTheme = localStorage.getItem('theme');
|
const storedTheme = localStorage.getItem('theme');
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
filter: storedFilter ? storedFilter.split(',') : [],
|
tagFilter: storedTagFilter ? storedTagFilter.split(',') : [],
|
||||||
range: 'latest',
|
range: 'latest',
|
||||||
batch: storedBatch || 'all',
|
batch: storedBatch || 'all',
|
||||||
sfw: storedSfw === 'true' || false,
|
sfw: storedSfw === 'true' || false,
|
||||||
|
|
|
@ -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>
|
After Width: | Height: | Size: 1018 B |
|
@ -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>
|
After Width: | Height: | Size: 326 B |
|
@ -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>
|
After Width: | Height: | Size: 339 B |
|
@ -709,7 +709,7 @@ const tags = [
|
||||||
{
|
{
|
||||||
name: 'pissing',
|
name: 'pissing',
|
||||||
slug: 'pissing',
|
slug: 'pissing',
|
||||||
priority: 6,
|
priority: 8,
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: 'POV',
|
name: 'POV',
|
||||||
|
|
|
@ -6,7 +6,7 @@ function scrapeAll(scenes) {
|
||||||
return scenes.map(({ query }) => {
|
return scenes.map(({ query }) => {
|
||||||
const release = {};
|
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.url = `https://kink.com${href}`;
|
||||||
|
|
||||||
release.shootId = href.split('/').slice(-1)[0];
|
release.shootId = href.split('/').slice(-1)[0];
|
||||||
|
|
Loading…
Reference in New Issue