@zohodesk/components 1.0.0-temp-241 → 1.0.0-temp-242

package/lib/Popup/viewPort.js

@@ -1,367 +0,0 @@
-"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;
-    var padding = needArrow ? arrowSize : paddingSpace;
-    var arrowHorizontalBalancePx = !isAbsolute && needArrow ? 30 : 0;
-    var arrowVerticalBalancePx = !isAbsolute && needArrow ? 27 : 0;
-    var bottomOverFlow = rect.height + padding > relativeBoxGap.bottom;
-    var topOverFlow = rect.height + padding > relativeBoxGap.top;
-    var rightOverFlow = rect.width + padding > relativeBoxGap.right;
-    var leftOverFlow = rect.width + padding > relativeBoxGap.left;
-    var horizontalCenterOverFlow = rect.width / 2 + padding > relativeBoxGap.center.right || rect.width / 2 + padding > relativeBoxGap.center.left;
-    var verticalCenterOverFlow = rect.height / 2 + padding > relativeBoxGap.center.top || rect.height / 2 + padding > relativeBoxGap.center.bottom;
-    var horizontalLeftToRightOverFlow = rect.width + padding > relativeBoxRect.width + relativeBoxGap.right;
-    var horizontalCenterToRightOverFlow = rect.width + padding > relativeBoxGap.center.right || arrowHorizontalBalancePx > relativeBoxGap.center.left;
-    var horizontalRightToLeft = rect.width + padding > relativeBoxRect.width + relativeBoxGap.left;
-    var horizontalCenterToLeft = rect.width + padding > relativeBoxGap.center.left || arrowHorizontalBalancePx > relativeBoxGap.center.right;
-    var verticalTopToBottomOverFlow = rect.height + padding > relativeBoxRect.height + relativeBoxGap.bottom;
-    var verticalCenterToBottomOverFlow = rect.height + padding > relativeBoxGap.center.bottom || arrowVerticalBalancePx > relativeBoxGap.center.top;
-    var verticalBottomToTopOverFlow = rect.height + padding > relativeBoxRect.height + relativeBoxGap.top;
-    var verticalCenterToTopOverFlow = rect.height + padding > 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;