boldr-ui/Tooltip/TooltipPosition.js

UI components for Boldr

'use strict';

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = position;
var DEFAULT_RULE = function DEFAULT_RULE() {
  return { top: 0, left: 0 };
};

var RULES = {
  'top-left': function topLeft(anchor, element, margin) {
    return {
      top: anchor.top - element.height - margin,
      left: anchor.left
    };
  },
  'top-center': function topCenter(anchor, element, margin) {
    return {
      top: anchor.top - element.height - margin,
      left: anchor.left + anchor.width / 2 - element.width / 2
    };
  },
  'top-right': function topRight(anchor, element, margin) {
    return {
      top: anchor.top - element.height - margin,
      left: anchor.left + anchor.width - element.width
    };
  },
  'bottom-left': function bottomLeft(anchor, element, margin) {
    return {
      top: anchor.top + anchor.height + margin,
      left: anchor.left
    };
  },
  'bottom-center': function bottomCenter(anchor, element, margin) {
    return {
      top: anchor.top + anchor.height + margin,
      left: anchor.left + anchor.width / 2 - element.width / 2
    };
  },
  'bottom-right': function bottomRight(anchor, element, margin) {
    return {
      top: anchor.top + anchor.height + margin,
      left: anchor.left + anchor.width - element.width
    };
  },
  'left-top': function leftTop(anchor, element, margin) {
    return {
      top: anchor.top,
      left: anchor.left - element.width - margin
    };
  },
  'left-center': function leftCenter(anchor, element, margin) {
    return {
      top: anchor.top + anchor.height / 2 - element.height / 2,
      left: anchor.left - element.width - margin
    };
  },
  'left-bottom': function leftBottom(anchor, element, margin) {
    return {
      top: anchor.top + anchor.height - element.height,
      left: anchor.left - element.width - margin
    };
  },
  'right-top': function rightTop(anchor, element, margin) {
    return {
      top: anchor.top,
      left: anchor.left + anchor.width + margin
    };
  },
  'right-center': function rightCenter(anchor, element, margin) {
    return {
      top: anchor.top + anchor.height / 2 - element.height / 2,
      left: anchor.left + anchor.width + margin
    };
  },
  'right-bottom': function rightBottom(anchor, element, margin) {
    return {
      top: anchor.top + anchor.height - element.height,
      left: anchor.left + anchor.width + margin
    };
  }
};

var RELATIVE_RULES = {
  'top-left': function topLeft(anchor, element, margin) {
    return {
      top: -anchor.height - element.height - margin,
      left: 0
    };
  },
  'top-center': function topCenter(anchor, element, margin) {
    return {
      top: -anchor.height - element.height - margin,
      left: anchor.width / 2 - element.width / 2
    };
  },
  'top-right': function topRight(anchor, element, margin) {
    return {
      top: -anchor.height - element.height - margin,
      left: anchor.width - element.width
    };
  },
  'bottom-left': function bottomLeft(anchor, element, margin) {
    return {
      top: margin,
      left: 0
    };
  },
  'bottom-center': function bottomCenter(anchor, element, margin) {
    return {
      top: margin,
      left: anchor.width / 2 - element.width / 2
    };
  },
  'bottom-right': function bottomRight(anchor, element, margin) {
    return {
      top: margin,
      left: anchor.width - element.width
    };
  },
  'left-top': function leftTop(anchor, element, margin) {
    return {
      top: -anchor.height + margin,
      left: -element.width - margin
    };
  },
  'left-center': function leftCenter(anchor, element, margin) {
    return {
      top: element.height / 2 - anchor.height / 2,
      left: -element.width - margin
    };
  },
  'left-bottom': function leftBottom(anchor, element, margin) {
    return {
      top: -element.height - margin,
      left: -element.width - margin
    };
  },
  'right-top': function rightTop(anchor, element, margin) {
    return {
      top: -anchor.height + margin,
      left: anchor.width + margin
    };
  },
  'right-center': function rightCenter(anchor, element, margin) {
    return {
      top: element.height / 2 - anchor.height / 2,
      left: anchor.width + margin
    };
  },
  'right-bottom': function rightBottom(anchor, element, margin) {
    return {
      top: -element.height - margin,
      left: anchor.width + margin
    };
  }
};

function position(anchor, element, params) {
  var relative = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : false;
  var _params$placement = params.placement,
      placement = _params$placement === undefined ? 'top' : _params$placement,
      _params$alignment = params.alignment,
      alignment = _params$alignment === undefined ? 'center' : _params$alignment,
      _params$margin = params.margin,
      margin = _params$margin === undefined ? 20 : _params$margin;

  var rules = relative ? RELATIVE_RULES : RULES;
  return (rules[placement + '-' + alignment] || DEFAULT_RULE)(anchor, element, margin);
}