Replace jquery on the trending page (#2663)

src/renderer/App.vue

@@ -38,6 +38,7 @@
         <RouterView
           ref="router"
           class="routerView"
+          @showOutlines="hideOutlines = false"
         />
       <!-- </keep-alive> -->
       </transition>

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',
+      currentTab: 'default'
-      tabInfoValues: [
-        'default',
-        'music',
-        'gaming',
-        'movies'
-      ]
     }
   },
   computed: {
@@ -56,38 +49,7 @@ export default Vue.extend({
     }
   },
   methods: {
-    changeTab: function (tab, event) {
+    changeTab: function (tab) {
-      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')
       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: this.currentTab })
-        this.$store.commit('setTrendingCache', { value: returnData, page: currentTab })
+        setTimeout(() => {
-      }).then(() => {
+          this.$refs[this.currentTab].focus()
-        document.querySelector(`#${this.currentTab}Tab`).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: this.currentTab })
-        this.$store.commit('setTrendingCache', { value: returnData, page: currentTab })
+        setTimeout(() => {
-      }).then(() => {
+          this.$refs[this.currentTab].focus()
-        document.querySelector(`#${this.currentTab}Tab`).focus()
+        })
       }).catch((err) => {
         console.error(err)
         const errorMessage = this.$t('Invidious API Error (Click to copy)')

src/renderer/views/Trending/Trending.vue

@@ -15,54 +15,62 @@
         :aria-label="$t('Trending.Trending Tabs')"
       >
         <div
-          id="defaultTab"
+          ref="default"
           class="tab"
           role="tab"
-          aria-selected="true"
+          :aria-selected="String(currentTab === 'default')"
           aria-controls="trendingPanel"
-          tabindex="0"
+          :tabindex="currentTab === 'default' ? 0 : -1"
-          :class="(currentTab=='default')?'selectedTab':''"
+          :class="{ selectedTab: currentTab === 'default' }"
           @click="changeTab('default')"
-          @keydown="changeTab('default', $event)"
+          @keydown.space.enter.prevent="changeTab('default')"
+          @keydown.left.prevent="focusTab('movies')"
+          @keydown.right.prevent="focusTab('music')"
         >
           {{ $t("Trending.Default").toUpperCase() }}
         </div>
         <div
-          id="musicTab"
+          ref="music"
           class="tab"
           role="tab"
-          aria-selected="false"
+          :aria-selected="String(currentTab === 'music')"
           aria-controls="trendingPanel"
-          tabindex="-1"
+          :tabindex="currentTab === 'music' ? 0 : -1"
-          :class="(currentTab=='music')?'selectedTab':''"
+          :class="{ selectedTab: currentTab === 'music' }"
           @click="changeTab('music')"
-          @keydown="changeTab('music', $event)"
+          @keydown.space.enter.prevent="changeTab('music')"
+          @keydown.left.prevent="focusTab('default')"
+          @keydown.right.prevent="focusTab('gaming')"
         >
           {{ $t("Trending.Music").toUpperCase() }}
         </div>
         <div
-          id="gamingTab"
+          ref="gaming"
           class="tab"
           role="tab"
-          aria-selected="false"
+          :aria-selected="String(currentTab === 'gaming')"
           aria-controls="trendingPanel"
-          tabindex="-1"
+          :tabindex="currentTab === 'gaming' ? 0 : -1"
-          :class="(currentTab=='gaming')?'selectedTab':''"
+          :class="{ selectedTab: currentTab === 'gaming' }"
           @click="changeTab('gaming')"
-          @keydown="changeTab('gaming', $event)"
+          @keydown.space.enter.prevent="changeTab('gaming')"
+          @keydown.left.prevent="focusTab('music')"
+          @keydown.right.prevent="focusTab('movies')"
         >
           {{ $t("Trending.Gaming").toUpperCase() }}
         </div>
         <div
-          id="moviesTab"
+          ref="movies"
           class="tab"
           role="tab"
-          aria-selected="false"
+          :aria-selected="String(currentTab === 'movies')"
           aria-controls="trendingPanel"
-          tabindex="-1"
+          :tabindex="currentTab === 'movies' ? 0 : -1"
-          :class="(currentTab=='movies')?'selectedTab':''"
+          :class="{ selectedTab: currentTab === 'movies' }"
           @click="changeTab('movies')"
-          @keydown="changeTab('movies', $event)"
+          @keydown.space.enter.prevent="changeTab('movies')"
+          @keydown.left.prevent="focusTab('gaming')"
+          @keydown.right.prevent="focusTab('default')"
         >
           {{ $t("Trending.Movies").toUpperCase() }}
         </div>