Merge pull request #131 from uvarov-frontend/feature/enhancement_input

Feature/enhancement input
uvarov-frontend · Oct 10, 2023 · 2c52aac · 2c52aac
2 parents 8781ebb + 4111317
commit 2c52aac
Show file tree

Hide file tree

Showing 12 changed files with 71 additions and 29 deletions.
diff --git a/docs/en/reference/additionally/actions.mdx b/docs/en/reference/additionally/actions.mdx
@@ -139,19 +139,19 @@ The method is triggered after changing the time in any way. The parameters that
 
 `Default: null`
 
-`Options: changeToInput(e, HTMLInputElement, dates, time, hours, minutes, keeping) => void | null`
+`Options: changeToInput(e, calendar, dates, time, hours, minutes, keeping) => void | null`
 
 ```js
 new VanillaCalendar('#calendar', {
   actions: {
-    changeToInput(e, HTMLInputElement, dates, time, hours, minutes, keeping) {},
+    changeToInput(e, calendar, dates, time, hours, minutes, keeping) {},
   },
 });
 ```
 For this method to work, the parameter <a href="/docs/reference/main/main-settings#input">`input`</a> with the value `true` is required.
 
 The method is triggered after clicking on a day in the calendar or changing the time in any way.
-Parameters that can be received: `e` - event, `HTMLInputElement` - HTML element that is an input field, `dates` - array of selected dates, `time` - selected time, `hours` - selected hour, `minutes ` is the selected minutes, `keeping` is the selected AM/PM marker.
+Parameters that can be received: `e` - event, `calendar` - an object containing `HTMLInputElement`, `HTMLElement` and methods `show()`, `hide()`, `dates` - array of selected dates, `time` - selected time, `hours` - selected hour, `minutes ` is the selected minutes, `keeping` is the selected AM/PM marker.
 
 ---
 

diff --git a/docs/en/reference/additionally/css-classes.mdx b/docs/en/reference/additionally/css-classes.mdx
@@ -14,7 +14,6 @@ new VanillaCalendar('#calendar', {
     calendarYear: 'vanilla-calendar_year',
     calendarHidden: 'vanilla-calendar_hidden',
     calendarToInput: 'vanilla-calendar_to-input',
-    calendarInputWrapper: 'vanilla-calendar-input-wrapper',
     controls: 'vanilla-calendar-controls',
     grid: 'vanilla-calendar-grid',
     gridDisabled: 'vanilla-calendar-grid_disabled',

diff --git a/docs/ru/reference/additionally/actions.mdx b/docs/ru/reference/additionally/actions.mdx
@@ -142,19 +142,19 @@ new VanillaCalendar('#calendar', {
 
 `Default: null`
 
-`Options: changeToInput(e, HTMLInputElement, dates, time, hours, minutes, keeping) => void | null`
+`Options: changeToInput(e, calendar, dates, time, hours, minutes, keeping) => void | null`
 
 ```js
 new VanillaCalendar('#calendar', {
   actions: {
-    changeToInput(e, HTMLInputElement, dates, time, hours, minutes, keeping) {},
+    changeToInput(e, calendar, dates, time, hours, minutes, keeping) {},
   },
 });
 ```
 Для работы этого метода, необходим параметр <a href="/docs/reference/main/main-settings#input">`input`</a> со значением `true`.
 
 Метод срабатывает после после нажатия на день в календаре или изменения времени любым способом.
-Параметры, которые можно получить: `e` - событие, `HTMLInputElement` - HTML-элемент, который является полем ввода, `dates` - массив выбранных дат, `time` - выбранное время, `hours` - выбранный час, `minutes` - выбранные минуты,`keeping` - выбранный маркер AM/PM.
+Параметры, которые можно получить: `e` - событие, `calendar` - объект, содержащий `HTMLInputElement`, `HTMLElement` и методы `show()`, `hide()`, `dates` - массив выбранных дат, `time` - выбранное время, `hours` - выбранный час, `minutes` - выбранные минуты,`keeping` - выбранный маркер AM/PM.
 
 ---
 

diff --git a/docs/ru/reference/additionally/css-classes.mdx b/docs/ru/reference/additionally/css-classes.mdx
@@ -14,7 +14,6 @@ new VanillaCalendar('#calendar', {
     calendarYear: 'vanilla-calendar_year',
     calendarHidden: 'vanilla-calendar_hidden',
     calendarToInput: 'vanilla-calendar_to-input',
-    calendarInputWrapper: 'vanilla-calendar-input-wrapper',
     controls: 'vanilla-calendar-controls',
     grid: 'vanilla-calendar-grid',
     gridDisabled: 'vanilla-calendar-grid_disabled',

diff --git a/package/src/classes.ts b/package/src/classes.ts
@@ -6,7 +6,6 @@ const classes = {
 	calendarYear: 'vanilla-calendar_year',
 	calendarHidden: 'vanilla-calendar_hidden',
 	calendarToInput: 'vanilla-calendar_to-input',
-	calendarInputWrapper: 'vanilla-calendar-input-wrapper',
 	controls: 'vanilla-calendar-controls',
 	grid: 'vanilla-calendar-grid',
 	gridDisabled: 'vanilla-calendar-grid_disabled',

diff --git a/package/src/index.d.ts b/package/src/index.d.ts
@@ -68,7 +68,7 @@ declare class VanillaCalendar<T extends (HTMLElement | string), R extends Partia
 
 	readonly HTMLElement: HTMLElement | null;
 
-	readonly HTMLInputElement?: HTMLElement;
+	readonly HTMLInputElement?: HTMLInputElement;
 
 	readonly currentType: string;
 

diff --git a/package/src/scripts/methods/clickCalendar.ts b/package/src/scripts/methods/clickCalendar.ts
@@ -117,8 +117,27 @@ const clickCalendar = (self: IVanillaCalendar) => {
 
 				if (self.actions.clickDay) self.actions.clickDay(e, self.selectedDates);
 
-				if (self.input && self.HTMLInputElement && self.actions.changeToInput) {
-					self.actions.changeToInput(e, self.HTMLInputElement, self.selectedDates, self.selectedTime, self.selectedHours, self.selectedMinutes, self.selectedKeeping);
+				if (self.input && self.HTMLInputElement && self.HTMLElement && self.actions.changeToInput) {
+					const calendar = {
+						hide() {
+							(self.HTMLElement as HTMLElement).classList.add(self.CSSClasses.calendarHidden);
+						},
+						show() {
+							(self.HTMLElement as HTMLElement).classList.remove(self.CSSClasses.calendarHidden);
+						},
+						HTMLInputElement: self.HTMLInputElement,
+						HTMLElement: self.HTMLElement as HTMLDivElement,
+					};
+
+					self.actions.changeToInput(
+						e,
+						calendar,
+						self.selectedDates,
+						self.selectedTime,
+						self.selectedHours,
+						self.selectedMinutes,
+						self.selectedKeeping,
+					);
 				}
 
 				if (dayBtnPrevEl) {

diff --git a/package/src/scripts/methods/controlTime.ts b/package/src/scripts/methods/controlTime.ts
@@ -30,7 +30,26 @@ const controlTime = (self: IVanillaCalendar, keepingTime: number | false) => {
 		}
 
 		if (self.input && self.HTMLInputElement && self.actions.changeToInput) {
-			self.actions.changeToInput(e, self.HTMLInputElement, self.selectedDates, self.selectedTime, self.selectedHours, self.selectedMinutes, self.selectedKeeping);
+			const calendar = {
+				hide() {
+					(self.HTMLElement as HTMLElement).classList.add(self.CSSClasses.calendarHidden);
+				},
+				show() {
+					(self.HTMLElement as HTMLElement).classList.remove(self.CSSClasses.calendarHidden);
+				},
+				HTMLInputElement: self.HTMLInputElement as HTMLInputElement,
+				HTMLElement: self.HTMLElement as HTMLDivElement,
+			};
+
+			self.actions.changeToInput(
+				e,
+				calendar,
+				self.selectedDates,
+				self.selectedTime,
+				self.selectedHours,
+				self.selectedMinutes,
+				self.selectedKeeping,
+			);
 		}
 	};
 

diff --git a/package/src/scripts/methods/createCalendarToInput.ts b/package/src/scripts/methods/createCalendarToInput.ts
@@ -2,17 +2,12 @@ import { IVanillaCalendar } from '../../types';
 
 const createCalendarToInput = (self: IVanillaCalendar) => {
 	if (!self.input || !self.HTMLElement || !self.HTMLElement.parentNode) return;
-	self.HTMLInputElement = self.HTMLElement as HTMLElement;
+	self.HTMLInputElement = self.HTMLElement as HTMLInputElement;
 
-	const wrapper = document.createElement('div');
 	const calendar = document.createElement('div');
-	wrapper.className = self.CSSClasses.calendarInputWrapper;
 	calendar.className = `${self.CSSClasses.calendar} ${self.CSSClasses.calendarToInput} ${self.CSSClasses.calendarHidden}`;
-
-	self.HTMLElement.parentNode.insertBefore(wrapper, self.HTMLInputElement);
-	wrapper.append(self.HTMLInputElement);
 	self.HTMLElement = calendar;
-	wrapper.append(self.HTMLElement);
+	document.body.append(self.HTMLElement);
 };
 
 export default createCalendarToInput;
diff --git a/package/src/scripts/methods/handlerInput.ts b/package/src/scripts/methods/handlerInput.ts
@@ -15,7 +15,11 @@ const handlerInput = (self: IVanillaCalendar) => {
 	if (!self || !self.input) return;
 	currentSelf = self;
 	self.HTMLInputElement?.addEventListener('click', () => {
-		self.HTMLElement?.classList.remove(self.CSSClasses.calendarHidden);
+		if (self.HTMLElement && self.HTMLInputElement) {
+			self.HTMLElement.style.left = `${self.HTMLInputElement.offsetLeft}px`;
+			self.HTMLElement.style.top = `${self.HTMLInputElement.offsetTop + self.HTMLInputElement.clientHeight}px`;
+			self.HTMLElement.classList.remove(self.CSSClasses.calendarHidden);
+		}
 		document.addEventListener('click', documentClickEvent, { capture: true });
 	});
 };

diff --git a/package/src/styles/vanilla-calendar.css b/package/src/styles/vanilla-calendar.css
@@ -15,11 +15,7 @@
 }
 
 .vanilla-calendar_to-input {
-	@apply absolute left-0 top-full mt-1
-}
-
-.vanilla-calendar-input-wrapper {
-	@apply relative;
+	@apply absolute left-0 bottom-0 mt-1
 }
 
 .vanilla-calendar-controls {

diff --git a/package/src/types.ts b/package/src/types.ts
@@ -75,7 +75,20 @@ export interface IActions {
 	clickYear: ((e: MouseEvent, year: number) => void) | null;
 	clickArrow: ((e: MouseEvent, year: number, month: number) => void) | null;
 	changeTime: ((e: Event, time: string, hours: string, minutes: string, keeping: string) => void) | null;
-	changeToInput: ((e: Event, HTMLInputElement: HTMLElement, dates?: string[], time?: string, hours?: string, minutes?: string, keeping?: string) => void) | null;
+	changeToInput: ((
+		e: Event,
+		calendar: {
+			hide(): void;
+			show(): void;
+			HTMLInputElement: HTMLInputElement;
+			HTMLElement: HTMLDivElement;
+		},
+		dates?: string[],
+		time?: string,
+		hours?: string,
+		minutes?: string,
+		keeping?: string
+	) => void) | null;
 	getDays: ((day: number, date: string, HTMLElement: HTMLElement, HTMLButtonElement: HTMLButtonElement) => void) | null;
 }
 
@@ -101,7 +114,6 @@ export interface ICSSClasses {
 	calendarYear: string;
 	calendarHidden: string;
 	calendarToInput: string;
-	calendarInputWrapper: string;
 	controls: string;
 	grid: string;
 	gridDisabled: string;
@@ -187,7 +199,7 @@ export interface IVariables extends IOptions {
 }
 
 export interface IVanillaCalendar extends IVariables {
-	HTMLInputElement?: HTMLElement;
+	HTMLInputElement?: HTMLInputElement;
 	rangeMin?: FormatDateString;
 	rangeMax?: FormatDateString;
 	rangeDisabled?: FormatDateString[];