web linting

kvmd/eslintrc.yaml

@@ -0,0 +1,40 @@
+globals:
+    atx: true
+    hid: true
+    keyboard: true
+    mouse: true
+    msd: true
+    session: true
+    stream: true
+    tools: true
+    ui: true
+    "$": true
+
+env:
+    browser: true
+
+extends: "eslint:recommended"
+
+parserOptions:
+    ecmaVersion: 6
+
+rules:
+    indent:
+        - error
+        - tab
+        - SwitchCase: 1
+    linebreak-style:
+        - error
+        - unix
+    quotes:
+        - error
+        - double
+    semi:
+        - error
+        - always
+    comma-dangle:
+        - error
+        - always-multiline
+    no-unused-vars:
+        - error
+        - {vars: local, args: after-used}

kvmd/tox.ini

@@ -1,5 +1,5 @@
 [tox]
-envlist = flake8, pylint, mypy, vulture
+envlist = flake8, pylint, mypy, vulture, eslint, htmlhint
 skipsdist = True
 
 [testenv]
@@ -30,6 +30,14 @@ deps =
 	vulture
 	-rtestenv/requirements.txt
 
+[testenv:eslint]
+whitelist_externals = eslint
+commands = eslint --config=eslintrc.yaml --color web/js
+
+[testenv:htmlhint]
+whitelist_externals = htmlhint
+commands = htmlhint web/*.html
+
 [flake8]
 max-line-length = 160
 # W503 line break before binary operator

kvmd/web/js/atx.js

@@ -33,17 +33,17 @@ var atx = new function() {
 
 		switch (el_button.id) {
 			case "atx-power-button":
-				var button = "power";
+				button = "power";
-				var confirm_msg = "Are you sure to click the power button?";
+				confirm_msg = "Are you sure to click the power button?";
 				break;
 			case "atx-power-button-long":
-				var button = "power_long";
+				button = "power_long";
-				var confirm_msg = "Are you sure to perform the long press of the power button?";
+				confirm_msg = "Are you sure to perform the long press of the power button?";
-				var timeout = 15000;
+				timeout = 15000;
 				break;
 			case "atx-reset-button":
-				var button = "reset";
+				button = "reset";
-				var confirm_msg = "Are you sure to reboot the server?";
+				confirm_msg = "Are you sure to reboot the server?";
 				break;
 		}
 

kvmd/web/js/hid.js

@@ -34,4 +34,4 @@ var hid = new function() {
 		mouse.setSocket(null);
 		keyboard.setSocket(null);
 	};
-}
+};

kvmd/web/js/keyboard.js

@@ -50,7 +50,7 @@ var keyboard = new function() {
 		$("hid-keyboard-led").className = (focused ? "led-on" : "led-off");
 	};
 
-	this.releaseAll = function(ws) {
+	this.releaseAll = function() {
 		__keys.concat(__modifiers).forEach(function(el_key) {
 			if (__isActive(el_key)) {
 				keyboard.fireEvent(el_key.id, false);
@@ -61,13 +61,13 @@ var keyboard = new function() {
 	this.fireEvent = function(code, state) {
 		$("keyboard-window").dispatchEvent(new KeyboardEvent(
 			(state ? "keydown" : "keyup"),
-			{code: code},
+			{code: code}
 		));
 	};
 
 	var __keyboardHandler = function(event, state) {
 		event.preventDefault();
-		el_key = $(event.code);
+		var el_key = $(event.code);
 		if (el_key && !event.repeat) {
 			__commonHandler(el_key, state, "pressed");
 			if (__mac_cmd_hook) {

kvmd/web/js/mouse.js

@@ -5,7 +5,7 @@ var mouse = new function() {
 	var __stream_hovered = false;
 
 	this.init = function() {
-		el_stream_box = $("stream-box");
+		var el_stream_box = $("stream-box");
 		el_stream_box.onmouseenter = __hoverStream;
 		el_stream_box.onmouseleave = __leaveStream;
 		el_stream_box.onmousedown = (event) => __buttonHandler(event, true);
@@ -41,10 +41,10 @@ var mouse = new function() {
 
 	var __buttonHandler = function(event, state) {
 		// https://www.w3schools.com/jsref/event_button.asp
+		var button = null;
 		switch (event.button) {
-			case 0: var button = "left"; break;
+			case 0: button = "left"; break;
-			case 2: var button = "right"; break;
+			case 2: button = "right"; break;
-			default: var button = null; break;
 		}
 		if (button) {
 			event.preventDefault();
@@ -71,7 +71,7 @@ var mouse = new function() {
 	var __sendMove = function() {
 		var pos = __current_pos;
 		if (pos.x !== __sent_pos.x || pos.y !== __sent_pos.y) {
-			el_stream_image = $("stream-image");
+			var el_stream_image = $("stream-image");
 			var to = {
 				x: __translate(pos.x, 0, el_stream_image.clientWidth, -32768, 32767),
 				y: __translate(pos.y, 0, el_stream_image.clientHeight, -32768, 32767),
@@ -96,7 +96,7 @@ var mouse = new function() {
 		if (event.preventDefault) {
 			event.preventDefault();
 		}
-		delta = {x: event.deltaX, y: event.deltaY};
+		var delta = {x: event.deltaX, y: event.deltaY};
 		tools.debug("Mouse wheel:", delta);
 		if (__ws) {
 			__ws.send(JSON.stringify({

kvmd/web/js/msd.js

@@ -122,7 +122,7 @@ var msd = new function() {
 		}
 	};
 
-	var __uploadStateChange = function(event) {
+	var __uploadStateChange = function() {
 		if (__upload_http.readyState === 4) {
 			if (__upload_http.status !== 200) {
 				alert("Can't upload image to the Mass Storage Device:", __upload_http.responseText);

kvmd/web/js/session.js

@@ -75,7 +75,7 @@ var session = new function() {
 		setTimeout(session.startPoller, 1000);
 	};
 
-	var __pingServer = function(event) {
+	var __pingServer = function() {
 		try {
 			__missed_heartbeats += 1;
 			if (__missed_heartbeats >= 5) {

kvmd/web/js/tools.js

@@ -1,23 +1,23 @@
 var tools = new function() {
+	var __debug = (new URL(window.location.href)).searchParams.get("debug");
+
 	this.makeRequest = function(method, url, callback, timeout=null) {
 		var http = new XMLHttpRequest();
-		http.open(method, url, true)
+		http.open(method, url, true);
 		http.onreadystatechange = callback;
-		http.timeout = timeout ? timeout : 5000;
+		http.timeout = (timeout ? timeout : 5000);
 		http.send();
 		return http;
 	};
 
-	var __debug = (new URL(window.location.href)).searchParams.get("debug");
-
 	this.debug = function(...args) {
 		if (__debug) {
-			console.log("LOG/DEBUG", ...args);
+			console.log("LOG/DEBUG", ...args);  // eslint-disable-line no-console
 		}
 	};
 
-	this.info = (...args) => console.log("LOG/INFO", ...args);
+	this.info = (...args) => console.log("LOG/INFO", ...args);  // eslint-disable-line no-console
-	this.error = (...args) => console.error("LOG/ERROR", ...args);
+	this.error = (...args) => console.error("LOG/ERROR", ...args);  // eslint-disable-line no-console
 };
 
-var $ = function(id) { return document.getElementById(id); };
+var $ = (id) => document.getElementById(id);

kvmd/web/js/ui.js

@@ -24,6 +24,9 @@ var ui = new function() {
 			}
 		});
 
+		var __hidden_attr = null;
+		var __visibility_change_attr = null;
+
 		if (typeof document.hidden !== "undefined") {
 			__hidden_attr = "hidden";
 			__visibility_change_attr = "visibilitychange";
@@ -43,7 +46,7 @@ var ui = new function() {
 						hid.releaseAll();
 					}
 				},
-				false,
+				false
 			);
 		}
 
@@ -115,7 +118,7 @@ var ui = new function() {
 					__closeAllMenues();
 					__raiseLastWindow();
 				}
-			}
+			};
 		}
 	};
 
@@ -131,7 +134,7 @@ var ui = new function() {
 	var __globalMouseButtonHandler = function(event) {
 		hid.updateLeds();
 		if (!event.target.matches(".ctl-item")) {
-			for (el_item = event.target; el_item && el_item !== document; el_item = el_item.parentNode) {
+			for (var el_item = event.target; el_item && el_item !== document; el_item = el_item.parentNode) {
 				if (el_item.hasAttribute("data-force-hide-menu")) {
 					break;
 				}
@@ -163,8 +166,8 @@ var ui = new function() {
 			el_window.removeAttribute("data-centered");
 			event = (event || window.event);
 			event.preventDefault();
-			x = prev_x - event.clientX;
+			var x = prev_x - event.clientX;
-			y = prev_y - event.clientY;
+			var y = prev_y - event.clientY;
 			prev_x = event.clientX;
 			prev_y = event.clientY;
 			el_window.style.top = (el_window.offsetTop - y) + "px";
@@ -185,7 +188,7 @@ var ui = new function() {
 		var last_el_window = null;
 		var max_z_index = 0;
 		__windows.forEach(function(el_window) {
-			z_index = parseInt(window.getComputedStyle(el_window, null).zIndex);
+			var z_index = parseInt(window.getComputedStyle(el_window, null).zIndex);
 			if (max_z_index < z_index && window.getComputedStyle(el_window, null).visibility !== "hidden") {
 				last_el_window = el_window;
 				max_z_index = z_index;