Merge pull request #237 from uvarov-frontend/feature/225_hide_calenda…

…r_with_confirmation Feature/225_hide_calendar_with_confirmation
uvarov-frontend · Mar 11, 2024 · f3c5a33 · f3c5a33
2 parents 18a5960 + cbd60e4
commit f3c5a33
Show file tree

Hide file tree

Showing 17 changed files with 98 additions and 63 deletions.
diff --git a/demo/pages/input/main.ts b/demo/pages/input/main.ts
@@ -9,14 +9,14 @@ import '@src/styles/vanilla-calendar.css';
 const configInput: IOptions = {
 	input: true,
 	actions: {
-		changeToInput(e, calendar, self) {
+		changeToInput(e, self) {
 			if (!self.selectedDates || !self.HTMLInputElement) return;
 			if (self.selectedDates[0]) {
 				self.HTMLInputElement.value = self.selectedDates[0];
 			} else {
 				self.HTMLInputElement.value = '';
 			}
-			calendar.hide();
+			self.hide();
 		},
 	},
 	settings: {
@@ -29,14 +29,14 @@ const configInput: IOptions = {
 const configDiv: IOptions = {
 	input: true,
 	actions: {
-		changeToInput(e, calendar, self) {
+		changeToInput(e, self) {
 			if (!self.selectedDates || !self.HTMLInputElement) return;
 			if (self.selectedDates[0]) {
 				self.HTMLInputElement.innerHTML = self.selectedDates[0];
 			} else {
 				self.HTMLInputElement.innerHTML = '';
 			}
-			calendar.hide();
+			self.hide();
 		},
 	},
 };

diff --git a/package/build/vanilla-calendar.min.js b/package/build/vanilla-calendar.min.js
diff --git a/package/build/vanilla-calendar.min.mjs b/package/build/vanilla-calendar.min.mjs
diff --git a/package/index.d.ts b/package/index.d.ts
@@ -25,6 +25,8 @@ declare class VanillaCalendar implements T.IVanillaCalendar {
 	init: () => () => void;
 	update: (reset?: T.IReset) => void;
 	destroy: () => void;
+	show: () => void;
+	hide: () => void;
 
 	readonly HTMLElement: HTMLElement;
 	readonly HTMLOriginalElement: HTMLElement;

diff --git a/package/src/scripts/default.ts b/package/src/scripts/default.ts
@@ -73,8 +73,11 @@ export default class DefaultOptionsCalendar {
 		getDays: null,
 		getMonths: null,
 		getYears: null,
-		hideCalendar: null,
+		initCalendar: null,
+		updateCalendar: null,
+		destroyCalendar: null,
 		showCalendar: null,
+		hideCalendar: null,
 	};
 	popups: T.IPopups = {};
 	CSSClasses: T.CSSClasses = { ...classes };

diff --git a/package/src/scripts/destroy.ts b/package/src/scripts/destroy.ts
@@ -13,6 +13,7 @@ const destroy = (self: VanillaCalendar) => {
 	}
 
 	self.HTMLElement = self.HTMLOriginalElement;
+	if (self.actions.destroyCalendar) self.actions.destroyCalendar(self);
 };
 
 export default destroy;
diff --git a/package/src/scripts/handles/handleClickDay.ts b/package/src/scripts/handles/handleClickDay.ts
@@ -1,6 +1,5 @@
 import VanillaCalendar from '@src/vanilla-calendar';
 import { FormatDateString } from '@package/types';
-import actionsInput from '@scripts/helpers/actionsInput';
 import changeMonth from '@scripts/methods/changeMonth';
 import createDays from '@scripts/methods/createDays';
 import handleDayRangedSelection from '@scripts/handles/handleDayRangedSelection';
@@ -27,7 +26,6 @@ const handleClickDay = (self: VanillaCalendar, event: MouseEvent) => {
 	if (isInitAsInput && self.actions.changeToInput) {
 		self.actions.changeToInput(
 			event,
-			actionsInput(self),
 			self,
 		);
 	}

diff --git a/package/src/scripts/handles/handleInput.ts b/package/src/scripts/handles/handleInput.ts
@@ -1,7 +1,6 @@
 import VanillaCalendar from '@src/vanilla-calendar';
-import actionsInput from '@scripts/helpers/actionsInput';
 import handleClick from '@scripts/handles/handleClick';
-import update from '@scripts/update';
+import reset from '@scripts/reset';
 import { IVisibility, CSSClasses } from '@/package/types';
 
 const setPositionCalendar = (input: HTMLInputElement, calendar: HTMLElement, position: IVisibility['positionToInput'], css: CSSClasses) => {
@@ -42,20 +41,20 @@ const handleInput = (self: VanillaCalendar) => {
 
 		setTimeout(() => {
 			setPositionCalendar(self.HTMLInputElement as HTMLInputElement, calendar, self.settings.visibility.positionToInput, self.CSSClasses);
-			actionsInput(self).show();
+			self.show();
 		}, 0);
-		update(self, {
+		reset(self, {
 			year: true, month: true, dates: true, holidays: true, time: true,
 		});
-
+		if (self.actions.initCalendar) self.actions.initCalendar(self);
 		return handleClick(self);
 	};
 
 	const handleResize = () => setPositionCalendar(self.HTMLInputElement as HTMLInputElement, self.HTMLElement, self.settings.visibility.positionToInput, self.CSSClasses);
 
 	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();
+		if (self.HTMLInputElement && self.HTMLElement) self.hide();
 		window.removeEventListener('resize', handleResize);
 		document.removeEventListener('click', documentClickEvent, { capture: true });
 	};
@@ -65,7 +64,7 @@ const handleInput = (self: VanillaCalendar) => {
 			cleanup.push(createCalendarToInput());
 		} else {
 			setPositionCalendar(self.HTMLInputElement as HTMLInputElement, self.HTMLElement, self.settings.visibility.positionToInput, self.CSSClasses);
-			actionsInput(self as VanillaCalendar).show();
+			self.show();
 		}
 		window.addEventListener('resize', handleResize);
 		document.addEventListener('click', documentClickEvent, { capture: true });

diff --git a/package/src/scripts/helpers/actionsInput.ts b/package/src/scripts/helpers/actionsInput.ts
diff --git a/package/src/scripts/hide.ts b/package/src/scripts/hide.ts
@@ -0,0 +1,9 @@
+import VanillaCalendar from '@src/vanilla-calendar';
+
+const hide = (self: VanillaCalendar) => {
+	if (!self.currentType) return;
+	self.HTMLElement.classList.add(self.CSSClasses.calendarHidden);
+	if (self.actions.hideCalendar) self.actions.hideCalendar(self);
+};
+
+export default hide;
diff --git a/package/src/scripts/init.ts b/package/src/scripts/init.ts
@@ -14,6 +14,7 @@ const init = (self: VanillaCalendar) => {
 
 	setVariables(self);
 	create(self);
+	if (self.actions.initCalendar) self.actions.initCalendar(self);
 	return handleClick(self);
 };
 

diff --git a/package/src/scripts/methods/changeTime.ts b/package/src/scripts/methods/changeTime.ts
@@ -1,5 +1,4 @@
 import VanillaCalendar from '@src/vanilla-calendar';
-import actionsInput from '@scripts/helpers/actionsInput';
 import transformTime12 from '@scripts/helpers/transformTime12';
 import transformTime24 from '@scripts/helpers/transformTime24';
 
@@ -27,7 +26,7 @@ const setTime = (self: VanillaCalendar, e: Event, value: string, type: TypeTime)
 
 	if (self.actions.changeTime) self.actions.changeTime(e, self);
 
-	if (self.input && self.HTMLInputElement && self.actions.changeToInput) self.actions.changeToInput(e, actionsInput(self), self);
+	if (self.input && self.HTMLInputElement && self.actions.changeToInput) self.actions.changeToInput(e, self);
 };
 
 const changeRange = (self: VanillaCalendar, range: HTMLInputElement, input: HTMLInputElement, btnKeepingTime: HTMLButtonElement | null, type: TypeTime, max: number) => {

diff --git a/package/src/scripts/reset.ts b/package/src/scripts/reset.ts
@@ -0,0 +1,34 @@
+import { IReset } from '@package/types';
+import VanillaCalendar from '@src/vanilla-calendar';
+import setVariables from '@scripts/helpers/setVariables';
+import create from '@scripts/create';
+import handleDayRangedSelection from '@scripts/handles/handleDayRangedSelection';
+
+const reset = (self: VanillaCalendar, {
+	year,
+	month,
+	dates,
+	holidays,
+	time,
+}: IReset = {}) => {
+	const previousSelected = { ...self.settings.selected };
+
+	self.settings.selected.year = year ? previousSelected.year : self.selectedYear;
+	self.settings.selected.month = month ? previousSelected.month : self.selectedMonth;
+	self.settings.selected.holidays = holidays ? previousSelected.holidays : self.selectedHolidays;
+	self.settings.selected.time = time ? previousSelected.time : self.selectedTime;
+
+	self.settings.selected.dates = dates === 'only-first' && self.selectedDates?.[0]
+		? [self.selectedDates[0]]
+		: dates === true
+			? previousSelected.dates
+			: self.selectedDates;
+
+	setVariables(self);
+	create(self);
+
+	self.settings.selected = previousSelected;
+	if (self.settings.selection.day === 'multiple-ranged' && dates) handleDayRangedSelection(self);
+};
+
+export default reset;
diff --git a/package/src/scripts/show.ts b/package/src/scripts/show.ts
@@ -0,0 +1,12 @@
+import VanillaCalendar from '@src/vanilla-calendar';
+
+const show = (self: VanillaCalendar) => {
+	if (!self.currentType) {
+		self.HTMLElement.click();
+		return;
+	}
+	self.HTMLElement.classList.remove(self.CSSClasses.calendarHidden);
+	if (self.actions.showCalendar) self.actions.showCalendar(self);
+};
+
+export default show;
diff --git a/package/src/scripts/update.ts b/package/src/scripts/update.ts
@@ -1,9 +1,7 @@
 import { IReset } from '@package/types';
 import VanillaCalendar from '@src/vanilla-calendar';
 import messages from '@scripts/helpers/getMessages';
-import setVariables from '@scripts/helpers/setVariables';
-import create from '@scripts/create';
-import handleDayRangedSelection from '@scripts/handles/handleDayRangedSelection';
+import reset from '@scripts/reset';
 
 const update = (self: VanillaCalendar, {
 	year,
@@ -14,24 +12,14 @@ const update = (self: VanillaCalendar, {
 }: IReset = {}) => {
 	if (!self.isInit) throw new Error(messages.notInit);
 
-	const previousSelected = { ...self.settings.selected };
-
-	self.settings.selected.year = year ? previousSelected.year : self.selectedYear;
-	self.settings.selected.month = month ? previousSelected.month : self.selectedMonth;
-	self.settings.selected.holidays = holidays ? previousSelected.holidays : self.selectedHolidays;
-	self.settings.selected.time = time ? previousSelected.time : self.selectedTime;
-
-	self.settings.selected.dates = dates === 'only-first' && self.selectedDates?.[0]
-		? [self.selectedDates[0]]
-		: dates === true
-			? previousSelected.dates
-			: self.selectedDates;
-
-	setVariables(self);
-	create(self);
-
-	self.settings.selected = previousSelected;
-	if (self.settings.selection.day === 'multiple-ranged' && dates) handleDayRangedSelection(self);
+	reset(self, {
+		year,
+		month,
+		dates,
+		holidays,
+		time,
+	});
+	if (self.actions.updateCalendar) self.actions.updateCalendar(self);
 };
 
 export default update;
diff --git a/package/src/vanilla-calendar.ts b/package/src/vanilla-calendar.ts
@@ -3,6 +3,8 @@ import DefaultOptionsCalendar from '@scripts/default';
 import init from '@scripts/init';
 import update from '@scripts/update';
 import destroy from '@scripts/destroy';
+import show from '@scripts/show';
+import hide from '@scripts/hide';
 import messages from '@scripts/helpers/getMessages';
 
 export default class VanillaCalendar extends DefaultOptionsCalendar implements T.IVanillaCalendar {
@@ -32,4 +34,8 @@ export default class VanillaCalendar extends DefaultOptionsCalendar implements T
 	update = (reset?: T.IReset) => update(this, reset);
 
 	destroy = () => destroy(this);
+
+	show = () => show(this);
+
+	hide = () => hide(this);
 }
diff --git a/package/types.ts b/package/types.ts
@@ -78,19 +78,15 @@ export interface IActions {
 	clickYear: ((e: MouseEvent, self: IVanillaCalendar) => void) | null;
 	clickArrow: ((e: MouseEvent, self: IVanillaCalendar) => void) | null;
 	changeTime: ((e: Event, self: IVanillaCalendar) => void) | null;
-	changeToInput: ((
-		e: Event,
-		calendar: {
-			hide(): void;
-			show(): void;
-		},
-		self: IVanillaCalendar,
-	) => void) | null;
+	changeToInput: ((e: Event, self: IVanillaCalendar) => void) | null;
 	getDays: ((day: number, date: FormatDateString, HTMLElement: HTMLElement, HTMLButtonElement: HTMLButtonElement, self: IVanillaCalendar) => void) | null;
 	getMonths: ((month: number, HTMLElement: HTMLElement, self: IVanillaCalendar) => void) | null;
 	getYears: ((year: number, HTMLElement: HTMLElement, self: IVanillaCalendar) => void) | null;
-	hideCalendar: ((self: IVanillaCalendar) => void) | null;
+	initCalendar: ((self: IVanillaCalendar) => void) | null;
+	updateCalendar: ((self: IVanillaCalendar) => void) | null;
+	destroyCalendar: ((self: IVanillaCalendar) => void) | null;
 	showCalendar: ((self: IVanillaCalendar) => void) | null;
+	hideCalendar: ((self: IVanillaCalendar) => void) | null;
 }
 
 export type IPopup = {
@@ -161,6 +157,8 @@ export interface IVanillaCalendar {
 	init: () => () => void;
 	update: (reset?: IReset) => void;
 	destroy: () => void;
+	show: () => void;
+	hide: () => void;
 
 	readonly HTMLElement: HTMLElement;
 	readonly HTMLOriginalElement: HTMLElement;