@zohodesk/components/lib/Popup/viewPort.js

In this Package, we Provide Some Basic Components to Build Web App

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports["default"] = void 0;
var defaultOrder = ['bottomCenter', 'bottomLeftToRight', 'bottomCenterToRight', 'bottomRightToLeft', 'bottomCenterToLeft', 'topCenter', 'topLeftToRight', 'topCenterToRight', 'topRightToLeft', 'topCenterToLeft', 'rightTopToBottom', 'rightCenterToBottom', 'rightCenter', 'rightBottomToTop', 'rightCenterToTop', 'leftTopToBottom', 'leftCenterToBottom', 'leftCenter', 'leftBottomToTop', 'leftCenterToTop', 'bottomRight', 'bottomLeft', 'topRight', 'topLeft', 'rightBottom', 'rightTop', 'leftBottom', 'leftTop'];
var viewPort = {
  frameRelativeRects: function frameRelativeRects(el, customFrame, documentEle) {
    if (!el) {
      return;
    }

    var rectTemp = el.getBoundingClientRect();
    var rect = {
      height: rectTemp.height || el.clientHeight,
      width: rectTemp.width || el.clientWidth,
      top: rectTemp.top,
      bottom: rectTemp.bottom,
      left: rectTemp.left,
      right: rectTemp.right,
      x: rectTemp.x,
      y: rectTemp.y
    };
    documentEle = documentEle ? documentEle : document.documentElement;
    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 newRect = {
      top: rect.top - customFrameRect.top,
      left: rect.left - customFrameRect.left,
      height: rect.height,
      width: rect.width
    };
    newRect.bottom = newRect.top + newRect.height;
    newRect.right = newRect.left + newRect.width;
    newRect.x = newRect.left;
    newRect.y = newRect.top;
    var rectGap = {
      top: newRect.top,
      left: newRect.left,
      bottom: customFrameRect.height - newRect.bottom,
      right: customFrameRect.width - newRect.right
    };
    rectGap.center = {
      top: rectGap.top + newRect.height / 2,
      left: rectGap.left + newRect.width / 2,
      bottom: rectGap.bottom + newRect.height / 2,
      right: rectGap.right + newRect.width / 2
    };
    return {
      frameRect: customFrameRect,
      rect: newRect,
      rectGap: rectGap
    };
  },
  isInViewPort: function isInViewPort(el, customFrame) {
    if (!el) {
      return;
    }

    var elRects = viewPort.frameRelativeRects(el, customFrame);
    var rect = elRects.rect;
    var frameRect = elRects.frameRect;
    return rect.top >= 0 && rect.left >= 0 && rect.bottom <= frameRect.height && rect.right <= frameRect.width;
  },
  getViewPortEle: function getViewPortEle(el) {
    return el.closest('[data-viewport-container=true]') ? el.closest('[data-viewport-container=true]') : document.documentElement;
  },
  possibilities: function possibilities(el, relativeBox, customFrame) {
    var _ref = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : {},
        needArrow = _ref.needArrow,
        isAbsolute = _ref.isAbsolute;

    if (!el) {
      return;
    }

    var elViewPortEle = viewPort.getViewPortEle(el);
    var elRects = viewPort.frameRelativeRects(el, customFrame, elViewPortEle);
    var rect = elRects.rect;
    var relativeBoxViewPortEle = viewPort.getViewPortEle(relativeBox);
    var relativeBoxRects = viewPort.frameRelativeRects(relativeBox, customFrame, relativeBoxViewPortEle);
    var relativeBoxGap = relativeBoxRects.rectGap,
        relativeBoxRect = relativeBoxRects.rect;
    var relativeBoxDocumentRects = viewPort.frameRelativeRects(relativeBox, customFrame);
    var documentGap = relativeBoxDocumentRects.rectGap; //rect => PopOverContainer, relativeBoxGap => PopOverTarget
    //Horizontal ~ ----- X axis
    //Vertical ~ ||||||| Y axis

    var paddingSpace = 5; // space between target and relative element

    var arrowSize = needArrow ? 10 : 0;
    rect.height = rect.height + (needArrow ? arrowSize : paddingSpace);
    rect.width = rect.width + (needArrow ? arrowSize : paddingSpace);
    var arrowHorizontalBalancePx = !isAbsolute && needArrow ? 30 : 0;
    var arrowVerticalBalancePx = !isAbsolute && needArrow ? 27 : 0;
    var bottomOverFlow = rect.height > relativeBoxGap.bottom;
    var topOverFlow = rect.height > relativeBoxGap.top;
    var rightOverFlow = rect.width > relativeBoxGap.right;
    var leftOverFlow = rect.width > relativeBoxGap.left;
    var horizontalCenterOverFlow = rect.width / 2 > relativeBoxGap.center.right || rect.width / 2 > relativeBoxGap.center.left;
    var verticalCenterOverFlow = rect.height / 2 > relativeBoxGap.center.top || rect.height / 2 > relativeBoxGap.center.bottom;
    var horizontalLeftToRightOverFlow = rect.width > relativeBoxRect.width + relativeBoxGap.right;
    var horizontalCenterToRightOverFlow = rect.width > relativeBoxGap.center.right || arrowHorizontalBalancePx > relativeBoxGap.center.left;
    var horizontalRightToLeft = rect.width > relativeBoxRect.width + relativeBoxGap.left;
    var horizontalCenterToLeft = rect.width > relativeBoxGap.center.left || arrowHorizontalBalancePx > relativeBoxGap.center.right;
    var verticalTopToBottomOverFlow = rect.height > relativeBoxRect.height + relativeBoxGap.bottom;
    var verticalCenterToBottomOverFlow = rect.height > relativeBoxGap.center.bottom || arrowVerticalBalancePx > relativeBoxGap.center.top;
    var verticalBottomToTopOverFlow = rect.height > relativeBoxRect.height + relativeBoxGap.top;
    var verticalCenterToTopOverFlow = rect.height > relativeBoxGap.center.top || arrowVerticalBalancePx > relativeBoxGap.center.bottom;
    var views = {
      bottomCenter: !(bottomOverFlow || horizontalCenterOverFlow),
      bottomLeftToRight: !(bottomOverFlow || horizontalLeftToRightOverFlow),
      bottomCenterToRight: !(bottomOverFlow || horizontalCenterToRightOverFlow),
      bottomRight: !(bottomOverFlow || rightOverFlow || arrowHorizontalBalancePx > relativeBoxRect.right),
      bottomRightToLeft: !(bottomOverFlow || horizontalRightToLeft),
      bottomCenterToLeft: !(bottomOverFlow || horizontalCenterToLeft),
      bottomLeft: !(bottomOverFlow || leftOverFlow || arrowHorizontalBalancePx > relativeBoxGap.right + relativeBoxRect.width),
      topCenter: !(topOverFlow || horizontalCenterOverFlow),
      topLeftToRight: !(topOverFlow || horizontalLeftToRightOverFlow),
      topCenterToRight: !(topOverFlow || horizontalCenterToRightOverFlow),
      topRight: !(topOverFlow || rightOverFlow || arrowHorizontalBalancePx > relativeBoxRect.right),
      topRightToLeft: !(topOverFlow || horizontalRightToLeft),
      topCenterToLeft: !(topOverFlow || horizontalCenterToLeft),
      topLeft: !(topOverFlow || leftOverFlow || arrowHorizontalBalancePx > relativeBoxGap.right + relativeBoxRect.width),
      rightCenter: !(rightOverFlow || verticalCenterOverFlow),
      rightTopToBottom: !(rightOverFlow || verticalTopToBottomOverFlow),
      rightCenterToBottom: !(rightOverFlow || verticalCenterToBottomOverFlow),
      rightBottom: !(rightOverFlow || bottomOverFlow || arrowVerticalBalancePx > relativeBoxRect.bottom),
      rightBottomToTop: !(rightOverFlow || verticalBottomToTopOverFlow),
      rightCenterToTop: !(rightOverFlow || verticalCenterToTopOverFlow),
      rightTop: !(rightOverFlow || topOverFlow || arrowVerticalBalancePx > relativeBoxGap.bottom + relativeBoxRect.height),
      leftCenter: !(leftOverFlow || verticalCenterOverFlow),
      leftTopToBottom: !(leftOverFlow || verticalTopToBottomOverFlow),
      leftCenterToBottom: !(leftOverFlow || verticalCenterToBottomOverFlow),
      leftBottom: !(leftOverFlow || bottomOverFlow || arrowVerticalBalancePx > relativeBoxRect.bottom),
      leftBottomToTop: !(leftOverFlow || verticalBottomToTopOverFlow),
      leftCenterToTop: !(leftOverFlow || verticalCenterToTopOverFlow),
      leftTop: !(leftOverFlow || topOverFlow || arrowVerticalBalancePx > relativeBoxGap.bottom + relativeBoxRect.height)
    };
    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 verticalCenterToTop = documentGap.bottom + relativeBoxRect.height / 2;
    var viewsOffset = {
      bottomCenter: {
        left: horizontalCenter - rect.width / 2,
        top: verticalBottom + arrowSize
      },
      bottomLeftToRight: {
        left: horizontalLeft,
        top: verticalBottom + arrowSize
      },
      bottomCenterToRight: {
        left: horizontalCenter - arrowHorizontalBalancePx,
        top: verticalBottom + arrowSize
      },
      bottomRight: {
        left: horizontalRight - arrowHorizontalBalancePx,
        top: verticalBottom + arrowSize
      },
      bottomRightToLeft: {
        left: horizontalRight - rect.width,
        top: verticalBottom + arrowSize
      },
      bottomCenterToLeft: {
        left: horizontalCenter - rect.width + arrowHorizontalBalancePx,
        top: verticalBottom + arrowSize
      },
      bottomLeft: {
        left: horizontalLeft - rect.width + arrowHorizontalBalancePx,
        top: verticalBottom + arrowSize
      },
      topCenter: {
        left: horizontalCenter - rect.width / 2,
        bottom: horizontalTop + arrowSize
      },
      topLeftToRight: {
        left: horizontalLeft,
        bottom: horizontalTop + arrowSize
      },
      topCenterToRight: {
        left: horizontalCenter - arrowHorizontalBalancePx,
        bottom: horizontalTop + arrowSize
      },
      topRight: {
        left: horizontalRight - arrowHorizontalBalancePx,
        bottom: horizontalTop + arrowSize
      },
      topRightToLeft: {
        left: horizontalRight - rect.width,
        bottom: horizontalTop + arrowSize
      },
      topCenterToLeft: {
        left: horizontalCenter - rect.width + arrowHorizontalBalancePx,
        bottom: horizontalTop + arrowSize
      },
      topLeft: {
        left: horizontalLeft - rect.width + arrowHorizontalBalancePx,
        top: verticalTop - (rect.height + arrowSize)
      },
      rightCenter: {
        left: horizontalRight + arrowSize,
        top: verticalCenter - rect.height / 2
      },
      rightTopToBottom: {
        left: horizontalRight + arrowSize,
        top: verticalTop
      },
      rightCenterToBottom: {
        left: horizontalRight + arrowSize,
        top: verticalCenter - arrowVerticalBalancePx
      },
      rightBottom: {
        left: horizontalRight + arrowSize,
        top: verticalBottom - arrowVerticalBalancePx
      },
      rightBottomToTop: {
        left: horizontalRight + arrowSize,
        bottom: documentGap.bottom
      },
      rightCenterToTop: {
        left: horizontalRight + arrowSize,
        bottom: verticalCenterToTop - arrowVerticalBalancePx
      },
      rightTop: {
        left: horizontalRight + arrowSize,
        bottom: horizontalTop - arrowVerticalBalancePx
      },
      leftCenter: {
        left: horizontalLeft - (rect.width + arrowSize),
        top: verticalCenter - rect.height / 2
      },
      leftTopToBottom: {
        left: horizontalLeft - (rect.width + arrowSize),
        top: verticalTop
      },
      leftCenterToBottom: {
        left: horizontalLeft - (rect.width + arrowSize),
        top: verticalCenter - arrowVerticalBalancePx
      },
      leftBottom: {
        left: horizontalLeft - (rect.width + arrowSize),
        top: verticalBottom - arrowVerticalBalancePx
      },
      leftBottomToTop: {
        left: horizontalLeft - (rect.width + arrowSize),
        bottom: documentGap.bottom
      },
      leftCenterToTop: {
        left: horizontalLeft - (rect.width + arrowSize),
        bottom: verticalCenterToTop - arrowVerticalBalancePx
      },
      leftTop: {
        left: horizontalLeft - (rect.width + arrowSize),
        bottom: horizontalTop - arrowVerticalBalancePx
      }
    };
    return {
      views: views,
      viewsOffset: viewsOffset,
      targetOffset: relativeBoxRect,
      popupOffset: rect
    };
  },
  getArrowAdjustments: function getArrowAdjustments(el, relativeBox, customFrame) {
    if (!el) {
      return;
    }

    var elRects = viewPort.frameRelativeRects(el, customFrame);
    var rectGap = elRects.rectGap;
    var relativeBoxRects = viewPort.frameRelativeRects(relativeBox, customFrame);
    var relativeBoxGap = relativeBoxRects.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) {
    var defaultView = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : '';
    var customFrame = arguments.length > 3 ? arguments[3] : undefined;

    var _ref2 = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : {},
        needArrow = _ref2.needArrow,
        isAbsolute = _ref2.isAbsolute,
        _ref2$customOrder = _ref2.customOrder,
        customOrder = _ref2$customOrder === void 0 ? [] : _ref2$customOrder;

    var customScrollFrame = isAbsolute ? customFrame : '';
    var viewPortPossibilities = viewPort.possibilities(popup, relativeBox, customScrollFrame, {
      needArrow: needArrow,
      isAbsolute: isAbsolute
    });

    if (!viewPortPossibilities) {
      return;
    }

    var views = viewPortPossibilities.views,
        viewsOffset = viewPortPossibilities.viewsOffset,
        targetOffset = viewPortPossibilities.targetOffset,
        popupOffset = viewPortPossibilities.popupOffset;
    var view = null;
    var isViewFound = false;

    if (!isViewFound && defaultView && views[defaultView]) {
      view = defaultView;
      isViewFound = true;
    }

    if (!isViewFound) {
      if (customOrder.length > 0) {
        isViewFound = customOrder.some(function (position) {
          if (views[position]) {
            view = position;
            return true;
          }
        });
      } else {
        isViewFound = defaultOrder.some(function (position) {
          if (views[position]) {
            view = position;
            return true;
          }
        });
      }
    }

    if (!isViewFound) {
      view = defaultView;
    }

    return {
      view: view,
      views: views,
      viewsOffset: viewsOffset,
      targetOffset: targetOffset,
      popupOffset: popupOffset
    };
  }
};
var _default = {
  betterView: viewPort.betterView,
  frameRelativeRects: viewPort.frameRelativeRects,
  getArrowAdjustments: viewPort.getArrowAdjustments,
  isInViewPort: viewPort.isInViewPort
};
exports["default"] = _default;