Select and multi select

Author: mProjectsCode

README.md

@@ -18,7 +18,7 @@ INPUT[input_type(argument_name(argument_value), argument_name_2, ...):file_name_
 ```
 
 #### Input field types
-- `slider` a slider from 0 to 100 (custom ranges are on the road map)
+- `slider` a slider from 0 to 100 (custom ranges can be set using `minValue` and `maxValue`, see below)
 - `toggle` a toggle element
 - `text` a text field
 - `text_area` a bigger text field

src/InputFieldMarkdownRenderChild.ts

@@ -4,6 +4,11 @@ import {Logger} from './utils/Logger';
 import {AbstractInputField} from './inputFields/AbstractInputField';
 import {InputFieldFactory, InputFieldType} from './inputFields/InputFieldFactory';
 
+export enum InputFieldMarkdownRenderChildType {
+	INLINE_CODE_BLOCK,
+	CODE_BLOCK,
+}
+
 export class InputFieldMarkdownRenderChild extends MarkdownRenderChild {
 	plugin: MetaBindPlugin;
 	metaData: any;
@@ -24,7 +29,7 @@ export class InputFieldMarkdownRenderChild extends MarkdownRenderChild {
 
 	arguments: { name: string, value: any }[];
 
-	constructor(containerEl: HTMLElement, fullDeclaration: string, plugin: MetaBindPlugin, filePath: string, uid: number) {
+	constructor(containerEl: HTMLElement, type: InputFieldMarkdownRenderChildType, fullDeclaration: string, plugin: MetaBindPlugin, filePath: string, uid: number) {
 		super(containerEl);
 
 		//console.log(this, 2)
@@ -43,6 +48,7 @@ export class InputFieldMarkdownRenderChild extends MarkdownRenderChild {
 			this.parseDeclaration();
 
 			this.inputField = InputFieldFactory.createInputField(this.inputFieldType, {
+				type: type,
 				inputFieldMarkdownRenderChild: this,
 				onValueChanged: this.updateMetaData.bind(this),
 			});
@@ -100,31 +106,54 @@ export class InputFieldMarkdownRenderChild extends MarkdownRenderChild {
 			}
 
 			if (inputFieldArgumentName === 'addLabels') {
+				if (this.inputFieldType !== InputFieldType.SLIDER) {
+					throw new Error(`argument \'${inputFieldArgumentName}\' is only applicable to slider input fields`);
+				}
+
 				this.arguments.push({name: 'labels', value: true});
 			}
 
 			if (inputFieldArgumentName === 'minValue') {
+				if (this.inputFieldType !== InputFieldType.SLIDER) {
+					throw new Error(`argument \'${inputFieldArgumentName}\' is only applicable to slider input fields`);
+				}
+
 				const inputFieldArgumentValue: string = this.extractInputFieldArgumentValue(inputFieldArgument);
 				const inputFieldArgumentValueAsNumber: number = Number.parseInt(inputFieldArgumentValue);
 
 				if (Number.isNaN(inputFieldArgumentValueAsNumber)) {
 					throw new Error(`argument \'${inputFieldArgumentName}\' value must be of type number`);
 				}
 
-				let inputFieldClassArgument: { name: string, value: number } = {name: inputFieldArgumentName, value: inputFieldArgumentValueAsNumber};
-				this.arguments.push(inputFieldClassArgument);
+				let inputFieldArgumentObject: { name: string, value: number } = {name: inputFieldArgumentName, value: inputFieldArgumentValueAsNumber};
+				this.arguments.push(inputFieldArgumentObject);
 			}
 
 			if (inputFieldArgumentName === 'maxValue') {
+				if (this.inputFieldType !== InputFieldType.SLIDER) {
+					throw new Error(`argument \'${inputFieldArgumentName}\' is only applicable to slider input fields`);
+				}
+
 				const inputFieldArgumentValue: string = this.extractInputFieldArgumentValue(inputFieldArgument);
 				const inputFieldArgumentValueAsNumber: number = Number.parseInt(inputFieldArgumentValue);
 
 				if (Number.isNaN(inputFieldArgumentValueAsNumber)) {
 					throw new Error(`argument \'${inputFieldArgumentName}\' value must be of type number`);
 				}
 
-				let inputFieldClassArgument: { name: string, value: number } = {name: inputFieldArgumentName, value: inputFieldArgumentValueAsNumber};
-				this.arguments.push(inputFieldClassArgument);
+				let inputFieldArgumentObject: { name: string, value: number } = {name: inputFieldArgumentName, value: inputFieldArgumentValueAsNumber};
+				this.arguments.push(inputFieldArgumentObject);
+			}
+
+			if (inputFieldArgumentName === 'option') {
+				if (this.inputFieldType !== InputFieldType.SELECT && this.inputFieldType !== InputFieldType.MULTI_SELECT) {
+					throw new Error(`argument \'${inputFieldArgumentName}\' is only applicable to select and multi-select input fields`);
+				}
+
+				const inputFieldArgumentValue: string = this.extractInputFieldArgumentValue(inputFieldArgument);
+
+				let inputFieldArgumentObject: { name: string, value: string } = {name: inputFieldArgumentName, value: inputFieldArgumentValue};
+				this.arguments.push(inputFieldArgumentObject);
 			}
 		}
 	}
@@ -200,16 +229,20 @@ export class InputFieldMarkdownRenderChild extends MarkdownRenderChild {
 	}
 
 	updateValue(value: any) {
-		if (value != null && this.inputField.getValue() !== value && this.valueQueue.length === 0) {
-			Logger.logDebug(`updating input field ${this.uid} to '${value.toString()}'`);
+		if (value == null) {
+			value = this.inputField.getDefaultValue();
+		}
+
+		if (!this.inputField.isEqualValue(value) && this.valueQueue.length === 0) {
+			Logger.logDebug(`updating input field ${this.uid} to`, value);
 			this.inputField.setValue(value);
 		}
 	}
 
 	getInitialValue() {
 		// console.log(this);
 		if (this.isBound) {
-			return this.metaData[this.bindTargetMetadataField];
+			return this.metaData[this.bindTargetMetadataField] ?? this.inputField.getDefaultValue();
 		}
 	}
 

src/inputFields/AbstractInputField.ts

@@ -1,6 +1,8 @@
 import {InputFieldMarkdownRenderChild} from '../InputFieldMarkdownRenderChild';
 
 export abstract class AbstractInputField {
+	static allowCodeBlock: boolean = true;
+	static allowInlineCodeBlock: boolean = true;
 	inputFieldMarkdownRenderChild: InputFieldMarkdownRenderChild;
 	onValueChange: (value: any) => void | Promise<void>;
 
@@ -21,6 +23,10 @@ export abstract class AbstractInputField {
 	 */
 	abstract setValue(value: any): void;
 
+	abstract isEqualValue(value: any): boolean;
+
+	abstract getDefaultValue(): any;
+
 	abstract getHtmlElement(): HTMLElement;
 
 	abstract render(container: HTMLDivElement): void;

src/inputFields/InputFieldFactory.ts

@@ -1,28 +1,72 @@
 import {AbstractInputField} from './AbstractInputField';
 import {ToggleInputField} from './ToggleInputField';
-import {InputFieldMarkdownRenderChild} from '../InputFieldMarkdownRenderChild';
+import {InputFieldMarkdownRenderChild, InputFieldMarkdownRenderChildType} from '../InputFieldMarkdownRenderChild';
 import {TextInputField} from './TextInputField';
 import {SliderInputField} from './SliderInputField';
 import {TextAreaInputField} from './TextAreaInputField';
+import {SelectInputField} from './SelectInputField';
+import {MultiSelectInputField} from './MultiSelectInputField';
 
 export enum InputFieldType {
 	TOGGLE = 'toggle',
 	SLIDER = 'slider',
 	TEXT = 'text',
 	TEXT_AREA = 'text_area',
+	SELECT = 'select',
+	MULTI_SELECT = 'multi_select',
 	INVALID = 'invalid',
 }
 
 export class InputFieldFactory {
-	static createInputField(inputFieldType: InputFieldType, args: { inputFieldMarkdownRenderChild: InputFieldMarkdownRenderChild, onValueChanged: (value: any) => void | Promise<void> }): AbstractInputField {
+	static createInputField(inputFieldType: InputFieldType, args: { type: InputFieldMarkdownRenderChildType, inputFieldMarkdownRenderChild: InputFieldMarkdownRenderChild, onValueChanged: (value: any) => void | Promise<void> }): AbstractInputField {
 		if (inputFieldType === InputFieldType.TOGGLE) {
+			if (args.type === InputFieldMarkdownRenderChildType.CODE_BLOCK && !ToggleInputField.allowCodeBlock) {
+				throw new Error(`can not create ${inputFieldType} as code block`);
+			}
+			if (args.type === InputFieldMarkdownRenderChildType.INLINE_CODE_BLOCK && !ToggleInputField.allowInlineCodeBlock) {
+				throw new Error(`can not create ${inputFieldType} as inline code block`);
+			}
 			return new ToggleInputField(args.inputFieldMarkdownRenderChild, args.onValueChanged);
 		} else if (inputFieldType === InputFieldType.SLIDER) {
+			if (args.type === InputFieldMarkdownRenderChildType.CODE_BLOCK && !SliderInputField.allowCodeBlock) {
+				throw new Error(`can not create ${inputFieldType} as code block`);
+			}
+			if (args.type === InputFieldMarkdownRenderChildType.INLINE_CODE_BLOCK && !SliderInputField.allowInlineCodeBlock) {
+				throw new Error(`can not create ${inputFieldType} as inline code block`);
+			}
 			return new SliderInputField(args.inputFieldMarkdownRenderChild, args.onValueChanged);
 		} else if (inputFieldType === InputFieldType.TEXT) {
+			if (args.type === InputFieldMarkdownRenderChildType.CODE_BLOCK && !TextInputField.allowCodeBlock) {
+				throw new Error(`can not create ${inputFieldType} as code block`);
+			}
+			if (args.type === InputFieldMarkdownRenderChildType.INLINE_CODE_BLOCK && !TextInputField.allowInlineCodeBlock) {
+				throw new Error(`can not create ${inputFieldType} as inline code block`);
+			}
 			return new TextInputField(args.inputFieldMarkdownRenderChild, args.onValueChanged);
 		} else if (inputFieldType === InputFieldType.TEXT_AREA) {
+			if (args.type === InputFieldMarkdownRenderChildType.CODE_BLOCK && !TextAreaInputField.allowCodeBlock) {
+				throw new Error(`can not create ${inputFieldType} as code block`);
+			}
+			if (args.type === InputFieldMarkdownRenderChildType.INLINE_CODE_BLOCK && !TextAreaInputField.allowInlineCodeBlock) {
+				throw new Error(`can not create ${inputFieldType} as inline code block`);
+			}
 			return new TextAreaInputField(args.inputFieldMarkdownRenderChild, args.onValueChanged);
+		} else if (inputFieldType === InputFieldType.SELECT) {
+			if (args.type === InputFieldMarkdownRenderChildType.CODE_BLOCK && !SelectInputField.allowCodeBlock) {
+				throw new Error(`can not create ${inputFieldType} as code block`);
+			}
+			if (args.type === InputFieldMarkdownRenderChildType.INLINE_CODE_BLOCK && !SelectInputField.allowInlineCodeBlock) {
+				throw new Error(`can not create ${inputFieldType} as inline code block`);
+			}
+			return new SelectInputField(args.inputFieldMarkdownRenderChild, args.onValueChanged);
+		} else if (inputFieldType === InputFieldType.MULTI_SELECT) {
+			if (args.type === InputFieldMarkdownRenderChildType.CODE_BLOCK && !MultiSelectInputField.allowCodeBlock) {
+				throw new Error(`can not create ${inputFieldType} as code block`);
+			}
+			if (args.type === InputFieldMarkdownRenderChildType.INLINE_CODE_BLOCK && !MultiSelectInputField.allowInlineCodeBlock) {
+				throw new Error(`can not create ${inputFieldType} as inline code block`);
+			}
+			return new MultiSelectInputField(args.inputFieldMarkdownRenderChild, args.onValueChanged);
 		}
 
 		return null;
@@ -37,4 +81,5 @@ export class InputFieldFactory {
 
 		return InputFieldType.INVALID;
 	}
+
 }

src/inputFields/MultiSelectInputField.ts

@@ -0,0 +1,43 @@
+import {SelectInputField} from './SelectInputField';
+import {InputFieldMarkdownRenderChild} from '../InputFieldMarkdownRenderChild';
+import {arrayEquals} from '../utils/Utils';
+
+export class MultiSelectInputField extends SelectInputField {
+
+	constructor(inputFieldMarkdownRenderChild: InputFieldMarkdownRenderChild, onValueChange: (value: any) => (void | Promise<void>)) {
+		super(inputFieldMarkdownRenderChild, onValueChange);
+		this.allowMultiSelect = true;
+	}
+
+	getValue(): any {
+		return this.elements.filter(x => x.isActive()).map(x => x.value);
+	}
+
+	setValue(value: string[]): void {
+		if (value.length === 0) {
+			return;
+		}
+
+		elementLoop : for (const element of this.elements) {
+			for (const valueElement of value) {
+				if (valueElement === element.value) {
+					element.setActive(true, false);
+					continue elementLoop;
+				}
+			}
+			element.setActive(false, false);
+		}
+	}
+
+	isEqualValue(value: any): boolean {
+		if (!Array.isArray(value)) {
+			return false;
+		}
+
+		return arrayEquals(this.getValue(), value);
+	}
+
+	getDefaultValue(): string[] {
+		return [];
+	}
+}