Migrate some HTML function calls to event listeners

web/src/js/main.mjs

@@ -1,4 +1,8 @@
-import {isOverflown, setProgressBar, secondsToStr} from './util';
+import {
+  isOverflown,
+  setProgressBar,
+  secondsToStr,
+} from './util';
 
 $('#uploadSelectFile').on('change', function() {
   // get the file name
@@ -47,6 +51,7 @@ let playing = false;
 
 const playPauseBtn = $('#play-pause-btn');
 const fastForwardBtn = $('#fast-forward-btn');
+const volumeSlider = document.getElementById('volume-slider');
 
 const playModeBtns = {
   'one-shot': $('#one-shot-mode-btn'),
@@ -61,6 +66,25 @@ const playModeIcon = {
   'autoplay': 'fa-robot',
 };
 
+playPauseBtn.on('click', togglePlayPause);
+
+fastForwardBtn.on('click', () => {
+  request('post', {
+    action: 'next',
+  });
+});
+
+document.getElementById('clear-playlist-btn').addEventListener('click', () => {
+  request('post', {action: 'clear'});
+});
+
+// eslint-disable-next-line guard-for-in
+for (const playMode in playModeBtns) {
+  playModeBtns[playMode].on('click', () => {
+    changePlayMode(playMode);
+  });
+}
+
 function request(_url, _data, refresh = false) {
   console.log(_data);
   $.ajax({
@@ -123,7 +147,9 @@ function addPlaylistItem(item) {
 }
 
 function displayPlaylist(data) {
-  playlist_table.animate({opacity: 0}, 200, function() {
+  playlist_table.animate({
+    opacity: 0,
+  }, 200, function() {
     playlist_loading.hide();
     $('.playlist-item').remove();
     const items = data.items;
@@ -163,7 +189,9 @@ function displayPlaylist(data) {
     displayActiveItem(data.current_index);
     updatePlayerInfo(playlist_items[data.current_index]);
     bindPlaylistEvent();
-    playlist_table.animate({opacity: 1}, 200);
+    playlist_table.animate({
+      opacity: 1,
+    }, 200);
   });
 }
 
@@ -178,7 +206,7 @@ function insertExpandPrompt(real_from, real_to, display_from, display_to, total_
   expand_copy.removeClass('d-none');
   if (display_from !== display_to) {
     expand_copy.find('.playlist-expand-item-range').html((display_from + 1) + '~' + (display_to + 1) +
-          ' of ' + (total_length) + ' items');
+      ' of ' + (total_length) + ' items');
   } else {
     expand_copy.find('.playlist-expand-item-range').html(display_from + ' of ' + (total_length) + ' items');
   }
@@ -193,7 +221,9 @@ function insertExpandPrompt(real_from, real_to, display_from, display_to, total_
 }
 
 function updatePlaylist() {
-  playlist_table.animate({opacity: 0}, 200, function() {
+  playlist_table.animate({
+    opacity: 0,
+  }, 200, function() {
     playlist_empty.addClass('d-none');
     playlist_loading.show();
     playlist_table.find('.playlist-item').css('opacity', 0);
@@ -217,7 +247,9 @@ function updatePlaylist() {
         },
       },
     });
-    playlist_table.animate({opacity: 1}, 200);
+    playlist_table.animate({
+      opacity: 1,
+    }, 200);
   });
 }
 
@@ -303,25 +335,31 @@ function updateControls(empty, play, mode, volume) {
   if (volume !== last_volume) {
     last_volume = volume;
     if (volume > 1) {
-      document.getElementById('volume-slider').value = 1;
+      volumeSlider.value = 1;
     } else if (volume < 0) {
-      document.getElementById('volume-slider').value = 0;
+      volumeSlider.value = 0;
     } else {
-      document.getElementById('volume-slider').value = volume;
+      volumeSlider.value = volume;
     }
   }
 }
 
 function togglePlayPause() {
   if (playing) {
-    request('post', {action: 'pause'});
+    request('post', {
+      action: 'pause',
+    });
   } else {
-    request('post', {action: 'resume'});
+    request('post', {
+      action: 'resume',
+    });
   }
 }
 
 function changePlayMode(mode) {
-  request('post', {action: mode});
+  request('post', {
+    action: mode,
+  });
 }
 
 
@@ -337,6 +375,13 @@ const filters = {
 const filter_dir = $('#filter-dir');
 const filter_keywords = $('#filter-keywords');
 
+// eslint-disable-next-line guard-for-in
+for (const filter in filters) {
+  filters[filter].on('click', (e) => {
+    setFilterType(e, filter);
+  });
+}
+
 function setFilterType(event, type) {
   event.preventDefault();
 
@@ -522,7 +567,9 @@ function updateResults(dest_page = 1) {
   const data = getFilters(dest_page);
   data.action = 'query';
 
-  lib_group.animate({opacity: 0}, 200, function() {
+  lib_group.animate({
+    opacity: 0,
+  }, 200, function() {
     $.ajax({
       type: 'POST',
       url: 'library',
@@ -543,7 +590,9 @@ function updateResults(dest_page = 1) {
     $('.library-item-active').remove();
     lib_empty.hide();
     lib_loading.show();
-    lib_group.animate({opacity: 1}, 200);
+    lib_group.animate({
+      opacity: 1,
+    }, 200);
   });
 }
 
@@ -609,7 +658,9 @@ const page_li = $('.library-page-li');
 const page_no = $('.library-page-no');
 
 function processResults(data) {
-  lib_group.animate({opacity: 0}, 200, function() {
+  lib_group.animate({
+    opacity: 0,
+  }, 200, function() {
     lib_loading.hide();
     const total_pages = data.total_pages;
     const active_page = data.active_page;
@@ -674,7 +725,9 @@ function processResults(data) {
       page_li_copy.appendTo(page_ul);
     }
 
-    lib_group.animate({opacity: 1}, 200);
+    lib_group.animate({
+      opacity: 1,
+    }, 200);
   });
 }
 
@@ -750,30 +803,27 @@ function addTagModalSubmit() {
 // ------- Volume ------
 // ---------------------
 
-const volume_popover_btn = document.querySelector('#volume-popover-btn');
+const volumePopoverBtn = document.querySelector('#volume-popover-btn');
-const volume_popover_div = document.querySelector('#volume-popover');
+const volumePopoverDiv = document.querySelector('#volume-popover');
 let volume_popover_instance = null;
 let volume_popover_show = false;
+let volume_update_timer;
 
-volume_popover_btn.addEventListener('click', function(e) {
+volumePopoverBtn.addEventListener('click', function(e) {
   e.stopPropagation();
-});
 
-volume_popover_div.addEventListener('click', function(e) {
-  e.stopPropagation();
-});
-
-function toggleVolumePopover() {
   if (!volume_popover_show) {
-    volume_popover_instance = new Popper(volume_popover_btn, volume_popover_div, {
+    volume_popover_instance = new Popper(volumePopoverBtn, volumePopoverDiv, {
       placement: 'top',
       modifiers: {
-        offset: {offset: '0, 8'},
+        offset: {
+          offset: '0, 8',
+        },
       },
-    } );
+    });
-    volume_popover_div.setAttribute('data-show', '');
+    volumePopoverDiv.setAttribute('data-show', '');
   } else {
-    volume_popover_div.removeAttribute('data-show');
+    volumePopoverDiv.removeAttribute('data-show');
     if (volume_popover_instance) {
       volume_popover_instance.destroy();
       volume_popover_instance = null;
@@ -782,22 +832,39 @@ function toggleVolumePopover() {
   volume_popover_show = !volume_popover_show;
 
   document.addEventListener('click', function() {
-    volume_popover_div.removeAttribute('data-show');
+    volumePopoverDiv.removeAttribute('data-show');
     if (volume_popover_instance) {
       volume_popover_instance.destroy();
       volume_popover_instance = null;
       volume_popover_show = !volume_popover_show;
     }
-  }, {once: true} );
+  }, {
-}
+    once: true,
+  });
+});
 
-let volume_update_timer;
+volumePopoverBtn.addEventListener('click', function(e) {
-function setVolumeDelayed(new_volume_value) {
+  e.stopPropagation();
+});
+
+volumeSlider.addEventListener('change', (e) => {
   window.clearTimeout(volume_update_timer);
-  volume_update_timer = window.setTimeout(function() {
+
-    request('post', {action: 'volume_set_value', new_volume: new_volume_value});
+  volume_update_timer = window.setTimeout(() => {
+    request('post', {
+      action: 'volume_set_value',
+      new_volume: volumePopoverDiv.value,
+    });
   }, 500); // delay in milliseconds
-}
+});
+
+document.getElementById('volume-down-btn').addEventListener('click', () => {
+  request('post', {action: 'volume_down'});
+});
+
+document.getElementById('volume-up-btn').addEventListener('click', () => {
+  request('post', {action: 'volume_up'});
+});
 
 // ---------------------
 // ------- Upload ------
@@ -872,7 +939,11 @@ function generateUploadProgressItem(file) {
   const progress = item_clone.querySelector('.uploadProgress');
   item_clone.style.display = 'block';
 
-  const item = {title: title, error: error, progress: progress};
+  const item = {
+    title: title,
+    error: error,
+    progress: progress,
+  };
   filesProgressItem[file.name] = item;
   uploadModalList.appendChild(item_clone);
 
@@ -913,7 +984,9 @@ function uploadNextFile() {
       uploadCancelBtn.style.display = 'none';
       uploadCloseBtn.style.display = 'block';
 
-      request('post', {action: 'rescan'});
+      request('post', {
+        action: 'rescan',
+      });
       updateResults();
     }
   });
@@ -921,7 +994,7 @@ function uploadNextFile() {
   req.upload.addEventListener('progress', function(e) {
     if (e.lengthComputable) {
       const percent = e.loaded / e.total;
-      setProgressBar(file_progress_item.progress, percent, Math.floor(percent*100) + '%');
+      setProgressBar(file_progress_item.progress, percent, Math.floor(percent * 100) + '%');
     }
   });
 
@@ -948,7 +1021,9 @@ function uploadCancel() {
     runningXHR.abort();
     filesToProceed = [];
     uploadFileInput.value = '';
-    request('post', {action: 'rescan'});
+    request('post', {
+      action: 'rescan',
+    });
     updateResults();
   }
 
@@ -977,8 +1052,8 @@ function togglePlayer() {
 }
 
 function playerSetIdle() {
-  playerArtwork.style.display ='none';
+  playerArtwork.style.display = 'none';
-  playerArtworkIdle.style.display ='block';
+  playerArtworkIdle.style.display = 'block';
   playerTitle.textContent = '-- IDLE --';
   playerArtist.textContent = '';
   setProgressBar(playerBar, 0);
@@ -988,8 +1063,8 @@ function updatePlayerInfo(item) {
   if (!item) {
     playerSetIdle();
   }
-  playerArtwork.style.display ='block';
+  playerArtwork.style.display = 'block';
-  playerArtworkIdle.style.display ='none';
+  playerArtworkIdle.style.display = 'none';
   currentPlayingItem = item;
   playerTitle.textContent = item.title;
   playerArtist.textContent = item.artist;
@@ -1020,7 +1095,7 @@ function updatePlayerControls(play, empty) {
     playerSkipBtn.removeAttribute('disabled');
   }
   if (play) {
-    playerPlayBtn.style.display ='none';
+    playerPlayBtn.style.display = 'none';
     playerPauseBtn.style.display = 'block';
   } else {
     playerPlayBtn.style.display = 'block';
@@ -1031,6 +1106,7 @@ function updatePlayerControls(play, empty) {
 let playhead_timer;
 let player_playhead_position;
 let playhead_dragging = false;
+
 function updatePlayerPlayhead(playhead) {
   if (!currentPlayingItem || playhead_dragging) {
     return;
@@ -1067,7 +1143,9 @@ playerBarBox.addEventListener('mousedown', function() {
 playerBarBox.addEventListener('mouseup', function(event) {
   playerBarBox.removeEventListener('mousemove', playheadDragged);
   const percent = event.offsetX / playerBarBox.clientWidth;
-  request('post', {move_playhead: percent * currentPlayingItem.duration});
+  request('post', {
+    move_playhead: percent * currentPlayingItem.duration,
+  });
   playhead_dragging = false;
 });
 

web/src/templates/index.html

@@ -25,10 +25,10 @@
 
     <div id="playlist" class="container mb-5">
         <div class="btn-toolbar mb-2" role="toolbar" aria-label="Playlist controls">
-            <button type="button" id="play-pause-btn" class="btn btn-info mb-2 btn-space" onclick="togglePlayPause()">
+            <button type="button" id="play-pause-btn" class="btn btn-info mb-2 btn-space">
                 <i class="fas fa-play"></i>
             </button>
-            <button type="button" id="fast-forward-btn" class="btn btn-info mb-2" onclick="request('post', {action : 'next'})">
+            <button type="button" id="fast-forward-btn" class="btn btn-info mb-2">
                 <i class="fas fa-fast-forward"></i>
             </button>
             <div class="ml-auto">
@@ -37,37 +37,36 @@
                         <i class="fas fa-tasks mr-2" aria-hidden="true" id="modeIndicator"></i>
                     </button>
                     <div class="dropdown-menu" aria-labelledby="play-mode">
-                        <a class="dropdown-item" href="#" id="one-shot-mode-btn" onclick="changePlayMode('one-shot')">
+                        <a class="dropdown-item" href="#" id="one-shot-mode-btn">
                             <i class="fas fa-tasks mr-2" aria-hidden="true"></i>One-shot
                         </a>
-                        <a class="dropdown-item" href="#" id="random-mode-btn" onclick="changePlayMode('randomize')">
+                        <a class="dropdown-item" href="#" id="random-mode-btn">
                             <i class="fas fa-random mr-2" aria-hidden="true"></i>Random
                         </a>
-                        <a class="dropdown-item" href="#" id="repeat-mode-btn" onclick="changePlayMode('repeat')">
+                        <a class="dropdown-item" href="#" id="repeat-mode-btn">
                             <i class="fas fa-redo mr-2" aria-hidden="true"></i>Repeat
                         </a>
-                        <a class="dropdown-item" href="#" id="autoplay-mode-btn" onclick="changePlayMode('autoplay')">
+                        <a class="dropdown-item" href="#" id="autoplay-mode-btn">
                             <i class="fas fa-robot mr-2" aria-hidden="true"></i>Autoplay
                         </a>
                     </div>
                 </div>
-                <button type="button" id="volume-popover-btn" class="btn btn-warning ml-1" onclick="toggleVolumePopover()">
+                <button type="button" id="volume-popover-btn" class="btn btn-warning ml-1">
                     <i class="fa fa-volume-up" aria-hidden="true"></i>
                 </button>
 
                 <div id="volume-popover">
-                    <a onclick="request('post', {action : 'volume_down'})">
+                    <a id="volume-down-btn">
                         <i class="fa fa-volume-down" aria-hidden="true"></i>
                     </a>
 
-                    <input type="range" class="custom-range ml-1" id="volume-slider" min="0" max="1" step="0.01" value="0.5" onchange="setVolumeDelayed(this.value)" />
+                    <input type="range" class="custom-range ml-1" id="volume-slider" min="0" max="1" step="0.01" value="0.5" />
 
-                    <a onclick="request('post', {action : 'volume_up'})">
+                    <a id="volume-up-btn">
                         <i class="fa fa-volume-up" aria-hidden="true"></i>
                     </a>
                     <div id="volume-popover-arrow"></div>
                 </div>
-
             </div>
         </div>
 
@@ -137,7 +136,7 @@
         </div>
 
         <div class="btn-group">
-            <button type="button" class="btn btn-danger mr-1" onclick="request('post', {action : 'clear'})">
+            <button type="button" id="clear-playlist-btn" class="btn btn-danger mr-1">
                 <i class="fas fa-trash-alt" aria-hidden="true"></i> Clear Playlist
             </button>
         </div>
@@ -155,13 +154,13 @@
                         <label>Type</label>
                         <div id="filter-type" class="input-group mb-2">
                             <div class="btn-group btn-group-sm btn-group-toggle">
-                                <label id="filter-type-file" class="btn btn-secondary" onclick="setFilterType(event, 'file')">
+                                <label id="filter-type-file" class="btn btn-secondary">
                                     <input type="checkbox" name="options"> File
                                 </label>
-                                <label id="filter-type-url" class="btn btn-secondary" onclick="setFilterType(event, 'url')">
+                                <label id="filter-type-url" class="btn btn-secondary">
                                     <input type="checkbox" name="options"> URL
                                 </label>
-                                <label id="filter-type-radio" class="btn btn-secondary" onclick="setFilterType(event, 'radio')">
+                                <label id="filter-type-radio" class="btn btn-secondary">
                                     <input type="checkbox" name="options"> Radio
                                 </label>
                             </div>
@@ -514,4 +513,4 @@
     <script src="static/js/main.js"></script>
 </body>
 
-</html>
+</html>