chore: move utils

src-next/utils/dom/event.ts

@@ -0,0 +1,56 @@
+import { isServer } from '..';
+import { EventHandler } from '../types';
+
+// eslint-disable-next-line import/no-mutable-exports
+export let supportsPassive = false;
+
+if (!isServer) {
+  try {
+    const opts = {};
+    Object.defineProperty(opts, 'passive', {
+      // eslint-disable-next-line getter-return
+      get() {
+        /* istanbul ignore next */
+        supportsPassive = true;
+      },
+    });
+    window.addEventListener('test-passive', null as any, opts);
+    // eslint-disable-next-line no-empty
+  } catch (e) {}
+}
+
+export function on(
+  target: EventTarget,
+  event: string,
+  handler: EventHandler,
+  passive = false
+) {
+  if (!isServer) {
+    target.addEventListener(
+      event,
+      handler,
+      supportsPassive ? { capture: false, passive } : false
+    );
+  }
+}
+
+export function off(target: EventTarget, event: string, handler: EventHandler) {
+  if (!isServer) {
+    target.removeEventListener(event, handler);
+  }
+}
+
+export function stopPropagation(event: Event) {
+  event.stopPropagation();
+}
+
+export function preventDefault(event: Event, isStopPropagation?: boolean) {
+  /* istanbul ignore else */
+  if (typeof event.cancelable !== 'boolean' || event.cancelable) {
+    event.preventDefault();
+  }
+
+  if (isStopPropagation) {
+    stopPropagation(event);
+  }
+}

src-next/utils/dom/node.ts

@@ -0,0 +1,7 @@
+export function removeNode(el: Node) {
+  const parent = el.parentNode;
+
+  if (parent) {
+    parent.removeChild(el);
+  }
+}

src-next/utils/dom/raf.ts

@@ -0,0 +1,40 @@
+/**
+ * requestAnimationFrame polyfill
+ */
+
+import { isServer } from '..';
+
+let prev = Date.now();
+
+/* istanbul ignore next */
+function fallback(fn: FrameRequestCallback): number {
+  const curr = Date.now();
+  const ms = Math.max(0, 16 - (curr - prev));
+  const id = setTimeout(fn, ms);
+  prev = curr + ms;
+  return id;
+}
+
+/* istanbul ignore next */
+const root = (isServer ? global : window) as Window;
+
+/* istanbul ignore next */
+const iRaf = root.requestAnimationFrame || fallback;
+
+/* istanbul ignore next */
+const iCancel = root.cancelAnimationFrame || root.clearTimeout;
+
+export function raf(fn: FrameRequestCallback): number {
+  return iRaf.call(root, fn);
+}
+
+// double raf for animation
+export function doubleRaf(fn: FrameRequestCallback): void {
+  raf(() => {
+    raf(fn);
+  });
+}
+
+export function cancelRaf(id: number) {
+  iCancel.call(root, id);
+}

src-next/utils/dom/reset-scroll.ts

@@ -0,0 +1,16 @@
+/**
+ * Hack for iOS12 page scroll
+ * https://developers.weixin.qq.com/community/develop/doc/00044ae90742f8c82fb78fcae56800
+ */
+
+import { isIOS as checkIsIOS } from '../validate/system';
+import { getRootScrollTop, setRootScrollTop } from './scroll';
+
+const isIOS = checkIsIOS();
+
+/* istanbul ignore next */
+export function resetScroll() {
+  if (isIOS) {
+    setRootScrollTop(getRootScrollTop());
+  }
+}

src-next/utils/dom/scroll.ts

@@ -0,0 +1,90 @@
+type ScrollElement = HTMLElement | Window;
+
+function isWindow(val: unknown): val is Window {
+  return val === window;
+}
+
+// get nearest scroll element
+// http://w3help.org/zh-cn/causes/SD9013
+// http://stackoverflow.com/questions/17016740/onscroll-function-is-not-working-for-chrome
+const overflowScrollReg = /scroll|auto/i;
+export function getScroller(el: HTMLElement, root: ScrollElement = window) {
+  let node = el;
+
+  while (
+    node &&
+    node.tagName !== 'HTML' &&
+    node.nodeType === 1 &&
+    node !== root
+  ) {
+    const { overflowY } = window.getComputedStyle(node);
+
+    if (overflowScrollReg.test(overflowY)) {
+      if (node.tagName !== 'BODY') {
+        return node;
+      }
+
+      // see: https://github.com/youzan/vant/issues/3823
+      const { overflowY: htmlOverflowY } = window.getComputedStyle(
+        node.parentNode as Element
+      );
+
+      if (overflowScrollReg.test(htmlOverflowY)) {
+        return node;
+      }
+    }
+    node = node.parentNode as HTMLElement;
+  }
+
+  return root;
+}
+
+export function getScrollTop(el: ScrollElement): number {
+  return 'scrollTop' in el ? el.scrollTop : el.pageYOffset;
+}
+
+export function setScrollTop(el: ScrollElement, value: number) {
+  if ('scrollTop' in el) {
+    el.scrollTop = value;
+  } else {
+    el.scrollTo(el.scrollX, value);
+  }
+}
+
+export function getRootScrollTop(): number {
+  return (
+    window.pageYOffset ||
+    document.documentElement.scrollTop ||
+    document.body.scrollTop ||
+    0
+  );
+}
+
+export function setRootScrollTop(value: number) {
+  setScrollTop(window, value);
+  setScrollTop(document.body, value);
+}
+
+// get distance from element top to page top or scroller top
+export function getElementTop(el: ScrollElement, scroller?: HTMLElement) {
+  if (isWindow(el)) {
+    return 0;
+  }
+
+  const scrollTop = scroller ? getScrollTop(scroller) : getRootScrollTop();
+  return el.getBoundingClientRect().top + scrollTop;
+}
+
+export function getVisibleHeight(el: ScrollElement) {
+  if (isWindow(el)) {
+    return el.innerHeight;
+  }
+  return el.getBoundingClientRect().height;
+}
+
+export function getVisibleTop(el: ScrollElement) {
+  if (isWindow(el)) {
+    return 0;
+  }
+  return el.getBoundingClientRect().top;
+}

src-next/utils/dom/style.ts

@@ -0,0 +1,11 @@
+export function isHidden(el: HTMLElement) {
+  const style = window.getComputedStyle(el);
+  const hidden = style.display === 'none';
+
+  // offsetParent returns null in the following situations:
+  // 1. The element or its parent element has the display property set to none.
+  // 2. The element has the position property set to fixed
+  const parentHidden = el.offsetParent === null && style.position !== 'fixed';
+
+  return hidden || parentHidden;
+}