zarm/lib/utils/dom/dom.js

基于 React 的移动端UI库

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.scrollTo = scrollTo;
exports.getElementSize = getElementSize;
exports.getScrollLeft = exports.getScrollTop = exports.getSupportedPropertyName = exports.getScrollParent = exports.getOffsetParent = exports.getOuterSizes = exports.isFixed = exports.getStyleComputedProperty = exports.setStyle = exports.isNumeric = exports.getBoundingClientRect = exports.getLeft = exports.getTop = exports.canUseDOM = void 0;

var _raf = _interopRequireDefault(require("raf"));

/* eslint-disable operator-linebreak */
var canUseDOM = !!(typeof window !== 'undefined' && typeof document !== 'undefined' && window.document && window.document.createElement); // 获取元素的纵坐标（相对于窗口）

exports.canUseDOM = canUseDOM;

var getTop = function getTop(ele) {
  var offset = ele.offsetTop;

  if (ele.offsetParent != null) {
    offset += getTop(ele.offsetParent);
  }

  return offset;
};

exports.getTop = getTop;

var getLeft = function getLeft(ele) {
  var offset = ele.offsetLeft;

  if (ele.offsetParent != null) {
    offset += getLeft(ele.offsetParent);
  }

  return offset;
}; // 获取元素大小以及相对窗口的位置


exports.getLeft = getLeft;

var getBoundingClientRect = function getBoundingClientRect(ele) {
  var rect = ele.getBoundingClientRect(); // 解决ie下的兼容问题

  var isIE = navigator.userAgent.indexOf('MSIE') !== -1;
  var rectTop = isIE && ele.tagName === 'HTML' ? -ele.scrollTop : rect.top;
  return {
    left: rect.left,
    top: rectTop,
    right: rect.right,
    bottom: rect.bottom,
    width: rect.right - rect.left,
    height: rect.bottom - rectTop
  };
};

exports.getBoundingClientRect = getBoundingClientRect;

var isNumeric = function isNumeric(n) {
  return n !== '' && !Number.isNaN(parseFloat(n)) && Number.isFinite(n);
}; // 设置元素行内样式


exports.isNumeric = isNumeric;

var setStyle = function setStyle(ele, styles) {
  Object.keys(styles).forEach(function (prop) {
    var unit = '';

    if (['width', 'height', 'top', 'right', 'bottom', 'left'].indexOf(prop) !== -1 && isNumeric(styles[prop])) {
      unit = 'px';
    }

    ele.style[prop] = styles[prop] + unit;
  });
}; // 获取元素css的某一个计算后属性值


exports.setStyle = setStyle;

var getStyleComputedProperty = function getStyleComputedProperty(ele, property) {
  var css = window.getComputedStyle(ele, null);
  return css[property];
}; // 判断元素是否固定定位或者是否在固定定位元素内


exports.getStyleComputedProperty = getStyleComputedProperty;

var isFixed = function isFixed(ele) {
  if (ele === window.document.body) {
    return false;
  }

  if (getStyleComputedProperty(ele, 'position') === 'fixed') {
    return true;
  }

  if (ele.parentNode) {
    return isFixed(ele.parentNode);
  }

  return false;
}; // 获取元素完整尺寸(offset size + margin)


exports.isFixed = isFixed;

var getOuterSizes = function getOuterSizes(ele) {
  if (!ele) {
    return {
      width: 0,
      height: 0
    };
  }

  var _display = ele.style.display;
  var _visibility = ele.style.visibility;
  ele.style.display = 'block';
  ele.style.visibility = 'hidden'; // const calcWidthToForceRepaint = e.offsetWidth;

  var styles = window.getComputedStyle(ele);
  var x = parseFloat(styles.marginTop) + parseFloat(styles.marginBottom);
  var y = parseFloat(styles.marginLeft) + parseFloat(styles.marginRight);
  var result = {
    width: ele.offsetWidth + y,
    height: ele.offsetHeight + x
  }; // reset

  ele.style.display = _display;
  ele.style.visibility = _visibility;
  return result;
}; // 获取元素的offsetParent


exports.getOuterSizes = getOuterSizes;

var getOffsetParent = function getOffsetParent(ele) {
  var offsetParent = ele.offsetParent;
  return offsetParent === window.document.body || !offsetParent ? window.document.documentElement : offsetParent;
};

exports.getOffsetParent = getOffsetParent;
var overflowScrollReg = /scroll|auto/i;
var defaultRoot = canUseDOM ? window : undefined;

function isElement(node) {
  var ELEMENT_NODE_TYPE = 1;
  return node.tagName !== 'HTML' && node.tagName !== 'BODY' && node.nodeType === ELEMENT_NODE_TYPE;
} // 获取指定元素可滚动的父元素


var getScrollParent = function getScrollParent(element) {
  var root = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : defaultRoot;
  var node = element;

  while (node && node !== root && isElement(node)) {
    var _window$getComputedSt = window.getComputedStyle(node),
        overflowY = _window$getComputedSt.overflowY;

    if (overflowScrollReg.test(overflowY)) {
      return node;
    }

    node = node.parentNode;
  }

  return root;
}; // 获取浏览器支持的带前缀属性名


exports.getScrollParent = getScrollParent;

var getSupportedPropertyName = function getSupportedPropertyName(property) {
  var prefixes = ['', 'ms', 'webkit', 'moz', 'o'];

  for (var i = 0; i < prefixes.length; i++) {
    var toCheck = prefixes[i] ? prefixes[i] + property.charAt(0).toUpperCase() + property.slice(1) : property;

    if (typeof window.document.body.style[toCheck] !== 'undefined') {
      return toCheck;
    }
  }

  return null;
}; // 获取元素scrollTop


exports.getSupportedPropertyName = getSupportedPropertyName;

var getScrollTop = function getScrollTop(element) {
  if (element === document) {
    return (element.scrollingElement || element.documentElement).scrollTop;
  }

  if (element === window) {
    return Math.max(window.pageYOffset, document.documentElement.scrollTop, document.body.scrollTop);
  }

  return element.scrollTop;
};

exports.getScrollTop = getScrollTop;

var getScrollLeft = function getScrollLeft(ele) {
  if (ele === document.documentElement) {
    return (document.scrollingElement || document.documentElement).scrollLeft;
  }

  if (ele === window) {
    return Math.max(window.pageYOffset, document.documentElement.scrollLeft, document.body.scrollLeft);
  }

  return ele.scrollLeft;
}; // export const scrollTo = (scrollContainer: HTMLElement | Window, scrollTop: number): void => {
//   if (scrollContainer === window) {
//     scrollContainer.scrollTo(0, scrollTop);
//   } else {
//     (scrollContainer as HTMLElement).scrollTop = scrollTop;
//   }
// };


exports.getScrollLeft = getScrollLeft;
var scrollRafId;
var scrollList = {};

function scrollTo(scrollContainer, top, left, duration) {
  if ('scrollBehavior' in document.documentElement.style) {
    scrollContainer.scrollTo({
      top: top,
      left: left,
      behavior: 'smooth'
    });
    return false;
  }

  if ((scrollList === null || scrollList === void 0 ? void 0 : scrollList[scrollRafId]) === scrollContainer) {
    _raf.default.cancel(scrollRafId);
  }

  var count = 0;
  var fromLeft = 0;
  var fromTop = 0;

  if (scrollContainer === window) {
    fromLeft = getScrollLeft(scrollContainer);
    fromTop = getScrollTop(scrollContainer);
  } else {
    fromLeft = scrollContainer.scrollLeft;
    fromTop = scrollContainer.scrollTop;
  }

  var frames = duration === 0 ? 1 : Math.ceil(duration * 1000 / 16);
  var x = fromLeft;
  var y = fromTop;

  function animate() {
    if (scrollContainer === window) {
      x += (left - fromLeft) / frames;
      y += (top - fromTop) / frames;
      scrollContainer.scrollTo(x, y);
    } else {
      scrollContainer.scrollLeft += (left - fromLeft) / frames;
      scrollContainer.scrollTop += (top - fromTop) / frames;
    }

    count += 1;

    if (count <= frames) {
      scrollRafId = (0, _raf.default)(animate);
      scrollList[scrollRafId] = scrollContainer;
    }
  }

  animate();
}

function getElementSize(element) {
  if (element) {
    var offsetWidth = element.offsetWidth,
        offsetHeight = element.offsetHeight;

    if (offsetWidth && offsetHeight) {
      return {
        width: offsetWidth,
        height: offsetHeight
      };
    }

    var style = getComputedStyle(element);
    var width = parseFloat(style.width);
    var height = parseFloat(style.height);

    if (height && width) {
      return {
        width: width,
        height: height
      };
    }
  }

  return {
    width: 0,
    height: 0
  };
}