Changed range filter to routes for every view.

This commit is contained in:
ThePendulum 2020-05-09 01:10:07 +02:00
parent 525995615a
commit de5b729c0b
16 changed files with 125 additions and 73 deletions

View File

@ -254,7 +254,7 @@ import Social from './social.vue';
async function fetchActor() {
this.actor = await this.$store.dispatch('fetchActorBySlug', {
slug: this.$route.params.actorSlug,
actorSlug: this.$route.params.actorSlug,
range: this.$route.params.range,
});
}

View File

@ -2,26 +2,26 @@
<div class="filter-bar noselect">
<span class="sort">
<router-link
:to="{ name: $route.name, params: { ...$route.params, range: 'latest' } }"
:class="{ active: range === 'latest' }"
:to="{ name: isHome ? 'latest' : $route.name, params: { ...$route.params, range: 'latest' } }"
:class="{ active: $route.name === 'latest' || range === 'latest' }"
class="range range-button"
>Latest</router-link>
<router-link
:to="{ name: $route.name, params: { ...$route.params, range: 'upcoming' } }"
:class="{ active: range === 'upcoming' }"
:to="{ name: isHome ? 'upcoming' : $route.name, params: { ...$route.params, range: 'upcoming' } }"
:class="{ active: $route.name === 'upcoming' || range === 'upcoming' }"
class="range-button"
>Upcoming</router-link>
<router-link
:to="{ name: $route.name, params: { ...$route.params, range: 'new' } }"
:class="{ active: range === 'new' }"
:to="{ name: isHome ? 'new' : $route.name, params: { ...$route.params, range: 'new' } }"
:class="{ active: $route.name === 'new' || range === 'new' }"
class="range-button"
>New</router-link>
<!--
<router-link
:to="{ name: 'home', params: { range: 'all' } }"
:to="{ name: $route.name, params: { ...$route.params, range: 'all' } }"
:class="{ active: range === 'all' }"
class="range-button"
>All</router-link>
@ -97,6 +97,10 @@ export default {
type: Function,
default: null,
},
isHome: {
type: Boolean,
default: false,
},
},
computed: {
...mapState({

View File

@ -8,7 +8,7 @@
/>
<router-link
to="/home"
to="/"
class="logo-link"
><h1 class="header-logo">
<div

View File

@ -1,6 +1,9 @@
<template>
<div class="content">
<FilterBar :fetch-releases="fetchReleases" />
<FilterBar
:fetch-releases="fetchReleases"
:is-home="true"
/>
<div class="content-inner">
<Releases :releases="releases" />
@ -15,7 +18,7 @@ import Releases from '../releases/releases.vue';
async function fetchReleases() {
this.releases = await this.$store.dispatch('fetchReleases', {
limit: (this.$route.query && this.$route.query.limit && Number(this.$route.query.limit)) || 30,
range: this.$route.params.range,
range: this.$route.name,
});
}

View File

@ -128,7 +128,10 @@ import Sites from '../sites/sites.vue';
import Network from '../tile/network.vue';
async function fetchNetwork() {
this.network = await this.$store.dispatch('fetchNetworks', this.$route.params.networkSlug);
this.network = await this.$store.dispatch('fetchNetworkBySlug', {
networkSlug: this.$route.params.networkSlug,
range: this.$route.params.range,
});
if (this.network.studios) {
this.studios = this.network.studios.map(studio => ({

View File

@ -6,6 +6,7 @@
><span class="range">{{ range }}</span> releases for '{{ context }}'</h3>
<ul
:key="sfw"
v-lazy-container="{ selector: '.thumbnail' }"
class="nolist tiles"
>
@ -40,6 +41,10 @@ function range() {
return this.$store.state.ui.range;
}
function sfw() {
return this.$store.state.ui.sfw;
}
export default {
components: {
ReleaseTile,
@ -60,6 +65,7 @@ export default {
},
computed: {
range,
sfw,
},
};
</script>

View File

@ -54,7 +54,11 @@ import FilterBar from '../header/filter-bar.vue';
import Releases from '../releases/releases.vue';
async function fetchSite() {
this.site = await this.$store.dispatch('fetchSites', { siteSlug: this.$route.params.siteSlug });
this.site = await this.$store.dispatch('fetchSiteBySlug', {
siteSlug: this.$route.params.siteSlug,
range: this.$route.params.range,
});
this.releases = this.site.releases;
}

View File

@ -62,7 +62,10 @@ import Releases from '../releases/releases.vue';
const converter = new Converter();
async function fetchReleases() {
this.tag = await this.$store.dispatch('fetchTags', { tagSlug: this.$route.params.tagSlug });
this.tag = await this.$store.dispatch('fetchTagBySlug', {
tagSlug: this.$route.params.tagSlug,
range: this.$route.params.range,
});
this.hasMedia = this.tag.poster || this.tag.photos.length > 0;
this.description = this.tag.description && converter.makeHtml(escapeHtml(this.tag.description));

View File

@ -82,8 +82,8 @@
<img
v-for="cover in release.covers"
:key="cover.id"
:data-src="`/media/${cover.thumbnail}`"
:data-loading="`/media/${cover.lazy}`"
:data-src="sfw ? `/img/${cover.sfw.thumbnail}` : `/media/${cover.thumbnail}`"
:data-loading="sfw ? `/img/${cover.sfw.lazy}` : `/media/${cover.lazy}`"
:alt="release.title"
class="thumbnail cover"
>

View File

@ -46,7 +46,7 @@ function curateActor(actor) {
}
function initActorActions(store, _router) {
async function fetchActorBySlug({ _commit }, { slug, limit = 100, range = 'latest' }) {
async function fetchActorBySlug({ _commit }, { actorSlug, limit = 100, range = 'latest' }) {
const { before, after, orderBy } = getDateRange(range);
const { actor } = await graphql(`
@ -171,7 +171,7 @@ function initActorActions(store, _router) {
}
}
`, {
actorSlug: slug,
actorSlug,
limit,
after,
before,

View File

@ -84,6 +84,7 @@ const releasePosterFragment = `
sfw: sfwMedia {
id
thumbnail
lazy
path
comment
}
@ -102,6 +103,7 @@ const releaseCoversFragment = `
sfw: sfwMedia {
id
thumbnail
lazy
path
comment
}
@ -115,10 +117,12 @@ const releasePhotosFragment = `
index
path
thumbnail
lazy
comment
sfw: sfwMedia {
id
thumbnail
lazy
path
comment
}

View File

@ -1,9 +1,12 @@
import { graphql } from '../api';
import { sitesFragment, releaseFields } from '../fragments';
import { curateNetwork } from '../curate';
import getDateRange from '../get-date-range';
function initNetworksActions(store, _router) {
async function fetchNetworkBySlug(networkSlug, limit = 100) {
async function fetchNetworkBySlug({ _commit }, { networkSlug, limit = 100, range = 'latest' }) {
const { before, after, orderBy } = getDateRange(range);
const { network, releases } = await graphql(`
query Network(
$networkSlug: String!
@ -106,22 +109,18 @@ function initNetworksActions(store, _router) {
`, {
networkSlug,
limit,
after: store.getters.after,
before: store.getters.before,
after,
before,
orderBy,
afterTime: store.getters.after,
beforeTime: store.getters.before,
orderBy: store.getters.orderBy,
exclude: store.state.ui.filter,
});
return curateNetwork(network, releases);
}
async function fetchNetworks({ _commit }, networkSlug) {
if (networkSlug) {
return fetchNetworkBySlug(networkSlug);
}
async function fetchNetworks({ _commit }) {
const { networks } = await graphql(`
query Networks {
networks(orderBy: NAME_ASC) {
@ -138,6 +137,7 @@ function initNetworksActions(store, _router) {
}
return {
fetchNetworkBySlug,
fetchNetworks,
};
}

View File

@ -19,25 +19,29 @@ const routes = [
{
path: '/',
redirect: {
name: 'home',
params: {
range: 'latest',
},
name: 'latest',
},
},
{
path: '/home',
redirect: {
name: 'home',
params: {
range: 'latest',
},
name: 'latest',
},
},
{
path: '/:range',
path: '/latest',
component: Home,
name: 'home',
name: 'latest',
},
{
path: '/upcoming',
component: Home,
name: 'upcoming',
},
{
path: '/new',
component: Home,
name: 'new',
},
{
path: '/scene/:releaseId/:releaseSlug?',
@ -69,16 +73,52 @@ const routes = [
path: '/site/:siteSlug',
component: Site,
name: 'site',
redirect: from => ({
name: 'siteRange',
params: {
...from.params,
range: 'latest',
},
}),
},
{
path: '/site/:siteSlug/:range',
component: Site,
name: 'siteRange',
},
{
path: '/network/:networkSlug',
component: Network,
name: 'network',
redirect: from => ({
name: 'networkRange',
params: {
...from.params,
range: 'latest',
},
}),
},
{
path: '/network/:networkSlug/:range',
component: Network,
name: 'networkRange',
},
{
path: '/tag/:tagSlug',
component: Tag,
name: 'tag',
redirect: from => ({
name: 'tagRange',
params: {
...from.params,
range: 'latest',
},
}),
},
{
path: '/tag/:tagSlug/:range',
component: Tag,
name: 'tagRange',
},
{
path: '/actors/:gender?/:letter?',

View File

@ -1,9 +1,12 @@
import { graphql } from '../api';
import { releasesFragment } from '../fragments';
import { curateSite } from '../curate';
import getDateRange from '../get-date-range';
function initSitesActions(store, _router) {
async function fetchSiteBySlug(siteSlug, limit = 100) {
async function fetchSiteBySlug({ _commit }, { siteSlug, limit = 100, range = 'latest' }) {
const { before, after, orderBy } = getDateRange(range);
const { site } = await graphql(`
query Site(
$siteSlug: String!,
@ -36,21 +39,17 @@ function initSitesActions(store, _router) {
`, {
siteSlug,
limit,
after: store.getters.after,
before: store.getters.before,
after,
before,
orderBy,
isNew: store.getters.isNew,
orderBy: store.getters.orderBy,
exclude: store.state.ui.filter,
});
return curateSite(site);
}
async function fetchSites({ _commit }, { siteSlug, limit = 100 }) {
if (siteSlug) {
return fetchSiteBySlug(siteSlug, limit);
}
async function fetchSites({ _commit }, { limit = 100 }) {
const { sites } = await graphql(`
query Sites(
$actorSlug: String!
@ -102,6 +101,7 @@ function initSitesActions(store, _router) {
}
return {
fetchSiteBySlug,
fetchSites,
searchSites,
};

View File

@ -3,9 +3,12 @@ import {
releaseFields,
} from '../fragments';
import { curateTag } from '../curate';
import getDateRange from '../get-date-range';
function initTagsActions(store, _router) {
async function fetchTagBySlug(tagSlug, limit = 100) {
async function fetchTagBySlug({ _commit }, { tagSlug, limit = 100, range = 'latest' }) {
const { before, after, orderBy } = getDateRange(range);
const { tagBySlug } = await graphql(`
query Tag(
$tagSlug:String!
@ -84,9 +87,9 @@ function initTagsActions(store, _router) {
`, {
tagSlug,
limit,
after: store.getters.after,
before: store.getters.before,
orderBy: store.getters.isNew,
after,
before,
orderBy: orderBy === 'DATE_DESC' ? 'RELEASE_BY_RELEASE_ID__DATE_DESC' : 'RELEASE_BY_RELEASE_ID__DATE_ASC',
exclude: store.state.ui.filter,
});
@ -94,16 +97,11 @@ function initTagsActions(store, _router) {
}
async function fetchTags({ _commit }, {
tagSlug,
limit = 100,
slugs = [],
_group,
_priority,
}) {
if (tagSlug) {
return fetchTagBySlug(tagSlug);
}
const { tags } = await graphql(`
query Tags(
$slugs: [String!] = [],
@ -153,9 +151,9 @@ function initTagsActions(store, _router) {
}
return {
fetchTagBySlug,
fetchTags,
fetchTagReleases,
fetchTagBySlug,
};
}

View File

@ -1,29 +1,16 @@
function initUiObservers(store, _router) {
let keyHistory = [];
document.addEventListener('keypress', (event) => {
if (event.target.tagName === 'INPUT') {
return;
}
keyHistory = keyHistory
.concat({
key: event.key,
time: new Date().getTime(),
})
.slice(-3);
if (keyHistory.length === 3
&& keyHistory.every(input => input.key === 's')
&& new Date().getTime() - keyHistory[0].time < 1000
) {
store.dispatch('setSfw', false);
return;
}
if (event.key === 's') {
store.dispatch('setSfw', true);
}
if (event.key === 'n') {
store.dispatch('setSfw', false);
}
});
}