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

React generic components for shakthi products

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
var viewPort = {
  frameRelativeRects: function frameRelativeRects(el, customFrame) {
    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
    };
    var 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
    };

    var adjustments = {};
    if (newRect.top < 0) {
      adjustments.top = Math.abs(newRect.top);
    }
    if (newRect.left < 0) {
      adjustments.left = Math.abs(newRect.left);
    }
    if (newRect.bottom > customFrameRect.height) {
      adjustments.bottom = newRect.bottom - customFrameRect.height;
    }
    if (newRect.right > customFrameRect.width) {
      adjustments.right = newRect.right - customFrameRect.width;
    }

    return { frameRect: customFrameRect, rect: newRect, rectGap: rectGap, adjustments: adjustments };
  },
  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;
  },
  possibilities: function possibilities(el, relativeBox, customFrame) {
    if (!el) {
      return;
    }

    var elRects = viewPort.frameRelativeRects(el, customFrame);

    var rect = elRects.rect,
        adjustments = elRects.adjustments;

    //arrow height||width

    var height = rect.height,
        width = rect.width;

    rect.height = height + 10;
    rect.width = width + 10;

    var relativeBoxRects = viewPort.frameRelativeRects(relativeBox, customFrame);

    var relativeBoxGap = relativeBoxRects.rectGap,
        relativeBoxRect = relativeBoxRects.rect;
    // adjustments.left
    //   ? (adjustments.left += (relativeBoxRects.rect.width * 2) / 3)
    //   : null;
    // adjustments.right
    //   ? (adjustments.right += (relativeBoxRects.rect.width * 2) / 3)
    //   : null;
    // adjustments.top
    //   ? (adjustments.top += (relativeBoxRects.rect.width * 2) / 3)
    //   : null;
    // adjustments.bottom
    //   ? (adjustments.bottom += (relativeBoxRects.rect.width * 2) / 3)
    //   : null;

    var views = {};

    //rect => PopOverContainer, relativeBoxGap => PopOverTarget

    var getPositions = function getPositions() {
      //Horizontal ~ ----- X axis
      //Vertical ~ ||||||| Y axis

      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;
      var horizontalRightToLeft = rect.width > relativeBoxRect.width + relativeBoxGap.left;
      var horizontalCenterToLeft = rect.width > relativeBoxGap.center.left;

      var verticalTopToBottomOverFlow = rect.height > relativeBoxRect.height + relativeBoxGap.bottom;
      var verticalCenterToBottomOverFlow = rect.height > relativeBoxGap.center.bottom;
      var verticalBottomToTopOverFlow = rect.height > relativeBoxRect.height + relativeBoxGap.top;
      var verticalCenterToTopOverFlow = rect.width > relativeBoxGap.center.top;

      var views = {
        bottomCenter: !(bottomOverFlow || horizontalCenterOverFlow),
        bottomLeftToRight: !(bottomOverFlow || horizontalLeftToRightOverFlow),
        bottomCenterToRight: !(bottomOverFlow || horizontalCenterToRightOverFlow),
        bottomRight: !(bottomOverFlow || rightOverFlow),
        bottomRightToLeft: !(bottomOverFlow || horizontalRightToLeft),
        bottomCenterToLeft: !(bottomOverFlow || horizontalCenterToLeft),
        bottomLeft: !(bottomOverFlow || leftOverFlow),

        topCenter: !(topOverFlow || horizontalCenterOverFlow),
        topLeftToRight: !(topOverFlow || horizontalLeftToRightOverFlow),
        topCenterToRight: !(topOverFlow || horizontalCenterToRightOverFlow),
        topRight: !(topOverFlow || rightOverFlow),
        topRightToLeft: !(topOverFlow || horizontalRightToLeft),
        topCenterToLeft: !(topOverFlow || horizontalCenterToLeft),
        topLeft: !(topOverFlow || leftOverFlow),

        rightCenter: !(rightOverFlow || verticalCenterOverFlow),
        rightTopToBottom: !(rightOverFlow || verticalTopToBottomOverFlow),
        rightCenterToBottom: !(rightOverFlow || verticalCenterToBottomOverFlow),
        rightBottom: !(rightOverFlow || bottomOverFlow),
        rightBottomToTop: !(rightOverFlow || verticalBottomToTopOverFlow),
        rightCenterToTop: !(rightOverFlow || verticalCenterToTopOverFlow),
        rightTop: !(rightOverFlow || topOverFlow),

        leftCenter: !(leftOverFlow || verticalCenterOverFlow),
        leftTopToBottom: !(leftOverFlow || verticalTopToBottomOverFlow),
        leftCenterToBottom: !(leftOverFlow || verticalCenterToBottomOverFlow),
        leftBottom: !(leftOverFlow || bottomOverFlow),
        leftBottomToTop: !(leftOverFlow || verticalBottomToTopOverFlow),
        leftCenterToTop: !(leftOverFlow || verticalCenterToTopOverFlow),
        leftTop: !(leftOverFlow || topOverFlow)
      };

      return 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 bottomRightOnlyOverFlow = rect.width > relativeBoxGap.center.right;
    views.bottomRight = !(bottomOverFlow || bottomRightOnlyOverFlow);

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

    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 topRightOnlyOverFlow = rect.width > relativeBoxGap.center.right;
    views.topRight = !(topOverFlow || topRightOnlyOverFlow);

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

    views.topCenter = !(topOverFlow || topRightOverFlow || topLeftOverFlow);

    //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.top;
    views.leftTop = !(leftOverFlow || leftTopOnlyOverFlow);

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

    views.leftCenter = !(leftOverFlow || leftTopOverFlow || leftBottomOverFlow);

    //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.top;
    views.rightTop = !(rightOverFlow || rightTopOnlyOverFlow);

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

    views.rightCenter = !(rightOverFlow || rightTopOverFlow || rightBottomOverFlow);

    return { views: views, adjustments: adjustments };
  },

  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, defaultView, customFrame) {
    var viewPortPossibilities = viewPort.possibilities(popup, relativeBox, customFrame);

    if (!viewPortPossibilities) {
      return;
    }

    var views = viewPortPossibilities.views,
        adjustments = viewPortPossibilities.adjustments;

    var viewKeys = Object.keys(views);
    var isViewFound = false;
    var fisrtView = "";
    for (var i = 0; i < viewKeys.length; i++) {
      var viewKey = viewKeys[i];
      if (views[viewKey]) {
        isViewFound = true;
        fisrtView = viewKey;
        break;
      }
    }

    if (!isViewFound) {
      return { view: null, adjustments: adjustments };
    } else if (!defaultView) {
      return { view: fisrtView, adjustments: adjustments };
    }

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

    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 };
      }
    }

    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 };
        }
      }
    }

    return { view: null, adjustments: adjustments };
  }
};

exports.default = {
  betterView: viewPort.betterView,
  frameRelativeRects: viewPort.frameRelativeRects,
  getArrowAdjustments: viewPort.getArrowAdjustments
};