@meve/ui/es/utils/elements.js

Argon design system components library

import _asyncToGenerator from "@babel/runtime/helpers/esm/asyncToGenerator";
import _regeneratorRuntime from "@babel/runtime/regenerator";
import { isNumber, isString, toNumber } from './shared';
export function getLeft(element) {
  var _element$getBoundingC = element.getBoundingClientRect(),
      left = _element$getBoundingC.left;

  return left + (document.body.scrollLeft || document.documentElement.scrollLeft);
}
export function getTop(element) {
  var _element$getBoundingC2 = element.getBoundingClientRect(),
      top = _element$getBoundingC2.top;

  return top + (document.body.scrollTop || document.documentElement.scrollTop);
}
export function getScrollTop(element) {
  var top = 'scrollTop' in element ? element.scrollTop : element.pageYOffset; // iOS scroll bounce cause minus scrollTop

  return Math.max(top, 0);
}
export function getScrollLeft(element) {
  var left = 'scrollLeft' in element ? element.scrollLeft : element.pageXOffset;
  return Math.max(left, 0);
}
export function doubleRaf() {
  return new Promise(function (resolve) {
    window.requestAnimationFrame(function () {
      window.requestAnimationFrame(resolve);
    });
  });
}
export function inViewport(_x) {
  return _inViewport.apply(this, arguments);
}

function _inViewport() {
  _inViewport = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(element) {
    var _element$getBoundingC3, top, bottom, left, right, _window, innerWidth, innerHeight, xInViewport, yInViewport;

    return _regeneratorRuntime.wrap(function _callee$(_context) {
      while (1) {
        switch (_context.prev = _context.next) {
          case 0:
            _context.next = 2;
            return doubleRaf();

          case 2:
            _element$getBoundingC3 = element.getBoundingClientRect(), top = _element$getBoundingC3.top, bottom = _element$getBoundingC3.bottom, left = _element$getBoundingC3.left, right = _element$getBoundingC3.right;
            _window = window, innerWidth = _window.innerWidth, innerHeight = _window.innerHeight;
            xInViewport = left <= innerWidth && right >= 0;
            yInViewport = top <= innerHeight && bottom >= 0;
            return _context.abrupt("return", xInViewport && yInViewport);

          case 7:
          case "end":
            return _context.stop();
        }
      }
    }, _callee);
  }));
  return _inViewport.apply(this, arguments);
}

export function getParentScroller(el) {
  var element = el;

  while (element) {
    if (!element.parentNode) {
      break;
    }

    element = element.parentNode;

    if (element === document.body || element === document.documentElement) {
      break;
    }

    var scrollRE = /(scroll|auto)/;

    var _window$getComputedSt = window.getComputedStyle(element),
        overflowY = _window$getComputedSt.overflowY,
        overflow = _window$getComputedSt.overflow;

    if (scrollRE.test(overflowY) || scrollRE.test(overflow)) {
      return element;
    }
  }

  return window;
}
export function getAllParentScroller(el) {
  var allParentScroller = [];
  var element = el;

  while (element !== window) {
    element = getParentScroller(element);
    allParentScroller.push(element);
  }

  return allParentScroller;
} // example 1rem

export var isRem = function isRem(value) {
  return isString(value) && value.endsWith('rem');
}; // example 1 || 1px

export var isPx = function isPx(value) {
  return isString(value) && value.endsWith('px') || isNumber(value);
}; // example 1%

export var isPercent = function isPercent(value) {
  return isString(value) && value.endsWith('%');
}; // example 1vw

export var isVw = function isVw(value) {
  return isString(value) && value.endsWith('vw');
}; // example 1vh

export var isVh = function isVh(value) {
  return isString(value) && value.endsWith('vh');
}; // example return 1

export var toPxNum = function toPxNum(value) {
  if (isNumber(value)) {
    return value;
  }

  if (isPx(value)) {
    return +value.replace('px', '');
  }

  if (isVw(value)) {
    return +value.replace('vw', '') * window.innerWidth / 100;
  }

  if (isVh(value)) {
    return +value.replace('vh', '') * window.innerHeight / 100;
  }

  if (isRem(value)) {
    var num = +value.replace('rem', '');
    var rootFontSize = window.getComputedStyle(document.documentElement).fontSize;
    return num * parseFloat(rootFontSize);
  }

  if (isString(value)) {
    return toNumber(value);
  } // % and other


  return 0;
}; // example return 1px 1% 1vw 1vh 1rem null

export var toSizeUnit = function toSizeUnit(value) {
  if (value == null) {
    return undefined;
  }

  if (isPercent(value) || isVw(value) || isVh(value) || isRem(value)) {
    return value;
  }

  return toPxNum(value) + "px";
};
export function requestAnimationFrame(fn) {
  return globalThis.requestAnimationFrame ? globalThis.requestAnimationFrame(fn) : globalThis.setTimeout(fn, 16);
}
export function scrollTo(element, _ref) {
  var _ref$top = _ref.top,
      top = _ref$top === void 0 ? 0 : _ref$top,
      _ref$left = _ref.left,
      left = _ref$left === void 0 ? 0 : _ref$left,
      _ref$duration = _ref.duration,
      duration = _ref$duration === void 0 ? 300 : _ref$duration,
      animation = _ref.animation;
  var startTime = Date.now();
  var scrollTop = getScrollTop(element);
  var scrollLeft = getScrollLeft(element);
  return new Promise(function (resolve) {
    var frame = function frame() {
      var progress = (Date.now() - startTime) / duration;

      if (progress < 1) {
        var nextTop = scrollTop + (top - scrollTop) * animation(progress);
        var nextLeft = scrollLeft + (left - scrollLeft) * animation(progress);
        element.scrollTo(nextLeft, nextTop);
        requestAnimationFrame(frame);
      } else {
        element.scrollTo(left, top);
        resolve();
      }
    };

    requestAnimationFrame(frame);
  });
}
export function isMobile() {
  return /Android|webOS|iPhone|iPod|BlackBerry|Pad/i.test(navigator.userAgent);
}