@universityofmaryland/web-elements-library 1.5.9 → 1.6.0-beta.1

package/dist/atomic/animations/brand/card-stack.mjs

@@ -1,797 +0,0 @@
-import { ElementBuilder } from "@universityofmaryland/web-builder-library";
-import * as token from "@universityofmaryland/web-token-library";
-import { isPreferredReducedMotion } from "@universityofmaryland/web-utilities-library/accessibility";
-import { withViewTimelineAnimation } from "@universityofmaryland/web-utilities-library/styles";
-import "@universityofmaryland/web-styles-library/element";
-import "@universityofmaryland/web-styles-library/layout";
-import "@universityofmaryland/web-styles-library/animation";
-import "@universityofmaryland/web-styles-library/typography";
-import "@universityofmaryland/web-utilities-library/media";
-import "@universityofmaryland/web-utilities-library/dom";
-import "@universityofmaryland/web-icons-library/controls";
-import "@universityofmaryland/web-icons-library/communication";
-import "@universityofmaryland/web-icons-library/files";
-import "@universityofmaryland/web-icons-library/brand";
-import "@universityofmaryland/web-icons-library/arrows";
-import "../actions/indicator.mjs";
-import "./chevron-scroll.mjs";
-import imageContainer from "../../assets/image/background.mjs";
-import "@universityofmaryland/web-styles-library";
-import "@universityofmaryland/web-utilities-library/performance";
-import toggle from "../../assets/video/toggle.mjs";
-import "@universityofmaryland/web-icons-library/location";
-import "@universityofmaryland/web-icons-library/calendar";
-import "@universityofmaryland/web-utilities-library/theme";
-import "../../layout/block/stacked.mjs";
-import "../../layout/overlay/modal.mjs";
-import "../../layout/person/columns.mjs";
-import "@universityofmaryland/web-icons-library/social";
-import "../../text-lockup/date.mjs";
-import "../../text-lockup/small.mjs";
-const configuration = [
-  {
-    count: 4,
-    layout: {
-      gridTemplateColumns: "repeat(15, 10vw)",
-      gridTemplateRows: "repeat(15, 8vh)"
-    },
-    items: [
-      {
-        column: "3 / 8",
-        row: "4 / 5",
-        zIndex: 9,
-        offset: {
-          top: "-10%",
-          left: "-5%"
-        }
-      },
-      {
-        column: "12 / 15",
-        row: "2 / 6",
-        offset: {
-          top: "-1%",
-          right: "-4%"
-        }
-      },
-      {
-        column: "4 / 7",
-        row: "10 / 15",
-        zIndex: 9,
-        offset: {
-          bottom: "-13%",
-          left: "-4%"
-        }
-      },
-      {
-        column: "13 / 15",
-        row: "10 / 14",
-        offset: {
-          right: "-8%",
-          bottom: "-3%"
-        }
-      }
-    ]
-  },
-  {
-    count: 5,
-    layout: {
-      gridTemplateColumns: "repeat(15, 10vw)",
-      gridTemplateRows: "repeat(15, 8vh)"
-    },
-    items: [
-      {
-        column: "2 / 6",
-        row: "4 / 9",
-        zIndex: 9,
-        offset: {
-          top: "-10%",
-          left: "-6%"
-        }
-      },
-      {
-        column: "12 / 15",
-        row: "2 / 5",
-        offset: {
-          top: "-3%",
-          right: "-5%"
-        }
-      },
-      {
-        column: "10 / 12",
-        row: "3 / 5",
-        offset: {
-          bottom: "-20%",
-          right: "-1%"
-        }
-      },
-      {
-        column: "1 / 4",
-        row: "8/ 13",
-        zIndex: 9,
-        offset: {
-          bottom: "-10%",
-          left: "-10%"
-        }
-      },
-      {
-        column: "12 / 15",
-        row: "10 / 14",
-        offset: {
-          right: "-10%",
-          bottom: "-7%"
-        }
-      }
-    ]
-  },
-  {
-    count: 6,
-    layout: {
-      gridTemplateColumns: "repeat(15, 10vw)",
-      gridTemplateRows: "repeat(15, 8vh)"
-    },
-    items: [
-      {
-        column: "2 / 6",
-        row: "4 / 9",
-        zIndex: 9,
-        offset: {
-          top: "-10%",
-          left: "-6%"
-        }
-      },
-      {
-        column: "12 / 15",
-        row: "2 / 5",
-        offset: {
-          top: "-3%",
-          right: "-5%"
-        }
-      },
-      {
-        column: "10 / 12",
-        row: "3 / 5",
-        offset: {
-          bottom: "-20%",
-          right: "-1%"
-        }
-      },
-      {
-        column: "12 / 15",
-        row: "6 / 8",
-        offset: {
-          bottom: "-5%",
-          right: "-20%"
-        }
-      },
-      {
-        column: "1 / 4",
-        row: "8/ 13",
-        zIndex: 9,
-        offset: {
-          bottom: "-10%",
-          left: "-10%"
-        }
-      },
-      {
-        column: "12 / 15",
-        row: "10 / 14",
-        offset: {
-          right: "-10%",
-          bottom: "-7%"
-        }
-      }
-    ]
-  },
-  {
-    count: 7,
-    layout: {
-      gridTemplateColumns: "repeat(15, 10vw)",
-      gridTemplateRows: "repeat(15, 8vh)"
-    },
-    items: [
-      {
-        column: "2 / 6",
-        row: "4 / 9",
-        zIndex: 9,
-        offset: {
-          top: "-10%",
-          left: "-6%"
-        }
-      },
-      {
-        column: "12 / 15",
-        row: "2 / 5",
-        offset: {
-          top: "-3%",
-          right: "-5%"
-        }
-      },
-      {
-        column: "10 / 12",
-        row: "3 / 5",
-        offset: {
-          bottom: "-20%",
-          right: "-1%"
-        }
-      },
-      {
-        column: "12 / 15",
-        row: "6 / 8",
-        offset: {
-          bottom: "-5%",
-          right: "-20%"
-        }
-      },
-      {
-        column: "1 / 4",
-        row: "8/ 13",
-        zIndex: 9,
-        offset: {
-          bottom: "-10%",
-          left: "-10%"
-        }
-      },
-      {
-        column: "12 / 15",
-        row: "10 / 14",
-        offset: {
-          right: "-10%",
-          bottom: "-7%"
-        }
-      },
-      {
-        column: "6 / 9",
-        row: "10 / 15",
-        offset: {
-          right: "-10%",
-          bottom: "-25%"
-        }
-      }
-    ]
-  },
-  {
-    count: 8,
-    layout: {
-      gridTemplateColumns: "repeat(15, 10vw)",
-      gridTemplateRows: "repeat(15, 8vh)"
-    },
-    items: [
-      {
-        column: "2 / 6",
-        row: "4 / 9",
-        zIndex: 9,
-        offset: {
-          top: "-10%",
-          left: "-6%"
-        }
-      },
-      {
-        column: "12 / 15",
-        row: "2 / 5",
-        offset: {
-          top: "-3%",
-          right: "-5%"
-        }
-      },
-      {
-        column: "10 / 12",
-        row: "3 / 5",
-        offset: {
-          bottom: "-20%",
-          right: "-1%"
-        }
-      },
-      {
-        column: "3 / 9",
-        row: "1 / 3",
-        offset: {
-          right: "-10%",
-          top: "-25%"
-        }
-      },
-      {
-        column: "12 / 15",
-        row: "6 / 8",
-        offset: {
-          bottom: "-5%",
-          right: "-20%"
-        }
-      },
-      {
-        column: "1 / 4",
-        row: "8/ 13",
-        zIndex: 9,
-        offset: {
-          bottom: "-10%",
-          left: "-10%"
-        }
-      },
-      {
-        column: "12 / 15",
-        row: "10 / 14",
-        offset: {
-          right: "-10%",
-          bottom: "-7%"
-        }
-      },
-      {
-        column: "6 / 9",
-        row: "10 / 15",
-        offset: {
-          right: "-10%",
-          bottom: "-25%"
-        }
-      }
-    ]
-  }
-];
-const STACK_CONTAINER_CLASS = "brand-animations-card-stack";
-const STACK_ELEMENT_CLASS = `${STACK_CONTAINER_CLASS}-element`;
-const STACK_GRID_CLASS = `${STACK_CONTAINER_CLASS}-grid`;
-const STACK_ITEM_CLASS = `${STACK_CONTAINER_CLASS}-item`;
-const STACK_GRID_ERROR_CLASS = `${STACK_GRID_CLASS}-error`;
-const KEY_FRAME_GRID_EXPAND = "grid-expand";
-const KEY_FRAME_GRID_ITEM = "grid-item";
-const KEY_FRAME_FEATURED_SIZE = "featured-size";
-const isPreferReducedMotion = isPreferredReducedMotion();
-const isScrollTimelineSupported = () => "ScrollTimeline" in window || CSS.supports("animation-timeline", "scroll()");
-const isDisplayWithoutAnimation = isPreferReducedMotion || !isScrollTimelineSupported();
-const getResponsiveSizes = () => {
-  const windowWidth = window.innerWidth;
-  if (windowWidth >= 1024) {
-    return { width: 0.4, height: 0.4 };
-  } else if (windowWidth >= 768) {
-    return { width: 0.5, height: 0.5 };
-  } else {
-    return { width: 0.8, height: 0.5 };
-  }
-};
-const keyFrameGridExpand = `
-  @keyframes ${KEY_FRAME_GRID_EXPAND} {
-    to {
-      transform: translate(0, 0);
-      width: inherit;
-    }
-  }
-`;
-const keyFrameGridItem = `
-  @keyframes ${KEY_FRAME_GRID_ITEM} {
-    to {
-      opacity: 0;
-    }
-  }
-`;
-const keyFrameFeaturedSize = `
-  @keyframes ${KEY_FRAME_FEATURED_SIZE} {
-    to {
-      width: 100%;
-      height: 100vh;
-      top: 0%;
-    }
-  }
-`;
-const waitForMediaLoad = async (container) => {
-  const images = Array.from(container.querySelectorAll("img"));
-  const videos = Array.from(container.querySelectorAll("video"));
-  const imagePromises = images.map((img) => {
-    if (img.complete) {
-      if (img.naturalWidth > 0) {
-        return Promise.resolve();
-      } else {
-        return Promise.reject(new Error(`Failed to load image: ${img.src}`));
-      }
-    }
-    return new Promise((resolve, reject) => {
-      img.addEventListener("load", () => resolve(), { once: true });
-      img.addEventListener(
-        "error",
-        () => reject(new Error(`Failed to load image: ${img.src}`)),
-        { once: true }
-      );
-    });
-  });
-  const videoPromises = videos.map((video) => {
-    if (video.readyState >= 3) {
-      return Promise.resolve();
-    }
-    return new Promise((resolve, reject) => {
-      video.addEventListener("loadeddata", () => resolve(), { once: true });
-      video.addEventListener(
-        "error",
-        () => reject(new Error(`Failed to load video: ${video.src}`)),
-        { once: true }
-      );
-    });
-  });
-  await Promise.all([...imagePromises, ...videoPromises]);
-  return new Promise((resolve) => {
-    requestAnimationFrame(() => {
-      requestAnimationFrame(() => {
-        resolve();
-      });
-    });
-  });
-};
-const getConfigurationByCount = (count) => {
-  return configuration.find((c) => c.count === count);
-};
-const getStackElementFromGridItem = (gridItem, index) => {
-  return gridItem.querySelector(
-    `.${STACK_ELEMENT_CLASS}-${index}`
-  );
-};
-const calculateCenterTransform = (element, centerElement, offset) => {
-  const elementRect = element.getBoundingClientRect();
-  const centerRect = centerElement.getBoundingClientRect();
-  const centerX = centerRect.left + centerRect.width / 2;
-  const centerY = centerRect.top + centerRect.height / 2;
-  const elementCenterX = elementRect.left + elementRect.width / 2;
-  const elementCenterY = elementRect.top + elementRect.height / 2;
-  let translateX = centerX - elementCenterX;
-  let translateY = centerY - elementCenterY;
-  if (offset) {
-    const applyOffset = (value, dimension) => {
-      return value ? parseFloat(value) / 100 * dimension : 0;
-    };
-    translateX += applyOffset(offset.left, centerRect.width);
-    translateX -= applyOffset(offset.right, centerRect.width);
-    translateY += applyOffset(offset.top, centerRect.height);
-    translateY -= applyOffset(offset.bottom, centerRect.height);
-  }
-  return {
-    x: translateX,
-    y: translateY
-  };
-};
-const clearElementAnimations = (featuredElement, gridContainer) => {
-  if (featuredElement) {
-    featuredElement.style.animation = "none";
-  }
-  if (gridContainer) {
-    gridContainer.style.animation = "none";
-  }
-};
-const isMobileDevice = () => {
-  return window.innerWidth < 768;
-};
-const createResizeHandler = (onResize, delay = 300) => {
-  let timeoutId = null;
-  let previousWidth = window.innerWidth;
-  return () => {
-    const currentWidth = window.innerWidth;
-    if (currentWidth === previousWidth) {
-      return;
-    }
-    previousWidth = currentWidth;
-    if (timeoutId) {
-      clearTimeout(timeoutId);
-    }
-    timeoutId = setTimeout(() => {
-      onResize();
-      timeoutId = null;
-    }, delay);
-  };
-};
-const setElementOpacity = (element, opacity, transition) => {
-  element.style.opacity = opacity;
-  if (transition) {
-    element.style.transition = transition;
-  }
-};
-const validateAnimationElements = (gridContainer, config) => {
-  return gridContainer !== null && config !== void 0;
-};
-const applyElementTransforms = (element, itemConfig, featuredElement) => {
-  if (featuredElement) {
-    const windowWidth = window.innerWidth;
-    const windowHeight = window.innerHeight;
-    const featuredWidth = featuredElement.offsetWidth;
-    const featuredHeight = featuredElement.offsetHeight;
-    const isLargerThan40Percent = featuredWidth > windowWidth * 0.41 || featuredHeight > windowHeight * 0.41;
-    if (!isLargerThan40Percent) {
-      element.style.width = `${featuredWidth}px`;
-      element.style.height = `${featuredHeight}px`;
-    } else {
-      const parentContainer = featuredElement.parentElement;
-      const parentWidth = parentContainer ? parentContainer.offsetWidth : windowWidth;
-      const { width: widthPercentage, height: heightVh } = getResponsiveSizes();
-      const width = Math.round(parentWidth * widthPercentage);
-      const height = Math.round(windowHeight * heightVh);
-      element.style.width = `${width}px`;
-      element.style.height = `${height}px`;
-    }
-  }
-  const transform = calculateCenterTransform(
-    element,
-    featuredElement,
-    itemConfig?.offset
-  );
-  element.style.transform = `translate(${transform.x}px, ${transform.y}px)`;
-};
-const processGridAnimation = (featuredElement, gridContainer, config) => {
-  const gridItems = Array.from(gridContainer.children);
-  gridItems.forEach((gridItem, index) => {
-    const element = getStackElementFromGridItem(gridItem, index);
-    if (!element) {
-      return;
-    }
-    const itemConfig = config.items[index];
-    applyElementTransforms(element, itemConfig, featuredElement);
-  });
-};
-const createGridElement = (element, index$1, placement) => {
-  const rowStart = placement.row ? parseInt(placement.row.split(" / ")[0]) : 0;
-  const getStartRange = (row) => {
-    if (row >= 13) return -70;
-    if (row >= 10 && row <= 12) return -40;
-    if (row >= 6 && row < 10) return 40;
-    return 80;
-  };
-  const getEndRange = (row) => {
-    if (row >= 13) return 120;
-    if (row >= 10 && row <= 12) return 140;
-    if (row >= 6 && row < 10) return 160;
-    return 170;
-  };
-  const startRange = getStartRange(rowStart);
-  const endRange = getEndRange(rowStart);
-  const animationRangeStart = `${startRange}vh`;
-  const animationRangeEnd = `${endRange}vh`;
-  const builder = new ElementBuilder().withClassName(`${STACK_ELEMENT_CLASS}-${index$1}`).withStyles({
-    element: {
-      overflow: "clip",
-      height: "100%",
-      width: "100%",
-      ...withViewTimelineAnimation({
-        animation: `${KEY_FRAME_GRID_EXPAND} ease-in-out forwards`,
-        animationTimeline: "view()",
-        animationRangeStart,
-        animationRangeEnd,
-        animationDuration: "1ms"
-      })
-    }
-  });
-  if (element.tagName === "IMG") {
-    const backgroundImage = imageContainer({
-      element,
-      isScaled: true
-    });
-    builder.withChild(backgroundImage);
-  }
-  return builder.build();
-};
-const createGridItem = (element, placement, index) => {
-  const rowStart = placement.row ? parseInt(placement.row.split(" / ")[0]) : 0;
-  const startRange = rowStart > 8 ? 0 : 80;
-  const endRange = rowStart > 8 ? 200 : 200;
-  const animationRangeStart = `${startRange}vh`;
-  const animationRangeEnd = `${endRange}vh`;
-  const gridElement = createGridElement(element, index, placement);
-  return new ElementBuilder().withClassName(`${STACK_ITEM_CLASS}-${index}`).withStyles({
-    element: {
-      gridColumn: placement.column,
-      gridRow: placement.row,
-      zIndex: placement.zIndex || 1,
-      width: "100%",
-      height: "100%",
-      [`@media (${token.media.queries.large.max})`]: {
-        [`@supports not (animation-timeline: scroll())`]: {
-          display: "none"
-        }
-      },
-      ...isDisplayWithoutAnimation && {
-        display: "none"
-      },
-      ...withViewTimelineAnimation({
-        animation: `${KEY_FRAME_GRID_ITEM} ease-in-out forwards`,
-        animationTimeline: "view()",
-        animationRangeStart,
-        animationRangeEnd
-      })
-    }
-  }).withChild(gridElement).build();
-};
-const createGrid = (props) => {
-  const totalCount = props.images.length;
-  const config = getConfigurationByCount(totalCount);
-  if (!config) {
-    console.warn(`No configuration found for ${totalCount} elements`);
-    return new ElementBuilder().withClassName(STACK_GRID_ERROR_CLASS).build();
-  }
-  const gridItems = props.images.map((element, index) => {
-    const placement = config.items[index];
-    return createGridItem(element, placement, index);
-  });
-  const gridItemElements = gridItems.map((item) => item);
-  return new ElementBuilder().withClassName(STACK_GRID_CLASS).withStyles({
-    element: {
-      display: "grid",
-      gridTemplateColumns: "repeat(16, 1fr)",
-      gridTemplateRows: "repeat(16, 2vh)",
-      gap: token.spacing.min,
-      minHeight: "300px",
-      [`@media (${token.media.queries.large.max})`]: {
-        "@supports not (animation-timeline: scroll())": {
-          width: "100%"
-        }
-      },
-      ...withViewTimelineAnimation({
-        gridTemplateColumns: config.layout.gridTemplateColumns,
-        gridTemplateRows: config.layout.gridTemplateRows,
-        transform: "translate(-50%, -25%)"
-      })
-    }
-  }).withChildren(...gridItemElements).build();
-};
-const createFeatured = (element, isExpand, totalCount) => {
-  let video;
-  const { width: widthPercentage, height: heightVh } = getResponsiveSizes();
-  const builder = new ElementBuilder().withClassName(`${STACK_ELEMENT_CLASS}-featured`).withStyles({
-    element: {
-      position: "absolute",
-      top: "20vh",
-      left: "50%",
-      transform: "translateX(-50%)",
-      zIndex: 999,
-      width: `${widthPercentage * 100}%`,
-      height: `${heightVh * 100}vh`,
-      ...isDisplayWithoutAnimation && {
-        top: "0"
-      },
-      [`@media (${token.media.queries.large.max})`]: {
-        "@supports not (animation-timeline: view())": {
-          width: "100% !important",
-          height: "100% !important",
-          top: "0"
-        }
-      },
-      ...isExpand && {
-        ...withViewTimelineAnimation({
-          top: "30vh",
-          animation: `${KEY_FRAME_FEATURED_SIZE} ease-in-out forwards`,
-          animationTimeline: "view()",
-          animationRangeStart: `${100 + (totalCount - 4) * 10}vh`,
-          animationRangeEnd: "250vh"
-        })
-      }
-    }
-  });
-  if (element.tagName === "IMG") {
-    const backgroundImage = imageContainer({
-      element,
-      isScaled: true
-    });
-    builder.withChild(backgroundImage);
-  }
-  if (element.tagName === "VIDEO") {
-    element.setAttribute("muted", "true");
-    element.setAttribute("playsinline", "true");
-    element.setAttribute("loop", "true");
-    video = toggle({
-      video: element,
-      isScaled: true
-    });
-    if (video && video.element instanceof HTMLElement) {
-      builder.withChild(video);
-    }
-  }
-  const featuredElement = builder.build();
-  if (isExpand && featuredElement.element instanceof HTMLElement) {
-    const observer = new IntersectionObserver(
-      (entries) => {
-        entries.forEach((entry) => {
-          if (entry.isIntersecting) {
-            if (video?.events?.setPlay) video.events.setPlay();
-            observer.disconnect();
-          }
-        });
-      },
-      {
-        rootMargin: `-${100 + (totalCount - 4) * 10}px 0px 0px 0px`,
-        threshold: 0
-      }
-    );
-    observer.observe(featuredElement.element);
-  }
-  return featuredElement;
-};
-const createSticky = (props) => {
-  const grid = createGrid(props);
-  const featured = createFeatured(
-    props.featured,
-    props.isExpandFeature,
-    props.images.length
-  );
-  const wrapper = new ElementBuilder().withClassName(`${STACK_CONTAINER_CLASS}-sticky-wrapper`).withStyles({
-    element: {
-      position: "relative",
-      ...withViewTimelineAnimation({
-        position: "sticky",
-        top: 0
-      })
-    }
-  }).withChildren(grid, featured).build();
-  return new ElementBuilder().withClassName(`${STACK_CONTAINER_CLASS}-sticky`).withStyles({
-    element: {
-      ...withViewTimelineAnimation({
-        height: "200vh",
-        ...props.isExpandFeature && {
-          height: "250vh"
-        }
-      })
-    }
-  }).withChild(wrapper).build();
-};
-const cardStack = (props) => {
-  const sticky = createSticky(props);
-  const composite = new ElementBuilder().withClassName(STACK_CONTAINER_CLASS).withStyles({
-    element: {
-      containerType: "inline-size",
-      opacity: "0",
-      overflow: "clip"
-    }
-  }).withChild(sticky).build();
-  const loadAnimation = async () => {
-    const totalCount = props.images.length;
-    const config = getConfigurationByCount(totalCount);
-    const gridContainer = composite.element.querySelector(
-      `.${STACK_GRID_CLASS}`
-    );
-    const featuredElement = composite.element.querySelector(
-      `.${STACK_ELEMENT_CLASS}-featured`
-    );
-    let animationsCleared = false;
-    if (!validateAnimationElements(gridContainer, config)) {
-      return;
-    }
-    const clearAnimations = () => {
-      if (animationsCleared) return;
-      clearElementAnimations(featuredElement, gridContainer);
-      animationsCleared = true;
-      setTimeout(() => {
-        processGridAnimation(props.featured, gridContainer, config);
-      }, 100);
-    };
-    try {
-      await waitForMediaLoad(gridContainer);
-    } catch (error) {
-      console.warn("Media loading failed, proceeding with animation:", error);
-    }
-    processGridAnimation(props.featured, gridContainer, config);
-    setElementOpacity(composite.element, "1");
-    if (!isMobileDevice()) {
-      const resizeHandler = createResizeHandler(() => {
-        setTimeout(() => {
-          processGridAnimation(props.featured, gridContainer, config);
-          setTimeout(() => {
-            setElementOpacity(composite.element, "1");
-            animationsCleared = false;
-          }, 100);
-        }, 200);
-      });
-      window.addEventListener("resize", () => {
-        if (isMobileDevice()) {
-          return;
-        }
-        if (composite.element.style.opacity === "1") {
-          setElementOpacity(composite.element, "0", "opacity 0.3s ease-in-out");
-        }
-        clearAnimations();
-        resizeHandler();
-      });
-    }
-  };
-  composite.styles += keyFrameGridExpand;
-  composite.styles += keyFrameGridItem;
-  composite.styles += keyFrameFeaturedSize;
-  return {
-    ...composite,
-    events: {
-      loadAnimation
-    }
-  };
-};
-export {
-  cardStack as default
-};
-//# sourceMappingURL=card-stack.mjs.map