@jsenv/dom 0.1.0

package/src/size/get_available_height.js

@@ -0,0 +1,22 @@
+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

@@ -0,0 +1,22 @@
+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

@@ -0,0 +1,14 @@
+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

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

package/src/size/get_inner_height.js

@@ -0,0 +1,15 @@
+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

@@ -0,0 +1,15 @@
+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

@@ -0,0 +1,10 @@
+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

@@ -0,0 +1,57 @@
+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

@@ -0,0 +1,47 @@
+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

@@ -0,0 +1,14 @@
+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

@@ -0,0 +1,14 @@
+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

@@ -0,0 +1,10 @@
+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

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

package/src/size/hooks/use_available_height.js

@@ -0,0 +1,27 @@
+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

@@ -0,0 +1,27 @@
+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

@@ -0,0 +1,10 @@
+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

@@ -0,0 +1,10 @@
+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

@@ -0,0 +1,62 @@
+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;
+};