Implemented file drop inputs, Preparing more tools

Update app.py, excel-password-remover.yml, and 30 more files...

static/resources/NibblePoker/js/nibblepoker.mjs

@@ -1,6 +1,11 @@
+// NibblePoker - Mandatory Scripts
+// Author: Herwin Bozet (@NibblePoker)
+// License: Public Domain (This code)
+// Remark: This modules contains all the scripts that are globally required on this website
+
 import {fadeIn} from "./nibblepoker-ui"
 
-class CpuArchitecture {
+/*class CpuArchitecture {
 	constructor(id, name) {
 		this.id = id;
 		this.name = name;
@@ -29,7 +34,7 @@ function getCpuArchitecture(userAgent = navigator.userAgent) {
 		return CpuArchitectures.RiscV;
 	}
 	return CpuArchitectures.Unknown;
-}
+}*/
 
 let isSidebarVisible = true;
 let eContentModal = document.getElementById("modal-content");
@@ -72,9 +77,92 @@ document.addEventListener("DOMContentLoaded", () => {
 	// TODO: Autodetect mobile screens, close it, and add classes to make it over the rest with dark modal bkgd.
 
 	// Printing the detected CPU architecture
-	const detectedCpuArch= getCpuArchitecture();
+	/*const detectedCpuArch= getCpuArchitecture();
 	let cpuArchPrintouts = document.querySelectorAll(".data-cpu-arch");
 	cpuArchPrintouts.forEach(element => {
 		element.textContent = detectedCpuArch.name;
+	});*/
+
+	// Setting up the file drop inputs
+	document.querySelectorAll(".np-file-input-root-container").forEach(eRootContainer => {
+		//console.log(eRootContainer);
+
+    	/** @type {HTMLInputElement} */
+		const eFileDropInput = eRootContainer.querySelector("input[type=file]");
+		if(eFileDropInput == null) {
+			return;
+		}
+
+    	/** @type {string} */
+		const inputId = eFileDropInput.getAttribute("id");
+		//console.log(inputId);
+
+    	/** @type {HTMLElement} */
+		const eFileDropTextEmpty = eRootContainer.querySelector(`#${inputId}-text-drop`);
+
+    	/** @type {HTMLElement} */
+		const eFileDropTextSingle = eRootContainer.querySelector(`#${inputId}-text-file-single`);
+
+    	/** @type {HTMLElement} */
+		const eFileDropTextMultiple = eRootContainer.querySelector(`#${inputId}-text-file-multiple`);
+
+    	/** @type {HTMLButtonElement} */
+		const eFileDropAddButton = eRootContainer.querySelector(`button#${inputId}-add`);
+
+    	/** @type {HTMLButtonElement} */
+		const eFileDropClearButton = eRootContainer.querySelector(`button#${inputId}-reset`);
+
+    	/** @type {NodeListOf<HTMLElement>} */
+		const eFileDropSelectionCounts = eRootContainer.querySelectorAll(`.np-file-drop-count`);
+
+		if(eFileDropAddButton !== null) {
+			eFileDropAddButton.addEventListener("click", function() {
+				eFileDropInput.click();
+			});
+		}
+
+		if(eFileDropClearButton !== null) {
+			eFileDropClearButton.addEventListener("click", function() {
+				eFileDropInput.value = '';
+				if(eFileDropTextSingle !== null) {
+					eFileDropTextSingle.hidden = true;
+				}
+				if(eFileDropTextMultiple !== null) {
+					eFileDropTextMultiple.hidden = true;
+				}
+				if(eFileDropTextEmpty !== null) {
+					eFileDropTextEmpty.hidden = false;
+				}
+			});
+		}
+
+		eFileDropInput.addEventListener('change', function(e) {
+			let fileCount = e.target.files.length;
+
+			if(fileCount === 1 && eFileDropTextSingle !== null) {
+				if(eFileDropTextEmpty !== null) {
+					eFileDropTextEmpty.hidden = true;
+				}
+				if(eFileDropTextMultiple !== null) {
+					eFileDropTextMultiple.hidden = true;
+				}
+				eFileDropTextSingle.hidden = false;
+			}
+
+			if(fileCount >= 1 && eFileDropTextMultiple !== null) {
+				if(eFileDropTextEmpty !== null) {
+					eFileDropTextEmpty.hidden = true;
+				}
+				if(eFileDropTextSingle !== null) {
+					eFileDropTextSingle.hidden = true;
+				}
+
+				eFileDropSelectionCounts.forEach(eFileDropSelectionCount => {
+					eFileDropSelectionCount.innerText = `${fileCount}`;
+				});
+
+				eFileDropTextMultiple.hidden = false;
+			}
+		});
 	});
 });