tdesign-mobile-vue/lib/guide/utils/dom.js

tdesign-mobile-vue

/**
 * tdesign v1.7.0
 * (c) 2024 TDesign Group
 * @license MIT
 */

import isString from 'lodash/isString';
import isFunction from 'lodash/isFunction';
import { getWindowScroll, elementInViewport, getWindowSize } from '../../shared/dom.js';

function getElmCssPropValue(element, propName) {
  var propValue = "";
  if (document.defaultView && document.defaultView.getComputedStyle) {
    propValue = document.defaultView.getComputedStyle(element, null).getPropertyValue(propName);
  }
  if (propValue && propValue.toLowerCase) {
    return propValue.toLowerCase();
  }
  return propValue;
}
function isFixed(element) {
  var p = element.parentNode;
  if (!p || p.nodeName === "HTML") {
    return false;
  }
  if (getElmCssPropValue(element, "position") === "fixed") {
    return true;
  }
  return isFixed(p);
}
function getRelativePosition(elm) {
  var relativeElm = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : document.body;
  var _getWindowScroll = getWindowScroll(),
    scrollTop = _getWindowScroll.scrollTop,
    scrollLeft = _getWindowScroll.scrollLeft;
  var _elm$getBoundingClien = elm.getBoundingClientRect(),
    elmTop = _elm$getBoundingClien.top,
    elmLeft = _elm$getBoundingClien.left;
  var _relativeElm$getBound = relativeElm.getBoundingClientRect(),
    relElmTop = _relativeElm$getBound.top,
    relElmLeft = _relativeElm$getBound.left;
  var relativeElmPosition = getElmCssPropValue(relativeElm, "position");
  if (relativeElm.tagName.toLowerCase() !== "body" && relativeElmPosition === "relative" || relativeElmPosition === "sticky") {
    return {
      top: elmTop - relElmTop,
      left: elmLeft - relElmLeft
    };
  }
  if (isFixed(elm)) {
    return {
      top: elmTop,
      left: elmLeft
    };
  }
  return {
    top: elmTop + scrollTop,
    left: elmLeft + scrollLeft
  };
}
function getTargetElm(elm) {
  if (elm) {
    var _process;
    var targetElement = null;
    if (isString(elm)) {
      targetElement = document.querySelector(elm);
    } else if (isFunction(elm)) {
      targetElement = elm();
    } else {
      throw new Error("elm should be string or function");
    }
    if (targetElement) {
      return targetElement;
    }
    if (((_process = process) === null || _process === void 0 || (_process = _process.env) === null || _process === void 0 ? void 0 : _process.NODE_ENV) !== "test") {
      throw new Error("There is no element with given.");
    }
  } else {
    return document.body;
  }
}
function getScrollParent(element) {
  var style = window.getComputedStyle(element);
  var excludeStaticParent = style.position === "absolute";
  var overflowRegex = /(auto|scroll)/;
  if (style.position === "fixed") return document.body;
  for (var parent = element; parent.parentElement;) {
    parent = parent.parentElement;
    style = window.getComputedStyle(parent);
    if (excludeStaticParent && style.position === "static") {
      continue;
    }
    if (overflowRegex.test(style.overflow + style.overflowY + style.overflowX)) return parent;
  }
  return document.body;
}
function scrollToParentVisibleArea(element) {
  var parent = getScrollParent(element);
  if (parent === document.body) return;
  if (elementInViewport(element, parent)) return;
  parent.scrollTop = element.offsetTop - parent.offsetTop;
}
function scrollToElm(elm) {
  var rect = elm.getBoundingClientRect();
  if (!elementInViewport(elm)) {
    var winHeight = getWindowSize().height;
    window.scrollTo({
      top: rect.top - (winHeight / 2 - rect.height / 2),
      behavior: "smooth"
    });
  }
}

export { getElmCssPropValue, getRelativePosition, getScrollParent, getTargetElm, isFixed, scrollToElm, scrollToParentVisibleArea };
//# sourceMappingURL=dom.js.map