@zohodesk/popups/lib/ViewPort.js

popups popupover modal dialog alert notifications popup handling for whole app

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports["default"] = void 0;
var viewPort = {
  frameRelativeRects: function frameRelativeRects(el, customFrame) {
    if (!el) {
      return;
    }

    var rect = el.getBoundingClientRect(); //Target Element

    var documentEle = document.documentElement; //Body&HTML 

    var customFrameRect = {
      top: 0,
      left: 0,
      right: documentEle.clientWidth,
      bottom: documentEle.clientHeight,
      height: documentEle.clientHeight,
      width: documentEle.clientWidth,
      x: 0,
      y: 0
    };

    if (customFrame) {
      customFrameRect = customFrame.getBoundingClientRect();
    }

    var newReact = {
      top: rect.top - customFrameRect.top,
      left: rect.left - customFrameRect.left,
      height: rect.height,
      width: rect.width
    };
    newReact.bottom = newReact.top + newReact.height;
    newReact.right = newReact.left + newReact.width;
    newReact.x = newReact.left;
    newReact.y = newReact.top;
    var rectGap = {
      top: newReact.top,
      left: newReact.left,
      bottom: customFrameRect.height - newReact.bottom,
      right: customFrameRect.width - newReact.right
    };
    rectGap.center = {
      top: rectGap.top + newReact.height / 2,
      left: rectGap.left + newReact.width / 2,
      bottom: rectGap.bottom + newReact.height / 2,
      right: rectGap.right + newReact.width / 2
    };
    var adjustments = {};

    if (newReact.top < 0) {
      adjustments.top = Math.abs(newReact.top);
    }

    if (newReact.left < 0) {
      adjustments.left = Math.abs(newReact.left);
    }

    if (newReact.bottom > customFrameRect.height) {
      adjustments.bottom = newReact.bottom - customFrameRect.height;
    }

    if (newReact.right > customFrameRect.width) {
      adjustments.right = newReact.right - customFrameRect.width;
    }

    return {
      frameRect: customFrameRect,
      rect: newReact,
      rectGap: rectGap,
      adjustments: adjustments
    };
  },
  isInViewPort: function isInViewPort(el, customFrame) {
    if (!el) {
      return;
    }

    var elRects = viewPort.frameRelativeRects(el, customFrame);
    var react = elRects.rect;
    var frameReact = elRects.frameRect;
    return rect.top >= 0 && rect.left >= 0 && rect.bottom <= frameReact.height && rect.right <= frameReact.width;
  },
  possibilities: function possibilities(el, relativeBox, customFrame) {
    if (!el) {
      return;
    }

    var elRects = viewPort.frameRelativeRects(el, customFrame);
    var rect = elRects.rect;
    var adjustments = elRects.adjustments;
    var relativeBoxReacts = viewPort.frameRelativeRects(relativeBox, customFrame);
    var relativeBoxRect = relativeBoxReacts.rect;
    var relativeBoxGap = relativeBoxReacts.rectGap;
    var relativeBoxDocumentRects = viewPort.frameRelativeRects(relativeBox, customFrame);
    var documentGap = relativeBoxDocumentRects.rectGap;
    adjustments.left ? adjustments.left = adjustments.left + relativeBoxReacts.rect.width * 2 / 3 : null;
    adjustments.right ? adjustments.right = adjustments.right + relativeBoxReacts.rect.width * 2 / 3 : null;
    adjustments.top ? adjustments.top = adjustments.top + relativeBoxReacts.rect.width * 2 / 3 : null;
    adjustments.bottom ? adjustments.bottom = adjustments.bottom + relativeBoxReacts.rect.width * 2 / 3 : null;
    var views = {}; //bottomCenter

    var bottomOverFlow = rect.height >= relativeBoxGap.bottom;
    var bottomRightOverFlow = rect.width / 2 >= relativeBoxGap.center.right;
    var bottomLeftOverFlow = rect.width / 2 >= relativeBoxGap.center.left; //bottomRight

    var bottomLeftOnlyOverFlow = rect.width >= relativeBoxGap.center.left;
    views.bottomRight = !(bottomOverFlow || bottomLeftOnlyOverFlow); //bottomLeft

    var bottomRightOnlyOverFlow = rect.width >= relativeBoxGap.center.right;
    views.bottomLeft = !(bottomOverFlow || bottomRightOnlyOverFlow);
    views.bottomCenter = !(bottomOverFlow || bottomRightOverFlow || bottomLeftOverFlow); //topCenter

    var topOverFlow = rect.height >= relativeBoxGap.top;
    var topRightOverFlow = rect.width / 2 >= relativeBoxGap.center.right;
    var topLeftOverFlow = rect.width / 2 >= relativeBoxGap.center.left; //topRight

    var topLeftOnlyOverFlow = rect.width >= relativeBoxGap.center.left;
    views.topRight = !(topOverFlow || topLeftOnlyOverFlow); //topLeft

    var topRightOnlyOverFlow = rect.width >= relativeBoxGap.center.right;
    views.topLeft = !(topOverFlow || topRightOnlyOverFlow);
    views.topCenter = !(topOverFlow || topRightOverFlow || topLeftOverFlow); //|| topLeftOnlyOverFlow || topRightOnlyOverFlow);
    //leftCenter

    var leftOverFlow = rect.width >= relativeBoxGap.left;
    var leftTopOverFlow = rect.height / 2 >= relativeBoxGap.center.top;
    var leftBottomOverFlow = rect.height / 2 >= relativeBoxGap.center.bottom; //leftTop

    var leftTopOnlyOverFlow = rect.height >= relativeBoxGap.center.bottom;
    views.leftTop = !(leftOverFlow || leftTopOnlyOverFlow); //leftBottom

    var leftBottomOnlyOverFlow = rect.height >= relativeBoxGap.center.top;
    views.leftBottom = !(leftOverFlow || leftBottomOnlyOverFlow);
    views.leftCenter = !(leftOverFlow || leftTopOverFlow || leftBottomOverFlow); // || leftTopOnlyOverFlow || leftBottomOnlyOverFlow);
    //rightCenter

    var rightOverFlow = rect.width >= relativeBoxGap.right;
    var rightTopOverFlow = rect.height / 2 >= relativeBoxGap.center.top;
    var rightBottomOverFlow = rect.height / 2 >= relativeBoxGap.center.bottom; //rightTop

    var rightTopOnlyOverFlow = rect.height >= relativeBoxGap.center.bottom;
    views.rightTop = !(rightOverFlow || rightTopOnlyOverFlow); //rightBottom

    var rightBottomOnlyOverFlow = rect.height >= relativeBoxGap.center.top;
    views.rightBottom = !(rightOverFlow || rightBottomOnlyOverFlow);
    views.rightCenter = !(rightOverFlow || rightTopOverFlow || rightBottomOverFlow); // || rightTopOnlyOverFlow || rightBottomOnlyOverFlow);

    var horizontalCenter = relativeBoxGap.left + relativeBoxRect.width / 2;
    var horizontalLeft = relativeBoxGap.left;
    var horizontalRight = relativeBoxGap.left + relativeBoxRect.width;
    var verticalBottom = relativeBoxGap.top + relativeBoxRect.height;
    var verticalTop = relativeBoxGap.top;
    var verticalCenter = relativeBoxGap.top + relativeBoxRect.height / 2;
    var horizontalTop = documentGap.bottom + relativeBoxRect.height;
    var needArrow = false;
    var paddingSpace = 5; // space between target and relative element

    var arrowSize = needArrow ? 10 : 5;
    rect.height = rect.height + (needArrow ? arrowSize : paddingSpace);
    rect.width = rect.width + (needArrow ? arrowSize : paddingSpace);
    var viewsOffset = {
      // Code Copy frm DOT ViewPort.js																																																																																																																																																																																																																																																																																																																																																																																																																																																																																						qa
      bottomCenter: {
        left: horizontalCenter - rect.width / 2,
        top: verticalBottom + arrowSize
      },
      bottomRight: {
        left: horizontalRight - rect.width,
        top: verticalBottom + arrowSize
      },
      bottomLeft: {
        left: horizontalLeft,
        top: verticalBottom + arrowSize
      },
      topCenter: {
        left: horizontalCenter - rect.width / 2,
        bottom: horizontalTop + arrowSize
      },
      topRight: {
        left: horizontalRight - rect.width,
        bottom: horizontalTop + arrowSize
      },
      topLeft: {
        left: horizontalLeft,
        bottom: horizontalTop + arrowSize
      },
      rightCenter: {
        left: horizontalRight + arrowSize,
        top: verticalCenter - rect.height / 2
      },
      rightBottom: {
        left: horizontalRight + arrowSize,
        bottom: documentGap.bottom
      },
      rightTop: {
        left: horizontalRight + arrowSize,
        top: verticalTop
      },
      leftCenter: {
        left: horizontalLeft - (rect.width + arrowSize),
        top: verticalCenter - rect.height / 2
      },
      leftTop: {
        left: horizontalLeft - (rect.width + arrowSize),
        top: verticalTop
      },
      leftBottom: {
        left: horizontalLeft - (rect.width + arrowSize),
        bottom: documentGap.bottom
      }
    };
    return {
      views: views,
      adjustments: adjustments,
      positionOffset: viewsOffset
    };
  },
  getArrowAdjustments: function getArrowAdjustments(el, relativeBox, customFrame) {
    if (!el) {
      return;
    }

    var elRects = viewPort.frameRelativeRects(el, customFrame);
    var rect = elRects.rect;
    var rectGap = elRects.rectGap;
    var adjustments = elRects.adjustments;
    var relativeBoxReacts = viewPort.frameRelativeRects(relativeBox, customFrame);
    var relativeBoxReact = relativeBoxReacts.rect;
    var relativeBoxGap = relativeBoxReacts.rectGap;
    return {
      left: relativeBoxGap.center.left - rectGap.left,
      right: relativeBoxGap.center.right - rectGap.right,
      top: relativeBoxGap.center.top - rectGap.top,
      bottom: relativeBoxGap.center.bottom - rectGap.bottom
    };
  },
  betterView: function betterView(popup, relativeBox, defaultView, customFrame) {
    var viewPortPossibilities = viewPort.possibilities(popup, relativeBox, customFrame);

    if (!viewPortPossibilities) {
      return;
    }

    var views = viewPortPossibilities.views;
    var adjustments = viewPortPossibilities.adjustments;
    var viewKeys = Object.keys(views);
    var isViewFound = false;
    var positionOffset = viewPortPossibilities.positionOffset;

    for (var i = 0; i < viewKeys.length; i++) {
      var viewKey = viewKeys[i];

      if (views[viewKey]) {
        isViewFound = true;
        break;
      }
    }

    if (!isViewFound) {
      return {
        view: null,
        adjustments: adjustments,
        fixedPosition: {}
      };
    }

    if (views[defaultView]) {
      return {
        view: defaultView,
        adjustments: adjustments,
        fixedPosition: positionOffset[defaultView]
      };
    }

    var defaultPosition = defaultView.replace(/Center|Bottom|Top|Left|Right$/, '');
    var viewTypes = {
      top: ['Center', 'Right', 'Left'],
      left: ['Center', 'Top', 'Bottom']
    };
    viewTypes.bottom = viewTypes.top;
    viewTypes.right = viewTypes.left;
    var defaultPositions = viewTypes[defaultPosition];

    for (var _i = 0, len = defaultPositions.length; _i < len; _i++) {
      var _viewKey = defaultPosition + defaultPositions[_i];

      if (views[_viewKey]) {
        return {
          view: _viewKey,
          adjustments: adjustments,
          fixedPosition: positionOffset[_viewKey]
        };
      }
    }

    var oppositePositionsOrder = {
      bottom: ['top', 'right', 'left'],
      top: ['bottom', 'right', 'left'],
      left: ['bottom', 'right', 'top'],
      right: ['bottom', 'top', 'left']
    };
    var oppositeViews = oppositePositionsOrder[defaultPosition];

    for (var _i2 = 0, _len = oppositeViews.length; _i2 < _len; _i2++) {
      var oppositeView = oppositeViews[_i2];
      var positions = viewTypes[oppositeView];

      for (var j = 0, lenx = positions.length; j < lenx; j++) {
        var _viewKey2 = oppositeView + positions[j];

        if (views[_viewKey2]) {
          return {
            view: _viewKey2,
            adjustments: adjustments,
            fixedPosition: positionOffset[_viewKey2]
          };
        }
      }
    }

    return {
      view: null,
      adjustments: adjustments,
      fixedPosition: {}
    };
  }
};
var _default = {
  betterView: viewPort.betterView,
  frameRelativeRects: viewPort.frameRelativeRects,
  getArrowAdjustments: viewPort.getArrowAdjustments
};
exports["default"] = _default;