From f31aef6f5d25b1d00722d33841f024ab29383acb Mon Sep 17 00:00:00 2001 From: Niels Simenon Date: Sat, 9 May 2020 01:42:10 +0200 Subject: [PATCH] Replaced container key with route watchers to reduce flashing. --- assets/components/actors/actor.vue | 7 ++++++ assets/components/actors/actors.vue | 27 +++++++++++++++-------- assets/components/container/container.vue | 2 +- assets/components/home/home.vue | 7 ++++++ assets/components/networks/network.vue | 7 ++++++ assets/components/networks/networks.vue | 2 -- assets/components/releases/releases.vue | 2 +- assets/components/sites/site.vue | 7 ++++++ assets/components/tags/tag.vue | 7 ++++++ 9 files changed, 55 insertions(+), 13 deletions(-) diff --git a/assets/components/actors/actor.vue b/assets/components/actors/actor.vue index aa282c3f..f4c38121 100644 --- a/assets/components/actors/actor.vue +++ b/assets/components/actors/actor.vue @@ -259,6 +259,10 @@ async function fetchActor() { }); } +async function route() { + await this.fetchActor(); +} + function scrollPhotos(event) { event.currentTarget.scrollLeft += event.deltaY; // eslint-disable-line no-param-reassign } @@ -287,6 +291,9 @@ export default { expanded: false, }; }, + watch: { + $route: route, + }, mounted, methods: { fetchActor, diff --git a/assets/components/actors/actors.vue b/assets/components/actors/actors.vue index b59e393f..5a71907e 100644 --- a/assets/components/actors/actors.vue +++ b/assets/components/actors/actors.vue @@ -42,7 +42,6 @@ :to="{ name: 'actors', params: { gender, letter: letterX } }" :class="{ selected: letterX === letter }" class="letter-link" - @click="setLetter(letterX)" >{{ letterX || 'All' }} @@ -63,18 +62,24 @@ import Actor from '../tile/actor.vue'; import Gender from './gender.vue'; async function fetchActors() { - const gender = this.gender.replace('trans', 'transsexual'); + const curatedGender = this.gender.replace('trans', 'transsexual'); this.actors = await this.$store.dispatch('fetchActors', { limit: 1000, letter: this.letter.replace('all', ''), - genders: [gender === 'other' ? null : gender], + genders: [curatedGender === 'other' ? null : curatedGender], }); } -async function setLetter(letter) { - this.letter = letter; +function letter() { + return this.$route.params.letter || 'all'; +} +function gender() { + return this.$route.params.gender || 'female'; +} + +async function route() { await this.fetchActors(); } @@ -94,14 +99,18 @@ export default { actors: [], pageTitle: null, letters: ['all'].concat(Array.from({ length: 26 }, (value, index) => String.fromCharCode(index + 97).toUpperCase())), - letter: this.$route.params.letter || 'all', - gender: this.$route.params.gender || 'female', }; }, + computed: { + letter, + gender, + }, + watch: { + $route: route, + }, mounted, methods: { fetchActors, - setLetter, }, }; @@ -189,7 +198,7 @@ export default { } &:hover { - color: var(--text-light); + color: var(--text); cursor: pointer; .icon { diff --git a/assets/components/container/container.vue b/assets/components/container/container.vue index e7d3a4b3..343bcd0e 100644 --- a/assets/components/container/container.vue +++ b/assets/components/container/container.vue @@ -12,7 +12,7 @@
- +
diff --git a/assets/components/home/home.vue b/assets/components/home/home.vue index 0f3296b8..a0e16ab4 100644 --- a/assets/components/home/home.vue +++ b/assets/components/home/home.vue @@ -22,6 +22,10 @@ async function fetchReleases() { }); } +async function route() { + await this.fetchReleases(); +} + async function mounted() { this.pageTitle = ''; @@ -44,6 +48,9 @@ export default { beforeRouteEnter(to, from, next) { next(vm => vm.$set(vm, 'from', from)); }, + watch: { + $route: route, + }, mounted, methods: { fetchReleases, diff --git a/assets/components/networks/network.vue b/assets/components/networks/network.vue index e901e478..5954eb25 100644 --- a/assets/components/networks/network.vue +++ b/assets/components/networks/network.vue @@ -147,6 +147,10 @@ async function fetchNetwork() { this.releases = this.network.releases; } +async function route() { + await this.fetchNetwork(); +} + async function mounted() { await this.fetchNetwork(); this.pageTitle = this.network.name; @@ -170,6 +174,9 @@ export default { expanded: false, }; }, + watch: { + $route: route, + }, mounted, methods: { fetchNetwork, diff --git a/assets/components/networks/networks.vue b/assets/components/networks/networks.vue index 73d7d309..90120747 100644 --- a/assets/components/networks/networks.vue +++ b/assets/components/networks/networks.vue @@ -52,8 +52,6 @@ async function searchSites() { query: this.query, limit: 20, }); - - console.log(this.searchResults); } async function mounted() { diff --git a/assets/components/releases/releases.vue b/assets/components/releases/releases.vue index 7ba0edd9..ba33be91 100644 --- a/assets/components/releases/releases.vue +++ b/assets/components/releases/releases.vue @@ -38,7 +38,7 @@ import ReleaseTile from '../tile/release.vue'; function range() { - return this.$store.state.ui.range; + return this.$route.params.range; } function sfw() { diff --git a/assets/components/sites/site.vue b/assets/components/sites/site.vue index 9b2181a7..93156950 100644 --- a/assets/components/sites/site.vue +++ b/assets/components/sites/site.vue @@ -62,6 +62,10 @@ async function fetchSite() { this.releases = this.site.releases; } +async function route() { + await this.fetchSite(); +} + async function mounted() { await this.fetchSite(); @@ -80,6 +84,9 @@ export default { pageTitle: null, }; }, + watch: { + $route: route, + }, mounted, methods: { fetchSite, diff --git a/assets/components/tags/tag.vue b/assets/components/tags/tag.vue index 0fba8d21..8a61dae4 100644 --- a/assets/components/tags/tag.vue +++ b/assets/components/tags/tag.vue @@ -71,6 +71,10 @@ async function fetchReleases() { this.description = this.tag.description && converter.makeHtml(escapeHtml(this.tag.description)); } +async function route() { + await this.fetchReleases(); +} + async function mounted() { await this.fetchReleases(); this.pageTitle = this.tag.name; @@ -91,6 +95,9 @@ export default { hasMedia: false, }; }, + watch: { + $route: route, + }, mounted, methods: { fetchReleases,