From 39ec44884b66fc5e05710ad76b853d58330fcf0f Mon Sep 17 00:00:00 2001 From: Roberto Tonino Date: Sun, 19 Apr 2020 20:43:58 +0200 Subject: [PATCH] removed Vue SFCs, added modals.js file --- public/index.html | 6 +- public/js/app/app.js | 42 +-- public/js/app/components/App.vue | 16 - public/js/app/components/TheSearchTab.vue | 59 ---- .../components/search-tab/TheAlbumSearch.vue | 64 ---- .../components/search-tab/TheArtistSearch.vue | 64 ---- .../components/search-tab/TheMainSearch.vue | 291 ------------------ .../search-tab/ThePlaylistSearch.vue | 64 ---- .../components/search-tab/TheTrackSearch.vue | 79 ----- public/js/app/modals.js | 39 +++ public/js/app/search.js | 82 ++--- public/js/app/tabs.js | 2 +- public/js/app/v-app.js | 5 - 13 files changed, 90 insertions(+), 723 deletions(-) delete mode 100644 public/js/app/components/App.vue delete mode 100644 public/js/app/components/TheSearchTab.vue delete mode 100644 public/js/app/components/search-tab/TheAlbumSearch.vue delete mode 100644 public/js/app/components/search-tab/TheArtistSearch.vue delete mode 100644 public/js/app/components/search-tab/TheMainSearch.vue delete mode 100644 public/js/app/components/search-tab/ThePlaylistSearch.vue delete mode 100644 public/js/app/components/search-tab/TheTrackSearch.vue create mode 100644 public/js/app/modals.js delete mode 100644 public/js/app/v-app.js diff --git a/public/index.html b/public/index.html index c89d8db..d47a25a 100644 --- a/public/index.html +++ b/public/index.html @@ -21,7 +21,6 @@
-
@@ -207,7 +206,7 @@

Settings

How do I get my own ARL?

-

+

Download Path

@@ -502,9 +501,10 @@

{{ metadata }}{{ rele - + + diff --git a/public/js/app/app.js b/public/js/app/app.js index 8be9ee0..753cdd3 100644 --- a/public/js/app/app.js +++ b/public/js/app/app.js @@ -117,45 +117,7 @@ socket.on('logged_out', function () { $('#settings_picture').attr('src', `https://e-cdns-images.dzcdn.net/images/user/125x125-000000-80-0-0.jpg`) }) -// quality modal stuff -var modalQuality = document.getElementById('modal_quality') -modalQuality.open = false -window.onclick = function (event) { - if (event.target == modalQuality && modalQuality.open) { - $(modalQuality).addClass('animated fadeOut') - } -} - -$(modalQuality).on('webkitAnimationEnd', function () { - if (modalQuality.open) { - $(this).removeClass('animated fadeOut') - $(this).css('display', 'none') - modalQuality.open = false - } else { - $(this).removeClass('animated fadeIn') - $(this).css('display', 'block') - modalQuality.open = true - } -}) - -function openQualityModal(link) { - $(modalQuality).data('url', link) - $(modalQuality).css('display', 'block') - $(modalQuality).addClass('animated fadeIn') -} - -function modalQualityButton(event) { - if (!event.target.matches('.quality-button')) { - return - } - - let bitrate = event.target.dataset.qualityValue - - var url = $(modalQuality).data('url') - sendAddToQueue(url, bitrate) - $(modalQuality).addClass('animated fadeOut') -} /** * Adds event listeners. @@ -163,11 +125,9 @@ function modalQualityButton(event) { * @since 0.1.0 (?) */ function linkEventListeners() { - // document.getElementById('show_download_tab').addEventListener('click', handleDownloadTabClick.bind(null, true)) - // document.getElementById('hide_download_tab').addEventListener('click', handleDownloadTabClick.bind(null, false)) document.getElementById('toggle_download_tab').addEventListener('click', toggleDownloadTab) - document.getElementById('modal_quality').addEventListener('click', modalQualityButton) + document.getElementById('settings_btn_updateArl').addEventListener('click', loginButton) } /** diff --git a/public/js/app/components/App.vue b/public/js/app/components/App.vue deleted file mode 100644 index 9f039ba..0000000 --- a/public/js/app/components/App.vue +++ /dev/null @@ -1,16 +0,0 @@ - - - - - diff --git a/public/js/app/components/TheSearchTab.vue b/public/js/app/components/TheSearchTab.vue deleted file mode 100644 index fdc0c09..0000000 --- a/public/js/app/components/TheSearchTab.vue +++ /dev/null @@ -1,59 +0,0 @@ - - - - - \ No newline at end of file diff --git a/public/js/app/components/search-tab/TheAlbumSearch.vue b/public/js/app/components/search-tab/TheAlbumSearch.vue deleted file mode 100644 index fbaf76c..0000000 --- a/public/js/app/components/search-tab/TheAlbumSearch.vue +++ /dev/null @@ -1,64 +0,0 @@ - - - - - \ No newline at end of file diff --git a/public/js/app/components/search-tab/TheArtistSearch.vue b/public/js/app/components/search-tab/TheArtistSearch.vue deleted file mode 100644 index 182ca60..0000000 --- a/public/js/app/components/search-tab/TheArtistSearch.vue +++ /dev/null @@ -1,64 +0,0 @@ - - - - - \ No newline at end of file diff --git a/public/js/app/components/search-tab/TheMainSearch.vue b/public/js/app/components/search-tab/TheMainSearch.vue deleted file mode 100644 index 7f76d74..0000000 --- a/public/js/app/components/search-tab/TheMainSearch.vue +++ /dev/null @@ -1,291 +0,0 @@ - - - - - \ No newline at end of file diff --git a/public/js/app/components/search-tab/ThePlaylistSearch.vue b/public/js/app/components/search-tab/ThePlaylistSearch.vue deleted file mode 100644 index d722eba..0000000 --- a/public/js/app/components/search-tab/ThePlaylistSearch.vue +++ /dev/null @@ -1,64 +0,0 @@ - - - - - \ No newline at end of file diff --git a/public/js/app/components/search-tab/TheTrackSearch.vue b/public/js/app/components/search-tab/TheTrackSearch.vue deleted file mode 100644 index 9f57e43..0000000 --- a/public/js/app/components/search-tab/TheTrackSearch.vue +++ /dev/null @@ -1,79 +0,0 @@ - - - - - \ No newline at end of file diff --git a/public/js/app/modals.js b/public/js/app/modals.js new file mode 100644 index 0000000..734af2f --- /dev/null +++ b/public/js/app/modals.js @@ -0,0 +1,39 @@ +// quality modal stuff +var modalQuality = document.getElementById('modal_quality') +modalQuality.open = false + +window.onclick = function (event) { + if (event.target == modalQuality && modalQuality.open) { + $(modalQuality).addClass('animated fadeOut') + } +} + +$(modalQuality).on('webkitAnimationEnd', function () { + if (modalQuality.open) { + $(this).removeClass('animated fadeOut') + $(this).css('display', 'none') + modalQuality.open = false + } else { + $(this).removeClass('animated fadeIn') + $(this).css('display', 'block') + modalQuality.open = true + } +}) + +function openQualityModal(link) { + $(modalQuality).data('url', link) + $(modalQuality).css('display', 'block') + $(modalQuality).addClass('animated fadeIn') +} + +function modalQualityButton(event) { + if (!event.target.matches('.quality-button')) { + return + } + + let bitrate = event.target.dataset.qualityValue + + var url = $(modalQuality).data('url') + sendAddToQueue(url, bitrate) + $(modalQuality).addClass('animated fadeOut') +} \ No newline at end of file diff --git a/public/js/app/search.js b/public/js/app/search.js index d538cbe..944f00b 100644 --- a/public/js/app/search.js +++ b/public/js/app/search.js @@ -15,36 +15,38 @@ function search(type) { socket.emit('search', { term: query, type: type, - start: MainSearch.results[type+"Tab"].next, + start: MainSearch.results[type + 'Tab'].next, nb: 30 }) } function scrolledSearch(type) { query = MainSearch.results.query - if (MainSearch.results[type+"Tab"].next < MainSearch.results[type+"Tab"].total) { + if (MainSearch.results[type + 'Tab'].next < MainSearch.results[type + 'Tab'].total) { socket.emit('search', { term: query, type: type, - start: MainSearch.results[type+"Tab"].next, + start: MainSearch.results[type + 'Tab'].next, nb: 30 }) } } -function searchUpadate(result) { +function searchUpdate(result) { let next = 0 if (result.next) next = parseInt(result.next.match(/index=(\d*)/)[1]) else next = result.total - if (MainSearch.results[result.type+"Tab"].total != result.total) MainSearch.results[result.type+"Tab"].total = result.total - if (MainSearch.results[result.type+"Tab"].next != next) { - MainSearch.results[result.type+"Tab"].next = next - MainSearch.results[result.type+"Tab"].data = MainSearch.results[result.type+"Tab"].data.concat(result.data) + if (MainSearch.results[result.type + 'Tab'].total != result.total) + MainSearch.results[result.type + 'Tab'].total = result.total + if (MainSearch.results[result.type + 'Tab'].next != next) { + MainSearch.results[result.type + 'Tab'].next = next + MainSearch.results[result.type + 'Tab'].data = MainSearch.results[result.type + 'Tab'].data.concat(result.data) } - MainSearch.results[result.type+"Tab"].loaded = true + MainSearch.results[result.type + 'Tab'].loaded = true } + socket.on('search', function (result) { - searchUpadate(result) + searchUpdate(result) }) function clickElement(button) { @@ -52,17 +54,17 @@ function clickElement(button) { } function sendAddToQueue(url, bitrate = null) { - if (url.indexOf(";") != -1){ - urls = url.split(";") - urls.forEach(url=>{ + if (url.indexOf(';') != -1) { + urls = url.split(';') + urls.forEach(url => { socket.emit('addToQueue', { url: url, bitrate: bitrate }) }) - }else if(url != ""){ + } else if (url != '') { socket.emit('addToQueue', { url: url, bitrate: bitrate }) } } -let MainSearch = new Vue({ +const MainSearch = new Vue({ el: '#search_tab', data: { names: { @@ -112,26 +114,34 @@ let MainSearch = new Vue({ changeSearchTab(section) { if (section != 'TOP_RESULT') clickElement('search_' + section.toLowerCase() + '_tab') }, - addToQueue: function(e){e.stopPropagation(); sendAddToQueue(e.currentTarget.dataset.link)}, - openQualityModal: function(e){e.preventDefault(); openQualityModal(e.currentTarget.dataset.link)} + addToQueue: function (e) { + e.stopPropagation() + sendAddToQueue(e.currentTarget.dataset.link) + }, + openQualityModal: function (e) { + e.preventDefault() + openQualityModal(e.currentTarget.dataset.link) + } } }) +console.log(MainSearch) + // Search section -$("#searchbar").keyup(function(e){ - if(e.keyCode == 13){ - let term = this.value - if (isValidURL(term)){ - if (e.ctrlKey){ - openQualityModal(term); - }else{ - 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{ +$('#searchbar').keyup(function (e) { + if (e.keyCode == 13) { + let term = this.value + if (isValidURL(term)) { + if (e.ctrlKey) { + openQualityModal(term) + } else { + 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() @@ -141,13 +151,13 @@ $("#searchbar").keyup(function(e){ }) function mainSearchHandler(result) { - let resetObj = {data: [], next: 0, total: 0, loaded: false} + let resetObj = { data: [], next: 0, total: 0, loaded: false } MainSearch.results.allTab = result MainSearch.results.query = result.QUERY - MainSearch.results.trackTab = {...resetObj} - MainSearch.results.albumTab = {...resetObj} - MainSearch.results.artistTab = {...resetObj} - MainSearch.results.playlistTab = {...resetObj} + MainSearch.results.trackTab = { ...resetObj } + MainSearch.results.albumTab = { ...resetObj } + MainSearch.results.artistTab = { ...resetObj } + MainSearch.results.playlistTab = { ...resetObj } document.getElementById('search_all_tab').click() document.getElementById('search_tab_content').style.display = 'block' document.getElementById('main_search_tablink').click() diff --git a/public/js/app/tabs.js b/public/js/app/tabs.js index 446da35..ce19b13 100644 --- a/public/js/app/tabs.js +++ b/public/js/app/tabs.js @@ -66,7 +66,7 @@ function backTab() { * according to clicked icon. * Uses event delegation * @param {Event} event - * @since ?.?.? + * @since 0.1.0 */ function handleSidebarClick(event) { let targetID = event.target.id diff --git a/public/js/app/v-app.js b/public/js/app/v-app.js deleted file mode 100644 index edc98fc..0000000 --- a/public/js/app/v-app.js +++ /dev/null @@ -1,5 +0,0 @@ -new Vue({ - components: { - 'app': httpVueLoader('./public/js/app/components/App.vue') - } -}).$mount('#v-app'); \ No newline at end of file