Add linting

web/.editorconfig

@@ -0,0 +1,12 @@
+root = true
+
+[*]
+charset = utf-8
+insert_final_newline = true
+indent_style = space
+indent_size = 2
+trim_trailing_whitespace = true
+quote_type = single
+
+[*.json]
+quote_type = double

web/.eslintrc.json

@@ -0,0 +1,36 @@
+{
+    "env": {
+      "browser": true,
+      "es6": true,
+      "es2017": true,
+      "es2020": true,
+      "jquery": true
+    },
+    "plugins": [
+      "node",
+      "import",
+      "jsdoc"
+    ],
+    "extends": [
+      "eslint:recommended",
+      "google",
+      "plugin:node/recommended-module",
+      "plugin:import/errors",
+      "plugin:import/warnings",
+      "plugin:jsdoc/recommended"
+    ],
+    "globals": {
+      "Atomics": "readonly",
+      "SharedArrayBuffer": "readonly"
+    },
+    "parser": "babel-eslint",
+    "rules": {
+      "require-jsdoc": "off",
+      "valid-jsdoc": "off",
+      "jsdoc/require-jsdoc": "off",
+      "max-len": ["warn", { "code": 120 }],
+      "import/no-commonjs": "error",
+      "import/no-amd": "error",
+      "linebreak-style": "off"
+    }
+  }

web/package.json

@@ -5,6 +5,8 @@
   "scripts": {
     "dev": "npm run development",
     "development": "webpack --mode=development --config webpack.config.cjs --progress",
+    "lint": "eslint --config .eslintrc.json src/js/ --ext .mjs",
+    "lint:fix": "npm run lint -- --fix",
     "prod": "npm run production",
     "production": "webpack --mode=production --config webpack.config.cjs --progress",
     "test": "echo \"Error: no test specified\" && exit 1"
@@ -24,9 +26,15 @@
     "@babel/plugin-proposal-class-properties": "^7.10.1",
     "@babel/preset-env": "^7.10.2",
     "autoprefixer": "^9.8.0",
+    "babel-eslint": "^10.1.0",
     "babel-loader": "^8.1.0",
     "core-js": "^3.6.5",
     "css-loader": "^3.5.3",
+    "eslint": "^7.1.0",
+    "eslint-config-google": "^0.14.0",
+    "eslint-plugin-import": "^2.20.2",
+    "eslint-plugin-jsdoc": "^26.0.2",
+    "eslint-plugin-node": "^11.1.0",
     "html-webpack-plugin": "^4.3.0",
     "mini-css-extract-plugin": "^0.9.0",
     "postcss-loader": "^3.0.0",

web/src/js/app.mjs

@@ -1,17 +1,29 @@
-// jQuery 3.x
+// eslint-disable-next-line no-unused-vars
 import {$, jQuery} from 'jquery/src/jquery';
-
-// jQuery Migrate 3.x
 import 'jquery-migrate/src/migrate';
-
-// Popper 1.x
 import 'popper.js';
-
-// Boostrap 4.x
 import 'bootstrap/js/src/index';
 
 // Old application code
-import './main';
+import './main.mjs';
 
 // New application code
-import './index';
+import Theme from './theme.mjs';
+
+import {library, dom} from '@fortawesome/fontawesome-svg-core/index.es';
+import {fas} from '@fortawesome/free-solid-svg-icons/index.es';
+import {far} from '@fortawesome/free-regular-svg-icons/index.es';
+import {fab} from '@fortawesome/free-brands-svg-icons/index.es';
+library.add(fas, far, fab);
+
+document.addEventListener('DOMContentLoaded', () => {
+  Theme.init();
+
+  // This is required to seach DOM and convert i tags to SVG
+  dom.i2svg();
+
+  document.getElementById('theme-switch-btn').addEventListener('click', () => {
+    Theme.swap();
+  });
+});
+

web/src/js/index.mjs

@@ -1,18 +0,0 @@
-import Theme from './theme';
-
-import { library, dom } from '@fortawesome/fontawesome-svg-core/index.es';
-import { fas } from '@fortawesome/free-solid-svg-icons/index.es';
-import { far } from '@fortawesome/free-regular-svg-icons/index.es';
-import { fab } from '@fortawesome/free-brands-svg-icons/index.es';
-library.add(fas, far, fab);
-
-document.addEventListener('DOMContentLoaded', () => {
-    Theme.init();
-
-    // FontAwesome
-    dom.i2svg();
-
-    document.getElementById('theme-switch-btn').addEventListener('click', () => {
-        Theme.swap();
-    });
-});

web/src/js/theme.mjs

@@ -1,7 +1,6 @@
 export default class {
     /**
-     * Internal state for dark theme activation.
-     * @property {boolean}
+     * @property {boolean} #dark Interal state for dark theme activation.
      * @private
      */
     static #dark = false;
@@ -10,33 +9,34 @@ export default class {
      * Inialize the theme class.
      */
     static init() {
-        // Check LocalStorage for dark theme selection
-        if (localStorage.getItem('darkTheme') === 'true') {
-            // Update page theme
-            this.set(true);
-        }
+      // Check LocalStorage for dark theme selection
+      if (localStorage.getItem('darkTheme') === 'true') {
+        // Update page theme
+        this.set(true);
+      }
     }
 
     /**
      * Set page theme and update local storage variable.
+     *
      * @param {boolean} dark Whether to activate dark theme.
      */
     static set(dark = false) {
-        // Swap CSS to selected theme
-        document.getElementById('pagestyle')
-                .setAttribute('href', 'static/css/' + (dark ? 'dark' : 'main') + '.css');
+      // Swap CSS to selected theme
+      document.getElementById('pagestyle')
+          .setAttribute('href', 'static/css/' + (dark ? 'dark' : 'main') + '.css');
 
-        // Update local storage
-        localStorage.setItem('darkTheme', dark);
+      // Update local storage
+      localStorage.setItem('darkTheme', dark);
 
-        // Update internal state
-        this.#dark = dark;
+      // Update internal state
+      this.#dark = dark;
     }
 
     /**
      * Swap page theme.
      */
     static swap() {
-        this.set(!this.#dark);
+      this.set(!this.#dark);
     }
-}
+}

web/src/js/util.js

@@ -0,0 +1,17 @@
+export function isOverflown(element) {
+  return element.scrollHeight > element.clientHeight || element.scrollWidth > element.clientWidth;
+}
+
+export function setProgressBar(bar, progress, text='') {
+  const progStr = (progress*100).toString();
+  bar.setAttribute('aria-valuenow', progStr);
+  bar.style.width = progStr + '%';
+  bar.textContent = text;
+}
+
+export function secondsToStr(seconds) {
+  seconds = Math.floor(seconds);
+  const mins = Math.floor(seconds / 60);
+  const secs = seconds % 60;
+  return ('00' + mins).slice(-2) + ':' + ('00' + secs).slice(-2);
+}

web/src/templates/index.html

@@ -94,8 +94,7 @@
                     </tr>
                     <tr class="playlist-expand table-dark d-none">
                         <td colspan="4" class="text-center">
-                            <a class="text-muted" href="javascript:">See item <span class="playlist-expand-item-range"></span> on the playlist.
-                            </a>
+                            <a class="text-muted" href="javascript:">See item <span class="playlist-expand-item-range"></span> on the playlist.</a>
                         </td>
                     </tr>
                     <tr class="playlist-item-template d-none">
@@ -394,7 +393,7 @@
         <i class="fas fa-play" aria-hidden="true"></i>
     </div>
 
-    <div class="floating-button" style="bottom: 50px;" onclick="switchTheme()">
+    <div id="theme-switch-btn" class="floating-button" style="bottom: 50px;">
         <i class="fas fa-lightbulb" aria-hidden="true"></i>
     </div>