Implemented file drop inputs, Preparing more tools

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

static/resources/NibblePoker/applets/excel-password-remover/excel-password-remover.mjs

@@ -0,0 +1,36 @@
+
+const excelFileRegex = /^.*\.xls[xm]$/gi;
+const excelWorksheetRegex = /^xl\/worksheets\/.*.xml$/gi;
+
+var outputZip;
+var outputZipFilename = "default-filename.error.zip";
+var filesTotalCount = 0;
+var filesProcessedCount = 0;
+var passwordsRemoved = 0;
+
+// Tool-centric stuff
+{
+    /** @type {string} */
+    const appletId = "excel-password-remover";
+
+    ///** @type {HTMLElement} */
+    //const eEulaContainer = document.querySelector(`#${appletId}-eula`);
+    ///** @type {HTMLInputElement} */
+    //const eEulaDontAskAgainOption = document.querySelector(`input#${appletId}-eula-remember`);
+    ///** @type {HTMLButtonElement} */
+    //const eEulaAcceptButton = document.querySelector(`button#${appletId}-eula-accept`);
+
+    /*function acceptTerms() {
+        document.getElementById("warning").hidden = true;
+        document.getElementById("file-select").hidden = false;
+    }*/
+
+    window.onload = function () {
+        /*console.log(eEulaContainer);
+        console.log(eEulaDontAskAgainOption);
+        console.log(eEulaAcceptButton);
+        eEulaAcceptButton.addEventListener("click", function() {
+            eEulaContainer.hidden = true;
+        });*/
+    }
+}

static/resources/NibblePoker/css/extra.css

@@ -0,0 +1,15 @@
+.np-file-input-drop-container {
+    position: relative;
+}
+
+.np-file-drop-text {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+}
+
+input[type=file].np-file-input-drop {
+    opacity: 0;
+    cursor: pointer;
+}

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;
+			}
+		});
 	});
 });