started moving tabs logic into vue components

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

File diff suppressed because one or more lines are too long

View File

@ -1,94 +1,82 @@
<template>
<template functional>
<div id="about_tab" class="main_tabcontent">
<h2 class="page_heading">About</h2>
<p>
This app uses the <a href="https://deemix.app" target="_blank">deemix</a> library, you can use this
library to make your own UI for deemix.</br>
Here's the <a href="https://notabug.org/RemixDev/deemix" target="_blank">official repo</a> for the
library.
</p>
<p>
Thanks to rtonno, uhwot and lollilol for helping me with this project.<br>
Also thanks to BasCurtiz and <a href="http://linktr.ee/scarvimane" target="_blank">scarvimane</a> for
making the icon.
</p>
<p>
Stay up to date with the updates by following the <a href="https://t.me/RemixDevNews"
target="_blank">news channel</a> on Telegram.
</p>
<br />
<h1>Bug Reports</h1>
<p>
If you have questions or problems with the app, search for a solution in the
<a href="https://www.reddit.com/r/deemix" target="_blank">subreddit</a> first and then, if you don't
find anything
you can make a post with your issue on the subreddit.
</p>
<p>
Before reporting a bug make sure you're running the latest version of the app and that the thing you
want
to report is actually a bug and not something that's wrong only on your end.<br />
Make sure the bug is reproducible on another machines and also <b>DO NOT</b> report a bug if it's been
already reported.
</p>
<p>
<b>DO NOT</b> open issues for asking questions, there is a subreddit for that.
</p>
<br />
<h2>Donations</h2>
<h3>You want to contribute to this project? You can do that <b>in different ways!</b></h3>
<p>
If you're fluent in python you could try to make a new UI for the app using the base library, or fix
bugs in the library with a pull request on the <a href="https://notabug.org/RemixDev/deemix"
target="_blank">repo</a>.<br>
I accept features as well, but no complex things, as they can be implementend directly in the app and
not the library.</p>
<p>
If you're fluent in another programming language you could try to port deemix into other programming
languages!<br>
You need help understanding the code? Just hit RemixDev up on Telegram or Reddit.</p>
<p>If you know JavaScript, HTML or CSS you could contribute to the <a
href="https://notabug.org/RemixDev/deemix-webui" target="_blank">webui</a>.</p>
<p>
If you find some bugs you can report them in the repo, just make sure your bug isn't something that
only
affects you and it can be reproducible by other users as well.<br>
Duplicate bug reports will be closed, so keep an eye out on that.</p>
<hr>
<h3>You want to contribute monetarily? You could make a donation!</h3>
<p>
If you can donate you can do that with this links.<br>
You shoud remember that <b>this is a free project</b> and <b>you should support the artists you
love</b>
before supporting the developers.<br>
Don't feel obligated to donate, I appreciate you anyway!</p>
<p>
<b>PayPal:</b> <a href="https://paypal.me/RemixDev" target="_blank">PayPal.me/RemixDev</a><br>
<b>Bitcoin:</b> 1sdNymSJrMBWyHM4u2m9uco5nv6uV4Qs1<br>
<b>Ethereum:</b> 0x1d2aa67e671485CD4062289772B662e0A6Ff976c
</p>
<br />
<h2>License</h2>
<p>
<a rel="license" href="https://www.gnu.org/licenses/gpl-3.0.en.html" target="_blank">
<img alt="GNU General Public License" style="border-width:0"
src="https://www.gnu.org/graphics/gplv3-127x51.png" />
</a><br />
This work is licensed under a <a rel="license" href="https://www.gnu.org/licenses/gpl-3.0.en.html"
target="_blank">GNU General Public License 3.0</a>.
</p>
</div>
<h2 class="page_heading">About</h2>
<p>
This app uses the <a href="https://deemix.app" target="_blank">deemix</a> library, you can use this
library to make your own UI for deemix.</br>
Here's the <a href="https://notabug.org/RemixDev/deemix" target="_blank">official repo</a> for the
library.
</p>
<p>
Thanks to rtonno, uhwot and lollilol for helping me with this project.<br>
Also thanks to BasCurtiz and <a href="http://linktr.ee/scarvimane" target="_blank">scarvimane</a> for
making the icon.
</p>
<p>
Stay up to date with the updates by following the <a href="https://t.me/RemixDevNews"
target="_blank">news channel</a> on Telegram.
</p>
<br />
<h1>Bug Reports</h1>
<p>
If you have questions or problems with the app, search for a solution in the
<a href="https://www.reddit.com/r/deemix" target="_blank">subreddit</a> first and then, if you don't
find anything
you can make a post with your issue on the subreddit.
</p>
<p>
Before reporting a bug make sure you're running the latest version of the app and that the thing you
want
to report is actually a bug and not something that's wrong only on your end.<br />
Make sure the bug is reproducible on another machines and also <b>DO NOT</b> report a bug if it's been
already reported.
</p>
<p>
<b>DO NOT</b> open issues for asking questions, there is a subreddit for that.
</p>
<br />
<h2>Donations</h2>
<h3>You want to contribute to this project? You can do that <b>in different ways!</b></h3>
<p>
If you're fluent in python you could try to make a new UI for the app using the base library, or fix
bugs in the library with a pull request on the <a href="https://notabug.org/RemixDev/deemix"
target="_blank">repo</a>.<br>
I accept features as well, but no complex things, as they can be implementend directly in the app and
not the library.</p>
<p>
If you're fluent in another programming language you could try to port deemix into other programming
languages!<br>
You need help understanding the code? Just hit RemixDev up on Telegram or Reddit.</p>
<p>If you know JavaScript, HTML or CSS you could contribute to the <a
href="https://notabug.org/RemixDev/deemix-webui" target="_blank">webui</a>.</p>
<p>
If you find some bugs you can report them in the repo, just make sure your bug isn't something that
only
affects you and it can be reproducible by other users as well.<br>
Duplicate bug reports will be closed, so keep an eye out on that.</p>
<hr>
<h3>You want to contribute monetarily? You could make a donation!</h3>
<p>
If you can donate you can do that with this links.<br>
You shoud remember that <b>this is a free project</b> and <b>you should support the artists you
love</b>
before supporting the developers.<br>
Don't feel obligated to donate, I appreciate you anyway!</p>
<p>
<b>PayPal:</b> <a href="https://paypal.me/RemixDev" target="_blank">PayPal.me/RemixDev</a><br>
<b>Bitcoin:</b> 1sdNymSJrMBWyHM4u2m9uco5nv6uV4Qs1<br>
<b>Ethereum:</b> 0x1d2aa67e671485CD4062289772B662e0A6Ff976c
</p>
<br />
<h2>License</h2>
<p>
<a rel="license" href="https://www.gnu.org/licenses/gpl-3.0.en.html" target="_blank">
<img alt="GNU General Public License" style="border-width:0"
src="https://www.gnu.org/graphics/gplv3-127x51.png" />
</a><br />
This work is licensed under a <a rel="license" href="https://www.gnu.org/licenses/gpl-3.0.en.html"
target="_blank">GNU General Public License 3.0</a>.
</p>
</div>
</template>
<script>
export default {
name: 'the-about-tab',
// Without this empty data rollup watcher throws an error
data() {
return {}
}
}
</script>
<style>
</style>

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)

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

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>

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')