evan/deemixer
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

started moving tabs logic into vue components

Browse Source
This commit is contained in:
Roberto Tonino 2020-07-07 22:04:26 +02:00
parent 763d5d201a
commit 02cdae80ab
6 changed files with 255 additions and 244 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
public/js/bundle.js
View File

File diff suppressed because one or more lines are too long

14
src/js/components/TheAboutTab.vue
View File

@ -1,4 +1,4 @@
<template>
<template functional>
<div id="about_tab" class="main_tabcontent">
<h2 class="page_heading">About</h2>
<p>
@ -80,15 +80,3 @@
</div>
</template>
<script>
export default {
name: 'the-about-tab',
// Without this empty data rollup watcher throws an error
data() {
return {}
}
}
</script>
<style>
</style>

34
src/js/components/TheFavoritesTab.vue
View File

@ -1,5 +1,5 @@
<template>
<div id="favorites_tab" class="main_tabcontent">
<div id="favorites_tab" class="main_tabcontent" @click="handleFavoritesTabClick">
<h2 class="page_heading">
Favorites
<div
@ -183,7 +183,7 @@
<script>
import { socket } from '@/js/socket.js'
import { showView } from '@/js/tabs.js'
import { showView, changeTab } from '@/js/tabs.js'
import Downloads from '@/js/downloads.js'
import TrackPreview from '@/js/track-preview.js'
import Utils from '@/js/utils.js'
@ -209,6 +209,36 @@ export default {
previewMouseEnter: TrackPreview.previewMouseEnter,
previewMouseLeave: TrackPreview.previewMouseLeave,
convertDuration: Utils.convertDuration,
handleFavoritesTabClick(event) {
const {
target,
target: { id }
} = event
let selectedTab = null
console.log(id)
switch (id) {
case 'favorites_playlist_tab':
selectedTab = 'playlist_favorites'
break
case 'favorites_album_tab':
selectedTab = 'album_favorites'
break
case 'favorites_artist_tab':
selectedTab = 'artist_favorites'
break
case 'favorites_track_tab':
selectedTab = 'track_favorites'
break
default:
break
}
if (!selectedTab) return
changeTab(target, 'favorites', selectedTab)
},
addToQueue(e) {
e.stopPropagation()
Downloads.sendAddToQueue(e.currentTarget.dataset.link)

36
src/js/components/TheMainSearch.vue
View File

@ -1,5 +1,5 @@
<template>
<div id="search_tab" class="main_tabcontent">
<div id="search_tab" class="main_tabcontent" @click="handleSearchTabClick">
<div :class="{ hide: results.query != '' }">
<h2>Start searching!</h2>
<p>
@ -443,6 +443,8 @@ import Downloads from '@/js/downloads.js'
import TrackPreview from '@/js/track-preview.js'
import Utils from '@/js/utils.js'
import BaseLoadingPlaceholder from '@components/BaseLoadingPlaceholder.vue'
import { changeTab } from '@/js/tabs.js'
import EventBus from '@/js/EventBus.js'
export default {
@ -516,6 +518,38 @@ export default {
playPausePreview: TrackPreview.playPausePreview,
previewMouseEnter: TrackPreview.previewMouseEnter,
previewMouseLeave: TrackPreview.previewMouseLeave,
handleSearchTabClick(event) {
const {
target,
target: { id }
} = event
let selectedTab = null
switch (id) {
case 'search_all_tab':
selectedTab = 'main_search'
break
case 'search_track_tab':
selectedTab = 'track_search'
break
case 'search_album_tab':
selectedTab = 'album_search'
break
case 'search_artist_tab':
selectedTab = 'artist_search'
break
case 'search_playlist_tab':
selectedTab = 'playlist_search'
break
default:
break
}
if (!selectedTab) return
changeTab(target, 'search', selectedTab)
},
handleClickTopResult(event) {
let topResultType = this.results.allTab.TOP_RESULT[0].type

93
src/js/components/TheSidebar.vue
View File

@ -1,5 +1,5 @@
<template>
<aside id="sidebar" role="navigation">
<aside id="sidebar" role="navigation" @click="handleSidebarClick">
<span id="main_home_tablink" class="main_tablinks" role="link" aria-label="home">
<i class="material-icons side_icon">home</i>
<span class="main_tablinks_text">Home</span>
@ -63,7 +63,30 @@
</aside>
</template>
<style scoped>
#network-status {
display: flex;
justify-content: center;
align-items: center;
position: relative;
margin-top: auto;
bottom: 0;
}
#network-status.online i.material-icons {
color: hsl(151, 100%, 31%);
}
#network-status.offline i.material-icons svg {
fill: red;
width: 1em;
height: 1em;
}
</style>
<script>
import { changeTab } from '@/js/tabs.js'
export default {
name: 'the-sidebar',
data() {
@ -107,28 +130,56 @@ export default {
document.documentElement.removeEventListener('transitionend', transitionHandler)
})
},
/**
* Handles click Event on the sidebar and changes tab
* according to clicked icon.
* Uses event delegation
* @param {Event} event
*/
handleSidebarClick(event) {
const { target } = event
const wantToChangeTab = target.matches('.main_tablinks') || target.parentElement.matches('.main_tablinks')
if (!wantToChangeTab) return
let sidebarEl = target.matches('.main_tablinks') ? target : target.parentElement
let targetID = sidebarEl.id
let selectedTab = null
switch (targetID) {
case 'main_search_tablink':
selectedTab = 'search_tab'
break
case 'main_home_tablink':
selectedTab = 'home_tab'
break
case 'main_charts_tablink':
selectedTab = 'charts_tab'
break
case 'main_favorites_tablink':
selectedTab = 'favorites_tab'
break
case 'main_analyzer_tablink':
selectedTab = 'analyzer_tab'
break
case 'main_settings_tablink':
selectedTab = 'settings_tab'
break
case 'main_about_tablink':
selectedTab = 'about_tab'
break
default:
break
}
if (!selectedTab) return
changeTab(sidebarEl, 'main', selectedTab)
}
}
}
</script>
<style scoped>
#network-status {
display: flex;
justify-content: center;
align-items: center;
position: relative;
margin-top: auto;
bottom: 0;
}
#network-status.online i.material-icons {
color: hsl(151, 100%, 31%);
}
#network-status.offline i.material-icons svg {
fill: red;
width: 1em;
height: 1em;
}
</style>

158
src/js/tabs.js
View File

@ -14,6 +14,7 @@ let currentStack = {}
// because it's used in components that are needed
// in this file too
export function showView(viewType, event) {
// console.error('SHOW VIEW')
const {
currentTarget: {
dataset: { id }
@ -47,144 +48,41 @@ export function updateSelected(newSelected) {
currentStack.selected = newSelected
}
window.test = showErrors
function analyzeLink(link) {
EventBus.$emit('linkAnalyzerTab:reset')
socket.emit('analyzeLink', link)
}
function linkListeners() {
document.getElementById('search_tab').addEventListener('click', handleSearchTabClick)
document.getElementById('favorites_tab').addEventListener('click', handleFavoritesTabClick)
document.getElementById('sidebar').addEventListener('click', handleSidebarClick)
const backButtons = Array.from(document.getElementsByClassName('back-button'))
backButtons.forEach(button => {
button.addEventListener('click', backTab)
})
}
/**
* Handles click Event on the sidebar and changes tab
* according to clicked icon.
* Uses event delegation
* @param {Event} event
*/
function handleSidebarClick(event) {
const { target } = event
const wantToChangeTab = target.matches('.main_tablinks') || target.parentElement.matches('.main_tablinks')
if (!wantToChangeTab) return
let sidebarEl = target.matches('.main_tablinks') ? target : target.parentElement
let targetID = sidebarEl.id
switch (targetID) {
case 'main_search_tablink':
changeTab(sidebarEl, 'main', 'search_tab')
break
case 'main_home_tablink':
changeTab(sidebarEl, 'main', 'home_tab')
break
case 'main_charts_tablink':
changeTab(sidebarEl, 'main', 'charts_tab')
break
case 'main_favorites_tablink':
changeTab(sidebarEl, 'main', 'favorites_tab')
break
case 'main_analyzer_tablink':
changeTab(sidebarEl, 'main', 'analyzer_tab')
break
case 'main_settings_tablink':
changeTab(sidebarEl, 'main', 'settings_tab')
break
case 'main_about_tablink':
changeTab(sidebarEl, 'main', 'about_tab')
break
default:
break
}
}
function handleSearchTabClick(event) {
const {
target,
target: { id }
} = event
switch (id) {
case 'search_all_tab':
changeTab(target, 'search', 'main_search')
break
case 'search_track_tab':
changeTab(target, 'search', 'track_search')
break
case 'search_album_tab':
changeTab(target, 'search', 'album_search')
break
case 'search_artist_tab':
changeTab(target, 'search', 'artist_search')
break
case 'search_playlist_tab':
changeTab(target, 'search', 'playlist_search')
break
default:
break
}
}
function handleFavoritesTabClick(event) {
const {
target,
target: { id }
} = event
switch (id) {
case 'favorites_playlist_tab':
changeTab(target, 'favorites', 'playlist_favorites')
break
case 'favorites_album_tab':
changeTab(target, 'favorites', 'album_favorites')
break
case 'favorites_artist_tab':
changeTab(target, 'favorites', 'artist_favorites')
break
case 'favorites_track_tab':
changeTab(target, 'favorites', 'track_favorites')
break
default:
break
}
}
function changeTab(sidebarEl, section, tabName) {
export function changeTab(sidebarEl, section, tabName) {
// console.error('CHANGE TAB')
// console.log(Array.from(arguments))
windows_stack = []
currentStack = {}
var i, tabcontent, tablinks
tabcontent = document.getElementsByClassName(section + '_tabcontent')
for (i = 0; i < tabcontent.length; i++) {
tabcontent[i].style.display = 'none'
}
tablinks = document.getElementsByClassName(section + '_tablinks')
// tablinks = document.getElementsByClassName('section-tabs__tab')
for (i = 0; i < tablinks.length; i++) {
tablinks[i].classList.remove('active')
// * The visualized content of the tab
// ! Can be more than one per tab, happens in MainSearch and Favorites tab
// ! because they have more tablinks (see below)
const tabContent = document.getElementsByClassName(`${section}_tabcontent`)
for (let i = 0; i < tabContent.length; i++) {
tabContent[i].style.display = 'none'
}
if (tabName == 'settings_tab' && main_selected != 'settings_tab') {
// * Tabs inside the actual tab (like albums, tracks, playlists...)
const tabLinks = document.getElementsByClassName(`${section}_tablinks`)
for (let i = 0; i < tabLinks.length; i++) {
tabLinks[i].classList.remove('active')
}
if (tabName === 'settings_tab' && main_selected !== 'settings_tab') {
EventBus.$emit('settingsTab:revertSettings')
EventBus.$emit('settingsTab:revertCredentials')
}
document.getElementById(tabName).style.display = 'block'
if ('main' === section) {
if (section === 'main') {
main_selected = tabName
} else if ('search' === section) {
search_selected = tabName
@ -194,14 +92,15 @@ function changeTab(sidebarEl, section, tabName) {
// Check if you need to load more content in the search tab
if (
main_selected == 'search_tab' &&
['track_search', 'album_search', 'artist_search', 'playlist_search'].indexOf(search_selected) != -1
main_selected === 'search_tab' &&
['track_search', 'album_search', 'artist_search', 'playlist_search'].indexOf(search_selected) !== -1
) {
EventBus.$emit('mainSearch:checkLoadMoreContent', search_selected)
}
}
function showTab(type, id, back = false) {
// console.error('SHOW TAB')
if (windows_stack.length == 0) {
windows_stack.push({ tab: main_selected })
} else if (!back) {
@ -226,6 +125,7 @@ function showTab(type, id, back = false) {
}
function backTab() {
// console.error('BACL TAB')
if (windows_stack.length == 1) {
document.getElementById(`main_${main_selected}link`).click()
} else {
@ -250,6 +150,14 @@ function backTab() {
TrackPreview.stopStackedTabsPreview()
}
function linkListeners() {
const backButtons = Array.from(document.getElementsByClassName('back-button'))
backButtons.forEach(button => {
button.addEventListener('click', backTab)
})
}
function init() {
// Open default tab
changeTab(document.getElementById('main_home_tablink'), 'main', 'home_tab')