Time input and start of input field parser rewrite

Author: mProjectsCode

jest.config.js

@@ -2,4 +2,5 @@ module.exports = {
 	preset: "ts-jest",
 	testEnvironment: "jsdom",
 	moduleDirectories: ["node_modules", "src"],
+	verbose: true,
 };

package-lock.json

@@ -22,7 +22,6 @@ export class DateInputField extends AbstractInputField {
 		'12': 'December',
 	};
 	days: Record<string, string>;
-	years: Record<string, string>;
 
 	monthComponent: DropdownComponent;
 	dayComponent: DropdownComponent;
@@ -36,11 +35,6 @@ export class DateInputField extends AbstractInputField {
 		for (let i = 1; i <= 31; i++) {
 			this.days[i.toString()] = i.toString();
 		}
-
-		this.years = {};
-		for (let i = 1970; i < 2030; i++) {
-			this.years[i.toString()] = i.toString();
-		}
 	}
 
 	public getHtmlElement(): HTMLElement {
@@ -53,7 +47,7 @@ export class DateInputField extends AbstractInputField {
 
 	public setValue(value: string): void {
 		this.date = DateParser.parse(value);
-		console.log(this.date);
+		// console.log(this.date);
 		this.monthComponent.setValue(this.date.getMonth().toString());
 		this.dayComponent.setValue(this.date.getDay().toString());
 		this.yearComponent.setValue(this.date.getYear().toString());
@@ -69,7 +63,7 @@ export class DateInputField extends AbstractInputField {
 
 	public render(container: HTMLDivElement): void {
 		this.date = DateParser.parse(this.inputFieldMarkdownRenderChild.getInitialValue()) ?? DateParser.getDefaultDate();
-		console.log(this.date);
+		// console.log(this.date);
 
 		container.removeClass('meta-bind-plugin-input-wrapper');
 		container.addClass('meta-bind-plugin-flex-input-wrapper', 'meta-bind-plugin-input-element-group');
@@ -115,7 +109,7 @@ export class DateInputField extends AbstractInputField {
 	}
 
 	private onMonthChange(value: string): void {
-		console.log(value);
+		// console.log(value);
 		this.date.setMonthFromString(value);
 		this.onValueChange(this.getValue());
 	}

src/inputFields/DateInputField.ts

@@ -7,6 +7,7 @@ import {TextAreaInputField} from './TextAreaInputField';
 import {SelectInputField} from './SelectInputField';
 import {MultiSelectInputField} from './MultiSelectInputField';
 import {DateInputField} from './DateInputField';
+import {TimeInputField} from './TimeInputField';
 
 export enum InputFieldType {
 	TOGGLE = 'toggle',
@@ -16,6 +17,7 @@ export enum InputFieldType {
 	SELECT = 'select',
 	MULTI_SELECT = 'multi_select',
 	DATE = 'date',
+	TIME = 'time',
 	INVALID = 'invalid',
 }
 
@@ -77,6 +79,14 @@ export class InputFieldFactory {
 				throw new Error(`can not create ${inputFieldType} as inline code block`);
 			}
 			return new DateInputField(args.inputFieldMarkdownRenderChild, args.onValueChanged);
+		} else if (inputFieldType === InputFieldType.TIME) {
+			if (args.type === InputFieldMarkdownRenderChildType.CODE_BLOCK && !TimeInputField.allowCodeBlock) {
+				throw new Error(`can not create ${inputFieldType} as code block`);
+			}
+			if (args.type === InputFieldMarkdownRenderChildType.INLINE_CODE_BLOCK && !TimeInputField.allowInlineCodeBlock) {
+				throw new Error(`can not create ${inputFieldType} as inline code block`);
+			}
+			return new TimeInputField(args.inputFieldMarkdownRenderChild, args.onValueChanged);
 		}
 
 		return null;

src/inputFields/InputFieldFactory.ts

@@ -48,7 +48,7 @@ export class SliderInputField extends AbstractInputField {
 
 		let labelArgument = this.inputFieldMarkdownRenderChild.getArgument('labels');
 		if (labelArgument && labelArgument.value === true) {
-			container.createSpan({text: this.minValue.toString(), cls: 'meta-bind-slider-label'});
+			container.createSpan({text: this.minValue.toString(), cls: 'meta-bind-plugin-slider-input-label'});
 		}
 
 		const component = new SliderComponent(container);
@@ -59,7 +59,7 @@ export class SliderInputField extends AbstractInputField {
 		component.sliderEl.addClass('meta-bind-plugin-slider-input');
 
 		if (labelArgument && labelArgument.value === true) {
-			container.createSpan({text: this.maxValue.toString(), cls: 'meta-bind-slider-label'});
+			container.createSpan({text: this.maxValue.toString(), cls: 'meta-bind-plugin-slider-input-label'});
 		}
 
 		this.sliderComponent = component;

src/inputFields/SliderInputField.ts

@@ -0,0 +1,86 @@
+import {AbstractInputField} from './AbstractInputField';
+import {DropdownComponent} from 'obsidian';
+import {InputFieldMarkdownRenderChild} from '../InputFieldMarkdownRenderChild';
+import {Time, TimeParser} from '../parsers/TimeParser';
+
+export class TimeInputField extends AbstractInputField {
+	container: HTMLDivElement;
+	time: Time;
+
+	hours: Record<string, string>;
+	minutes: Record<string, string>;
+
+	hourComponent: DropdownComponent;
+	minuteComponent: DropdownComponent;
+
+
+	constructor(inputFieldMarkdownRenderChild: InputFieldMarkdownRenderChild, onValueChange: (value: any) => (void | Promise<void>)) {
+		super(inputFieldMarkdownRenderChild, onValueChange);
+
+		this.hours = {};
+		for (let i = 0; i <= 24; i++) {
+			this.hours[i.toString()] = i.toString();
+		}
+
+		this.minutes = {};
+		for (let i = 0; i <= 59; i++) {
+			this.minutes[i.toString()] = i.toString();
+		}
+	}
+
+	public getHtmlElement(): HTMLElement {
+		return this.container;
+	}
+
+	public getValue(): string {
+		return TimeParser.stringify(this.time);
+	}
+
+	public setValue(value: string): void {
+		this.time = TimeParser.parse(value);
+		// console.log(this.time);
+		this.hourComponent.setValue(this.time.getHour().toString());
+		this.minuteComponent.setValue(this.time.getMinute().toString());
+	}
+
+	public isEqualValue(value: any): boolean {
+		return value == this.getValue();
+	}
+
+	public getDefaultValue(): any {
+		return TimeParser.stringify(TimeParser.getDefaultTime());
+	}
+
+	public render(container: HTMLDivElement): void {
+		this.time = TimeParser.parse(this.inputFieldMarkdownRenderChild.getInitialValue()) ?? TimeParser.getDefaultTime();
+		// console.log(this.date);
+
+		container.removeClass('meta-bind-plugin-input-wrapper');
+		container.addClass('meta-bind-plugin-flex-input-wrapper', 'meta-bind-plugin-input-element-group');
+
+		this.hourComponent = new DropdownComponent(container);
+		this.hourComponent.addOptions(this.hours);
+		this.hourComponent.setValue(this.time.getHour().toString());
+		this.hourComponent.onChange(this.onHourChange.bind(this));
+
+		this.minuteComponent = new DropdownComponent(container);
+		this.minuteComponent.addOptions(this.minutes);
+		this.minuteComponent.setValue(this.time.getMinute().toString());
+		this.minuteComponent.onChange(this.onMinuteChange.bind(this));
+
+		this.hourComponent.selectEl.addClass('meta-bind-plugin-input-element-group-element');
+		this.minuteComponent.selectEl.addClass('meta-bind-plugin-input-element-group-element');
+
+		this.container = container;
+	}
+
+	private onHourChange(value: string): void {
+		this.time.setHourFromString(value);
+		this.onValueChange(this.getValue());
+	}
+
+	private onMinuteChange(value: string): void {
+		this.time.setMinuteFromString(value);
+		this.onValueChange(this.getValue());
+	}
+}

src/inputFields/TimeInputField.ts

@@ -0,0 +1,52 @@
+import {InputFieldType} from '../inputFields/InputFieldFactory';
+import {CharPair, ParserUtils} from '../utils/ParserUtils';
+
+interface InputFieldDeclaration {
+	fullDeclaration: string;
+	declaration: string;
+	inputFieldType: InputFieldType;
+	isBound: boolean;
+	bindTarget: string;
+
+	arguments: InputFieldArgument[];
+}
+
+interface InputFieldArgument {
+	name: string;
+	value: any;
+}
+
+export class InputFieldDeclarationParser {
+	static roundBracesPair: CharPair = new CharPair('(', ')');
+	static squareBracesPair: CharPair = new CharPair('[', ']');
+	static curlyBracesPair: CharPair = new CharPair('{', '}');
+	static allBracesPairs: CharPair[] = [
+		InputFieldDeclarationParser.roundBracesPair,
+		InputFieldDeclarationParser.squareBracesPair,
+		InputFieldDeclarationParser.curlyBracesPair,
+	];
+
+
+	static parse(fullDeclaration: string): InputFieldDeclaration {
+		const inputFieldDeclaration: InputFieldDeclaration = {} as InputFieldDeclaration;
+
+		inputFieldDeclaration.fullDeclaration = fullDeclaration;
+		inputFieldDeclaration.declaration = InputFieldDeclarationParser.extractDeclaration(inputFieldDeclaration.fullDeclaration);
+
+		const declarationParts: string[] = ParserUtils.split(inputFieldDeclaration.declaration, ':', InputFieldDeclarationParser.allBracesPairs);
+
+		const bindTarget: string = declarationParts[1] ?? '';
+		inputFieldDeclaration.isBound = !!bindTarget;
+
+		const inputFieldTypeWithArguments: string = declarationParts[0];
+
+
+		return inputFieldDeclaration;
+	}
+
+	static extractDeclaration(fullDeclaration: string): string {
+		return ParserUtils.sliceInBetween(fullDeclaration, InputFieldDeclarationParser.squareBracesPair);
+	}
+
+
+}

src/parsers/InputFieldDeclarationParser.ts

@@ -0,0 +1,81 @@
+export class Time {
+	private _hour: number;
+	private _minute: number;
+
+	constructor() {
+		this.setHour(TimeParser.getDefaultHour());
+		this.setMinute(TimeParser.getDefaultMinute());
+	}
+
+	public getHour(): number {
+		return this._hour;
+	}
+
+	public setHour(value: number) {
+		if (value < 0 || value > 24) {
+			return;
+		}
+		this._hour = value;
+	}
+
+	public getMinute(): number {
+		return this._minute;
+	}
+
+	public setMinute(value: number) {
+		if (value < 0 || value > 59) {
+			return;
+		}
+		this._minute = value;
+	}
+
+	public getUniformHour(): string {
+		return ('00' + this.getHour().toString()).slice(-2);
+	}
+
+	public getUniformMinute(): string {
+		return ('00' + this.getMinute().toString()).slice(-2);
+	}
+
+	public setHourFromString(str: string) {
+		let v = Number.parseInt(str);
+		this.setHour(Number.isNaN(v) ? TimeParser.getDefaultHour() : v);
+	}
+
+	public setMinuteFromString(str: string) {
+		let v = Number.parseInt(str);
+		this.setMinute(Number.isNaN(v) ? TimeParser.getDefaultMinute() : v);
+	}
+}
+
+export class TimeParser {
+	public static parse(timeString: string): Time {
+		const time: Time = TimeParser.getDefaultTime();
+
+		const timeParts = timeString.split(':');
+		if (timeParts.length !== 2) {
+			return null;
+		}
+
+		time.setHourFromString(timeParts[0]);
+		time.setMinuteFromString(timeParts[1]);
+
+		return time;
+	}
+
+	public static stringify(time: Time): string {
+		return `${time.getUniformHour()}:${time.getUniformMinute()}`;
+	}
+
+	public static getDefaultTime(): Time {
+		return new Time();
+	}
+
+	public static getDefaultHour(): number {
+		return 0;
+	}
+
+	public static getDefaultMinute(): number {
+		return 0;
+	}
+}

src/parsers/TimeParser.ts

@@ -64,7 +64,7 @@ export class MetaBindSettingTab extends PluginSettingTab {
 					'fs_us': 'US date format (Jan 30, 2022)',
 				});
 				cb.onChange(data => {
-					this.plugin.settings.dateFormat = data as any;
+					this.plugin.settings.dateFormat = data as DateFormat;
 					this.plugin.saveSettings();
 				});
 			});