fix popups

uvarov-frontend · Nov 7, 2024 · 6d6cad9 · 6d6cad9
1 parent 03798ee
commit 6d6cad9
Show file tree

Hide file tree

Showing 4 changed files with 25 additions and 34 deletions.
diff --git a/package/src/scripts/creators/createDates/createDatePopup.ts b/package/src/scripts/creators/createDates/createDatePopup.ts
@@ -7,29 +7,26 @@ const handleDay = (self: Calendar, date: string, dateInfo: Popup, datesEl: HTMLE
 
   const dateBtnEl = dateEl.querySelector<HTMLButtonElement>(`[data-vc-date-btn]`) as HTMLButtonElement;
   if (dateInfo?.modifier) dateBtnEl.classList.add(...dateInfo.modifier.trim().split(' '));
-  if (dateInfo?.html) {
-    const datePopup = document.createElement('div');
-    datePopup.className = self.styles.datePopup;
-    datePopup.dataset.vcDatePopup = '';
-    datePopup.innerHTML = self.sanitizerHTML(dateInfo.html);
-    dateBtnEl.ariaExpanded = 'true';
-    dateBtnEl.ariaLabel = `${dateBtnEl.ariaLabel}, ${datePopup?.textContent?.replace(/^\s+|\s+(?=\s)|\s+$/g, '').replace(/&nbsp;/g, ' ')}`;
-    dateEl.appendChild(datePopup);
 
-    // wait for the element to be rendered in DOM before calculating its position
-    setTimeout(() => {
-      if (datePopup) {
-        const { canShow } = getAvailablePosition(dateEl, datePopup);
-        const extraTopPadding = 5;
-        let top = dateEl.offsetHeight;
-        let left = 0;
-        if (!canShow.bottom) top = -datePopup.offsetHeight - extraTopPadding;
-        if (canShow.left && !canShow.right) left = dateEl.offsetWidth - datePopup.offsetWidth / 2;
-        if (!canShow.left && canShow.right) left = datePopup.offsetWidth / 2;
-        Object.assign(datePopup.style, { left: `${left}px`, top: `${top}px` });
-      }
-    });
-  }
+  if (!dateInfo?.html) return;
+
+  const datePopup = document.createElement('div');
+  datePopup.className = self.styles.datePopup;
+  datePopup.dataset.vcDatePopup = '';
+  datePopup.innerHTML = self.sanitizerHTML(dateInfo.html);
+  dateBtnEl.ariaExpanded = 'true';
+  dateBtnEl.ariaLabel = `${dateBtnEl.ariaLabel}, ${datePopup?.textContent?.replace(/^\s+|\s+(?=\s)|\s+$/g, '').replace(/&nbsp;/g, ' ')}`;
+  dateEl.appendChild(datePopup);
+
+  // Use requestAnimationFrame to wait until the next repaint to calculate position
+  requestAnimationFrame(() => {
+    if (!datePopup) return;
+    const { canShow } = getAvailablePosition(dateEl, datePopup);
+    const top = canShow.bottom ? dateEl.offsetHeight : -datePopup.offsetHeight;
+    const left =
+      canShow.left && !canShow.right ? dateEl.offsetWidth - datePopup.offsetWidth / 2 : !canShow.left && canShow.right ? datePopup.offsetWidth / 2 : 0;
+    Object.assign(datePopup.style, { left: `${left}px`, top: `${top}px` });
+  });
 };
 
 const createDatePopup = (self: Calendar, datesEl: HTMLElement) => {

diff --git a/package/src/scripts/utils/positions/getOffset.ts b/package/src/scripts/utils/positions/getOffset.ts
@@ -7,14 +7,7 @@ import type { HtmlElementPosition } from '@src/index';
  */
 
 function getOffset(element?: HTMLElement | null): HtmlElementPosition {
-  if (!element || !element.getBoundingClientRect) {
-    return {
-      top: 0,
-      bottom: 0,
-      left: 0,
-      right: 0,
-    };
-  }
+  if (!element || !element.getBoundingClientRect) return { top: 0, bottom: 0, left: 0, right: 0 };
 
   const box = element.getBoundingClientRect();
   const docElem = document.documentElement;

diff --git a/package/src/styles/layout.css b/package/src/styles/layout.css
@@ -204,7 +204,7 @@
 }
 
 [data-vc-date-popup] {
-  @apply absolute z-20 top-full w-36 py-2 px-3 text-xs font-normal rounded-lg transition-opacity duration-75 opacity-0 pointer-events-none hover:opacity-100 hover:pointer-events-auto;
+  @apply absolute z-20 -translate-x-1/2 min-w-20 max-w-36 py-1 px-2 text-xs font-normal rounded-lg transition-opacity duration-75 opacity-0 pointer-events-none hover:opacity-100 hover:pointer-events-auto;
 }
 
 [data-vc-date-range-tooltip] {

diff --git a/package/src/types.ts b/package/src/types.ts
@@ -53,8 +53,8 @@ export type LocaleStated = {
 export type Locale = string | LocaleStated;
 
 export type Popup = {
-  modifier: string;
-  html: string;
+  modifier?: string;
+  html?: string;
 };
 
 export type Popups = {
@@ -113,7 +113,8 @@ export type Layouts = {
   year: string;
 };
 
-export type Options = Omit<Partial<options>, 'labels' | 'layouts' | 'styles'> & {
+export type Options = Omit<Partial<options>, 'popups' | 'labels' | 'layouts' | 'styles'> & {
+  popups?: Partial<Popups>;
   labels?: Partial<Labels>;
   layouts?: Partial<Layouts>;
   styles?: Partial<Styles>;