Merge pull request #167 from uvarov-frontend/fix/position_calendar_input

Fix position calendar input

demo/pages/input/main.ts

@@ -19,6 +19,11 @@ const configInput: IOptions = {
 			calendar.hide();
 		},
 	},
+	settings: {
+		visibility: {
+			positionToInput: 'center',
+		},
+	},
 };
 
 const configDiv: IOptions = {

docs/en/reference/additionally/settings.mdx

@@ -704,3 +704,25 @@ new VanillaCalendar('#calendar', {
 ```
 
 With this parameter, you can decide whether to display days from the previous and next months.
+
+---
+
+## settings.visibility.positionToInput
+
+`Type: String`
+
+`Default: 'left'`
+
+`Options: 'left' | 'center' | 'right'`
+
+```js
+new VanillaCalendar('#calendar', {
+  settings: {
+    visibility: {
+      positionToInput: 'center',
+    },
+  },
+});
+```
+
+This parameter specifies the position of the calendar relative to input, if the calendar is initialized with the `input` parameter.

docs/ru/reference/additionally/settings.mdx

@@ -705,3 +705,25 @@ new VanillaCalendar('#calendar', {
 ```
 
 С помощью этого параметра вы можете решить, будут ли отображаться дни из прошлого и следующего месяца.
+
+---
+
+## settings.visibility.positionToInput
+
+`Type: String`
+
+`Default: 'left'`
+
+`Options: 'left' | 'center' | 'right'`
+
+```js
+new VanillaCalendar('#calendar', {
+  settings: {
+    visibility: {
+      positionToInput: 'center',
+    },
+  },
+});
+```
+
+Этот параметр определяет положение календаря относительно input, если каклендарь инициализирован с параметром `input`.

examples/additional-features-date-picker-in-input.ts

@@ -18,6 +18,11 @@ const options: Options = {
       }
     },
   },
+  settings: {
+    visibility: {
+      positionToInput: 'center',
+    },
+  },
 };
 
 const calendarInput = new VanillaCalendar('#calendar-input', options);

package/src/scripts/default.ts

@@ -55,6 +55,7 @@ export default class DefaultOptionsCalendar {
 			today: true,
 			disabled: false,
 			daysOutside: true,
+			positionToInput: 'left',
 		},
 	};
 	locale: T.ILocale = {

package/src/scripts/handles/handleInput.ts

@@ -3,11 +3,17 @@ import actionsInput from '@scripts/helpers/actionsInput';
 import handleClick from '@scripts/handles/handleClick';
 import update from '@scripts/update';
 
-const setPositionCalendar = (input: HTMLInputElement, calendar: HTMLElement) => {
+const setPositionCalendar = (input: HTMLInputElement, calendar: HTMLElement, position: 'left' | 'center' | 'right') => {
+	const getPosition = {
+		left: 0,
+		center: input.offsetWidth / 2 - calendar.offsetWidth / 2,
+		right: input.offsetWidth - calendar.offsetWidth,
+	};
+
 	let top = input.offsetHeight;
-	let left = 0;
+	let left = getPosition[position];
 
-	for (let el: HTMLElement | null = input; el; el = el.offsetParent as HTMLElement) {
+	for (let el: HTMLElement = input; el; el = el.offsetParent as HTMLElement) {
 		top += el.offsetTop || 0;
 		left += el.offsetLeft || 0;
 	}
@@ -22,9 +28,9 @@ const handleInput = (self: VanillaCalendar) => {
 	const createCalendarToInput = () => {
 		const calendar = document.createElement('div');
 		calendar.className = `${self.CSSClasses.calendar} ${self.CSSClasses.calendarToInput} ${self.CSSClasses.calendarHidden}`;
-		setPositionCalendar(self.HTMLInputElement as HTMLInputElement, calendar);
 		self.HTMLElement = calendar;
 		document.body.append(self.HTMLElement);
+		setPositionCalendar(self.HTMLInputElement as HTMLInputElement, calendar, self.settings.visibility.positionToInput);
 		firstInit = false;
 
 		setTimeout(() => actionsInput(self).show(), 0);
@@ -33,19 +39,23 @@ const handleInput = (self: VanillaCalendar) => {
 		handleClick(self);
 	};
 
+	const handleResize = () => setPositionCalendar(self.HTMLInputElement as HTMLInputElement, self.HTMLElement, self.settings.visibility.positionToInput);
+
 	const documentClickEvent = (e: MouseEvent) => {
 		if (!self || e.target === self.HTMLInputElement || self.HTMLElement?.contains(e.target as Node)) return;
 		if (self.HTMLInputElement && self.HTMLElement) actionsInput(self as VanillaCalendar).hide();
+		window.removeEventListener('resize', handleResize);
 		document.removeEventListener('click', documentClickEvent, { capture: true });
 	};
 
 	self.HTMLInputElement.addEventListener('click', () => {
 		if (firstInit) {
 			createCalendarToInput();
 		} else {
-			setPositionCalendar(self.HTMLInputElement as HTMLInputElement, self.HTMLElement);
+			setPositionCalendar(self.HTMLInputElement as HTMLInputElement, self.HTMLElement, self.settings.visibility.positionToInput);
 			actionsInput(self as VanillaCalendar).show();
 		}
+		window.addEventListener('resize', handleResize);
 		document.addEventListener('click', documentClickEvent, { capture: true });
 	});
 };

package/types.ts

@@ -50,6 +50,7 @@ export interface IVisibility {
 	today: boolean;
 	disabled: boolean;
 	daysOutside: boolean;
+	positionToInput: 'left' | 'center' | 'right';
 }
 
 export interface ISettings {