fix(esl-popup): remove position attr from popup arrow and add placed-…

…at attr to popup element
exadel-inc · Aug 5, 2021 · 32d9d93 · 32d9d93
1 parent 2a83727
commit 32d9d93
Show file tree

Hide file tree

Showing 3 changed files with 31 additions and 34 deletions.
diff --git a/src/modules/esl-popup/core/esl-popup-position.ts b/src/modules/esl-popup/core/esl-popup-position.ts
@@ -2,16 +2,15 @@ import {Rect} from '../../esl-utils/dom/rect';
 
 export type PositionType = 'top' | 'bottom' | 'left' | 'right';
 
-export interface ArrowPositionValue {
+export interface Point {
   x: number;
   y: number;
-  position: string;
 }
 
 export interface PopupPositionValue {
-  x: number;
-  y: number;
-  arrow: ArrowPositionValue;
+  placedAt: PositionType;
+  popup: Rect;
+  arrow: Point;
 }
 
 export interface IntersectionRatioRect {
@@ -75,8 +74,8 @@ function getOppositePosition(position: PositionType): PositionType {
  * @param rect - popup position rect
  * @param arrow - arrow position value
  * */
-function fitByMajorAxis(cfg: PopupPositionConfig, rect: Rect, arrow: ArrowPositionValue) {
-  if (cfg.behavior !== 'fit') return;
+function fitByMajorAxis(cfg: PopupPositionConfig, rect: Rect, arrow: Point): PositionType {
+  if (cfg.behavior !== 'fit') return cfg.position;
 
   let isMirrored = false;
   switch (cfg.position) {
@@ -105,9 +104,8 @@ function fitByMajorAxis(cfg: PopupPositionConfig, rect: Rect, arrow: ArrowPositi
       }
       break;
   }
-  if (isMirrored) {
-    arrow.position = getOppositePosition(cfg.position);
-  }
+
+  return isMirrored ? getOppositePosition(cfg.position) : cfg.position;
 }
 
 /**
@@ -116,7 +114,7 @@ function fitByMajorAxis(cfg: PopupPositionConfig, rect: Rect, arrow: ArrowPositi
  * @param rect - popup position rect
  * @param arrow - arrow position value
  * */
-function fitByMinorAxisHorizontal(cfg: PopupPositionConfig, rect: Rect, arrow: ArrowPositionValue) {
+function fitByMinorAxisHorizontal(cfg: PopupPositionConfig, rect: Rect, arrow: Point) {
   if (cfg.trigger.x < cfg.outer.x || cfg.trigger.right > cfg.outer.right) return; // cancel fit mode if the element is out of window offset bounds
 
   let arrowAdjust = 0;
@@ -137,7 +135,7 @@ function fitByMinorAxisHorizontal(cfg: PopupPositionConfig, rect: Rect, arrow: A
  * @param rect - popup position rect
  * @param arrow - arrow position value
  * */
-function fitByMinorAxisVertical(cfg: PopupPositionConfig, rect: Rect, arrow: ArrowPositionValue) {
+function fitByMinorAxisVertical(cfg: PopupPositionConfig, rect: Rect, arrow: Point) {
   if (cfg.trigger.y < cfg.outer.y || cfg.trigger.bottom > cfg.outer.bottom) return; // cancel fit mode if the element is out of window offset bounds
 
   let arrowAdjust = 0;
@@ -158,7 +156,7 @@ function fitByMinorAxisVertical(cfg: PopupPositionConfig, rect: Rect, arrow: Arr
  * @param rect - popup position rect
  * @param arrow - arrow position value
  * */
-function fitByMinorAxis(cfg: PopupPositionConfig, rect: Rect, arrow: ArrowPositionValue) {
+function fitByMinorAxis(cfg: PopupPositionConfig, rect: Rect, arrow: Point) {
   if (cfg.behavior !== 'fit') return;
 
   if (['left', 'right'].includes(cfg.position)) {
@@ -173,19 +171,19 @@ function fitByMinorAxis(cfg: PopupPositionConfig, rect: Rect, arrow: ArrowPositi
  * @param cfg - popup position config
  * */
 export function calcPopupPosition(cfg: PopupPositionConfig): PopupPositionValue {
-  const rect = calcPopupBasicRect(cfg);
+  const popup = calcPopupBasicRect(cfg);
   const arrow = {
     x: cfg.element.width / 2,
     y: cfg.element.height / 2,
     position: cfg.position
   };
 
-  fitByMajorAxis(cfg, rect, arrow);
-  fitByMinorAxis(cfg, rect, arrow);
+  const placedAt = fitByMajorAxis(cfg, popup, arrow);
+  fitByMinorAxis(cfg, popup, arrow);
 
   return {
-    x: rect.x,
-    y: rect.y,
+    popup,
+    placedAt,
     arrow
   };
 }
diff --git a/src/modules/esl-popup/core/esl-popup.less b/src/modules/esl-popup/core/esl-popup.less
@@ -41,21 +41,27 @@
     border-left: 1px solid @POPUP_BORDER_COLOR;
     border-top: 1px solid @POPUP_BORDER_COLOR;
     z-index: -1;
+  }
 
-    &[position=top] {
+  &[placed-at=top] {
+    .esl-popup-arrow {
       bottom: (-@POPUP_ARROW_HALF - 1);
       top: auto;
       transform: rotate(225deg);
     }
+  }
 
-    &[position=left] {
+  &[placed-at=left] {
+    .esl-popup-arrow {
       right: (-@POPUP_ARROW_HALF - 1);
       left: auto;
       margin-top: -@POPUP_ARROW_HALF;
       transform: rotate(135deg);
     }
+  }
 
-    &[position=right] {
+  &[placed-at=right] {
+    .esl-popup-arrow {
       left: auto;
       right: auto;
       margin-top: -@POPUP_ARROW_HALF;

diff --git a/src/modules/esl-popup/core/esl-popup.ts b/src/modules/esl-popup/core/esl-popup.ts
@@ -174,12 +174,6 @@ export class ESLPopup extends ESLToggleable {
     this._activatorObserver.unsubscribers = [];
   }
 
-  protected set _arrowPosition(value: string) {
-    if (!this.$arrow) return;
-
-    this.$arrow.setAttribute('position', value);
-  }
-
   protected _updatePosition() {
     if (!this.activator) return;
 
@@ -199,17 +193,16 @@ export class ESLPopup extends ESLToggleable {
       outer: getWindowRect().shrink(this._offsetWindow)
     };
 
-    const {x, y, arrow} = calcPopupPosition(config);
+    const {placedAt, popup, arrow} = calcPopupPosition(config);
 
+    this.setAttribute('placed-at', placedAt);
     // set popup position
-    this.style.left = `${x}px`;
-    this.style.top = `${y}px`;
-
+    this.style.left = `${popup.x}px`;
+    this.style.top = `${popup.y}px`;
     // set arrow position
     if (this.$arrow) {
-      this.$arrow.style.left = ['top', 'bottom'].includes(arrow.position) ? `${arrow.x}px` : 'none';
-      this.$arrow.style.top = ['left', 'right'].includes(arrow.position) ? `${arrow.y}px` : 'none';
-      this._arrowPosition = arrow.position;
+      this.$arrow.style.left = ['top', 'bottom'].includes(placedAt) ? `${arrow.x}px` : 'none';
+      this.$arrow.style.top = ['left', 'right'].includes(placedAt) ? `${arrow.y}px` : 'none';
     }
   }
 }