From 5cd2e5a7d02cb80dbc6618bae640b6c1ee76cf12 Mon Sep 17 00:00:00 2001 From: absidue <48293849+absidue@users.noreply.github.com> Date: Tue, 4 Oct 2022 19:56:10 +0200 Subject: [PATCH] Replace jquery on the trending page (#2663) --- src/renderer/App.vue | 1 + src/renderer/views/Trending/Trending.js | 73 ++++++++---------------- src/renderer/views/Trending/Trending.vue | 48 +++++++++------- 3 files changed, 52 insertions(+), 70 deletions(-) diff --git a/src/renderer/App.vue b/src/renderer/App.vue index 7684e01a..a1a3f925 100644 --- a/src/renderer/App.vue +++ b/src/renderer/App.vue @@ -38,6 +38,7 @@ diff --git a/src/renderer/views/Trending/Trending.js b/src/renderer/views/Trending/Trending.js index 718b8540..e41ede95 100644 --- a/src/renderer/views/Trending/Trending.js +++ b/src/renderer/views/Trending/Trending.js @@ -6,7 +6,6 @@ import FtElementList from '../../components/ft-element-list/ft-element-list.vue' import FtIconButton from '../../components/ft-icon-button/ft-icon-button.vue' import FtFlexBox from '../../components/ft-flex-box/ft-flex-box.vue' -import $ from 'jquery' import { scrapeTrendingPage } from '@freetube/yt-trending-scraper' export default Vue.extend({ @@ -22,13 +21,7 @@ export default Vue.extend({ return { isLoading: false, shownResults: [], - currentTab: 'default', - tabInfoValues: [ - 'default', - 'music', - 'gaming', - 'movies' - ] + currentTab: 'default' } }, computed: { @@ -56,38 +49,7 @@ export default Vue.extend({ } }, methods: { - changeTab: function (tab, event) { - if (event instanceof KeyboardEvent) { - if (event.key === 'Tab') { - return - } else if (event.key === 'ArrowLeft' || event.key === 'ArrowRight') { - // navigate trending tabs with arrow keys - const index = this.tabInfoValues.indexOf(tab) - // tabs wrap around from leftmost to rightmost, and vice versa - tab = (event.key === 'ArrowLeft') - ? this.tabInfoValues[(index > 0 ? index : this.tabInfoValues.length) - 1] - : this.tabInfoValues[(index + 1) % this.tabInfoValues.length] - - const tabNode = $(`#${tab}Tab`) - event.target.setAttribute('tabindex', '-1') - tabNode.attr('tabindex', '0') - tabNode[0].focus() - } - - event.preventDefault() - if (event.key !== 'Enter' && event.key !== ' ') { - return - } - } - const currentTabNode = $('.trendingInfoTabs > .tab[aria-selected="true"]') - const newTabNode = $(`#${tab}Tab`) - - // switch selectability from currently focused tab to new tab - $('.trendingInfoTabs > .tab[tabindex="0"]').attr('tabindex', '-1') - newTabNode.attr('tabindex', '0') - - currentTabNode.attr('aria-selected', 'false') - newTabNode.attr('aria-selected', 'true') + changeTab: function (tab) { this.currentTab = tab if (this.trendingCache[this.currentTab] && this.trendingCache[this.currentTab].length > 0) { this.getTrendingInfoCache() @@ -96,7 +58,12 @@ export default Vue.extend({ } }, - getTrendingInfo () { + focusTab: function (tab) { + this.$refs[tab].focus() + this.$emit('showOutlines') + }, + + getTrendingInfo: function () { if (!process.env.IS_ELECTRON || this.backendPreference === 'invidious') { this.getTrendingInfoInvidious() } else { @@ -120,10 +87,10 @@ export default Vue.extend({ this.shownResults = returnData this.isLoading = false - const currentTab = this.currentTab - this.$store.commit('setTrendingCache', { value: returnData, page: currentTab }) - }).then(() => { - document.querySelector(`#${this.currentTab}Tab`).focus() + this.$store.commit('setTrendingCache', { value: returnData, page: this.currentTab }) + setTimeout(() => { + this.$refs[this.currentTab].focus() + }) }).catch((err) => { console.error(err) const errorMessage = this.$t('Local API Error (Click to copy)') @@ -145,11 +112,17 @@ export default Vue.extend({ }) }, - getTrendingInfoCache: function() { + getTrendingInfoCache: function () { + // the ft-element-list component has a bug where it doesn't change despite the data changing + // so we need to use this hack to make vue completely get rid of it and rerender it + // we should find a better way to do it to avoid the trending page flashing this.isLoading = true setTimeout(() => { this.shownResults = this.trendingCache[this.currentTab] this.isLoading = false + setTimeout(() => { + this.$refs[this.currentTab].focus() + }) }) }, @@ -177,10 +150,10 @@ export default Vue.extend({ this.shownResults = returnData this.isLoading = false - const currentTab = this.currentTab - this.$store.commit('setTrendingCache', { value: returnData, page: currentTab }) - }).then(() => { - document.querySelector(`#${this.currentTab}Tab`).focus() + this.$store.commit('setTrendingCache', { value: returnData, page: this.currentTab }) + setTimeout(() => { + this.$refs[this.currentTab].focus() + }) }).catch((err) => { console.error(err) const errorMessage = this.$t('Invidious API Error (Click to copy)') diff --git a/src/renderer/views/Trending/Trending.vue b/src/renderer/views/Trending/Trending.vue index 57a567ce..6f33e0d2 100644 --- a/src/renderer/views/Trending/Trending.vue +++ b/src/renderer/views/Trending/Trending.vue @@ -15,54 +15,62 @@ :aria-label="$t('Trending.Trending Tabs')" >