Revamped site's common scripts, Many pages slightly broken

Update commons.yml, excel-password-remover.yml, and 31 more files...

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

@@ -1,30 +1,53 @@
+import {initCore} from "../../js/nibblepoker-core.mjs"
+
 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;
+/**
+ * Checks if the given filename appears to be for an Excel file.
+ * @param fileName {string} Filename to be checked
+ * @returns {boolean} `true` if it appears to be an Excel file, `false` otherwise.
+ */
+function isExcelExtension(fileName) {
+    return fileName.match(excelFileRegex) !== null;
+}
 
 // Tool-centric stuff
 {
+    initCore();
+
+    var outputZip;
+    var outputZipFilename = "default-filename.error.zip";
+    var filesTotalCount = 0;
+    var filesProcessedCount = 0;
+    var passwordsRemoved = 0;
+
     /** @type {string} */
     const appletId = "excel-password-remover";
 
-    ///** @type {HTMLElement} */
-    //const eEulaContainer = document.querySelector(`#${appletId}-eula`);
+    /** @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`);
 
+    /** @type {HTMLInputElement} */
+    const eFileInput = document.querySelector(`input[type=file]#${appletId}-input-file`);
+
     /*function acceptTerms() {
         document.getElementById("warning").hidden = true;
         document.getElementById("file-select").hidden = false;
     }*/
 
     window.onload = function () {
+
+		eFileInput.addEventListener('change', function(e) {
+            let fileCount = e.target.files.length;
+
+            console.log(fileCount);
+        });
+
         /*console.log(eEulaContainer);
         console.log(eEulaDontAskAgainOption);
         console.log(eEulaAcceptButton);

static/resources/NibblePoker/js/nibblepoker-code.mjs

@@ -0,0 +1,68 @@
+document.addEventListener("DOMContentLoaded", () => {
+	// Highlights the code blocks when included on a page.
+	// This command is separated in its own file since highlight.js isn't on every page and because I can't use JS
+	//   in a script element without using an external .js file.
+	Array.from(document.getElementsByClassName("code")).forEach(eCodeContainer => {
+		let language = null;
+		
+		eCodeContainer.classList.forEach(cCodeContainer => {
+			if(cCodeContainer.startsWith("language-")) {
+				language = cCodeContainer;
+			}
+		});
+		
+		if(language !== null) {
+			Array.from(eCodeContainer.children).forEach(eCodeLine => {
+				if(eCodeLine.classList.contains("code-line")) {
+					eCodeLine.classList.add(language);
+					hljs.highlightElement(eCodeLine);
+				}
+			});
+		}
+	});
+
+	// Adding the action to copy the code to elements with the "js-code-copy" class.
+	// The search works by searching the closest parent with the "code" class or that is a "code" element, and then
+	//   reading each of its children with the "code-line" class.
+	Array.from(document.getElementsByClassName("js-code-copy")).forEach(eCodeCopyButton => {
+		let eParentCodeBlock = eCodeCopyButton;
+		
+		while(eParentCodeBlock != null &&!eParentCodeBlock.classList.contains("code") &&
+		eParentCodeBlock.nodeName.toLowerCase() !== "code") {
+			eParentCodeBlock = eParentCodeBlock.parentElement;
+		}
+		
+		if(eParentCodeBlock != null) {
+			let code = "";
+			
+			Array.from(eParentCodeBlock.children).forEach(eCodeLine => {
+				if(eCodeLine.classList.contains("code-line")) {
+					code += eCodeLine.textContent + "\n"
+				}
+			});
+			
+			eCodeCopyButton.onclick = function() {
+				const eCodeCopySpans = eCodeCopyButton.querySelectorAll("span");
+				
+				navigator.clipboard.writeText(code);
+				
+				if(eCodeCopySpans.length < 2) {
+					return;
+				}
+				
+				const eSpanCopy = eCodeCopySpans[0];
+				const eSpanCopied = eCodeCopySpans[1];
+				
+				eSpanCopy.hidden = true;
+				eSpanCopied.hidden = false;
+				
+				fadeOut(eSpanCopied, 600).then(r => {
+					eSpanCopy.hidden = false;
+					eSpanCopied.hidden = true;
+				});
+			};
+			
+			eCodeCopyButton.hidden = false;
+		}
+	});
+});

static/resources/NibblePoker/js/nibblepoker-contributors.mjs

@@ -0,0 +1,64 @@
+{
+	const rootSoundDirectory = "/resources/NibblePoker/sounds/"
+	
+	class CatData {
+		constructor(meows, purrs) {
+			this.meowSounds = meows;
+			this.purrSounds = purrs;
+		}
+	}
+	
+	const kittyData = {
+		"kitty-kiki": new CatData(
+			["meow-test-01.ogg"],
+			["kiki-ronron-01.ogg"]
+		),
+		"kitty-maki": new CatData(
+			["meow-test-02.ogg"],
+			[]
+		),
+	}
+	
+	document.addEventListener("DOMContentLoaded", () => {
+		for(const [eId, catData] of Object.entries(kittyData)) {
+			const eHovered = document.getElementById(eId);
+			
+			const audioPurr = (catData.purrSounds.length > 0) ? new Audio() : null;
+			
+			if(eHovered !== null) {
+				eHovered.addEventListener('mouseover', function() {
+					// Playing the meow sound
+					if(catData.meowSounds.length > 0) {
+						const meowIndex = Math.floor(Math.random() * catData.meowSounds.length);
+						const audioMeow = new Audio(rootSoundDirectory + catData.meowSounds[meowIndex]);
+						audioMeow.volume = 0.1;
+						try {
+							audioMeow.play();
+						} catch(DOMException) {
+						}
+					}
+					
+					// Playing the purr sound
+					if(audioPurr !== null) {
+						const purrIndex = Math.floor(Math.random() * catData.purrSounds.length);
+						audioPurr.src = rootSoundDirectory + catData.purrSounds[purrIndex];
+						audioPurr.volume = 0.075;
+						try {
+							audioPurr.load();
+							audioPurr.loop = true;
+							audioPurr.play();
+						} catch(DOMException) {
+						}
+					}
+				});
+				
+				eHovered.addEventListener('mouseout', function() {
+					// Stopping the purring sound
+					if(audioPurr !== null) {
+						audioPurr.pause();
+					}
+				});
+			}
+		}
+	});
+}

static/resources/NibblePoker/js/nibblepoker-core.mjs

@@ -1,67 +1,30 @@
-// NibblePoker - Mandatory Scripts
+// NibblePoker - Core Scripts
 // Author: Herwin Bozet (@NibblePoker)
 // License: Public Domain (This code)
-// Remark: This modules contains all the scripts that are globally required on this website
+// Remark:
+//  * This module contains all the scripts that are globally required on this website
 
-import {fadeIn} from "./nibblepoker-ui"
+export let isSidebarVisible = true;
 
-/*class CpuArchitecture {
-	constructor(id, name) {
-		this.id = id;
-		this.name = name;
-	}
-}
-
-const CpuArchitectures = {
-	Unknown: new CpuArchitecture(0, "?"),
-	x86: new CpuArchitecture(1, "x86"),
-	x64: new CpuArchitecture(2, "x64"),
-	ArmGeneric: new CpuArchitecture(3, "ARM"),
-	Arm64: new CpuArchitecture(4, "ARM64"),
-	RiscV: new CpuArchitecture(5, "RISC-V"),
-}
-
-function getCpuArchitecture(userAgent = navigator.userAgent) {
-	if(userAgent.includes("x64")) {
-		return CpuArchitectures.x64;
-	} else if(userAgent.includes("x86")) {
-		return CpuArchitectures.x86;
-	} else if(userAgent.includes("ARM")) {
-		return CpuArchitectures.ArmGeneric;
-	} else if(userAgent.includes("ARM64")) {
-		return CpuArchitectures.Arm64;
-	} else if(userAgent.includes("RISC-V")) {
-		return CpuArchitectures.RiscV;
-	}
-	return CpuArchitectures.Unknown;
-}*/
-
-let isSidebarVisible = true;
-let eContentModal = document.getElementById("modal-content");
-let eContentModalInner = document.getElementById("modal-content-inner");
-
-function showContentModal(eContent) {
-	eContentModalInner.appendChild(eContent);
-	fadeIn(eContentModal, 175).then(r => {
-		// We don't care about what happens afterward...
-	});
-}
-
-document.addEventListener("DOMContentLoaded", () => {
-	const eSidebar = document.getElementById("sidebar");
+export function initCore() {
+    const eSidebarToggleButton = document.getElementById("sidebar-toggle-footer");
+    const eSidebar = document.getElementById("sidebar");
 	const eMain = document.getElementById("main");
 
 	// TODO: Emit an event to help Splide re-align after the sidebar has changed state.
-	document.getElementById("sidebar-toggle-footer").onclick = function() {
-		if(isSidebarVisible) {
-			eSidebar.classList.add("retracted");
-			eMain.classList.add("expanded");
-		} else {
-			eSidebar.classList.remove("retracted");
-			eMain.classList.remove("expanded");
-		}
-		isSidebarVisible = !isSidebarVisible;
-	};
+
+	if(eSidebarToggleButton !== null && eSidebar !== null && eMain !== null) {
+		eSidebarToggleButton.onclick = function() {
+			if(isSidebarVisible) {
+				eSidebar.classList.add("retracted");
+				eMain.classList.add("expanded");
+			} else {
+				eSidebar.classList.remove("retracted");
+				eMain.classList.remove("expanded");
+			}
+			isSidebarVisible = !isSidebarVisible;
+		};
+	}
 
 	//showContentModal(eContentModal);
 
@@ -165,4 +128,4 @@ document.addEventListener("DOMContentLoaded", () => {
 			}
 		});
 	});
-});
+}

static/resources/NibblePoker/js/nibblepoker-debug.mjs

@@ -0,0 +1,27 @@
+const idButtonBorder = "test-toggle-borders";
+
+const classBorderActive = "debug";
+const classBorderInactive = "_debug";
+
+function swapDebugClasses() {
+	const activeElements = document.querySelectorAll('.' + classBorderActive);
+	const inactiveElements = document.querySelectorAll('.' + classBorderInactive);
+	
+	activeElements.forEach(element => {
+		element.classList.remove(classBorderActive);
+		element.classList.add(classBorderInactive);
+	});
+	
+	inactiveElements.forEach(element => {
+		element.classList.remove(classBorderInactive);
+		element.classList.add(classBorderActive);
+	});
+}
+
+document.addEventListener("DOMContentLoaded", function() {
+	// Adding the action to the border button
+	const eBorderButton = document.getElementById(idButtonBorder);
+	if(eBorderButton !== null) {
+		eBorderButton.addEventListener("click", swapDebugClasses);
+	}
+});

static/resources/NibblePoker/js/nibblepoker-default.mjs

@@ -0,0 +1,11 @@
+// NibblePoker - Default Main Script
+// Author: Herwin Bozet (@NibblePoker)
+// License: Public Domain (This code)
+// Remark:
+//  * This module is used on all static pages that aren't dynamically generated
+
+import {initCore} from "./nibblepoker-core.mjs"
+
+document.addEventListener("DOMContentLoaded", () => {
+    initCore();
+});

static/resources/NibblePoker/js/nibblepoker-leftovers.mjs

@@ -0,0 +1,48 @@
+// NibblePoker - Leftovers
+// Author: Herwin Bozet (@NibblePoker)
+// License: Public Domain (This code)
+
+import {fadeIn} from "./nibblepoker-ui"
+
+//export cloneTemplate;
+
+/*class CpuArchitecture {
+	constructor(id, name) {
+		this.id = id;
+		this.name = name;
+	}
+}
+
+const CpuArchitectures = {
+	Unknown: new CpuArchitecture(0, "?"),
+	x86: new CpuArchitecture(1, "x86"),
+	x64: new CpuArchitecture(2, "x64"),
+	ArmGeneric: new CpuArchitecture(3, "ARM"),
+	Arm64: new CpuArchitecture(4, "ARM64"),
+	RiscV: new CpuArchitecture(5, "RISC-V"),
+}
+
+function getCpuArchitecture(userAgent = navigator.userAgent) {
+	if(userAgent.includes("x64")) {
+		return CpuArchitectures.x64;
+	} else if(userAgent.includes("x86")) {
+		return CpuArchitectures.x86;
+	} else if(userAgent.includes("ARM")) {
+		return CpuArchitectures.ArmGeneric;
+	} else if(userAgent.includes("ARM64")) {
+		return CpuArchitectures.Arm64;
+	} else if(userAgent.includes("RISC-V")) {
+		return CpuArchitectures.RiscV;
+	}
+	return CpuArchitectures.Unknown;
+}*/
+
+let eContentModal = document.getElementById("modal-content");
+let eContentModalInner = document.getElementById("modal-content-inner");
+
+function showContentModal(eContent) {
+	eContentModalInner.appendChild(eContent);
+	fadeIn(eContentModal, 175).then(r => {
+		// We don't care about what happens afterward...
+	});
+}

static/resources/NibblePoker/js/nibblepoker-splide.mjs

@@ -0,0 +1,18 @@
+// Creating the galleries with SplideJs
+
+window.addEventListener('load', function() {
+	try {
+		new Splide( '.splide', {
+			perPage: 2,
+			cover: true,
+			heightRatio: 0.4,
+			breakpoints: {
+				768: {
+					perPage: 1,
+				},
+			},
+		}).mount();
+	} catch(err) {
+		console.log("Unable to setup Splide !");
+	}
+});

static/resources/NibblePoker/js/nibblepoker-template.mjs

@@ -0,0 +1,48 @@
+// NibblePoker - Template Utilities
+// Author: Herwin Bozet (@NibblePoker)
+// License: Public Domain (This code)
+
+/**
+ * @param eTemplate {HTMLTemplateElement | string} The template to be cloned, or its ID.
+ * @param subParts {Object.<string, Node | string | number | boolean>}
+ * @param ignoreMissingParts {bool}
+ * @returns {Promise<DocumentFragment>}
+ */
+export function cloneTemplate(eTemplate,
+                              subParts,
+                              ignoreMissingParts) {
+    if (typeof eTemplate === 'string' || eTemplate instanceof String) {
+        eTemplate = document.getElementById(eTemplate);
+    }
+    return new Promise((resolve, reject) => {
+        if(eTemplate == null) {
+            reject("The given template couldn't be found !");
+        } else {
+            /** @type {DocumentFragment} */
+            let eClone = document.importNode(eTemplate.content, true);
+
+            for (const key in subParts) {
+                if (subParts.hasOwnProperty(key)) {
+                    const value = subParts[key];
+
+                    let ePart = eClone.getElementById(key);
+
+                    if(ePart == null) {
+                        if(ignoreMissingParts) {
+                            continue;
+                        }
+                        reject(`Unable to find sub-element with id '${key}' !`);
+                    }
+
+                    if(value instanceof Node) {
+                        ePart.appendChild(value);
+                    } else {
+                        ePart.innerHTML += value;
+                    }
+                }
+            }
+
+            resolve(eClone);
+        }
+    });
+}

static/resources/NibblePoker/js/nibblepoker-ui.mjs

@@ -0,0 +1,46 @@
+// NibblePoker - UI Scripts
+// Author: Herwin Bozet (@NibblePoker)
+// License: Public Domain (This code)
+
+export const animationStepCount = 10;
+
+export function getBezierBlend(progress) {
+	return (3 * progress ** 2) - (2 * progress ** 3);
+}
+
+export function fadeOut(element, time = 200) {
+	element.style.opacity = "1.0";
+	element.hidden = false;
+	return new Promise((resolve) => {
+		const delay = time / animationStepCount;
+		let i = 0;
+		const intervalId = setInterval(() => {
+			element.style.opacity = String(1 - getBezierBlend(i / animationStepCount));
+			i++;
+			if(i === animationStepCount) {
+				element.style.opacity = "0.0";
+				element.hidden = true;
+				clearInterval(intervalId);
+				resolve();
+			}
+		}, delay);
+	});
+}
+
+export function fadeIn(element, time = 200) {
+	element.style.opacity = "0.0";
+	element.hidden = false;
+	return new Promise((resolve) => {
+		const delay = time / animationStepCount;
+		let i = 0;
+		const intervalId = setInterval(() => {
+			element.style.opacity = String(getBezierBlend(i / animationStepCount));
+			i++;
+			if(i === animationStepCount) {
+				element.style.opacity = "1.0";
+				clearInterval(intervalId);
+				resolve();
+			}
+		}, delay);
+	});
+}