fix position and add top position

uvarov-frontend · Feb 19, 2024 · ce571d2 · ce571d2
1 parent b4a7f2e
commit ce571d2
Show file tree

Hide file tree

Showing 6 changed files with 37 additions and 12 deletions.
diff --git a/package/classes.ts b/package/classes.ts
@@ -6,6 +6,8 @@ const classes = {
 	calendarYear: 'vanilla-calendar_year',
 	calendarHidden: 'vanilla-calendar_hidden',
 	calendarToInput: 'vanilla-calendar_to-input',
+	calendarToInputTop: 'vanilla-calendar_to-input_top',
+	calendarToInputBottom: 'vanilla-calendar_to-input_bottom',
 	controls: 'vanilla-calendar-controls',
 	grid: 'vanilla-calendar-grid',
 	gridDisabled: 'vanilla-calendar-grid_disabled',

diff --git a/package/src/scripts/handles/handleInput.ts b/package/src/scripts/handles/handleInput.ts
@@ -2,21 +2,28 @@ import VanillaCalendar from '@src/vanilla-calendar';
 import actionsInput from '@scripts/helpers/actionsInput';
 import handleClick from '@scripts/handles/handleClick';
 import update from '@scripts/update';
+import { IVisibility, CSSClasses } from '@/package/types';
 
-const setPositionCalendar = (input: HTMLInputElement, calendar: HTMLElement, position: 'left' | 'center' | 'right') => {
+const setPositionCalendar = (input: HTMLInputElement, calendar: HTMLElement, position: IVisibility['positionToInput'], css: CSSClasses) => {
 	const getPosition = {
+		top: -calendar.offsetHeight,
+		bottom: input.offsetHeight,
 		left: 0,
 		center: input.offsetWidth / 2 - calendar.offsetWidth / 2,
 		right: input.offsetWidth - calendar.offsetWidth,
 	};
 
-	let top = input.offsetHeight;
-	let left = getPosition[position];
+	const YPosition = !Array.isArray(position) ? 'bottom' : position[0];
+	const XPosition = !Array.isArray(position) ? position : position[1];
 
-	for (let el: HTMLElement = input; el; el = el.offsetParent as HTMLElement) {
-		top += el.offsetTop || 0;
-		left += el.offsetLeft || 0;
-	}
+	calendar.classList.add(YPosition === 'bottom' ? css.calendarToInputBottom : css.calendarToInputTop);
+
+	const inputRect = input.getBoundingClientRect();
+	const scrollLeft = window.scrollX || document.documentElement.scrollLeft;
+	const scrollTop = window.scrollY || document.documentElement.scrollTop;
+
+	const top = inputRect.top + scrollTop + getPosition[YPosition];
+	const left = inputRect.left + scrollLeft + getPosition[XPosition];
 
 	Object.assign(calendar.style, { left: `${left}px`, top: `${top}px` });
 };
@@ -34,7 +41,7 @@ const handleInput = (self: VanillaCalendar) => {
 		firstInit = false;
 
 		setTimeout(() => {
-			setPositionCalendar(self.HTMLInputElement as HTMLInputElement, calendar, self.settings.visibility.positionToInput);
+			setPositionCalendar(self.HTMLInputElement as HTMLInputElement, calendar, self.settings.visibility.positionToInput, self.CSSClasses);
 			actionsInput(self).show();
 		}, 0);
 		update(self, {
@@ -44,7 +51,7 @@ const handleInput = (self: VanillaCalendar) => {
 		return handleClick(self);
 	};
 
-	const handleResize = () => setPositionCalendar(self.HTMLInputElement as HTMLInputElement, self.HTMLElement, self.settings.visibility.positionToInput);
+	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;
@@ -57,7 +64,7 @@ const handleInput = (self: VanillaCalendar) => {
 		if (firstInit) {
 			cleanup.push(createCalendarToInput());
 		} else {
-			setPositionCalendar(self.HTMLInputElement as HTMLInputElement, self.HTMLElement, self.settings.visibility.positionToInput);
+			setPositionCalendar(self.HTMLInputElement as HTMLInputElement, self.HTMLElement, self.settings.visibility.positionToInput, self.CSSClasses);
 			actionsInput(self as VanillaCalendar).show();
 		}
 		window.addEventListener('resize', handleResize);

diff --git a/package/src/styles/themes/dark.css b/package/src/styles/themes/dark.css
@@ -2,6 +2,10 @@
 	@apply bg-slate-900 text-white
 }
 
+[data-calendar-theme="dark"].vanilla-calendar_to-input {
+	@apply shadow-[0_9px_20px_rgba(0,0,0,.1)]
+}
+
 [data-calendar-theme="dark"].vanilla-calendar button:focus-visible {
 	@apply outline-orange-300
 }

diff --git a/package/src/styles/themes/light.css b/package/src/styles/themes/light.css
@@ -2,6 +2,10 @@
 	@apply bg-white text-slate-900
 }
 
+[data-calendar-theme="light"].vanilla-calendar_to-input {
+	@apply shadow-[0_9px_20px_rgba(0,0,0,.1)]
+}
+
 [data-calendar-theme="light"].vanilla-calendar button:focus-visible {
 	@apply outline-orange-300
 }

diff --git a/package/src/styles/vanilla-calendar.layout.css b/package/src/styles/vanilla-calendar.layout.css
@@ -31,7 +31,15 @@
 }
 
 .vanilla-calendar_to-input {
-	@apply absolute mt-1
+	@apply absolute
+}
+
+.vanilla-calendar_to-input_bottom {
+	@apply mt-1
+}
+
+.vanilla-calendar_to-input_top {
+	@apply -mt-1
 }
 
 .vanilla-calendar-controls {

diff --git a/package/types.ts b/package/types.ts
@@ -54,7 +54,7 @@ export interface IVisibility {
 	today: boolean;
 	disabled: boolean;
 	daysOutside: boolean;
-	positionToInput: 'left' | 'center' | 'right';
+	positionToInput: 'left' | 'center' | 'right' | ['bottom', 'left'] | ['bottom', 'center'] | ['bottom', 'right'] | ['top', 'left'] | ['top', 'center'] | ['top', 'right'];
 }
 
 export interface ISettings {