Allow select folder on browser gui

CHANGELOG.md

@@ -1,5 +1,8 @@
 # Changelog
 
+## [1.9.0]
+- Allow select folder on browser gui
+
 ## [1.8.1]
 - Some improvments and fixes
 

README.md

@@ -41,7 +41,7 @@ ConvertMinecraftJavaTextureToBedrock -i input/java_texture_pack.zip -o output/be
 |---------------|-------------------------------|
 | -i (Required) | Input folder or archive path  |
 | -o (Required) | Output folder or archive path |
-| -l            | Verbose log                   |
+| -l            | Verbose log (Default `true`)  |
 
 ## Direct in your code
 Add it as a dependency to your `package.json`
@@ -77,14 +77,14 @@ ConvertMinecraftJavaTextureToBedrock(input, output/*, "options"*/).then((outputP
 |---------------------|------------------------------------------------|
 | input (Required)    | - Folder or archive path (`string`)<br>- Archive (`Buffer`)<br>- `Array` with archive (`Buffer`) and filename (`string`) |
 | output (Required)   | - Folder or archive path (`string`)<br>- Archive (`Buffer`) |
-| options.verbose     | Verbose log                                    |
+| options.verbose     | Verbose log (Default `true`)                   |
 | options.logCallback | Custom log callback (Default is `console.log`) |
 
 ## Known issues
 - Convert horse textures is very tricky and may buggy
 - Convert weather textures (rain and snow) may not works (seems to be an other format as the default)
 
-# Extras
+# Extras (for texture pack creators)
 
 ## UUID
 You can create the `bedrock_uuid_header` and `bedrock_uuid_module` files in your input, to keep the same uuid on repeating conversions - otherwise, random uuids are generated each time and you need to reselect the texture pack again in the game

package.json

@@ -1,7 +1,7 @@
 {
   "name": "@ozelot379/convert-minecraft-java-texture-to-bedrock",
   "productName": "ConvertMinecraftJavaTextureToBedrock",
-  "version": "1.8.1",
+  "version": "1.9.0",
   "description": "Convert Minecraft Java texture packs to Minecraft Bedrock texture packs",
   "keywords": [
     "Minecraft",

src/webapp/css/style.less

@@ -1,9 +1,9 @@
 @import (less) "~materialize-css/dist/css/materialize.min.css";
 
 .section {
-  padding: 100px;
+  padding: 100px 0;
 }
 
 .swal-button {
-  .green
+  .green // Color for sweetalert buttons
 }

src/webapp/html/index.html

@@ -14,14 +14,18 @@
 	</nav>
 </header>
 <main class="section center">
-	<button class="btn green" id="selectInputFileButton" type="button">Select</button>
+	<span>Select</span>
+	<button class="btn green" id="selectInputFileButton" type="button">Zip file</button>
+	<button class="btn green" id="selectInputFolderButton" type="button">Folder (*)</button>
+	<span>* Not works on mobile browsers</span>
 </main>
 <footer class="page-footer brown">
 	<div class="footer-copyright">
 		<div class="container">
 			<div class="row">
 				<div class="col l6">
-					Works directly in your browser
+					<div>Works directly in your browser</div>
+					<div>Some conversions of HD texture packs may takes a while</div>
 				</div>
 				<div class="col l6">
 					<div>

src/webapp/js/index.js

@@ -1,4 +1,4 @@
-import {downloadFile, selectFile} from "./selector";
+import {download, select} from "./selector";
 import path from "path";
 import swal from "sweetalert";
 import Worker from "./worker";
@@ -8,35 +8,46 @@ document.addEventListener("DOMContentLoaded", () => {
 	const selectInputFileButton = document.getElementById("selectInputFileButton");
 	selectInputFileButton.addEventListener("click", selectInputFile);
 
+	const selectInputFolderButton = document.getElementById("selectInputFolderButton");
+	selectInputFolderButton.addEventListener("click", selectInputFolder);
+
 	/**
 	 * @type {Array|null}
 	 */
 	let input = null;
 
-	const worker = Worker();
+	/**
+	 * @type {Worker}
+	 */
+	const worker = new Worker();
 	worker.addEventListener("message", afterConvert);
 
 	/**
 	 * @returns {Promise<>}
 	 */
 	async function selectInputFile() {
-		input = await selectFile("Select input file", {
-			name: "Input files (*.zip)",
-			extensions: ["zip"]
-		});
-		if (input === null) {
-			return;
-		}
+		input = await select("Select zip file", [".zip"]);
 
-		await startConvert(input);
+		return startConvert();
+	}
+
+	/**
+	 * @returns {Promise<>}
+	 */
+	async function selectInputFolder() {
+		input = await select("Select folder", [".zip"], true); // TODO: Set filter too because directory support can't be detected because webkitdirectory is set in HTMLInputElement.prototype even on mobile browsers which not supports this :(
+
+		return startConvert();
 	}
 
 	/**
-	 * @param {Array} input
-	 *
 	 * @returns {Promise<>}
 	 */
-	async function startConvert(input) {
+	async function startConvert() {
+		if (input === null) {
+			return;
+		}
+
 		swal({
 			text: "Start conversion ...",
 			buttons: false,
@@ -79,6 +90,6 @@ document.addEventListener("DOMContentLoaded", () => {
 			buttons: "Save"
 		});
 
-		downloadFile(output, path.parse(input[1]).name + ".mcpack", "application/zip");
+		download(output, path.parse(input[1]).name + ".mcpack", "application/zip");
 	}
 });

src/webapp/js/selector.js

@@ -1,5 +1,8 @@
 import fileToArrayBuffer from "file-to-array-buffer";
 import fileSaver from "file-saver";
+import JSZip from "jszip";
+import path from "path";
+import swal from "sweetalert";
 
 /**
  * @type {HTMLInputElement|null}
@@ -17,49 +20,77 @@ let selectorLastChangeListener = null;
  *
  * @returns {Promise<>}
  */
-async function downloadFile(output, filename, type) {
+async function download(output, filename, type) {
 	fileSaver(new File([output], filename, {type}));
 }
 
 /**
  * @param {string} title
  * @param {Object} filter
+ * @param {boolean} folder
+ *
  * @returns {Promise<Array|null>}
  */
-async function selectFile(title, filter) {
+async function select(title, filter, folder = false) {
 	return new Promise((resolve, reject) => {
-		resetFileSelector();
+		resetSelector(); // Allows select same file again without reset files/value
 
 		selector = document.createElement("input");
 
 		selector.type = "file";
 
-		selector.style.display = "none";
-
-		if (selectorLastChangeListener !== null) {
-			selector.removeEventListener("change", selectorLastChangeListener);
-			selectorLastChangeListener = null;
+		if (folder) {
+			selector.webkitdirectory = folder;
 		}
 
+		selector.style.display = "none";
+
 		selector.title = title;
 
-		selector.accept = filter.extensions.map((ext) => {
-			return ("." + ext);
-		}).join(" ");
+		selector.accept = filter.join(" ");
 
 		selectorLastChangeListener = async () => {
-			if (selector.files.length === 0) {
+			const files = selector.files;
+
+			if (files.length === 0) {
 				resolve(null);
+
 				return;
 			}
 
-			const file = selector.files[0];
+			let buffer, name = "";
+
+			// TODO: Add this somehow to a worker
+			if (files.length > 1) {
+				swal({
+					text: "Pack",
+					buttons: false,
+					closeOnClickOutside: false,
+					closeOnEsc: false
+				});
+
+				const zip = new JSZip();
+
+				for (const file of files) {
+					const paths = file.webkitRelativePath.split(path.sep);
 
-			resetFileSelector();
+					name = paths.shift();
 
-			const buffer = await fileToArrayBuffer(file);
+					zip.file(paths.join(path.sep), await fileToArrayBuffer(file));
+				}
+
+				buffer = await zip.generateAsync({
+					type: "arraybuffer"
+				});
+			} else {
+				const file = files[0];
+
+				buffer = await fileToArrayBuffer(file);
+
+				name = file.name;
+			}
 
-			resolve([buffer, file.name]);
+			resolve([buffer, name]);
 		};
 
 		selector.addEventListener("change", selectorLastChangeListener);
@@ -73,7 +104,7 @@ async function selectFile(title, filter) {
 /**
  *
  */
-function resetFileSelector() {
+function resetSelector() {
 	if (selector !== null) {
 		if (selectorLastChangeListener !== null) {
 			selector.removeEventListener("change", selectorLastChangeListener);
@@ -86,4 +117,4 @@ function resetFileSelector() {
 	}
 }
 
-export {downloadFile, selectFile};
+export {download, select};

src/webapp/js/worker.js

@@ -1,4 +1,4 @@
-import ConvertMinecraftJavaTextureToBedrock from "../../../src";
+import ConvertMinecraftJavaTextureToBedrock from "../..";
 
 addEventListener("message", async (e) => {
 	const input = e.data;