Merge pull request #7 from lysdexic-audio/flexible-inputs

add multiselect option to multiInput prompt
Araxeus · Mar 21, 2022 · f6c03a0 · f6c03a0
2 parents 44102a8 + 0f6c42a
commit f6c03a0
Show file tree

Hide file tree

Showing 3 changed files with 84 additions and 66 deletions.
diff --git a/README.md b/README.md
@@ -1,7 +1,7 @@
 # Custom Electron Prompt
 
-[![NPM Version](https://img.shields.io/npm/v/custom-electron-prompt)](https://www.npmjs.com/package/custom-electron-prompt) 
-[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://github.com/Araxeus/custom-electron-prompt/blob/main/LICENSE) 
+[![NPM Version](https://img.shields.io/npm/v/custom-electron-prompt)](https://www.npmjs.com/package/custom-electron-prompt)
+[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://github.com/Araxeus/custom-electron-prompt/blob/main/LICENSE)
 [![Maintenance](https://img.shields.io/badge/Maintained%3F-yes-green.svg)](https://github.com/Araxeus/custom-electron-prompt)
 [![Website shields.io](https://img.shields.io/website-up-down-green-red/http/shields.io.svg)](https://araxeus.github.io/custom-electron-prompt)
 
@@ -19,7 +19,7 @@ There is also an option for a button with user-defined `onclick` function.
 
 ## Usage
 
-* 1: Install the npm package to your project directory with  
+* 1: Install the npm package to your project directory with
   ```bash
   npm install custom-electron-prompt
   ```
@@ -29,19 +29,19 @@ There is also an option for a button with user-defined `onclick` function.
    ```
 
 * 2: Import prompt
-   
+
   ```javascript
   const prompt = require('custom-electron-prompt')
   ```
 
 * 3: Create a prompt
-   
+
   ```javascript
   prompt([options, parentBrowserWindow])
   ```
-   
+
    calling the prompt function returns a Promise
-   
+
    Promise resolve returns the input or returns null if prompt was canceled
 
        On error, Prompise reject returns custom error message
@@ -87,15 +87,15 @@ keybindOptions: [
 ]
 ```
 
-Return an array made of objects in format 
+Return an array made of objects in format
 
-`{value: "copyAccelerator", accelerator: "Ctrl+Shift+Insert"}` 
+`{value: "copyAccelerator", accelerator: "Ctrl+Shift+Insert"}`
 
 where `accelerator` is the input for the `value` you registered
 
  <details>
   <summary> Code Example </summary>
-    
+
  ```javascript
 const kb = ($value, $label, $default) => { return { value: $value, label: $label, default: $default } };
 prompt({
@@ -119,7 +119,7 @@ prompt({
 	.catch(console.error)
  ```
  </details>
- 
+
  <details>
   <summary> Screenshots </summary>
 
@@ -150,7 +150,7 @@ counterOptions: {
 
  <details>
   <summary> Code Example </summary>
-    
+
  ```javascript
 prompt({
 	title: "Counter",
@@ -165,7 +165,7 @@ prompt({
 }, win).then(input => console.log(`input == ${input}`)).catch(console.error)
  ```
  </details>
- 
+
  <details>
   <summary> Screenshots </summary>
 
@@ -193,7 +193,7 @@ Must specify selectOptions with valid entries in **one** of the following format
 
 <details>
   <summary> Code Example </summary>
-    
+
  ```javascript
 prompt({
 	title: "Select",
@@ -209,7 +209,7 @@ prompt({
 }, win).then(input => console.log(`input == ${input}`)).catch(console.error)
  ```
  </details>
- 
+
  <details>
   <summary> Screenshots </summary>
 
@@ -224,7 +224,7 @@ prompt({
 
 ### multiInput
 
-Create a prompt with multiple inputs.
+Create a prompt with multiple inputs. Select inputs can also be used.
 
 Returns an array with with input in same order that was given to the options, for example:
 multiInputOptions: [{usernameOptions}, {passwordOptions}] could return ["Jack", "61523"]
@@ -237,43 +237,54 @@ Must specify multiInputOptions with valid entries in the following format:
 
 <details>
   <summary> Code Example </summary>
-    
+
  ```javascript
 prompt({
-	title: "credentials",
-	label: "Please enter username and password",
-	type: "multiInput",
-	multiInputOptions:
-    [{
-        inputAttrs:
-             {
-                type: "email",
-                required: true,
-                placeholder: "email"
-              }
-      },
-      {
-         inputAttrs:
-             {
-                type: "password",
-                placeholder: "password"
-              }
-     }],
-	resizable: true,
-	height: 150,
-	width: 300,
+    title: "credentials",
+    label: "Login Info:",
+    type: "multiInput",
+    multiInputOptions:
+        [
+            {
+                inputAttrs:
+                {
+                    type: "email",
+                    required: true,
+                    placeholder: "email"
+                }
+            },
+            {
+                inputAttrs:
+                {
+                    type: "password",
+                    placeholder: "password"
+                }
+            },
+            {
+                selectOptions: { na: "North America", eu: "Europe", other: "Other" },
+                value: "2"
+            }
+        ],
+    resizable: true,
+    width: 300,
+    height: 225,
 }, win).then(input => console.log(`input == ${input}`)).catch(console.error)
  ```
  </details>
- 
+
  <details>
   <summary> Screenshots </summary>
 
-![](https://github.com/amunim/custom-electron-prompt/blob/main/screenshots/multiInput/button.PNG)
+With `selectOptions`:
+
+![](screenshots/multiInput/multiInputSelect.PNG)
+
+
+Without `selectOptions`:
+*This screenshot also contains a custom button.*
 
+![](screenshots/multiInput/button.PNG)
 
-This screenshot also contains a custom button.
-
 </details>
 
 ----
@@ -340,8 +351,8 @@ Adds an extra/custom button with special functionalities other than success or e
 
  <details>
   <summary> Code Example </summary>
-    
-    
+
+
 ```javascript
 await prompt({
             title: 'Login credentials',
@@ -373,7 +384,7 @@ await prompt({
             button:
             {
                 label: "Autofill",
-                click: () => 
+                click: () =>
                 {
                     document.querySelectorAll("#data")[0].value = "mama@young.com";
                     document.querySelectorAll("#data")[1].value = "mysecretrecipe";
@@ -390,8 +401,8 @@ await prompt({
 
  <details>
   <summary> Screenshots </summary>
-    
-    
+
+
 ![](https://github.com/amunim/custom-electron-prompt/blob/main/screenshots/multiInput/button.PNG)
 </details>
 

diff --git a/lib/page/prompt.js b/lib/page/prompt.js
@@ -68,7 +68,7 @@ function promptRegister() {
 			dataElement = promptCreateInput(promptOptions);
 			break;
 		case "select":
-			dataElement = promptCreateSelect();
+			dataElement = promptCreateSelect(promptOptions);
 			break;
 		case "keybind":
 			dataElement = require("./keybind")(promptOptions.keybindOptions, dataContainerElement);
@@ -80,18 +80,20 @@ function promptRegister() {
 			return promptError(`Unhandled input type '${promptOptions.type}'`);
 	}
 
-	if (promptOptions.type != "keybind" && promptOptions.type != "multiInput") {
-		dataElement.setAttribute("id", "data");
+	if (promptOptions.type !== "multiInput") {
+		if (promptOptions.type !== "keybind") {
+			dataElement.setAttribute("id", "data");
 
-		if (promptOptions.type !== "counter") {
-			dataContainerElement.append(dataElement);
-		}
-	}
+			if (promptOptions.type !== "counter") {
+				dataContainerElement.append(dataElement);
+			}
 
-	dataElement.focus();
+			if (promptOptions.type !== "select") {
+				dataElement.select();
+			}
+		}
 
-	if (promptOptions.type !== "select" && promptOptions.type !== "keybind") {
-		dataElement.select();
+		dataElement.focus?.();
 	}
 
 	//load custom script from options
@@ -213,29 +215,34 @@ function promptCreateInput(options) {
 function promptCreateMultiInput(parentElement) {
 	let el;
 	for (const option of promptOptions.multiInputOptions) {
-		el = promptCreateInput(option);
-		el.setAttribute("id", "data");
-
+		if (option.inputAttrs) {
+			el = promptCreateInput(option);
+			el.setAttribute("id", "data");
+		}
+		if (option.selectOptions) {
+			el = promptCreateSelect(option);
+			el.setAttribute("id", "data");
+		}
 		parentElement.append(el);
 	}
 
 	return el;
 }
 
 //create multiple select
-function promptCreateSelect() {
+function promptCreateSelect(options) {
 	const dataElement = document.createElement("select");
 	let optionElement;
 
-	for (const k in promptOptions.selectOptions) {
-		if (!Object.prototype.hasOwnProperty.call(promptOptions.selectOptions, k)) {
+	for (const k in options.selectOptions) {
+		if (!Object.prototype.hasOwnProperty.call(options.selectOptions, k)) {
 			continue;
 		}
 
 		optionElement = document.createElement("option");
 		optionElement.setAttribute("value", k);
-		optionElement.textContent = promptOptions.selectOptions[k];
-		if (k === promptOptions.value) {
+		optionElement.textContent = options.selectOptions[k];
+		if (k === options.value) {
 			optionElement.setAttribute("selected", "selected");
 		}
 

diff --git a/screenshots/multiInput/multiInputSelect.PNG b/screenshots/multiInput/multiInputSelect.PNG