js-web-tools/lib/domElementPosition.js

Tools for Javascript develpers

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.offsetParent = offsetParent;
exports.getOffset = getOffset;
exports.scrollPrarent = scrollPrarent;
exports.position = position;
exports.scrollTop = exports.scrollLeft = void 0;

var _utils = require("./utils");

var _domElementStyle = _interopRequireDefault(require("./domElementStyle"));

var _domElement = require("./domElement");

var _domElementSize = require("./domElementSize");

var _domUtils = require("./domUtils");

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }

function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }

function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }

function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }

function isHTML(node) {
  return node && node.nodeName && node.nodeName.toLowerCase() === 'html';
}

function getScrollAccessor(offset) {
  var prop = offset === 'pageXOffset' ? 'scrollLeft' : 'scrollTop';
  return function (node, val) {
    var win = (0, _domUtils.isWindow)(node);
    /* istanbul ignore else */

    if (typeof val === 'undefined') {
      return win ? win[offset] : node[prop];
    }
    /* istanbul ignore next */


    if (win) {
      win.scrollTo(win[offset], val);
    } else {
      node[prop] = val;
    }
  };
}

function isHTMLElement(element) {
  return !!element && 'offsetParent' in element;
}

var scrollLeft = getScrollAccessor('pageXOffset');
exports.scrollLeft = scrollLeft;
var scrollTop = getScrollAccessor('pageYOffset'); // https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/offsetParent

exports.scrollTop = scrollTop;

function offsetParent(node) {
  var doc = (0, _domUtils.ownerDocument)(node);
  var parent = node && node.offsetParent;

  while (isHTMLElement(parent) && !isHTML(parent) && (0, _domElementStyle["default"])(parent, 'position') === 'static') {
    parent = parent.offsetParent;
  }

  return parent || doc.documentElement;
}

function getOffset(node) {
  var doc = (0, _domUtils.ownerDocument)(node);
  var box = {
    top: 0,
    left: 0,
    height: 0,
    width: 0
  };
  var docElem = doc && doc.documentElement;

  if (!docElem || !(0, _domElement.contains)(docElem, node)) {
    return box;
  }
  /* istanbul ignore else */


  if (typeof node.getBoundingClientRect !== 'undefined') {
    box = node.getBoundingClientRect();
  }

  box = {
    top: box.top + scrollTop(node) - (docElem.clientTop || 0),
    left: box.left + scrollLeft(node) - (docElem.clientLeft || 0),
    width: box.width,
    height: box.height
  };
  return box;
}

function scrollPrarent(element, firstPossible) {
  var position = (0, _domElementStyle["default"])(element, 'position');
  var excludeStatic = position === 'absolute';
  var ownerDoc = element.ownerDocument;
  var defVal = ownerDoc || document;
  /* istanbul ignore else */

  if (position === 'fixed') {
    return defVal;
  }

  while ((element = element.parentNode) && !(0, _domUtils.isDocument)(element)) {
    var isStatic = excludeStatic && (0, _domElementStyle["default"])(element, 'position') === 'static';
    var eleStyle = ((0, _domElementStyle["default"])(element, 'overflow') || '') + ((0, _domElementStyle["default"])(element, 'overflow-y') || '') + (0, _domElementStyle["default"])(element, 'overflow-x');

    if (isStatic) {
      continue;
    }
    /* istanbul ignore else */


    if (/(auto|scroll)/.test(eleStyle) && (firstPossible || (0, _domElementSize.height)(element) < element.scrollHeight)) {
      return element;
    }
  }

  return defVal;
}

function position(node, parentNode) {
  var parentOffset = {
    top: 0,
    left: 0
  };
  var offset;

  if ((0, _domElementStyle["default"])(node, 'position') === 'fixed') {
    offset = node.getBoundingClientRect();
  } else {
    var parent = parentNode || offsetParent(node);
    offset = getOffset(node);
    /* istanbul ignore else */

    if (!isHTML(parent)) {
      parentOffset = getOffset(parent);
    }

    var borderTop = (0, _utils.toNumber)((0, _domElementStyle["default"])(parent, 'borderTopWidth'));
    parentOffset.top += borderTop - scrollTop(parent) || 0;
    var borderLeft = (0, _utils.toNumber)((0, _domElementStyle["default"])(parent, 'borderLeftWidth'));
    parentOffset.left += borderLeft - scrollLeft(parent) || 0;
  }

  var marginTop = (0, _utils.toNumber)((0, _domElementStyle["default"])(node, 'marginTop'));
  var marginLeft = (0, _utils.toNumber)((0, _domElementStyle["default"])(node, 'marginLeft'));
  return _objectSpread({}, offset, {
    top: offset.top - parentOffset.top - marginTop,
    left: offset.left - parentOffset.left - marginLeft
  });
}