moved search logic to content and sidebar components

src/js/app.js

@@ -1,6 +1,6 @@
 import Vue from 'vue'
 
-// Object is needed for vue proxy
+// Object is needed for vue proxy (what does this mean?)
 window.vol = {
 	preview_max_volume: 100
 }
@@ -13,7 +13,6 @@ import { socket } from '@/js/socket.js'
 import { toast } from '@/js/toasts.js'
 import Downloads from '@/js/downloads.js'
 import Tabs from '@/js/tabs.js'
-import Search from '@/js/search.js'
 
 /* ===== App initialization ===== */
 
@@ -22,7 +21,6 @@ function startApp() {
 
 	Downloads.init()
 	Tabs.init()
-	Search.linkListeners()
 	TrackPreview.init()
 }
 

src/js/components/TheContent.vue

@@ -1,5 +1,5 @@
 <template>
-	<section id="content">
+	<section id="content" @scroll="handleContentScroll" ref="content">
 		<div id="container">
 			<ArtistTab />
 			<TheChartsTab />
@@ -9,7 +9,7 @@
 			<TheLinkAnalyzerTab />
 			<TheAboutTab />
 			<TheSettingsTab />
-			<TheMainSearch />
+			<TheMainSearch :scrolled-search-type="newScrolled" />
 			<TracklistTab />
 		</div>
 	</section>
@@ -28,6 +28,9 @@ import TheAboutTab from '@components/TheAboutTab.vue'
 import TheSettingsTab from '@components/TheSettingsTab.vue'
 import TheMainSearch from '@components/TheMainSearch.vue'
 
+import { debounce } from '@/js/utils.js'
+import EventBus from '@/js/EventBus.js'
+
 export default {
 	components: {
 		ArtistTab,
@@ -40,6 +43,27 @@ export default {
 		TheSettingsTab,
 		TheMainSearch,
 		TracklistTab
+	},
+	data: () => ({
+		newScrolled: null
+	}),
+	methods: {
+		handleContentScroll: debounce(async function() {
+			if (this.$refs.content.scrollTop + this.$refs.content.clientHeight < this.$refs.content.scrollHeight) return
+
+			if (
+				main_selected !== 'search_tab' ||
+				['track_search', 'album_search', 'artist_search', 'playlist_search'].indexOf(search_selected) === -1
+			) {
+				return
+			}
+
+			this.newScrolled = search_selected.split('_')[0]
+
+			await this.$nextTick()
+
+			this.newScrolled = null
+		}, 100)
 	}
 }
 </script>

src/js/components/TheMainSearch.vue

@@ -496,6 +496,19 @@ export default {
 			}
 		}
 	},
+	props: {
+		scrolledSearchType: {
+			type: String,
+			required: false
+		}
+	},
+	mounted() {
+		EventBus.$on('mainSearch:checkLoadMoreContent', this.checkLoadMoreContent)
+
+		this.$root.$on('mainSearch:showNewResults', this.showNewResults)
+		socket.on('mainSearch', this.handleMainSearch)
+		socket.on('search', this.handleSearch)
+	},
 	methods: {
 		artistView: showView.bind(null, 'artist'),
 		albumView: showView.bind(null, 'album'),
@@ -636,13 +649,12 @@ export default {
 			this.results[currentTab].loaded = true
 		}
 	},
-	mounted() {
+	watch: {
-		EventBus.$on('mainSearch:scrolledSearch', this.scrolledSearch)
+		scrolledSearchType(newType) {
-		EventBus.$on('mainSearch:showNewResults', this.showNewResults)
+			if (!newType) return
-		EventBus.$on('mainSearch:checkLoadMoreContent', this.checkLoadMoreContent)
 
-		socket.on('mainSearch', this.handleMainSearch)
+			this.scrolledSearch(newType)
-		socket.on('search', this.handleSearch)
+		}
 	}
 }
 </script>

src/js/components/TheSearchBar.vue

@@ -9,14 +9,46 @@
 			type="search"
 			name="searchbar"
 			value=""
-			placeholder="Search something or paste a link..."
+			placeholder="Search what you want (or just paste a link)"
 			autofocus
+			ref="searchbar"
+			@keyup="handleSearchBarKeyup($event)"
 		/>
 	</header>
 </template>
 
 <script>
-export default {}
+import { isValidURL } from '@/js/utils.js'
+import Downloads from '@/js/downloads.js'
+import Tabs from '@/js/tabs.js'
+import EventBus from '@/js/EventBus.js'
+
+export default {
+	methods: {
+		handleSearchBarKeyup(keyEvent) {
+			// Enter key
+			if (keyEvent.keyCode !== 13) return
+
+			let term = this.$refs.searchbar.value
+
+			if (isValidURL(term)) {
+				if (keyEvent.ctrlKey) {
+					this.$root.$emit('QualityModal:open', term)
+				} else {
+					if (main_selected === 'analyzer_tab') {
+						Tabs.analyzeLink(term)
+					} else {
+						Downloads.sendAddToQueue(term)
+					}
+				}
+			} else {
+				if (term === '') return
+
+				this.$root.$emit('mainSearch:showNewResults', term, main_selected)
+			}
+		}
+	}
+}
 </script>
 
 <style>

src/js/search.js

@@ -1,51 +0,0 @@
-import Utils from '@/js/utils.js'
-import Downloads from '@/js/downloads.js'
-import Tabs from '@/js/tabs.js'
-import EventBus from '@/js/EventBus.js'
-
-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
-function handleContentScroll(event) {
-	let contentElement = event.target
-
-	if (contentElement.scrollTop + contentElement.clientHeight < contentElement.scrollHeight) return
-
-	if (
-		main_selected === 'search_tab' &&
-		['track_search', 'album_search', 'artist_search', 'playlist_search'].indexOf(search_selected) != -1
-	) {
-		EventBus.$emit('mainSearch:scrolledSearch', search_selected.split('_')[0])
-	}
-}
-
-function handleSearchBarKeyup(e) {
-	// Enter key
-	if (e.keyCode !== 13) return
-
-	let term = this.value
-
-	if (Utils.isValidURL(term)) {
-		if (e.ctrlKey) {
-			// ! Temporary
-			App.$root.$emit('QualityModal:open', term)
-		} else {
-			if (window.main_selected == 'analyzer_tab') {
-				Tabs.analyzeLink(term)
-			} else {
-				Downloads.sendAddToQueue(term)
-			}
-		}
-	} else {
-		if (term === '') return
-
-		EventBus.$emit('mainSearch:showNewResults', term, main_selected)
-	}
-}
-
-export default {
-	linkListeners
-}

src/js/utils.js

@@ -1,4 +1,4 @@
-function isValidURL(text) {
+export function isValidURL(text) {
 	let lowerCaseText = text.toLowerCase()
 
 	if (lowerCaseText.startsWith('http')) {
@@ -11,7 +11,7 @@ function isValidURL(text) {
 	return false
 }
 
-function convertDuration(duration) {
+export function convertDuration(duration) {
 	// Convert from seconds only to mm:ss format
 	let mm, ss
 	mm = Math.floor(duration / 60)
@@ -23,7 +23,7 @@ function convertDuration(duration) {
 	return mm + ':' + ss
 }
 
-function convertDurationSeparated(duration) {
+export function convertDurationSeparated(duration) {
 	let hh, mm, ss
 	mm = Math.floor(duration / 60)
 	hh = Math.floor(mm / 60)
@@ -32,13 +32,13 @@ function convertDurationSeparated(duration) {
 	return [hh, mm, ss]
 }
 
-function numberWithDots(x) {
+export function numberWithDots(x) {
 	return x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, '.')
 }
 
 // On scroll event, returns currentTarget = null
 // Probably on other events too
-function debounce(func, wait, immediate) {
+export function debounce(func, wait, immediate) {
 	var timeout
 	return function() {
 		var context = this
@@ -54,7 +54,7 @@ function debounce(func, wait, immediate) {
 	}
 }
 
-const COUNTRIES = {
+export const COUNTRIES = {
 	AF: 'Afghanistan',
 	AX: '\u00c5land Islands',
 	AL: 'Albania',