From 2178b4fad76d136c391417382d825af4503b88bd Mon Sep 17 00:00:00 2001 From: Roberto Tonino Date: Tue, 28 Apr 2020 20:42:22 +0200 Subject: [PATCH] organizations of js files --- public/js/app.js | 6 +- .../js/modules/{ => components}/artist-tab.js | 8 +- .../{ => components}/link-analyzer-tab.js | 6 +- .../modules/{ => components}/main-search.js | 20 ++--- .../modules/{ => components}/settings-tab.js | 4 +- .../modules/{ => components}/tracklist-tab.js | 12 +-- public/js/modules/search.js | 74 ++++++++++--------- public/js/modules/tabs.js | 61 ++++++--------- public/js/modules/track-preview.js | 19 +++-- 9 files changed, 104 insertions(+), 106 deletions(-) rename public/js/modules/{ => components}/artist-tab.js (92%) rename public/js/modules/{ => components}/link-analyzer-tab.js (92%) rename public/js/modules/{ => components}/main-search.js (86%) rename public/js/modules/{ => components}/settings-tab.js (95%) rename public/js/modules/{ => components}/tracklist-tab.js (91%) diff --git a/public/js/app.js b/public/js/app.js index bd76e90..ad4821a 100644 --- a/public/js/app.js +++ b/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') diff --git a/public/js/modules/artist-tab.js b/public/js/modules/components/artist-tab.js similarity index 92% rename from public/js/modules/artist-tab.js rename to public/js/modules/components/artist-tab.js index 96453c8..d294be4 100644 --- a/public/js/modules/artist-tab.js +++ b/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() { diff --git a/public/js/modules/link-analyzer-tab.js b/public/js/modules/components/link-analyzer-tab.js similarity index 92% rename from public/js/modules/link-analyzer-tab.js rename to public/js/modules/components/link-analyzer-tab.js index 862f01d..6f53b06 100644 --- a/public/js/modules/link-analyzer-tab.js +++ b/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() { diff --git a/public/js/modules/main-search.js b/public/js/modules/components/main-search.js similarity index 86% rename from public/js/modules/main-search.js rename to public/js/modules/components/main-search.js index d7b0945..3da1b0a 100644 --- a/public/js/modules/main-search.js +++ b/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 @@ -88,7 +88,7 @@ const MainSearch = new Vue({ e.preventDefault() QualityModal.open(e.currentTarget.dataset.link) }, - numberWithDots: Utils.numberWithDots, + numberWithDots: Utils.numberWithDots, convertDuration: Utils.convertDuration, search(type) { socket.emit('search', { diff --git a/public/js/modules/settings-tab.js b/public/js/modules/components/settings-tab.js similarity index 95% rename from public/js/modules/settings-tab.js rename to public/js/modules/components/settings-tab.js index 1084bec..1fe8265 100644 --- a/public/js/modules/settings-tab.js +++ b/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() { diff --git a/public/js/modules/tracklist-tab.js b/public/js/modules/components/tracklist-tab.js similarity index 91% rename from public/js/modules/tracklist-tab.js rename to public/js/modules/components/tracklist-tab.js index d614fcc..5413788 100644 --- a/public/js/modules/tracklist-tab.js +++ b/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 = '' diff --git a/public/js/modules/search.js b/public/js/modules/search.js index 8024583..7813cf6 100644 --- a/public/js/modules/search.js +++ b/public/js/modules/search.js @@ -1,53 +1,55 @@ -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) { - let contentElement = event.target +// 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) { - if ( - main_selected === 'search_tab' && - ['track_search', 'album_search', 'artist_search', 'playlist_search'].indexOf(search_selected) != -1 - ) { - MainSearch.scrolledSearch(search_selected.split('_')[0]) - } + if (contentElement.scrollTop + contentElement.clientHeight >= contentElement.scrollHeight) { + if ( + main_selected === 'search_tab' && + ['track_search', 'album_search', 'artist_search', 'playlist_search'].indexOf(search_selected) != -1 + ) { + MainSearch.scrolledSearch(search_selected.split('_')[0]) } } +} - static handleSearchBarKeyup(e) { - if (e.keyCode == 13) { - let term = this.value - if (Utils.isValidURL(term)) { - if (e.ctrlKey) { - QualityModal.open(term) - } else { - if (window.main_selected == 'analyzer_tab') { - analyzeLink(term) - } else { - Downloads.sendAddToQueue(term) - } - } +function handleSearchBarKeyup(e) { + if (e.keyCode == 13) { + let term = this.value + if (Utils.isValidURL(term)) { + if (e.ctrlKey) { + QualityModal.open(term) } else { - if (term != MainSearch.query || main_selected == 'search_tab') { - document.getElementById('search_tab_content').style.display = 'none' - socket.emit('mainSearch', { term: term }) + if (window.main_selected == 'analyzer_tab') { + Tabs.analyzeLink(term) } else { - document.getElementById('search_all_tab').click() - document.getElementById('search_tab_content').style.display = 'block' - document.getElementById('main_search_tablink').click() + Downloads.sendAddToQueue(term) } } + } else { + if (term != MainSearch.query || main_selected == 'search_tab') { + document.getElementById('search_tab_content').style.display = 'none' + socket.emit('mainSearch', { term: term }) + } else { + document.getElementById('search_all_tab').click() + document.getElementById('search_tab_content').style.display = 'block' + document.getElementById('main_search_tablink').click() + } } } } + +export default { + linkListeners +} diff --git a/public/js/modules/tabs.js b/public/js/modules/tabs.js index 69f6df4..77c8bc6 100644 --- a/public/js/modules/tabs.js +++ b/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,23 +35,21 @@ 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() { - document.getElementById('search_tab').addEventListener('click', handleTabClick) - document.getElementById('sidebar').addEventListener('click', handleSidebarClick) +function linkListeners() { + document.getElementById('search_tab').addEventListener('click', handleTabClick) + document.getElementById('sidebar').addEventListener('click', handleSidebarClick) - const backButtons = Array.from(document.getElementsByClassName('back-button')) + const backButtons = Array.from(document.getElementsByClassName('back-button')) - backButtons.forEach(button => { - button.addEventListener('click', backTab) - }) - } + 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 } diff --git a/public/js/modules/track-preview.js b/public/js/modules/track-preview.js index e662f5f..853c728 100644 --- a/public/js/modules/track-preview.js +++ b/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 +}