Replace jquery on the trending page (#2663)
This commit is contained in:
absidue
GitHub
parent
28e07ec0aa
commit
5cd2e5a7d0
|
|
@ -38,6 +38,7 @@
|
|||
<RouterView
|
||||
ref="router"
|
||||
class="routerView"
|
||||
@showOutlines="hideOutlines = false"
|
||||
/>
|
||||
<!-- </keep-alive> -->
|
||||
</transition>
|
||||
|
|
|
|||
|
|
@ -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)')
|
||||
|
|
@ -146,10 +113,16 @@ export default Vue.extend({
|
|||
},
|
||||
|
||||
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)')
|
||||
|
|
|
|||
|
|
@ -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"
|
||||
:class="(currentTab=='default')?'selectedTab':''"
|
||||
:tabindex="currentTab === 'default' ? 0 : -1"
|
||||
: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"
|
||||
:class="(currentTab=='music')?'selectedTab':''"
|
||||
:tabindex="currentTab === 'music' ? 0 : -1"
|
||||
: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"
|
||||
:class="(currentTab=='gaming')?'selectedTab':''"
|
||||
:tabindex="currentTab === 'gaming' ? 0 : -1"
|
||||
: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"
|
||||
:class="(currentTab=='movies')?'selectedTab':''"
|
||||
:tabindex="currentTab === 'movies' ? 0 : -1"
|
||||
: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>
|
||||
|
|
|
|||
Loading…
Reference in New Issue