organizations of js files

public/js/app.js

@@ -2,9 +2,9 @@ import { socket } from './modules/socket.js'
 import { toast } from './modules/toasts.js'
 import Downloads from './modules/downloads.js'
 import QualityModal from './modules/quality-modal.js'
-import { Tabs } from './modules/tabs.js'
+import Tabs from './modules/tabs.js'
 import Search from './modules/search.js'
-import { initTrackPreview } from './modules/track-preview.js'
+import TrackPreview from './modules/track-preview.js'
 
 /* ===== Socketio listeners ===== */
 
@@ -75,7 +75,7 @@ function startApp() {
 	QualityModal.init()
 	Tabs.linkListeners()
 	Search.linkListeners()
-	initTrackPreview()
+	TrackPreview.init()
 
 	if (localStorage.getItem('arl')) {
 		let arl = localStorage.getItem('arl')

public/js/modules/components/artist-tab.js

@@ -1,7 +1,7 @@
-import { socket } from './socket.js'
-import { albumView } from './tabs.js'
-import Downloads from './downloads.js'
-import QualityModal from './quality-modal.js'
+import { socket } from '../socket.js'
+import Downloads from '../downloads.js'
+import QualityModal from '../quality-modal.js'
+import { albumView } from '../tabs.js'
 
 const ArtistTab = new Vue({
 	data() {

public/js/modules/components/link-analyzer-tab.js

@@ -1,6 +1,6 @@
-import { socket } from './socket.js'
-import { albumView } from './tabs.js'
-import Utils from './utils.js'
+import { socket } from '../socket.js'
+import { albumView } from '../tabs.js'
+import Utils from '../utils.js'
 
 const LinkAnalyzerTab = new Vue({
 	data() {

public/js/modules/components/main-search.js

@@ -1,9 +1,9 @@
-import { socket } from './socket.js'
-import { artistView, albumView, playlistView } from './tabs.js'
-import Downloads from './downloads.js'
-import QualityModal from './quality-modal.js'
-import { playPausePreview, previewMouseEnter, previewMouseLeave } from './track-preview.js'
-import Utils from './utils.js'
+import { socket } from '../socket.js'
+import { artistView, albumView, playlistView } from '../tabs.js'
+import Downloads from '../downloads.js'
+import QualityModal from '../quality-modal.js'
+import TrackPreview from '../track-preview.js'
+import Utils from '../utils.js'
 
 const MainSearch = new Vue({
 	data: {
@@ -54,9 +54,9 @@ const MainSearch = new Vue({
 		artistView,
 		albumView,
 		playlistView,
-    playPausePreview,
-    previewMouseEnter,
-    previewMouseLeave,
+		playPausePreview: TrackPreview.playPausePreview,
+		previewMouseEnter: TrackPreview.previewMouseEnter,
+		previewMouseLeave: TrackPreview.previewMouseLeave,
 		handleClickTopResult(event) {
 			let topResultType = this.results.allTab.TOP_RESULT[0].type
 

public/js/modules/components/settings-tab.js

@@ -1,5 +1,5 @@
-import { toast } from './toasts.js'
-import { socket } from './socket.js'
+import { toast } from '../toasts.js'
+import { socket } from '../socket.js'
 
 const SettingsTab = new Vue({
 	data() {

public/js/modules/components/tracklist-tab.js

@@ -1,8 +1,8 @@
-import { socket } from './socket.js'
-import { artistView, albumView } from './tabs.js'
-import Downloads from './downloads.js'
-import QualityModal from './quality-modal.js'
-import { playPausePreview } from './track-preview.js'
+import { socket } from '../socket.js'
+import { albumView, artistView } from '../tabs.js'
+import Downloads from '../downloads.js'
+import QualityModal from '../quality-modal.js'
+import TrackPreview from '../track-preview.js'
 
 const TracklistTab = new Vue({
 	data: {
@@ -20,7 +20,7 @@ const TracklistTab = new Vue({
 	methods: {
 		artistView,
 		albumView,
-    playPausePreview,
+		playPausePreview: TrackPreview.playPausePreview,
 		reset() {
 			this.title = 'Loading...'
 			this.image = ''

public/js/modules/search.js

@@ -1,18 +1,17 @@
-import MainSearch from './main-search.js'
+import MainSearch from './components/main-search.js'
 import Utils from './utils.js'
 import QualityModal from './quality-modal.js'
 import Downloads from './downloads.js'
 import { socket } from './socket.js'
-import { analyzeLink } from './tabs.js'
+import Tabs from './tabs.js'
 
-export default class Search {
-	static linkListeners() {
-		document.getElementById('content').addEventListener('scroll', Utils.debounce(Search.handleContentScroll, 100))
-		document.getElementById('searchbar').addEventListener('keyup', Search.handleSearchBarKeyup)
-	}
+function linkListeners() {
+	document.getElementById('content').addEventListener('scroll', Utils.debounce(handleContentScroll, 100))
+	document.getElementById('searchbar').addEventListener('keyup', handleSearchBarKeyup)
+}
 
-	// Load more content when the search page is at the end
-	static handleContentScroll(event) {
+// Load more content when the search page is at the end
+function handleContentScroll(event) {
 	let contentElement = event.target
 
 	if (contentElement.scrollTop + contentElement.clientHeight >= contentElement.scrollHeight) {
@@ -23,9 +22,9 @@ export default class Search {
 			MainSearch.scrolledSearch(search_selected.split('_')[0])
 		}
 	}
-	}
+}
 
-	static handleSearchBarKeyup(e) {
+function handleSearchBarKeyup(e) {
 	if (e.keyCode == 13) {
 		let term = this.value
 		if (Utils.isValidURL(term)) {
@@ -33,7 +32,7 @@ export default class Search {
 				QualityModal.open(term)
 			} else {
 				if (window.main_selected == 'analyzer_tab') {
-						analyzeLink(term)
+					Tabs.analyzeLink(term)
 				} else {
 					Downloads.sendAddToQueue(term)
 				}
@@ -49,5 +48,8 @@ export default class Search {
 			}
 		}
 	}
-	}
+}
+
+export default {
+	linkListeners
 }

public/js/modules/tabs.js

@@ -1,10 +1,10 @@
-import ArtistTab from './artist-tab.js'
-import TracklistTab from './tracklist-tab.js'
-import LinkAnalyzerTab from './link-analyzer-tab.js'
+import ArtistTab from './components/artist-tab.js'
+import TracklistTab from './components/tracklist-tab.js'
+import LinkAnalyzerTab from './components/link-analyzer-tab.js'
 import { socket } from './socket.js'
-import SettingsTab from './settings-tab.js'
-import MainSearch from './main-search.js'
-import { stopStackedTabsPreview } from './track-preview.js'
+import SettingsTab from './components/settings-tab.js'
+import MainSearch from './components/main-search.js'
+import TrackPreview from './track-preview.js'
 
 /* ===== Globals ====== */
 window.search_selected = ''
@@ -35,14 +35,13 @@ export function playlistView(ev) {
 	showTab('playlist', id)
 }
 
-export function analyzeLink(link) {
+function analyzeLink(link) {
 	console.log('Analyzing: ' + link)
 	LinkAnalyzerTab.reset()
 	socket.emit('analyzeLink', link)
 }
 
-export class Tabs {
-	static linkListeners() {
+function linkListeners() {
 	document.getElementById('search_tab').addEventListener('click', handleTabClick)
 	document.getElementById('sidebar').addEventListener('click', handleSidebarClick)
 
@@ -51,7 +50,6 @@ export class Tabs {
 	backButtons.forEach(button => {
 		button.addEventListener('click', backTab)
 	})
-	}
 }
 
 /**
@@ -122,14 +120,6 @@ function handleTabClick(event) {
 	}
 }
 
-// Uses:
-// 1. windows_stack
-// 2. currentStack
-// 3. main_selected
-// 4. SettingsTab
-// 5. lastSettings
-// 6. search_selected
-// 7. MainSearch
 function changeTab(sidebarEl, section, tabName) {
 	windows_stack = []
 	currentStack = {}
@@ -170,10 +160,6 @@ function changeTab(sidebarEl, section, tabName) {
 	}
 }
 
-// Uses:
-// 1. windows_stack
-// 2. main_selected
-// 3. currentStack
 function showTab(type, id, back = false) {
 	if (windows_stack.length == 0) {
 		windows_stack.push({ tab: main_selected })
@@ -190,16 +176,9 @@ function showTab(type, id, back = false) {
 		tabcontent[i].style.display = 'none'
 	}
 	document.getElementById(tab).style.display = 'block'
-	stopStackedTabsPreview()
+	TrackPreview.stopStackedTabsPreview()
 }
 
-// Uses:
-// 1. windows_stack
-// 2. main_selected
-// 3. showTab
-// 4. ArtistTab
-// 5. TracklistTab
-// 6. socket
 function backTab() {
 	if (windows_stack.length == 1) {
 		document.getElementById(`main_${main_selected}link`).click()
@@ -213,5 +192,13 @@ function backTab() {
 		socket.emit('getTracklist', { type: tabObj.type, id: tabObj.id })
 		showTab(tabObj.type, tabObj.id, true)
 	}
-	stopStackedTabsPreview()
+	TrackPreview.stopStackedTabsPreview()
+}
+
+export default {
+	linkListeners,
+	artistView,
+	albumView,
+	playlistView,
+	analyzeLink
 }

public/js/modules/track-preview.js

@@ -6,7 +6,7 @@ let preview_track = document.getElementById('preview-track')
 let preview_stopped = true
 
 // init stuff
-export function initTrackPreview() {
+function init() {
 	preview_track.volume = 1
 	/*preview_max_volume = parseFloat(localStorage.getItem("previewVolume"))
   if (preview_max_volume === null){
@@ -35,7 +35,7 @@ export function initTrackPreview() {
 }
 
 // on modal closing
-export function stopStackedTabsPreview() {
+function stopStackedTabsPreview() {
 	if (
 		$('.preview_playlist_controls').filter(function () {
 			return $(this).attr('playing')
@@ -49,10 +49,11 @@ export function stopStackedTabsPreview() {
 }
 
 // on hover event
-export function previewMouseEnter(e) {
+function previewMouseEnter(e) {
 	$(e.currentTarget).css({ opacity: 1 })
 }
-export function previewMouseLeave(e) {
+
+function previewMouseLeave(e) {
 	let obj = e.currentTarget
 	if (($(obj).parent().attr('playing') && preview_stopped) || !$(obj).parent().attr('playing')) {
 		$(obj).css({ opacity: 0 }, 200)
@@ -60,7 +61,7 @@ export function previewMouseLeave(e) {
 }
 
 // on click event
-export function playPausePreview(e) {
+function playPausePreview(e) {
 	e.preventDefault()
 	console.log('PlayPause')
 	let obj = e.currentTarget
@@ -94,3 +95,11 @@ export function playPausePreview(e) {
 		})
 	}
 }
+
+export default {
+	init,
+	stopStackedTabsPreview,
+	previewMouseEnter,
+	previewMouseLeave,
+	playPausePreview
+}