@jsenv/dom 0.6.0 → 0.7.0

package/src/size/get_available_height.js

@@ -1,22 +0,0 @@
-import { getBorderSizes } from "./get_border_sizes.js";
-import { getHeight } from "./get_height.js";
-import { getPaddingSizes } from "./get_padding_sizes.js";
-
-export const getAvailableHeight = (
-  element,
-  parentHeight = getHeight(element.parentElement),
-) => {
-  const parentElement = element.parentElement;
-  const paddingSizes = getPaddingSizes(parentElement);
-  const borderSizes = getBorderSizes(parentElement);
-  let availableHeight = parentHeight;
-  availableHeight -=
-    paddingSizes.top +
-    paddingSizes.bottom +
-    borderSizes.top +
-    borderSizes.bottom;
-  if (availableHeight < 0) {
-    availableHeight = 0;
-  }
-  return availableHeight;
-};

package/src/size/get_available_width.js

@@ -1,22 +0,0 @@
-import { getBorderSizes } from "./get_border_sizes.js";
-import { getPaddingSizes } from "./get_padding_sizes.js";
-import { getWidth } from "./get_width.js";
-
-export const getAvailableWidth = (
-  element,
-  parentWidth = getWidth(element.parentElement),
-) => {
-  const parentElement = element.parentElement;
-  const paddingSizes = getPaddingSizes(parentElement);
-  const borderSizes = getBorderSizes(parentElement);
-  let availableWidth = parentWidth;
-  availableWidth -=
-    paddingSizes.left +
-    paddingSizes.right +
-    borderSizes.left +
-    borderSizes.right;
-  if (availableWidth < 0) {
-    availableWidth = 0;
-  }
-  return availableWidth;
-};

package/src/size/get_border_sizes.js

@@ -1,14 +0,0 @@
-export const getBorderSizes = (element) => {
-  const {
-    borderLeftWidth,
-    borderRightWidth,
-    borderTopWidth,
-    borderBottomWidth,
-  } = window.getComputedStyle(element, null);
-  return {
-    left: parseFloat(borderLeftWidth),
-    right: parseFloat(borderRightWidth),
-    top: parseFloat(borderTopWidth),
-    bottom: parseFloat(borderBottomWidth),
-  };
-};

package/src/size/get_height.js

@@ -1,4 +0,0 @@
-export const getHeight = (element) => {
-  const { height } = element.getBoundingClientRect();
-  return height;
-};

package/src/size/get_inner_height.js

@@ -1,15 +0,0 @@
-import { getBorderSizes } from "./get_border_sizes.js";
-import { getHeight } from "./get_height.js";
-import { getPaddingSizes } from "./get_padding_sizes.js";
-
-export const getInnerHeight = (element) => {
-  // Always subtract paddings and borders to get the content height
-  const paddingSizes = getPaddingSizes(element);
-  const borderSizes = getBorderSizes(element);
-  const height = getHeight(element);
-  const verticalSpaceTakenByPaddings = paddingSizes.top + paddingSizes.bottom;
-  const verticalSpaceTakenByBorders = borderSizes.top + borderSizes.bottom;
-  const innerHeight =
-    height - verticalSpaceTakenByPaddings - verticalSpaceTakenByBorders;
-  return innerHeight;
-};

package/src/size/get_inner_width.js

@@ -1,15 +0,0 @@
-import { getBorderSizes } from "./get_border_sizes.js";
-import { getPaddingSizes } from "./get_padding_sizes.js";
-import { getWidth } from "./get_width.js";
-
-export const getInnerWidth = (element) => {
-  // Always subtract paddings and borders to get the content width
-  const paddingSizes = getPaddingSizes(element);
-  const borderSizes = getBorderSizes(element);
-  const width = getWidth(element);
-  const horizontalSpaceTakenByPaddings = paddingSizes.left + paddingSizes.right;
-  const horizontalSpaceTakenByBorders = borderSizes.left + borderSizes.right;
-  const innerWidth =
-    width - horizontalSpaceTakenByPaddings - horizontalSpaceTakenByBorders;
-  return innerWidth;
-};

package/src/size/get_margin_sizes.js

@@ -1,10 +0,0 @@
-export const getMarginSizes = (element) => {
-  const { marginLeft, marginRight, marginTop, marginBottom } =
-    window.getComputedStyle(element, null);
-  return {
-    left: parseFloat(marginLeft),
-    right: parseFloat(marginRight),
-    top: parseFloat(marginTop),
-    bottom: parseFloat(marginBottom),
-  };
-};

package/src/size/get_max_height.js

@@ -1,57 +0,0 @@
-import { getAvailableHeight } from "./get_available_height.js";
-import { getHeight } from "./get_height.js";
-import { getMarginSizes } from "./get_margin_sizes.js";
-import { getMinHeight } from "./get_min_height.js";
-
-export const getMaxHeight = (
-  element,
-  availableHeight = getAvailableHeight(element),
-) => {
-  let maxHeight = availableHeight;
-  const marginSizes = getMarginSizes(element);
-  maxHeight -= marginSizes.top;
-  maxHeight -= marginSizes.bottom;
-
-  const parentElement = element.parentElement;
-  const parentElementComputedStyle = window.getComputedStyle(parentElement);
-  if (
-    parentElementComputedStyle.display === "flex" &&
-    parentElementComputedStyle.flexDirection === "column"
-  ) {
-    let previousSibling = element.previousElementSibling;
-    while (previousSibling) {
-      if (canTakeSpace(previousSibling)) {
-        const previousSiblingHeight = getHeight(previousSibling);
-        maxHeight -= previousSiblingHeight;
-        const previousSiblingMarginSizes = getMarginSizes(previousSibling);
-        maxHeight -= previousSiblingMarginSizes.top;
-        maxHeight -= previousSiblingMarginSizes.bottom;
-      }
-      previousSibling = previousSibling.previousElementSibling;
-    }
-    let nextSibling = element.nextElementSibling;
-    while (nextSibling) {
-      if (canTakeSpace(nextSibling)) {
-        const nextSiblingMinHeight = getMinHeight(nextSibling, availableHeight);
-        maxHeight -= nextSiblingMinHeight;
-        const nextSiblingMarginSizes = getMarginSizes(nextSibling);
-        maxHeight -= nextSiblingMarginSizes.top;
-        maxHeight -= nextSiblingMarginSizes.bottom;
-      }
-      nextSibling = nextSibling.nextElementSibling;
-    }
-  }
-  return maxHeight;
-};
-
-const canTakeSpace = (element) => {
-  const computedStyle = window.getComputedStyle(element);
-
-  if (computedStyle.display === "none") {
-    return false;
-  }
-  if (computedStyle.position === "absolute") {
-    return false;
-  }
-  return true;
-};

package/src/size/get_max_width.js

@@ -1,47 +0,0 @@
-import { canTakeSize } from "./can_take_size.js";
-import { getAvailableWidth } from "./get_available_width.js";
-import { getMarginSizes } from "./get_margin_sizes.js";
-import { getMinWidth } from "./get_min_width.js";
-import { getWidth } from "./get_width.js";
-
-export const getMaxWidth = (
-  element,
-  availableWidth = getAvailableWidth(element),
-) => {
-  let maxWidth = availableWidth;
-
-  const marginSizes = getMarginSizes(element);
-  maxWidth -= marginSizes.left;
-  maxWidth -= marginSizes.right;
-
-  const parentElement = element.parentElement;
-  const parentElementComputedStyle = window.getComputedStyle(parentElement);
-  if (
-    parentElementComputedStyle.display === "flex" &&
-    parentElementComputedStyle.flexDirection === "row"
-  ) {
-    let previousSibling = element.previousElementSibling;
-    while (previousSibling) {
-      if (canTakeSize(previousSibling)) {
-        const previousSiblingWidth = getWidth(previousSibling);
-        maxWidth -= previousSiblingWidth;
-        const previousSiblingMarginSizes = getMarginSizes(previousSibling);
-        maxWidth -= previousSiblingMarginSizes.left;
-        maxWidth -= previousSiblingMarginSizes.right;
-      }
-      previousSibling = previousSibling.previousElementSibling;
-    }
-    let nextSibling = element.nextElementSibling;
-    while (nextSibling) {
-      if (canTakeSize(nextSibling)) {
-        const nextSiblingMinWidth = getMinWidth(nextSibling, availableWidth);
-        maxWidth -= nextSiblingMinWidth;
-        const nextSiblingMarginSizes = getMarginSizes(nextSibling);
-        maxWidth -= nextSiblingMarginSizes.left;
-        maxWidth -= nextSiblingMarginSizes.right;
-      }
-      nextSibling = nextSibling.nextElementSibling;
-    }
-  }
-  return maxWidth;
-};

package/src/size/get_min_height.js

@@ -1,14 +0,0 @@
-import { getAvailableHeight } from "./get_available_height.js";
-import { resolveCSSSize } from "./resolve_css_size.js";
-
-export const getMinHeight = (element, availableHeight) => {
-  const computedStyle = window.getComputedStyle(element);
-  const { minHeight, fontSize } = computedStyle;
-  return resolveCSSSize(minHeight, {
-    availableSize:
-      availableHeight === undefined
-        ? getAvailableHeight(element)
-        : availableHeight,
-    fontSize,
-  });
-};

package/src/size/get_min_width.js

@@ -1,14 +0,0 @@
-import { getAvailableWidth } from "./get_available_width.js";
-import { resolveCSSSize } from "./resolve_css_size.js";
-
-export const getMinWidth = (element, availableWidth) => {
-  const computedStyle = window.getComputedStyle(element);
-  const { minWidth, fontSize } = computedStyle;
-  return resolveCSSSize(minWidth, {
-    availableSize:
-      availableWidth === undefined
-        ? getAvailableWidth(element)
-        : availableWidth,
-    fontSize,
-  });
-};

package/src/size/get_padding_sizes.js

@@ -1,10 +0,0 @@
-export const getPaddingSizes = (element) => {
-  const { paddingLeft, paddingRight, paddingTop, paddingBottom } =
-    window.getComputedStyle(element, null);
-  return {
-    left: parseFloat(paddingLeft),
-    right: parseFloat(paddingRight),
-    top: parseFloat(paddingTop),
-    bottom: parseFloat(paddingBottom),
-  };
-};

package/src/size/get_width.js

@@ -1,4 +0,0 @@
-export const getWidth = (element) => {
-  const { width } = element.getBoundingClientRect();
-  return width;
-};

package/src/size/hooks/use_available_height.js

@@ -1,27 +0,0 @@
-import { useLayoutEffect, useState } from "preact/hooks";
-import { getAvailableHeight } from "../get_available_height.js";
-
-export const useAvailableHeight = (elementRef) => {
-  const [availableHeight, availableHeightSetter] = useState(-1);
-
-  useLayoutEffect(() => {
-    const element = elementRef.current;
-    const parentElement = element.parentElement;
-    let raf;
-    const resizeObserver = new ResizeObserver((entries) => {
-      const [entry] = entries;
-      const parentHeight = entry.contentRect.height;
-      const availableH = getAvailableHeight(element, parentHeight);
-      raf = requestAnimationFrame(() => {
-        availableHeightSetter(availableH);
-      });
-    });
-    resizeObserver.observe(parentElement);
-    return () => {
-      resizeObserver.disconnect();
-      cancelAnimationFrame(raf);
-    };
-  }, []);
-
-  return availableHeight;
-};

package/src/size/hooks/use_available_width.js

@@ -1,27 +0,0 @@
-import { useLayoutEffect, useState } from "preact/hooks";
-import { getAvailableWidth } from "../get_available_width.js";
-
-export const useAvailableWidth = (elementRef) => {
-  const [availableWidth, availableWidthSetter] = useState(-1);
-
-  useLayoutEffect(() => {
-    const element = elementRef.current;
-    const parentElement = element.parentElement;
-    let raf;
-    const resizeObserver = new ResizeObserver((entries) => {
-      const [entry] = entries;
-      const parentWidth = entry.contentRect.width;
-      const availableW = getAvailableWidth(element, parentWidth);
-      raf = requestAnimationFrame(() => {
-        availableWidthSetter(availableW);
-      });
-    });
-    resizeObserver.observe(parentElement);
-    return () => {
-      resizeObserver.disconnect();
-      cancelAnimationFrame(raf);
-    };
-  }, []);
-
-  return availableWidth;
-};

package/src/size/hooks/use_max_height.js

@@ -1,10 +0,0 @@
-import { getMaxHeight } from "../get_max_height.js";
-
-export const useMaxHeight = (elementRef, availableHeight) => {
-  const element = elementRef.current;
-  if (!element) {
-    return -1;
-  }
-  const maxWidth = getMaxHeight(element, availableHeight);
-  return maxWidth;
-};

package/src/size/hooks/use_max_width.js

@@ -1,10 +0,0 @@
-import { getMaxWidth } from "../get_max_width.js";
-
-export const useMaxWidth = (elementRef, availableWidth) => {
-  const element = elementRef.current;
-  if (!element) {
-    return -1;
-  }
-  const maxWidth = getMaxWidth(element, availableWidth);
-  return maxWidth;
-};

package/src/size/hooks/use_resize_status.js

@@ -1,62 +0,0 @@
-import { useLayoutEffect, useState } from "preact/hooks";
-
-export const useResizeStatus = (elementRef, { as = "number" } = {}) => {
-  const [resizing, setIsResizing] = useState(false);
-  const [resizeWidth, setResizeWidth] = useState(null);
-  const [resizeHeight, setResizeHeight] = useState(null);
-
-  useLayoutEffect(() => {
-    const element = elementRef.current;
-
-    const onresizestart = (e) => {
-      const sizeInfo = e.detail;
-      setResizeWidth(
-        as === "number" ? sizeInfo.width : sizeInfo.widthAsPercentage,
-      );
-      setResizeHeight(
-        as === "number" ? sizeInfo.height : sizeInfo.heightAsPercentage,
-      );
-      setIsResizing(true);
-    };
-    const onresize = (e) => {
-      const sizeInfo = e.detail;
-      setResizeWidth(
-        as === "number" ? sizeInfo.width : sizeInfo.widthAsPercentage,
-      );
-      setResizeHeight(
-        as === "number" ? sizeInfo.height : sizeInfo.heightAsPercentage,
-      );
-    };
-    const onresizeend = () => {
-      setIsResizing(false);
-    };
-
-    element.addEventListener("resizestart", onresizestart);
-    element.addEventListener("resize", onresize);
-    element.addEventListener("resizeend", onresizeend);
-    return () => {
-      element.removeEventListener("resizestart", onresizestart);
-      element.removeEventListener("resize", onresize);
-      element.removeEventListener("resizeend", onresizeend);
-    };
-  }, [as]);
-
-  return {
-    resizing,
-    resizeWidth,
-    resizeHeight,
-  };
-};
-
-// to use when width is set as percentage
-export const useInitialWidth = (width, elementRef) => {
-  const [initialWidth, setInitialWidth] = useState(null);
-  useLayoutEffect(() => {
-    const element = elementRef.current;
-    const availableWidth = element.parentElement.offsetWidth;
-    setInitialWidth(
-      width.endsWith("%") ? (parseFloat(width) / 100) * availableWidth : width,
-    );
-  }, [width]);
-  return initialWidth;
-};