@universityofmaryland/web-elements-library 1.4.5 → 1.4.7
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +1 -1
- package/dist/atomic/animations/brand/card-stack.d.ts.map +1 -1
- package/dist/atomic/animations/brand/card-stack.js +26 -16
- package/dist/atomic/animations/brand/card-stack.js.map +1 -1
- package/dist/atomic/animations/brand/card-stack.mjs +12 -2
- package/dist/atomic/animations/brand/card-stack.mjs.map +1 -1
- package/dist/atomic/layout/person/columns.js +1 -0
- package/dist/atomic/layout/person/columns.js.map +1 -1
- package/dist/atomic/layout/person/columns.mjs +1 -0
- package/dist/atomic/layout/person/columns.mjs.map +1 -1
- package/dist/composite/card/block.js +1 -0
- package/dist/composite/card/block.js.map +1 -1
- package/dist/composite/card/block.mjs +1 -0
- package/dist/composite/card/block.mjs.map +1 -1
- package/dist/composite/card/list.js +1 -0
- package/dist/composite/card/list.js.map +1 -1
- package/dist/composite/card/list.mjs +1 -0
- package/dist/composite/card/list.mjs.map +1 -1
- package/dist/composite/card/overlay/color.js +1 -0
- package/dist/composite/card/overlay/color.js.map +1 -1
- package/dist/composite/card/overlay/color.mjs +1 -0
- package/dist/composite/card/overlay/color.mjs.map +1 -1
- package/dist/composite/card/overlay/icon.js +1 -0
- package/dist/composite/card/overlay/icon.js.map +1 -1
- package/dist/composite/card/overlay/icon.mjs +1 -0
- package/dist/composite/card/overlay/icon.mjs.map +1 -1
- package/dist/composite/card/overlay/image.js +1 -0
- package/dist/composite/card/overlay/image.js.map +1 -1
- package/dist/composite/card/overlay/image.mjs +1 -0
- package/dist/composite/card/overlay/image.mjs.map +1 -1
- package/dist/composite/card/video/block.js +1 -0
- package/dist/composite/card/video/block.js.map +1 -1
- package/dist/composite/card/video/block.mjs +1 -0
- package/dist/composite/card/video/block.mjs.map +1 -1
- package/dist/composite/carousel/elements/full-screen.js +1 -0
- package/dist/composite/carousel/elements/full-screen.js.map +1 -1
- package/dist/composite/carousel/elements/full-screen.mjs +1 -0
- package/dist/composite/carousel/elements/full-screen.mjs.map +1 -1
- package/dist/composite/carousel/image/multiple.js +1 -0
- package/dist/composite/carousel/image/multiple.js.map +1 -1
- package/dist/composite/carousel/image/multiple.mjs +1 -0
- package/dist/composite/carousel/image/multiple.mjs.map +1 -1
- package/dist/composite/carousel/image/standard.js +1 -0
- package/dist/composite/carousel/image/standard.js.map +1 -1
- package/dist/composite/carousel/image/standard.mjs +1 -0
- package/dist/composite/carousel/image/standard.mjs.map +1 -1
- package/dist/composite/carousel/wide/controls.js +1 -0
- package/dist/composite/carousel/wide/controls.js.map +1 -1
- package/dist/composite/carousel/wide/controls.mjs +1 -0
- package/dist/composite/carousel/wide/controls.mjs.map +1 -1
- package/dist/composite/carousel/wide/frames.js +1 -0
- package/dist/composite/carousel/wide/frames.js.map +1 -1
- package/dist/composite/carousel/wide/frames.mjs +1 -0
- package/dist/composite/carousel/wide/frames.mjs.map +1 -1
- package/dist/composite/carousel/wide/index.js +1 -0
- package/dist/composite/carousel/wide/index.js.map +1 -1
- package/dist/composite/carousel/wide/index.mjs +1 -0
- package/dist/composite/carousel/wide/index.mjs.map +1 -1
- package/dist/composite/hero/custom/expand.js +1 -0
- package/dist/composite/hero/custom/expand.js.map +1 -1
- package/dist/composite/hero/custom/expand.mjs +1 -0
- package/dist/composite/hero/custom/expand.mjs.map +1 -1
- package/dist/composite/hero/custom/grid.js +1 -0
- package/dist/composite/hero/custom/grid.js.map +1 -1
- package/dist/composite/hero/custom/grid.mjs +1 -0
- package/dist/composite/hero/custom/grid.mjs.map +1 -1
- package/dist/composite/hero/custom/video-arrow.d.ts.map +1 -1
- package/dist/composite/hero/custom/video-arrow.js +2 -0
- package/dist/composite/hero/custom/video-arrow.js.map +1 -1
- package/dist/composite/hero/custom/video-arrow.mjs +2 -0
- package/dist/composite/hero/custom/video-arrow.mjs.map +1 -1
- package/dist/composite/hero/logo.js +1 -0
- package/dist/composite/hero/logo.js.map +1 -1
- package/dist/composite/hero/logo.mjs +1 -0
- package/dist/composite/hero/logo.mjs.map +1 -1
- package/dist/composite/hero/minimal.js +1 -0
- package/dist/composite/hero/minimal.js.map +1 -1
- package/dist/composite/hero/minimal.mjs +1 -0
- package/dist/composite/hero/minimal.mjs.map +1 -1
- package/dist/composite/hero/overlay.js +1 -0
- package/dist/composite/hero/overlay.js.map +1 -1
- package/dist/composite/hero/overlay.mjs +1 -0
- package/dist/composite/hero/overlay.mjs.map +1 -1
- package/dist/composite/hero/stacked.js +1 -0
- package/dist/composite/hero/stacked.js.map +1 -1
- package/dist/composite/hero/stacked.mjs +1 -0
- package/dist/composite/hero/stacked.mjs.map +1 -1
- package/dist/composite/hero/standard.js +1 -0
- package/dist/composite/hero/standard.js.map +1 -1
- package/dist/composite/hero/standard.mjs +1 -0
- package/dist/composite/hero/standard.mjs.map +1 -1
- package/dist/composite/layout/section-intro/small.d.ts.map +1 -1
- package/dist/composite/layout/section-intro/small.js +10 -1
- package/dist/composite/layout/section-intro/small.js.map +1 -1
- package/dist/composite/layout/section-intro/small.mjs +11 -2
- package/dist/composite/layout/section-intro/small.mjs.map +1 -1
- package/dist/composite/media/elements/gif.js +1 -0
- package/dist/composite/media/elements/gif.js.map +1 -1
- package/dist/composite/media/elements/gif.mjs +1 -0
- package/dist/composite/media/elements/gif.mjs.map +1 -1
- package/dist/composite/navigation/utility/alert.js +1 -0
- package/dist/composite/navigation/utility/alert.js.map +1 -1
- package/dist/composite/navigation/utility/alert.mjs +1 -0
- package/dist/composite/navigation/utility/alert.mjs.map +1 -1
- package/dist/composite/pathway/_common.js +1 -0
- package/dist/composite/pathway/_common.js.map +1 -1
- package/dist/composite/pathway/_common.mjs +1 -0
- package/dist/composite/pathway/_common.mjs.map +1 -1
- package/dist/composite/pathway/hero.js +1 -0
- package/dist/composite/pathway/hero.js.map +1 -1
- package/dist/composite/pathway/hero.mjs +1 -0
- package/dist/composite/pathway/hero.mjs.map +1 -1
- package/dist/composite/person/bio/full.js +1 -0
- package/dist/composite/person/bio/full.js.map +1 -1
- package/dist/composite/person/bio/full.mjs +1 -0
- package/dist/composite/person/bio/full.mjs.map +1 -1
- package/dist/composite/person/bio/small.js +1 -0
- package/dist/composite/person/bio/small.js.map +1 -1
- package/dist/composite/person/bio/small.mjs +1 -0
- package/dist/composite/person/bio/small.mjs.map +1 -1
- package/dist/composite/person/block.js +1 -0
- package/dist/composite/person/block.js.map +1 -1
- package/dist/composite/person/block.mjs +1 -0
- package/dist/composite/person/block.mjs.map +1 -1
- package/dist/composite/person/hero.js +1 -0
- package/dist/composite/person/hero.js.map +1 -1
- package/dist/composite/person/hero.mjs +1 -0
- package/dist/composite/person/hero.mjs.map +1 -1
- package/dist/composite/person/list.js +1 -0
- package/dist/composite/person/list.js.map +1 -1
- package/dist/composite/person/list.mjs +1 -0
- package/dist/composite/person/list.mjs.map +1 -1
- package/dist/composite/person/tabular.js +1 -0
- package/dist/composite/person/tabular.js.map +1 -1
- package/dist/composite/person/tabular.mjs +1 -0
- package/dist/composite/person/tabular.mjs.map +1 -1
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
# University of Maryland Web Elements Library
|
|
2
2
|
|
|
3
|
-
[](https://www.npmjs.com/package/@universityofmaryland/web-elements-library)
|
|
4
4
|
|
|
5
5
|
Foundational UI building blocks for the UMD Design System, providing atomic elements that combine to create complex, accessible, and brand-compliant University of Maryland digital experiences.
|
|
6
6
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"card-stack.d.ts","sourceRoot":"","sources":["../../../../source/atomic/animations/brand/card-stack.ts"],"names":[],"mappings":"AAMA,UAAU,cAAc;IACtB,QAAQ,EAAE,gBAAgB,GAAG,gBAAgB,CAAC;IAC9C,MAAM,EAAE,gBAAgB,EAAE,CAAC;IAC3B,eAAe,EAAE,OAAO,CAAC;CAC1B;
|
|
1
|
+
{"version":3,"file":"card-stack.d.ts","sourceRoot":"","sources":["../../../../source/atomic/animations/brand/card-stack.ts"],"names":[],"mappings":"AAMA,UAAU,cAAc;IACtB,QAAQ,EAAE,gBAAgB,GAAG,gBAAgB,CAAC;IAC9C,MAAM,EAAE,gBAAgB,EAAE,CAAC;IAC3B,eAAe,EAAE,OAAO,CAAC;CAC1B;yBA07Be,OAAO,cAAc;;;;;;;;AAArC,wBAoFE"}
|
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
const Styles = require("@universityofmaryland/web-styles-library");
|
|
3
|
-
const index = require("../../../model/elements/index.js");
|
|
3
|
+
const index$1 = require("../../../model/elements/index.js");
|
|
4
|
+
const index = require("../../../utilities/accessibility/index.js");
|
|
4
5
|
require("../../../node_modules/postcss/lib/postcss.js");
|
|
5
6
|
require("../../../node_modules/postcss-nesting/dist/index.js");
|
|
6
7
|
require("../../../node_modules/postcss-js/index.js");
|
|
@@ -336,6 +337,9 @@ const STACK_GRID_ERROR_CLASS = `${STACK_GRID_CLASS}-error`;
|
|
|
336
337
|
const KEY_FRAME_GRID_EXPAND = "grid-expand";
|
|
337
338
|
const KEY_FRAME_GRID_ITEM = "grid-item";
|
|
338
339
|
const KEY_FRAME_FEATURED_SIZE = "featured-size";
|
|
340
|
+
const isPreferReducedMotion = index.isPrefferdReducedMotion();
|
|
341
|
+
const isScrollTimelineSupported = () => "ScrollTimeline" in window || CSS.supports("animation-timeline", "scroll()");
|
|
342
|
+
const isDisplayWithoutAnimation = isPreferReducedMotion || !isScrollTimelineSupported();
|
|
339
343
|
const getResponsiveSizes = () => {
|
|
340
344
|
const windowWidth = window.innerWidth;
|
|
341
345
|
if (windowWidth >= 1024) {
|
|
@@ -519,7 +523,7 @@ const processGridAnimation = (featuredElement, gridContainer, config) => {
|
|
|
519
523
|
applyElementTransforms(element, itemConfig, featuredElement);
|
|
520
524
|
});
|
|
521
525
|
};
|
|
522
|
-
const createGridElement = (element, index$
|
|
526
|
+
const createGridElement = (element, index$2, placement) => {
|
|
523
527
|
const children = [];
|
|
524
528
|
if (element.tagName === "IMG") {
|
|
525
529
|
children.push(
|
|
@@ -546,8 +550,8 @@ const createGridElement = (element, index$1, placement) => {
|
|
|
546
550
|
const endRange = getEndRange(rowStart);
|
|
547
551
|
const animationRangeStart = `${startRange}vh`;
|
|
548
552
|
const animationRangeEnd = `${endRange}vh`;
|
|
549
|
-
return index.createDiv({
|
|
550
|
-
className: `${STACK_ELEMENT_CLASS}-${index$
|
|
553
|
+
return index$1.createDiv({
|
|
554
|
+
className: `${STACK_ELEMENT_CLASS}-${index$2}`,
|
|
551
555
|
children,
|
|
552
556
|
elementStyles: {
|
|
553
557
|
element: {
|
|
@@ -565,15 +569,15 @@ const createGridElement = (element, index$1, placement) => {
|
|
|
565
569
|
}
|
|
566
570
|
});
|
|
567
571
|
};
|
|
568
|
-
const createGridItem = (element, placement, index$
|
|
572
|
+
const createGridItem = (element, placement, index$2) => {
|
|
569
573
|
const rowStart = placement.row ? parseInt(placement.row.split(" / ")[0]) : 0;
|
|
570
574
|
const startRange = rowStart > 8 ? 0 : 80;
|
|
571
575
|
const endRange = rowStart > 8 ? 200 : 200;
|
|
572
576
|
const animationRangeStart = `${startRange}vh`;
|
|
573
577
|
const animationRangeEnd = `${endRange}vh`;
|
|
574
|
-
return index.createDiv({
|
|
575
|
-
className: `${STACK_ITEM_CLASS}-${index$
|
|
576
|
-
children: [createGridElement(element, index$
|
|
578
|
+
return index$1.createDiv({
|
|
579
|
+
className: `${STACK_ITEM_CLASS}-${index$2}`,
|
|
580
|
+
children: [createGridElement(element, index$2, placement)],
|
|
577
581
|
elementStyles: {
|
|
578
582
|
element: {
|
|
579
583
|
gridColumn: placement.column,
|
|
@@ -582,10 +586,13 @@ const createGridItem = (element, placement, index$1) => {
|
|
|
582
586
|
width: "100%",
|
|
583
587
|
height: "100%",
|
|
584
588
|
[`@media (${Styles__namespace.token.media.queries.large.max})`]: {
|
|
585
|
-
[`@supports not (animation-timeline:
|
|
589
|
+
[`@supports not (animation-timeline: scroll())`]: {
|
|
586
590
|
display: "none"
|
|
587
591
|
}
|
|
588
592
|
},
|
|
593
|
+
...isDisplayWithoutAnimation && {
|
|
594
|
+
display: "none"
|
|
595
|
+
},
|
|
589
596
|
...media.withViewTimelineAnimation({
|
|
590
597
|
animation: `${KEY_FRAME_GRID_ITEM} ease-in-out forwards`,
|
|
591
598
|
animationTimeline: "view()",
|
|
@@ -601,7 +608,7 @@ const createGrid = (props) => {
|
|
|
601
608
|
const config = getConfigurationByCount(totalCount);
|
|
602
609
|
if (!config) {
|
|
603
610
|
console.warn(`No configuration found for ${totalCount} elements`);
|
|
604
|
-
return index.createDiv({
|
|
611
|
+
return index$1.createDiv({
|
|
605
612
|
className: STACK_GRID_ERROR_CLASS
|
|
606
613
|
});
|
|
607
614
|
}
|
|
@@ -609,7 +616,7 @@ const createGrid = (props) => {
|
|
|
609
616
|
const placement = config.items[index2];
|
|
610
617
|
return createGridItem(element, placement, index2);
|
|
611
618
|
});
|
|
612
|
-
return index.createDiv({
|
|
619
|
+
return index$1.createDiv({
|
|
613
620
|
className: STACK_GRID_CLASS,
|
|
614
621
|
children: gridItems,
|
|
615
622
|
elementStyles: {
|
|
@@ -620,7 +627,7 @@ const createGrid = (props) => {
|
|
|
620
627
|
gap: Styles__namespace.token.spacing.min,
|
|
621
628
|
minHeight: "300px",
|
|
622
629
|
[`@media (${Styles__namespace.token.media.queries.large.max})`]: {
|
|
623
|
-
"@supports not (animation-timeline:
|
|
630
|
+
"@supports not (animation-timeline: scroll())": {
|
|
624
631
|
width: "100%"
|
|
625
632
|
}
|
|
626
633
|
},
|
|
@@ -655,7 +662,7 @@ const createFeatured = (element, isExpand, totalCount) => {
|
|
|
655
662
|
children.push(video);
|
|
656
663
|
}
|
|
657
664
|
const { width: widthPercentage, height: heightVh } = getResponsiveSizes();
|
|
658
|
-
const featuredElement = index.createDiv({
|
|
665
|
+
const featuredElement = index$1.createDiv({
|
|
659
666
|
className: `${STACK_ELEMENT_CLASS}-featured`,
|
|
660
667
|
children,
|
|
661
668
|
elementStyles: {
|
|
@@ -667,6 +674,9 @@ const createFeatured = (element, isExpand, totalCount) => {
|
|
|
667
674
|
zIndex: 999,
|
|
668
675
|
width: `${widthPercentage * 100}%`,
|
|
669
676
|
height: `${heightVh * 100}vh`,
|
|
677
|
+
...isDisplayWithoutAnimation && {
|
|
678
|
+
top: "0"
|
|
679
|
+
},
|
|
670
680
|
[`@media (${Styles__namespace.token.media.queries.large.max})`]: {
|
|
671
681
|
"@supports not (animation-timeline: view())": {
|
|
672
682
|
width: "100% !important",
|
|
@@ -706,7 +716,7 @@ const createFeatured = (element, isExpand, totalCount) => {
|
|
|
706
716
|
return featuredElement;
|
|
707
717
|
};
|
|
708
718
|
const createSticky = (props) => {
|
|
709
|
-
const wrapper = index.createDiv({
|
|
719
|
+
const wrapper = index$1.createDiv({
|
|
710
720
|
className: `${STACK_CONTAINER_CLASS}-sticky-wrapper`,
|
|
711
721
|
children: [
|
|
712
722
|
createGrid(props),
|
|
@@ -726,7 +736,7 @@ const createSticky = (props) => {
|
|
|
726
736
|
}
|
|
727
737
|
}
|
|
728
738
|
});
|
|
729
|
-
return index.createDiv({
|
|
739
|
+
return index$1.createDiv({
|
|
730
740
|
className: `${STACK_CONTAINER_CLASS}-sticky`,
|
|
731
741
|
children: [wrapper],
|
|
732
742
|
elementStyles: {
|
|
@@ -742,7 +752,7 @@ const createSticky = (props) => {
|
|
|
742
752
|
});
|
|
743
753
|
};
|
|
744
754
|
const cardStack = (props) => {
|
|
745
|
-
const composite = index.createDiv({
|
|
755
|
+
const composite = index$1.createDiv({
|
|
746
756
|
className: STACK_CONTAINER_CLASS,
|
|
747
757
|
children: [createSticky(props)],
|
|
748
758
|
elementStyles: {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"card-stack.js","sources":["../../../../source/atomic/animations/brand/card-stack.ts"],"sourcesContent":["import * as Styles from '@universityofmaryland/web-styles-library';\nimport { ElementModel } from 'model';\nimport { assets } from 'atomic';\nimport { theme } from 'utilities';\nimport { type ElementVisual } from '../../../_types';\n\ninterface CardStackProps {\n featured: HTMLImageElement | HTMLVideoElement;\n images: HTMLImageElement[];\n isExpandFeature: boolean;\n}\n\ninterface ConfigurationItem {\n column?: string;\n row?: string;\n zIndex?: number;\n featured?: boolean;\n matchWidth?: boolean;\n offset?: {\n top?: string;\n left?: string;\n right?: string;\n bottom?: string;\n };\n}\n\ninterface Configuration {\n count: number;\n layout: {\n gridTemplateColumns: string;\n gridTemplateRows: string;\n };\n items: ConfigurationItem[];\n}\n\nconst configuration: Configuration[] = [\n {\n count: 4,\n layout: {\n gridTemplateColumns: 'repeat(15, 10vw)',\n gridTemplateRows: 'repeat(15, 8vh)',\n },\n items: [\n {\n column: '3 / 8',\n row: '4 / 5',\n zIndex: 9,\n offset: {\n top: '-10%',\n left: '-5%',\n },\n },\n {\n column: '12 / 15',\n row: '2 / 6',\n offset: {\n top: '-1%',\n right: '-4%',\n },\n },\n {\n column: '4 / 7',\n row: '10 / 15',\n zIndex: 9,\n offset: {\n bottom: '-13%',\n left: '-4%',\n },\n },\n {\n column: '13 / 15',\n row: '10 / 14',\n offset: {\n right: '-8%',\n bottom: '-3%',\n },\n },\n ],\n },\n {\n count: 5,\n layout: {\n gridTemplateColumns: 'repeat(15, 10vw)',\n gridTemplateRows: 'repeat(15, 8vh)',\n },\n items: [\n {\n column: '2 / 6',\n row: '4 / 9',\n zIndex: 9,\n offset: {\n top: '-10%',\n left: '-6%',\n },\n },\n {\n column: '12 / 15',\n row: '2 / 5',\n offset: {\n top: '-3%',\n right: '-5%',\n },\n },\n {\n column: '10 / 12',\n row: '3 / 5',\n offset: {\n bottom: '-20%',\n right: '-1%',\n },\n },\n {\n column: '1 / 4',\n row: '8/ 13',\n zIndex: 9,\n offset: {\n bottom: '-10%',\n left: '-10%',\n },\n },\n {\n column: '12 / 15',\n row: '10 / 14',\n offset: {\n right: '-10%',\n bottom: '-7%',\n },\n },\n ],\n },\n {\n count: 6,\n layout: {\n gridTemplateColumns: 'repeat(15, 10vw)',\n gridTemplateRows: 'repeat(15, 8vh)',\n },\n items: [\n {\n column: '2 / 6',\n row: '4 / 9',\n zIndex: 9,\n offset: {\n top: '-10%',\n left: '-6%',\n },\n },\n {\n column: '12 / 15',\n row: '2 / 5',\n offset: {\n top: '-3%',\n right: '-5%',\n },\n },\n {\n column: '10 / 12',\n row: '3 / 5',\n offset: {\n bottom: '-20%',\n right: '-1%',\n },\n },\n {\n column: '12 / 15',\n row: '6 / 8',\n offset: {\n bottom: '-5%',\n right: '-20%',\n },\n },\n {\n column: '1 / 4',\n row: '8/ 13',\n zIndex: 9,\n offset: {\n bottom: '-10%',\n left: '-10%',\n },\n },\n {\n column: '12 / 15',\n row: '10 / 14',\n offset: {\n right: '-10%',\n bottom: '-7%',\n },\n },\n ],\n },\n {\n count: 7,\n layout: {\n gridTemplateColumns: 'repeat(15, 10vw)',\n gridTemplateRows: 'repeat(15, 8vh)',\n },\n items: [\n {\n column: '2 / 6',\n row: '4 / 9',\n zIndex: 9,\n offset: {\n top: '-10%',\n left: '-6%',\n },\n },\n {\n column: '12 / 15',\n row: '2 / 5',\n offset: {\n top: '-3%',\n right: '-5%',\n },\n },\n {\n column: '10 / 12',\n row: '3 / 5',\n offset: {\n bottom: '-20%',\n right: '-1%',\n },\n },\n {\n column: '12 / 15',\n row: '6 / 8',\n offset: {\n bottom: '-5%',\n right: '-20%',\n },\n },\n {\n column: '1 / 4',\n row: '8/ 13',\n zIndex: 9,\n offset: {\n bottom: '-10%',\n left: '-10%',\n },\n },\n {\n column: '12 / 15',\n row: '10 / 14',\n offset: {\n right: '-10%',\n bottom: '-7%',\n },\n },\n {\n column: '6 / 9',\n row: '10 / 15',\n offset: {\n right: '-10%',\n bottom: '-25%',\n },\n },\n ],\n },\n {\n count: 8,\n layout: {\n gridTemplateColumns: 'repeat(15, 10vw)',\n gridTemplateRows: 'repeat(15, 8vh)',\n },\n items: [\n {\n column: '2 / 6',\n row: '4 / 9',\n zIndex: 9,\n offset: {\n top: '-10%',\n left: '-6%',\n },\n },\n {\n column: '12 / 15',\n row: '2 / 5',\n offset: {\n top: '-3%',\n right: '-5%',\n },\n },\n {\n column: '10 / 12',\n row: '3 / 5',\n offset: {\n bottom: '-20%',\n right: '-1%',\n },\n },\n {\n column: '3 / 9',\n row: '1 / 3',\n offset: {\n right: '-10%',\n top: '-25%',\n },\n },\n {\n column: '12 / 15',\n row: '6 / 8',\n offset: {\n bottom: '-5%',\n right: '-20%',\n },\n },\n {\n column: '1 / 4',\n row: '8/ 13',\n zIndex: 9,\n offset: {\n bottom: '-10%',\n left: '-10%',\n },\n },\n {\n column: '12 / 15',\n row: '10 / 14',\n offset: {\n right: '-10%',\n bottom: '-7%',\n },\n },\n {\n column: '6 / 9',\n row: '10 / 15',\n offset: {\n right: '-10%',\n bottom: '-25%',\n },\n },\n ],\n },\n];\n\n// Class name constants\nconst STACK_CONTAINER_CLASS = 'brand-animations-card-stack';\nconst STACK_ELEMENT_CLASS = `${STACK_CONTAINER_CLASS}-element`;\nconst STACK_GRID_CLASS = `${STACK_CONTAINER_CLASS}-grid`;\nconst STACK_ITEM_CLASS = `${STACK_CONTAINER_CLASS}-item`;\nconst STACK_GRID_ERROR_CLASS = `${STACK_GRID_CLASS}-error`;\n\nconst KEY_FRAME_GRID_EXPAND = 'grid-expand';\nconst KEY_FRAME_GRID_ITEM = 'grid-item';\nconst KEY_FRAME_FEATURED_SIZE = 'featured-size';\n\nconst getResponsiveSizes = () => {\n const windowWidth = window.innerWidth;\n\n if (windowWidth >= 1024) {\n return { width: 0.4, height: 0.4 };\n } else if (windowWidth >= 768) {\n return { width: 0.5, height: 0.5 };\n } else {\n return { width: 0.8, height: 0.5 };\n }\n};\n\nconst keyFrameGridExpand = `\n @keyframes ${KEY_FRAME_GRID_EXPAND} {\n to {\n transform: translate(0, 0);\n width: inherit;\n }\n }\n`;\n\nconst keyFrameGridItem = `\n @keyframes ${KEY_FRAME_GRID_ITEM} {\n to {\n opacity: 0;\n }\n }\n`;\n\nconst keyFrameFeaturedSize = `\n @keyframes ${KEY_FRAME_FEATURED_SIZE} {\n to {\n width: 100%;\n height: 100vh;\n top: 0%;\n }\n }\n`;\n\n/**\n * Waits for all media elements (images and videos) to load and render.\n *\n * @param container - The container element containing the media\n * @returns Promise that resolves when all media is loaded and rendered\n */\nconst waitForMediaLoad = async (container: HTMLElement): Promise<void> => {\n const images = Array.from(container.querySelectorAll('img'));\n const videos = Array.from(container.querySelectorAll('video'));\n\n const imagePromises = images.map((img) => {\n if (img.complete) {\n // Check if image loaded successfully or failed\n if (img.naturalWidth > 0) {\n return Promise.resolve();\n } else {\n // Image is complete but has no natural dimensions - it failed to load\n return Promise.reject(new Error(`Failed to load image: ${img.src}`));\n }\n }\n return new Promise<void>((resolve, reject) => {\n img.addEventListener('load', () => resolve(), { once: true });\n img.addEventListener(\n 'error',\n () => reject(new Error(`Failed to load image: ${img.src}`)),\n { once: true },\n );\n });\n });\n\n const videoPromises = videos.map((video) => {\n if (video.readyState >= 3) {\n return Promise.resolve();\n }\n return new Promise<void>((resolve, reject) => {\n video.addEventListener('loadeddata', () => resolve(), { once: true });\n video.addEventListener(\n 'error',\n () => reject(new Error(`Failed to load video: ${video.src}`)),\n { once: true },\n );\n });\n });\n\n await Promise.all([...imagePromises, ...videoPromises]);\n\n return new Promise<void>((resolve) => {\n requestAnimationFrame(() => {\n requestAnimationFrame(() => {\n resolve();\n });\n });\n });\n};\n\n/**\n * Retrieves the configuration object for a specific element count.\n *\n * @param count - The number of elements to display\n * @returns The configuration object for the given count, or undefined if not found\n */\nconst getConfigurationByCount = (count: number) => {\n return configuration.find((c) => c.count === count);\n};\n\n/**\n * Gets the stack element from a grid item.\n *\n * @param gridItem - The grid item element\n * @param index - The index of the stack element\n * @returns The stack element or null if not found\n */\nconst getStackElementFromGridItem = (\n gridItem: HTMLElement,\n index: number,\n): HTMLElement | null => {\n return gridItem.querySelector(\n `.${STACK_ELEMENT_CLASS}-${index}`,\n ) as HTMLElement;\n};\n\n/**\n * Calculates the transform values (x, y) needed to center an element\n * relative to the brand-animations-card-stack-grid container with optional offset.\n *\n * @param element - The element to be centered\n * @param gridContainer - The grid container element\n * @param offset - Optional offset values in percentages\n * @returns Transform values {x, y} in pixels to center the element with offset\n */\nconst calculateCenterTransform = (\n element: HTMLElement,\n centerElement: HTMLElement,\n offset?: {\n top?: string;\n left?: string;\n right?: string;\n bottom?: string;\n },\n): { x: number; y: number } => {\n const elementRect = element.getBoundingClientRect();\n const centerRect = centerElement.getBoundingClientRect();\n\n const centerX = centerRect.left + centerRect.width / 2;\n const centerY = centerRect.top + centerRect.height / 2;\n\n const elementCenterX = elementRect.left + elementRect.width / 2;\n const elementCenterY = elementRect.top + elementRect.height / 2;\n\n let translateX = centerX - elementCenterX;\n let translateY = centerY - elementCenterY;\n\n if (offset) {\n const applyOffset = (\n value: string | undefined,\n dimension: number,\n ): number => {\n return value ? (parseFloat(value) / 100) * dimension : 0;\n };\n\n translateX += applyOffset(offset.left, centerRect.width);\n translateX -= applyOffset(offset.right, centerRect.width);\n translateY += applyOffset(offset.top, centerRect.height);\n translateY -= applyOffset(offset.bottom, centerRect.height);\n }\n\n return {\n x: translateX,\n y: translateY,\n };\n};\n\n/**\n * Clears animations from elements.\n *\n * @param featuredElement - The featured element\n * @param gridContainer - The grid container element\n */\nconst clearElementAnimations = (\n featuredElement: HTMLElement | null,\n gridContainer: HTMLElement | null,\n): void => {\n if (featuredElement) {\n featuredElement.style.animation = 'none';\n }\n if (gridContainer) {\n gridContainer.style.animation = 'none';\n }\n};\n\n/**\n * Checks if the current device is mobile based on viewport width.\n *\n * @returns True if device is mobile (width < 768px)\n */\nconst isMobileDevice = (): boolean => {\n return window.innerWidth < 768;\n};\n\n/**\n * Creates a resize handler function that only executes on actual window resizes.\n *\n * @param onResize - Callback to execute on resize\n * @param delay - Delay in milliseconds before executing callback\n * @returns Resize handler function\n */\nconst createResizeHandler = (\n onResize: () => void,\n delay: number = 300,\n): (() => void) => {\n let timeoutId: NodeJS.Timeout | null = null;\n let previousWidth = window.innerWidth;\n\n return () => {\n const currentWidth = window.innerWidth;\n\n // Only trigger on width changes (actual resize, not mobile scroll)\n if (currentWidth === previousWidth) {\n return;\n }\n\n previousWidth = currentWidth;\n\n if (timeoutId) {\n clearTimeout(timeoutId);\n }\n timeoutId = setTimeout(() => {\n onResize();\n timeoutId = null;\n }, delay);\n };\n};\n\n/**\n * Sets opacity with optional transition.\n *\n * @param element - The element to modify\n * @param opacity - The opacity value\n * @param transition - Optional transition string\n */\nconst setElementOpacity = (\n element: HTMLElement,\n opacity: string,\n transition?: string,\n): void => {\n element.style.opacity = opacity;\n if (transition) {\n element.style.transition = transition;\n }\n};\n\n/**\n * Validates required elements for animation.\n *\n * @param gridContainer - The grid container element\n * @param config - Configuration object\n * @returns True if all required elements are present\n */\nconst validateAnimationElements = (\n gridContainer: HTMLElement | null,\n config: Configuration | undefined,\n): boolean => {\n return gridContainer !== null && config !== undefined;\n};\n\n/**\n * Applies dimension and position transforms to a grid element.\n *\n * @param element - The element to transform\n * @param itemConfig - Configuration for this specific item\n * @param featuredElement - The featured element for sizing reference\n * @param gridContainer - The grid container for position reference\n */\nconst applyElementTransforms = (\n element: HTMLElement,\n itemConfig: ConfigurationItem,\n featuredElement: HTMLElement,\n): void => {\n if (featuredElement) {\n const windowWidth = window.innerWidth;\n const windowHeight = window.innerHeight;\n const featuredWidth = featuredElement.offsetWidth;\n const featuredHeight = featuredElement.offsetHeight;\n const isLargerThan40Percent =\n featuredWidth > windowWidth * 0.41 ||\n featuredHeight > windowHeight * 0.41;\n\n if (!isLargerThan40Percent) {\n element.style.width = `${featuredWidth}px`;\n element.style.height = `${featuredHeight}px`;\n } else {\n const parentContainer = featuredElement.parentElement;\n const parentWidth = parentContainer\n ? parentContainer.offsetWidth\n : windowWidth;\n\n const { width: widthPercentage, height: heightVh } = getResponsiveSizes();\n const width = Math.round(parentWidth * widthPercentage);\n const height = Math.round(windowHeight * heightVh);\n\n element.style.width = `${width}px`;\n element.style.height = `${height}px`;\n }\n }\n\n const transform = calculateCenterTransform(\n element,\n featuredElement,\n itemConfig?.offset,\n );\n element.style.transform = `translate(${transform.x}px, ${transform.y}px)`;\n};\n\n/**\n * Processes all grid items for animation.\n *\n * @param gridContainer - The grid container element\n * @param config - Configuration object\n * @returns void\n */\nconst processGridAnimation = (\n featuredElement: HTMLElement,\n gridContainer: HTMLElement,\n config: Configuration,\n): void => {\n const gridItems = Array.from(gridContainer.children) as HTMLElement[];\n\n gridItems.forEach((gridItem, index) => {\n const element = getStackElementFromGridItem(gridItem, index);\n\n if (!element) {\n return;\n }\n\n const itemConfig = config.items[index];\n\n applyElementTransforms(element, itemConfig, featuredElement);\n });\n};\n\nconst createGridElement = (\n element: HTMLImageElement | HTMLVideoElement,\n index: number,\n placement: ConfigurationItem,\n) => {\n const children: ElementVisual[] = [];\n\n if (element.tagName === 'IMG') {\n children.push(\n assets.image.background({\n element: element as HTMLImageElement,\n isScaled: true,\n }),\n );\n }\n\n const rowStart = placement.row ? parseInt(placement.row.split(' / ')[0]) : 0;\n\n const getStartRange = (row: number): number => {\n if (row >= 13) return -70;\n if (row >= 10 && row <= 12) return -40;\n if (row >= 6 && row < 10) return 40;\n return 80;\n };\n\n const getEndRange = (row: number): number => {\n if (row >= 13) return 120;\n if (row >= 10 && row <= 12) return 140;\n if (row >= 6 && row < 10) return 160;\n return 170;\n };\n\n const startRange = getStartRange(rowStart);\n const endRange = getEndRange(rowStart);\n const animationRangeStart = `${startRange}vh`;\n const animationRangeEnd = `${endRange}vh`;\n\n return ElementModel.createDiv({\n className: `${STACK_ELEMENT_CLASS}-${index}`,\n children,\n elementStyles: {\n element: {\n overflow: 'clip',\n height: '100%',\n width: '100%',\n\n ...theme.media.withViewTimelineAnimation({\n animation: `${KEY_FRAME_GRID_EXPAND} ease-in-out forwards`,\n animationTimeline: 'view()',\n animationRangeStart,\n animationRangeEnd,\n animationDuration: '1ms',\n }),\n },\n },\n });\n};\n\nconst createGridItem = (\n element: HTMLImageElement | HTMLVideoElement,\n placement: ConfigurationItem,\n index: number,\n) => {\n const rowStart = placement.row ? parseInt(placement.row.split(' / ')[0]) : 0;\n const startRange = rowStart > 8 ? 0 : 80;\n const endRange = rowStart > 8 ? 200 : 200;\n const animationRangeStart = `${startRange}vh`;\n const animationRangeEnd = `${endRange}vh`;\n\n return ElementModel.createDiv({\n className: `${STACK_ITEM_CLASS}-${index}`,\n children: [createGridElement(element, index, placement)],\n elementStyles: {\n element: {\n gridColumn: placement.column,\n gridRow: placement.row,\n zIndex: placement.zIndex || 1,\n width: '100%',\n height: '100%',\n\n [`@media (${Styles.token.media.queries.large.max})`]: {\n [`@supports not (animation-timeline: view())`]: {\n display: 'none',\n },\n },\n\n ...theme.media.withViewTimelineAnimation({\n animation: `${KEY_FRAME_GRID_ITEM} ease-in-out forwards`,\n animationTimeline: 'view()',\n animationRangeStart,\n animationRangeEnd,\n }),\n },\n },\n });\n};\n\nconst createGrid = (props: CardStackProps) => {\n const totalCount = props.images.length;\n const config = getConfigurationByCount(totalCount);\n\n if (!config) {\n console.warn(`No configuration found for ${totalCount} elements`);\n return ElementModel.createDiv({\n className: STACK_GRID_ERROR_CLASS,\n });\n }\n\n const gridItems = props.images.map((element, index) => {\n const placement = config.items[index];\n return createGridItem(element, placement, index);\n });\n\n return ElementModel.createDiv({\n className: STACK_GRID_CLASS,\n children: gridItems,\n elementStyles: {\n element: {\n display: 'grid',\n gridTemplateColumns: 'repeat(16, 1fr)',\n gridTemplateRows: 'repeat(16, 2vh)',\n gap: Styles.token.spacing.min,\n minHeight: '300px',\n\n [`@media (${Styles.token.media.queries.large.max})`]: {\n '@supports not (animation-timeline: view())': {\n width: '100%',\n },\n },\n\n ...theme.media.withViewTimelineAnimation({\n gridTemplateColumns: config.layout.gridTemplateColumns,\n gridTemplateRows: config.layout.gridTemplateRows,\n transform: 'translate(-50%, -25%)',\n }),\n },\n },\n });\n};\n\nconst createFeatured = (\n element: HTMLImageElement | HTMLVideoElement,\n isExpand: boolean,\n totalCount: number,\n) => {\n const children: ElementVisual[] = [];\n let video: (ElementVisual & { events: { setPlay: () => void } }) | undefined;\n\n if (element.tagName === 'IMG') {\n children.push(\n assets.image.background({\n element: element as HTMLImageElement,\n isScaled: true,\n }),\n );\n }\n\n if (element.tagName === 'VIDEO') {\n element.setAttribute('muted', 'true');\n element.setAttribute('playsinline', 'true');\n element.setAttribute('loop', 'true');\n\n video = assets.video.toggle({\n video: element as HTMLVideoElement,\n isScaled: true,\n });\n children.push(video);\n }\n\n const { width: widthPercentage, height: heightVh } = getResponsiveSizes();\n\n const featuredElement = ElementModel.createDiv({\n className: `${STACK_ELEMENT_CLASS}-featured`,\n children,\n elementStyles: {\n element: {\n position: 'absolute',\n top: '20vh',\n left: '50%',\n transform: 'translateX(-50%)',\n zIndex: 999,\n width: `${widthPercentage * 100}%`,\n height: `${heightVh * 100}vh`,\n\n [`@media (${Styles.token.media.queries.large.max})`]: {\n '@supports not (animation-timeline: view())': {\n width: '100% !important',\n height: '100% !important',\n top: '0',\n },\n },\n\n ...(isExpand && {\n ...theme.media.withViewTimelineAnimation({\n top: '30vh',\n animation: `${KEY_FRAME_FEATURED_SIZE} ease-in-out forwards`,\n animationTimeline: 'view()',\n animationRangeStart: `${100 + (totalCount - 4) * 10}vh`,\n animationRangeEnd: '250vh',\n }),\n }),\n },\n },\n });\n\n if (isExpand && featuredElement.element instanceof HTMLElement) {\n const observer = new IntersectionObserver(\n (entries) => {\n entries.forEach((entry) => {\n if (entry.isIntersecting) {\n if (video) video.events.setPlay();\n observer.disconnect();\n }\n });\n },\n {\n rootMargin: `-${100 + (totalCount - 4) * 10}px 0px 0px 0px`,\n threshold: 0,\n },\n );\n\n observer.observe(featuredElement.element);\n }\n\n return featuredElement;\n};\n\nconst createSticky = (props: CardStackProps) => {\n const wrapper = ElementModel.createDiv({\n className: `${STACK_CONTAINER_CLASS}-sticky-wrapper`,\n children: [\n createGrid(props),\n createFeatured(\n props.featured,\n props.isExpandFeature,\n props.images.length,\n ),\n ],\n elementStyles: {\n element: {\n position: 'relative',\n\n ...theme.media.withViewTimelineAnimation({\n position: 'sticky',\n top: 0,\n }),\n },\n },\n });\n\n return ElementModel.createDiv({\n className: `${STACK_CONTAINER_CLASS}-sticky`,\n children: [wrapper],\n elementStyles: {\n element: {\n ...theme.media.withViewTimelineAnimation({\n height: '200vh',\n\n ...(props.isExpandFeature && {\n height: '250vh',\n }),\n }),\n },\n },\n });\n};\n\nexport default (props: CardStackProps) => {\n const composite = ElementModel.createDiv({\n className: STACK_CONTAINER_CLASS,\n children: [createSticky(props)],\n elementStyles: {\n element: {\n containerType: 'inline-size',\n opacity: '0',\n overflow: 'clip',\n },\n },\n });\n\n const loadAnimation = async () => {\n const totalCount = props.images.length;\n const config = getConfigurationByCount(totalCount);\n const gridContainer = composite.element.querySelector(\n `.${STACK_GRID_CLASS}`,\n ) as HTMLElement;\n const featuredElement = composite.element.querySelector(\n `.${STACK_ELEMENT_CLASS}-featured`,\n ) as HTMLElement;\n let animationsCleared = false;\n\n if (!validateAnimationElements(gridContainer, config)) {\n return;\n }\n\n const clearAnimations = () => {\n if (animationsCleared) return;\n\n clearElementAnimations(featuredElement, gridContainer);\n animationsCleared = true;\n\n setTimeout(() => {\n processGridAnimation(props.featured, gridContainer!, config!);\n }, 100);\n };\n\n try {\n await waitForMediaLoad(gridContainer!);\n } catch (error) {\n console.warn('Media loading failed, proceeding with animation:', error);\n }\n\n processGridAnimation(props.featured, gridContainer!, config!);\n setElementOpacity(composite.element, '1');\n\n if (!isMobileDevice()) {\n const resizeHandler = createResizeHandler(() => {\n setTimeout(() => {\n processGridAnimation(props.featured, gridContainer!, config!);\n setTimeout(() => {\n setElementOpacity(composite.element, '1');\n animationsCleared = false;\n }, 100);\n }, 200);\n });\n\n window.addEventListener('resize', () => {\n if (isMobileDevice()) {\n return;\n }\n\n if (composite.element.style.opacity === '1') {\n setElementOpacity(composite.element, '0', 'opacity 0.3s ease-in-out');\n }\n\n clearAnimations();\n resizeHandler();\n });\n }\n };\n\n composite.styles += keyFrameGridExpand;\n composite.styles += keyFrameGridItem;\n composite.styles += keyFrameFeaturedSize;\n\n return {\n ...composite,\n events: {\n loadAnimation,\n },\n };\n};\n"],"names":["index","assets.image.background","ElementModel.createDiv","theme.media.withViewTimelineAnimation","Styles","assets.video.toggle"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"card-stack.js","sources":["../../../../source/atomic/animations/brand/card-stack.ts"],"sourcesContent":["import * as Styles from '@universityofmaryland/web-styles-library';\nimport { ElementModel } from 'model';\nimport { assets } from 'atomic';\nimport { theme, accessibility } from 'utilities';\nimport { type ElementVisual } from '../../../_types';\n\ninterface CardStackProps {\n featured: HTMLImageElement | HTMLVideoElement;\n images: HTMLImageElement[];\n isExpandFeature: boolean;\n}\n\ninterface ConfigurationItem {\n column?: string;\n row?: string;\n zIndex?: number;\n featured?: boolean;\n matchWidth?: boolean;\n offset?: {\n top?: string;\n left?: string;\n right?: string;\n bottom?: string;\n };\n}\n\ninterface Configuration {\n count: number;\n layout: {\n gridTemplateColumns: string;\n gridTemplateRows: string;\n };\n items: ConfigurationItem[];\n}\n\nconst configuration: Configuration[] = [\n {\n count: 4,\n layout: {\n gridTemplateColumns: 'repeat(15, 10vw)',\n gridTemplateRows: 'repeat(15, 8vh)',\n },\n items: [\n {\n column: '3 / 8',\n row: '4 / 5',\n zIndex: 9,\n offset: {\n top: '-10%',\n left: '-5%',\n },\n },\n {\n column: '12 / 15',\n row: '2 / 6',\n offset: {\n top: '-1%',\n right: '-4%',\n },\n },\n {\n column: '4 / 7',\n row: '10 / 15',\n zIndex: 9,\n offset: {\n bottom: '-13%',\n left: '-4%',\n },\n },\n {\n column: '13 / 15',\n row: '10 / 14',\n offset: {\n right: '-8%',\n bottom: '-3%',\n },\n },\n ],\n },\n {\n count: 5,\n layout: {\n gridTemplateColumns: 'repeat(15, 10vw)',\n gridTemplateRows: 'repeat(15, 8vh)',\n },\n items: [\n {\n column: '2 / 6',\n row: '4 / 9',\n zIndex: 9,\n offset: {\n top: '-10%',\n left: '-6%',\n },\n },\n {\n column: '12 / 15',\n row: '2 / 5',\n offset: {\n top: '-3%',\n right: '-5%',\n },\n },\n {\n column: '10 / 12',\n row: '3 / 5',\n offset: {\n bottom: '-20%',\n right: '-1%',\n },\n },\n {\n column: '1 / 4',\n row: '8/ 13',\n zIndex: 9,\n offset: {\n bottom: '-10%',\n left: '-10%',\n },\n },\n {\n column: '12 / 15',\n row: '10 / 14',\n offset: {\n right: '-10%',\n bottom: '-7%',\n },\n },\n ],\n },\n {\n count: 6,\n layout: {\n gridTemplateColumns: 'repeat(15, 10vw)',\n gridTemplateRows: 'repeat(15, 8vh)',\n },\n items: [\n {\n column: '2 / 6',\n row: '4 / 9',\n zIndex: 9,\n offset: {\n top: '-10%',\n left: '-6%',\n },\n },\n {\n column: '12 / 15',\n row: '2 / 5',\n offset: {\n top: '-3%',\n right: '-5%',\n },\n },\n {\n column: '10 / 12',\n row: '3 / 5',\n offset: {\n bottom: '-20%',\n right: '-1%',\n },\n },\n {\n column: '12 / 15',\n row: '6 / 8',\n offset: {\n bottom: '-5%',\n right: '-20%',\n },\n },\n {\n column: '1 / 4',\n row: '8/ 13',\n zIndex: 9,\n offset: {\n bottom: '-10%',\n left: '-10%',\n },\n },\n {\n column: '12 / 15',\n row: '10 / 14',\n offset: {\n right: '-10%',\n bottom: '-7%',\n },\n },\n ],\n },\n {\n count: 7,\n layout: {\n gridTemplateColumns: 'repeat(15, 10vw)',\n gridTemplateRows: 'repeat(15, 8vh)',\n },\n items: [\n {\n column: '2 / 6',\n row: '4 / 9',\n zIndex: 9,\n offset: {\n top: '-10%',\n left: '-6%',\n },\n },\n {\n column: '12 / 15',\n row: '2 / 5',\n offset: {\n top: '-3%',\n right: '-5%',\n },\n },\n {\n column: '10 / 12',\n row: '3 / 5',\n offset: {\n bottom: '-20%',\n right: '-1%',\n },\n },\n {\n column: '12 / 15',\n row: '6 / 8',\n offset: {\n bottom: '-5%',\n right: '-20%',\n },\n },\n {\n column: '1 / 4',\n row: '8/ 13',\n zIndex: 9,\n offset: {\n bottom: '-10%',\n left: '-10%',\n },\n },\n {\n column: '12 / 15',\n row: '10 / 14',\n offset: {\n right: '-10%',\n bottom: '-7%',\n },\n },\n {\n column: '6 / 9',\n row: '10 / 15',\n offset: {\n right: '-10%',\n bottom: '-25%',\n },\n },\n ],\n },\n {\n count: 8,\n layout: {\n gridTemplateColumns: 'repeat(15, 10vw)',\n gridTemplateRows: 'repeat(15, 8vh)',\n },\n items: [\n {\n column: '2 / 6',\n row: '4 / 9',\n zIndex: 9,\n offset: {\n top: '-10%',\n left: '-6%',\n },\n },\n {\n column: '12 / 15',\n row: '2 / 5',\n offset: {\n top: '-3%',\n right: '-5%',\n },\n },\n {\n column: '10 / 12',\n row: '3 / 5',\n offset: {\n bottom: '-20%',\n right: '-1%',\n },\n },\n {\n column: '3 / 9',\n row: '1 / 3',\n offset: {\n right: '-10%',\n top: '-25%',\n },\n },\n {\n column: '12 / 15',\n row: '6 / 8',\n offset: {\n bottom: '-5%',\n right: '-20%',\n },\n },\n {\n column: '1 / 4',\n row: '8/ 13',\n zIndex: 9,\n offset: {\n bottom: '-10%',\n left: '-10%',\n },\n },\n {\n column: '12 / 15',\n row: '10 / 14',\n offset: {\n right: '-10%',\n bottom: '-7%',\n },\n },\n {\n column: '6 / 9',\n row: '10 / 15',\n offset: {\n right: '-10%',\n bottom: '-25%',\n },\n },\n ],\n },\n];\n\n// Class name constants\nconst STACK_CONTAINER_CLASS = 'brand-animations-card-stack';\nconst STACK_ELEMENT_CLASS = `${STACK_CONTAINER_CLASS}-element`;\nconst STACK_GRID_CLASS = `${STACK_CONTAINER_CLASS}-grid`;\nconst STACK_ITEM_CLASS = `${STACK_CONTAINER_CLASS}-item`;\nconst STACK_GRID_ERROR_CLASS = `${STACK_GRID_CLASS}-error`;\n\nconst KEY_FRAME_GRID_EXPAND = 'grid-expand';\nconst KEY_FRAME_GRID_ITEM = 'grid-item';\nconst KEY_FRAME_FEATURED_SIZE = 'featured-size';\n\nconst isPreferReducedMotion = accessibility.isPrefferdReducedMotion();\nconst isScrollTimelineSupported = () =>\n 'ScrollTimeline' in window || CSS.supports('animation-timeline', 'scroll()');\nconst isDisplayWithoutAnimation =\n isPreferReducedMotion || !isScrollTimelineSupported();\n\nconst getResponsiveSizes = () => {\n const windowWidth = window.innerWidth;\n\n if (windowWidth >= 1024) {\n return { width: 0.4, height: 0.4 };\n } else if (windowWidth >= 768) {\n return { width: 0.5, height: 0.5 };\n } else {\n return { width: 0.8, height: 0.5 };\n }\n};\n\nconst keyFrameGridExpand = `\n @keyframes ${KEY_FRAME_GRID_EXPAND} {\n to {\n transform: translate(0, 0);\n width: inherit;\n }\n }\n`;\n\nconst keyFrameGridItem = `\n @keyframes ${KEY_FRAME_GRID_ITEM} {\n to {\n opacity: 0;\n }\n }\n`;\n\nconst keyFrameFeaturedSize = `\n @keyframes ${KEY_FRAME_FEATURED_SIZE} {\n to {\n width: 100%;\n height: 100vh;\n top: 0%;\n }\n }\n`;\n\n/**\n * Waits for all media elements (images and videos) to load and render.\n *\n * @param container - The container element containing the media\n * @returns Promise that resolves when all media is loaded and rendered\n */\nconst waitForMediaLoad = async (container: HTMLElement): Promise<void> => {\n const images = Array.from(container.querySelectorAll('img'));\n const videos = Array.from(container.querySelectorAll('video'));\n\n const imagePromises = images.map((img) => {\n if (img.complete) {\n // Check if image loaded successfully or failed\n if (img.naturalWidth > 0) {\n return Promise.resolve();\n } else {\n // Image is complete but has no natural dimensions - it failed to load\n return Promise.reject(new Error(`Failed to load image: ${img.src}`));\n }\n }\n return new Promise<void>((resolve, reject) => {\n img.addEventListener('load', () => resolve(), { once: true });\n img.addEventListener(\n 'error',\n () => reject(new Error(`Failed to load image: ${img.src}`)),\n { once: true },\n );\n });\n });\n\n const videoPromises = videos.map((video) => {\n if (video.readyState >= 3) {\n return Promise.resolve();\n }\n return new Promise<void>((resolve, reject) => {\n video.addEventListener('loadeddata', () => resolve(), { once: true });\n video.addEventListener(\n 'error',\n () => reject(new Error(`Failed to load video: ${video.src}`)),\n { once: true },\n );\n });\n });\n\n await Promise.all([...imagePromises, ...videoPromises]);\n\n return new Promise<void>((resolve) => {\n requestAnimationFrame(() => {\n requestAnimationFrame(() => {\n resolve();\n });\n });\n });\n};\n\n/**\n * Retrieves the configuration object for a specific element count.\n *\n * @param count - The number of elements to display\n * @returns The configuration object for the given count, or undefined if not found\n */\nconst getConfigurationByCount = (count: number) => {\n return configuration.find((c) => c.count === count);\n};\n\n/**\n * Gets the stack element from a grid item.\n *\n * @param gridItem - The grid item element\n * @param index - The index of the stack element\n * @returns The stack element or null if not found\n */\nconst getStackElementFromGridItem = (\n gridItem: HTMLElement,\n index: number,\n): HTMLElement | null => {\n return gridItem.querySelector(\n `.${STACK_ELEMENT_CLASS}-${index}`,\n ) as HTMLElement;\n};\n\n/**\n * Calculates the transform values (x, y) needed to center an element\n * relative to the brand-animations-card-stack-grid container with optional offset.\n *\n * @param element - The element to be centered\n * @param gridContainer - The grid container element\n * @param offset - Optional offset values in percentages\n * @returns Transform values {x, y} in pixels to center the element with offset\n */\nconst calculateCenterTransform = (\n element: HTMLElement,\n centerElement: HTMLElement,\n offset?: {\n top?: string;\n left?: string;\n right?: string;\n bottom?: string;\n },\n): { x: number; y: number } => {\n const elementRect = element.getBoundingClientRect();\n const centerRect = centerElement.getBoundingClientRect();\n\n const centerX = centerRect.left + centerRect.width / 2;\n const centerY = centerRect.top + centerRect.height / 2;\n\n const elementCenterX = elementRect.left + elementRect.width / 2;\n const elementCenterY = elementRect.top + elementRect.height / 2;\n\n let translateX = centerX - elementCenterX;\n let translateY = centerY - elementCenterY;\n\n if (offset) {\n const applyOffset = (\n value: string | undefined,\n dimension: number,\n ): number => {\n return value ? (parseFloat(value) / 100) * dimension : 0;\n };\n\n translateX += applyOffset(offset.left, centerRect.width);\n translateX -= applyOffset(offset.right, centerRect.width);\n translateY += applyOffset(offset.top, centerRect.height);\n translateY -= applyOffset(offset.bottom, centerRect.height);\n }\n\n return {\n x: translateX,\n y: translateY,\n };\n};\n\n/**\n * Clears animations from elements.\n *\n * @param featuredElement - The featured element\n * @param gridContainer - The grid container element\n */\nconst clearElementAnimations = (\n featuredElement: HTMLElement | null,\n gridContainer: HTMLElement | null,\n): void => {\n if (featuredElement) {\n featuredElement.style.animation = 'none';\n }\n if (gridContainer) {\n gridContainer.style.animation = 'none';\n }\n};\n\n/**\n * Checks if the current device is mobile based on viewport width.\n *\n * @returns True if device is mobile (width < 768px)\n */\nconst isMobileDevice = (): boolean => {\n return window.innerWidth < 768;\n};\n\n/**\n * Creates a resize handler function that only executes on actual window resizes.\n *\n * @param onResize - Callback to execute on resize\n * @param delay - Delay in milliseconds before executing callback\n * @returns Resize handler function\n */\nconst createResizeHandler = (\n onResize: () => void,\n delay: number = 300,\n): (() => void) => {\n let timeoutId: NodeJS.Timeout | null = null;\n let previousWidth = window.innerWidth;\n\n return () => {\n const currentWidth = window.innerWidth;\n\n // Only trigger on width changes (actual resize, not mobile scroll)\n if (currentWidth === previousWidth) {\n return;\n }\n\n previousWidth = currentWidth;\n\n if (timeoutId) {\n clearTimeout(timeoutId);\n }\n timeoutId = setTimeout(() => {\n onResize();\n timeoutId = null;\n }, delay);\n };\n};\n\n/**\n * Sets opacity with optional transition.\n *\n * @param element - The element to modify\n * @param opacity - The opacity value\n * @param transition - Optional transition string\n */\nconst setElementOpacity = (\n element: HTMLElement,\n opacity: string,\n transition?: string,\n): void => {\n element.style.opacity = opacity;\n if (transition) {\n element.style.transition = transition;\n }\n};\n\n/**\n * Validates required elements for animation.\n *\n * @param gridContainer - The grid container element\n * @param config - Configuration object\n * @returns True if all required elements are present\n */\nconst validateAnimationElements = (\n gridContainer: HTMLElement | null,\n config: Configuration | undefined,\n): boolean => {\n return gridContainer !== null && config !== undefined;\n};\n\n/**\n * Applies dimension and position transforms to a grid element.\n *\n * @param element - The element to transform\n * @param itemConfig - Configuration for this specific item\n * @param featuredElement - The featured element for sizing reference\n * @param gridContainer - The grid container for position reference\n */\nconst applyElementTransforms = (\n element: HTMLElement,\n itemConfig: ConfigurationItem,\n featuredElement: HTMLElement,\n): void => {\n if (featuredElement) {\n const windowWidth = window.innerWidth;\n const windowHeight = window.innerHeight;\n const featuredWidth = featuredElement.offsetWidth;\n const featuredHeight = featuredElement.offsetHeight;\n const isLargerThan40Percent =\n featuredWidth > windowWidth * 0.41 ||\n featuredHeight > windowHeight * 0.41;\n\n if (!isLargerThan40Percent) {\n element.style.width = `${featuredWidth}px`;\n element.style.height = `${featuredHeight}px`;\n } else {\n const parentContainer = featuredElement.parentElement;\n const parentWidth = parentContainer\n ? parentContainer.offsetWidth\n : windowWidth;\n\n const { width: widthPercentage, height: heightVh } = getResponsiveSizes();\n const width = Math.round(parentWidth * widthPercentage);\n const height = Math.round(windowHeight * heightVh);\n\n element.style.width = `${width}px`;\n element.style.height = `${height}px`;\n }\n }\n\n const transform = calculateCenterTransform(\n element,\n featuredElement,\n itemConfig?.offset,\n );\n element.style.transform = `translate(${transform.x}px, ${transform.y}px)`;\n};\n\n/**\n * Processes all grid items for animation.\n *\n * @param gridContainer - The grid container element\n * @param config - Configuration object\n * @returns void\n */\nconst processGridAnimation = (\n featuredElement: HTMLElement,\n gridContainer: HTMLElement,\n config: Configuration,\n): void => {\n const gridItems = Array.from(gridContainer.children) as HTMLElement[];\n\n gridItems.forEach((gridItem, index) => {\n const element = getStackElementFromGridItem(gridItem, index);\n\n if (!element) {\n return;\n }\n\n const itemConfig = config.items[index];\n\n applyElementTransforms(element, itemConfig, featuredElement);\n });\n};\n\nconst createGridElement = (\n element: HTMLImageElement | HTMLVideoElement,\n index: number,\n placement: ConfigurationItem,\n) => {\n const children: ElementVisual[] = [];\n\n if (element.tagName === 'IMG') {\n children.push(\n assets.image.background({\n element: element as HTMLImageElement,\n isScaled: true,\n }),\n );\n }\n\n const rowStart = placement.row ? parseInt(placement.row.split(' / ')[0]) : 0;\n\n const getStartRange = (row: number): number => {\n if (row >= 13) return -70;\n if (row >= 10 && row <= 12) return -40;\n if (row >= 6 && row < 10) return 40;\n return 80;\n };\n\n const getEndRange = (row: number): number => {\n if (row >= 13) return 120;\n if (row >= 10 && row <= 12) return 140;\n if (row >= 6 && row < 10) return 160;\n return 170;\n };\n\n const startRange = getStartRange(rowStart);\n const endRange = getEndRange(rowStart);\n const animationRangeStart = `${startRange}vh`;\n const animationRangeEnd = `${endRange}vh`;\n\n return ElementModel.createDiv({\n className: `${STACK_ELEMENT_CLASS}-${index}`,\n children,\n elementStyles: {\n element: {\n overflow: 'clip',\n height: '100%',\n width: '100%',\n\n ...theme.media.withViewTimelineAnimation({\n animation: `${KEY_FRAME_GRID_EXPAND} ease-in-out forwards`,\n animationTimeline: 'view()',\n animationRangeStart,\n animationRangeEnd,\n animationDuration: '1ms',\n }),\n },\n },\n });\n};\n\nconst createGridItem = (\n element: HTMLImageElement | HTMLVideoElement,\n placement: ConfigurationItem,\n index: number,\n) => {\n const rowStart = placement.row ? parseInt(placement.row.split(' / ')[0]) : 0;\n const startRange = rowStart > 8 ? 0 : 80;\n const endRange = rowStart > 8 ? 200 : 200;\n const animationRangeStart = `${startRange}vh`;\n const animationRangeEnd = `${endRange}vh`;\n\n return ElementModel.createDiv({\n className: `${STACK_ITEM_CLASS}-${index}`,\n children: [createGridElement(element, index, placement)],\n elementStyles: {\n element: {\n gridColumn: placement.column,\n gridRow: placement.row,\n zIndex: placement.zIndex || 1,\n width: '100%',\n height: '100%',\n\n [`@media (${Styles.token.media.queries.large.max})`]: {\n [`@supports not (animation-timeline: scroll())`]: {\n display: 'none',\n },\n },\n\n ...(isDisplayWithoutAnimation && {\n display: 'none',\n }),\n\n ...theme.media.withViewTimelineAnimation({\n animation: `${KEY_FRAME_GRID_ITEM} ease-in-out forwards`,\n animationTimeline: 'view()',\n animationRangeStart,\n animationRangeEnd,\n }),\n },\n },\n });\n};\n\nconst createGrid = (props: CardStackProps) => {\n const totalCount = props.images.length;\n const config = getConfigurationByCount(totalCount);\n\n if (!config) {\n console.warn(`No configuration found for ${totalCount} elements`);\n return ElementModel.createDiv({\n className: STACK_GRID_ERROR_CLASS,\n });\n }\n\n const gridItems = props.images.map((element, index) => {\n const placement = config.items[index];\n return createGridItem(element, placement, index);\n });\n\n return ElementModel.createDiv({\n className: STACK_GRID_CLASS,\n children: gridItems,\n elementStyles: {\n element: {\n display: 'grid',\n gridTemplateColumns: 'repeat(16, 1fr)',\n gridTemplateRows: 'repeat(16, 2vh)',\n gap: Styles.token.spacing.min,\n minHeight: '300px',\n\n [`@media (${Styles.token.media.queries.large.max})`]: {\n '@supports not (animation-timeline: scroll())': {\n width: '100%',\n },\n },\n\n ...theme.media.withViewTimelineAnimation({\n gridTemplateColumns: config.layout.gridTemplateColumns,\n gridTemplateRows: config.layout.gridTemplateRows,\n transform: 'translate(-50%, -25%)',\n }),\n },\n },\n });\n};\n\nconst createFeatured = (\n element: HTMLImageElement | HTMLVideoElement,\n isExpand: boolean,\n totalCount: number,\n) => {\n const children: ElementVisual[] = [];\n let video: (ElementVisual & { events: { setPlay: () => void } }) | undefined;\n\n if (element.tagName === 'IMG') {\n children.push(\n assets.image.background({\n element: element as HTMLImageElement,\n isScaled: true,\n }),\n );\n }\n\n if (element.tagName === 'VIDEO') {\n element.setAttribute('muted', 'true');\n element.setAttribute('playsinline', 'true');\n element.setAttribute('loop', 'true');\n\n video = assets.video.toggle({\n video: element as HTMLVideoElement,\n isScaled: true,\n });\n children.push(video);\n }\n\n const { width: widthPercentage, height: heightVh } = getResponsiveSizes();\n\n const featuredElement = ElementModel.createDiv({\n className: `${STACK_ELEMENT_CLASS}-featured`,\n children,\n elementStyles: {\n element: {\n position: 'absolute',\n top: '20vh',\n left: '50%',\n transform: 'translateX(-50%)',\n zIndex: 999,\n width: `${widthPercentage * 100}%`,\n height: `${heightVh * 100}vh`,\n\n ...(isDisplayWithoutAnimation && {\n top: '0',\n }),\n\n [`@media (${Styles.token.media.queries.large.max})`]: {\n '@supports not (animation-timeline: view())': {\n width: '100% !important',\n height: '100% !important',\n top: '0',\n },\n },\n\n ...(isExpand && {\n ...theme.media.withViewTimelineAnimation({\n top: '30vh',\n animation: `${KEY_FRAME_FEATURED_SIZE} ease-in-out forwards`,\n animationTimeline: 'view()',\n animationRangeStart: `${100 + (totalCount - 4) * 10}vh`,\n animationRangeEnd: '250vh',\n }),\n }),\n },\n },\n });\n\n if (isExpand && featuredElement.element instanceof HTMLElement) {\n const observer = new IntersectionObserver(\n (entries) => {\n entries.forEach((entry) => {\n if (entry.isIntersecting) {\n if (video) video.events.setPlay();\n observer.disconnect();\n }\n });\n },\n {\n rootMargin: `-${100 + (totalCount - 4) * 10}px 0px 0px 0px`,\n threshold: 0,\n },\n );\n\n observer.observe(featuredElement.element);\n }\n\n return featuredElement;\n};\n\nconst createSticky = (props: CardStackProps) => {\n const wrapper = ElementModel.createDiv({\n className: `${STACK_CONTAINER_CLASS}-sticky-wrapper`,\n children: [\n createGrid(props),\n createFeatured(\n props.featured,\n props.isExpandFeature,\n props.images.length,\n ),\n ],\n elementStyles: {\n element: {\n position: 'relative',\n\n ...theme.media.withViewTimelineAnimation({\n position: 'sticky',\n top: 0,\n }),\n },\n },\n });\n\n return ElementModel.createDiv({\n className: `${STACK_CONTAINER_CLASS}-sticky`,\n children: [wrapper],\n elementStyles: {\n element: {\n ...theme.media.withViewTimelineAnimation({\n height: '200vh',\n\n ...(props.isExpandFeature && {\n height: '250vh',\n }),\n }),\n },\n },\n });\n};\n\nexport default (props: CardStackProps) => {\n const composite = ElementModel.createDiv({\n className: STACK_CONTAINER_CLASS,\n children: [createSticky(props)],\n elementStyles: {\n element: {\n containerType: 'inline-size',\n opacity: '0',\n overflow: 'clip',\n },\n },\n });\n\n const loadAnimation = async () => {\n const totalCount = props.images.length;\n const config = getConfigurationByCount(totalCount);\n const gridContainer = composite.element.querySelector(\n `.${STACK_GRID_CLASS}`,\n ) as HTMLElement;\n const featuredElement = composite.element.querySelector(\n `.${STACK_ELEMENT_CLASS}-featured`,\n ) as HTMLElement;\n let animationsCleared = false;\n\n if (!validateAnimationElements(gridContainer, config)) {\n return;\n }\n\n const clearAnimations = () => {\n if (animationsCleared) return;\n\n clearElementAnimations(featuredElement, gridContainer);\n animationsCleared = true;\n\n setTimeout(() => {\n processGridAnimation(props.featured, gridContainer!, config!);\n }, 100);\n };\n\n try {\n await waitForMediaLoad(gridContainer!);\n } catch (error) {\n console.warn('Media loading failed, proceeding with animation:', error);\n }\n\n processGridAnimation(props.featured, gridContainer!, config!);\n setElementOpacity(composite.element, '1');\n\n if (!isMobileDevice()) {\n const resizeHandler = createResizeHandler(() => {\n setTimeout(() => {\n processGridAnimation(props.featured, gridContainer!, config!);\n setTimeout(() => {\n setElementOpacity(composite.element, '1');\n animationsCleared = false;\n }, 100);\n }, 200);\n });\n\n window.addEventListener('resize', () => {\n if (isMobileDevice()) {\n return;\n }\n\n if (composite.element.style.opacity === '1') {\n setElementOpacity(composite.element, '0', 'opacity 0.3s ease-in-out');\n }\n\n clearAnimations();\n resizeHandler();\n });\n }\n };\n\n composite.styles += keyFrameGridExpand;\n composite.styles += keyFrameGridItem;\n composite.styles += keyFrameFeaturedSize;\n\n return {\n ...composite,\n events: {\n loadAnimation,\n },\n };\n};\n"],"names":["accessibility.isPrefferdReducedMotion","index","assets.image.background","ElementModel.createDiv","theme.media.withViewTimelineAnimation","Styles","assets.video.toggle"],"mappings":"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"}
|
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
import * as Styles from "@universityofmaryland/web-styles-library";
|
|
2
2
|
import { createDiv } from "../../../model/elements/index.mjs";
|
|
3
|
+
import { isPrefferdReducedMotion } from "../../../utilities/accessibility/index.mjs";
|
|
3
4
|
import "../../../node_modules/postcss/lib/postcss.mjs";
|
|
4
5
|
import "../../../node_modules/postcss-nesting/dist/index.mjs";
|
|
5
6
|
import "../../../node_modules/postcss-js/index.mjs";
|
|
@@ -318,6 +319,9 @@ const STACK_GRID_ERROR_CLASS = `${STACK_GRID_CLASS}-error`;
|
|
|
318
319
|
const KEY_FRAME_GRID_EXPAND = "grid-expand";
|
|
319
320
|
const KEY_FRAME_GRID_ITEM = "grid-item";
|
|
320
321
|
const KEY_FRAME_FEATURED_SIZE = "featured-size";
|
|
322
|
+
const isPreferReducedMotion = isPrefferdReducedMotion();
|
|
323
|
+
const isScrollTimelineSupported = () => "ScrollTimeline" in window || CSS.supports("animation-timeline", "scroll()");
|
|
324
|
+
const isDisplayWithoutAnimation = isPreferReducedMotion || !isScrollTimelineSupported();
|
|
321
325
|
const getResponsiveSizes = () => {
|
|
322
326
|
const windowWidth = window.innerWidth;
|
|
323
327
|
if (windowWidth >= 1024) {
|
|
@@ -564,10 +568,13 @@ const createGridItem = (element, placement, index$1) => {
|
|
|
564
568
|
width: "100%",
|
|
565
569
|
height: "100%",
|
|
566
570
|
[`@media (${Styles.token.media.queries.large.max})`]: {
|
|
567
|
-
[`@supports not (animation-timeline:
|
|
571
|
+
[`@supports not (animation-timeline: scroll())`]: {
|
|
568
572
|
display: "none"
|
|
569
573
|
}
|
|
570
574
|
},
|
|
575
|
+
...isDisplayWithoutAnimation && {
|
|
576
|
+
display: "none"
|
|
577
|
+
},
|
|
571
578
|
...withViewTimelineAnimation({
|
|
572
579
|
animation: `${KEY_FRAME_GRID_ITEM} ease-in-out forwards`,
|
|
573
580
|
animationTimeline: "view()",
|
|
@@ -602,7 +609,7 @@ const createGrid = (props) => {
|
|
|
602
609
|
gap: Styles.token.spacing.min,
|
|
603
610
|
minHeight: "300px",
|
|
604
611
|
[`@media (${Styles.token.media.queries.large.max})`]: {
|
|
605
|
-
"@supports not (animation-timeline:
|
|
612
|
+
"@supports not (animation-timeline: scroll())": {
|
|
606
613
|
width: "100%"
|
|
607
614
|
}
|
|
608
615
|
},
|
|
@@ -649,6 +656,9 @@ const createFeatured = (element, isExpand, totalCount) => {
|
|
|
649
656
|
zIndex: 999,
|
|
650
657
|
width: `${widthPercentage * 100}%`,
|
|
651
658
|
height: `${heightVh * 100}vh`,
|
|
659
|
+
...isDisplayWithoutAnimation && {
|
|
660
|
+
top: "0"
|
|
661
|
+
},
|
|
652
662
|
[`@media (${Styles.token.media.queries.large.max})`]: {
|
|
653
663
|
"@supports not (animation-timeline: view())": {
|
|
654
664
|
width: "100% !important",
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"card-stack.mjs","sources":["../../../../source/atomic/animations/brand/card-stack.ts"],"sourcesContent":["import * as Styles from '@universityofmaryland/web-styles-library';\nimport { ElementModel } from 'model';\nimport { assets } from 'atomic';\nimport { theme } from 'utilities';\nimport { type ElementVisual } from '../../../_types';\n\ninterface CardStackProps {\n featured: HTMLImageElement | HTMLVideoElement;\n images: HTMLImageElement[];\n isExpandFeature: boolean;\n}\n\ninterface ConfigurationItem {\n column?: string;\n row?: string;\n zIndex?: number;\n featured?: boolean;\n matchWidth?: boolean;\n offset?: {\n top?: string;\n left?: string;\n right?: string;\n bottom?: string;\n };\n}\n\ninterface Configuration {\n count: number;\n layout: {\n gridTemplateColumns: string;\n gridTemplateRows: string;\n };\n items: ConfigurationItem[];\n}\n\nconst configuration: Configuration[] = [\n {\n count: 4,\n layout: {\n gridTemplateColumns: 'repeat(15, 10vw)',\n gridTemplateRows: 'repeat(15, 8vh)',\n },\n items: [\n {\n column: '3 / 8',\n row: '4 / 5',\n zIndex: 9,\n offset: {\n top: '-10%',\n left: '-5%',\n },\n },\n {\n column: '12 / 15',\n row: '2 / 6',\n offset: {\n top: '-1%',\n right: '-4%',\n },\n },\n {\n column: '4 / 7',\n row: '10 / 15',\n zIndex: 9,\n offset: {\n bottom: '-13%',\n left: '-4%',\n },\n },\n {\n column: '13 / 15',\n row: '10 / 14',\n offset: {\n right: '-8%',\n bottom: '-3%',\n },\n },\n ],\n },\n {\n count: 5,\n layout: {\n gridTemplateColumns: 'repeat(15, 10vw)',\n gridTemplateRows: 'repeat(15, 8vh)',\n },\n items: [\n {\n column: '2 / 6',\n row: '4 / 9',\n zIndex: 9,\n offset: {\n top: '-10%',\n left: '-6%',\n },\n },\n {\n column: '12 / 15',\n row: '2 / 5',\n offset: {\n top: '-3%',\n right: '-5%',\n },\n },\n {\n column: '10 / 12',\n row: '3 / 5',\n offset: {\n bottom: '-20%',\n right: '-1%',\n },\n },\n {\n column: '1 / 4',\n row: '8/ 13',\n zIndex: 9,\n offset: {\n bottom: '-10%',\n left: '-10%',\n },\n },\n {\n column: '12 / 15',\n row: '10 / 14',\n offset: {\n right: '-10%',\n bottom: '-7%',\n },\n },\n ],\n },\n {\n count: 6,\n layout: {\n gridTemplateColumns: 'repeat(15, 10vw)',\n gridTemplateRows: 'repeat(15, 8vh)',\n },\n items: [\n {\n column: '2 / 6',\n row: '4 / 9',\n zIndex: 9,\n offset: {\n top: '-10%',\n left: '-6%',\n },\n },\n {\n column: '12 / 15',\n row: '2 / 5',\n offset: {\n top: '-3%',\n right: '-5%',\n },\n },\n {\n column: '10 / 12',\n row: '3 / 5',\n offset: {\n bottom: '-20%',\n right: '-1%',\n },\n },\n {\n column: '12 / 15',\n row: '6 / 8',\n offset: {\n bottom: '-5%',\n right: '-20%',\n },\n },\n {\n column: '1 / 4',\n row: '8/ 13',\n zIndex: 9,\n offset: {\n bottom: '-10%',\n left: '-10%',\n },\n },\n {\n column: '12 / 15',\n row: '10 / 14',\n offset: {\n right: '-10%',\n bottom: '-7%',\n },\n },\n ],\n },\n {\n count: 7,\n layout: {\n gridTemplateColumns: 'repeat(15, 10vw)',\n gridTemplateRows: 'repeat(15, 8vh)',\n },\n items: [\n {\n column: '2 / 6',\n row: '4 / 9',\n zIndex: 9,\n offset: {\n top: '-10%',\n left: '-6%',\n },\n },\n {\n column: '12 / 15',\n row: '2 / 5',\n offset: {\n top: '-3%',\n right: '-5%',\n },\n },\n {\n column: '10 / 12',\n row: '3 / 5',\n offset: {\n bottom: '-20%',\n right: '-1%',\n },\n },\n {\n column: '12 / 15',\n row: '6 / 8',\n offset: {\n bottom: '-5%',\n right: '-20%',\n },\n },\n {\n column: '1 / 4',\n row: '8/ 13',\n zIndex: 9,\n offset: {\n bottom: '-10%',\n left: '-10%',\n },\n },\n {\n column: '12 / 15',\n row: '10 / 14',\n offset: {\n right: '-10%',\n bottom: '-7%',\n },\n },\n {\n column: '6 / 9',\n row: '10 / 15',\n offset: {\n right: '-10%',\n bottom: '-25%',\n },\n },\n ],\n },\n {\n count: 8,\n layout: {\n gridTemplateColumns: 'repeat(15, 10vw)',\n gridTemplateRows: 'repeat(15, 8vh)',\n },\n items: [\n {\n column: '2 / 6',\n row: '4 / 9',\n zIndex: 9,\n offset: {\n top: '-10%',\n left: '-6%',\n },\n },\n {\n column: '12 / 15',\n row: '2 / 5',\n offset: {\n top: '-3%',\n right: '-5%',\n },\n },\n {\n column: '10 / 12',\n row: '3 / 5',\n offset: {\n bottom: '-20%',\n right: '-1%',\n },\n },\n {\n column: '3 / 9',\n row: '1 / 3',\n offset: {\n right: '-10%',\n top: '-25%',\n },\n },\n {\n column: '12 / 15',\n row: '6 / 8',\n offset: {\n bottom: '-5%',\n right: '-20%',\n },\n },\n {\n column: '1 / 4',\n row: '8/ 13',\n zIndex: 9,\n offset: {\n bottom: '-10%',\n left: '-10%',\n },\n },\n {\n column: '12 / 15',\n row: '10 / 14',\n offset: {\n right: '-10%',\n bottom: '-7%',\n },\n },\n {\n column: '6 / 9',\n row: '10 / 15',\n offset: {\n right: '-10%',\n bottom: '-25%',\n },\n },\n ],\n },\n];\n\n// Class name constants\nconst STACK_CONTAINER_CLASS = 'brand-animations-card-stack';\nconst STACK_ELEMENT_CLASS = `${STACK_CONTAINER_CLASS}-element`;\nconst STACK_GRID_CLASS = `${STACK_CONTAINER_CLASS}-grid`;\nconst STACK_ITEM_CLASS = `${STACK_CONTAINER_CLASS}-item`;\nconst STACK_GRID_ERROR_CLASS = `${STACK_GRID_CLASS}-error`;\n\nconst KEY_FRAME_GRID_EXPAND = 'grid-expand';\nconst KEY_FRAME_GRID_ITEM = 'grid-item';\nconst KEY_FRAME_FEATURED_SIZE = 'featured-size';\n\nconst getResponsiveSizes = () => {\n const windowWidth = window.innerWidth;\n\n if (windowWidth >= 1024) {\n return { width: 0.4, height: 0.4 };\n } else if (windowWidth >= 768) {\n return { width: 0.5, height: 0.5 };\n } else {\n return { width: 0.8, height: 0.5 };\n }\n};\n\nconst keyFrameGridExpand = `\n @keyframes ${KEY_FRAME_GRID_EXPAND} {\n to {\n transform: translate(0, 0);\n width: inherit;\n }\n }\n`;\n\nconst keyFrameGridItem = `\n @keyframes ${KEY_FRAME_GRID_ITEM} {\n to {\n opacity: 0;\n }\n }\n`;\n\nconst keyFrameFeaturedSize = `\n @keyframes ${KEY_FRAME_FEATURED_SIZE} {\n to {\n width: 100%;\n height: 100vh;\n top: 0%;\n }\n }\n`;\n\n/**\n * Waits for all media elements (images and videos) to load and render.\n *\n * @param container - The container element containing the media\n * @returns Promise that resolves when all media is loaded and rendered\n */\nconst waitForMediaLoad = async (container: HTMLElement): Promise<void> => {\n const images = Array.from(container.querySelectorAll('img'));\n const videos = Array.from(container.querySelectorAll('video'));\n\n const imagePromises = images.map((img) => {\n if (img.complete) {\n // Check if image loaded successfully or failed\n if (img.naturalWidth > 0) {\n return Promise.resolve();\n } else {\n // Image is complete but has no natural dimensions - it failed to load\n return Promise.reject(new Error(`Failed to load image: ${img.src}`));\n }\n }\n return new Promise<void>((resolve, reject) => {\n img.addEventListener('load', () => resolve(), { once: true });\n img.addEventListener(\n 'error',\n () => reject(new Error(`Failed to load image: ${img.src}`)),\n { once: true },\n );\n });\n });\n\n const videoPromises = videos.map((video) => {\n if (video.readyState >= 3) {\n return Promise.resolve();\n }\n return new Promise<void>((resolve, reject) => {\n video.addEventListener('loadeddata', () => resolve(), { once: true });\n video.addEventListener(\n 'error',\n () => reject(new Error(`Failed to load video: ${video.src}`)),\n { once: true },\n );\n });\n });\n\n await Promise.all([...imagePromises, ...videoPromises]);\n\n return new Promise<void>((resolve) => {\n requestAnimationFrame(() => {\n requestAnimationFrame(() => {\n resolve();\n });\n });\n });\n};\n\n/**\n * Retrieves the configuration object for a specific element count.\n *\n * @param count - The number of elements to display\n * @returns The configuration object for the given count, or undefined if not found\n */\nconst getConfigurationByCount = (count: number) => {\n return configuration.find((c) => c.count === count);\n};\n\n/**\n * Gets the stack element from a grid item.\n *\n * @param gridItem - The grid item element\n * @param index - The index of the stack element\n * @returns The stack element or null if not found\n */\nconst getStackElementFromGridItem = (\n gridItem: HTMLElement,\n index: number,\n): HTMLElement | null => {\n return gridItem.querySelector(\n `.${STACK_ELEMENT_CLASS}-${index}`,\n ) as HTMLElement;\n};\n\n/**\n * Calculates the transform values (x, y) needed to center an element\n * relative to the brand-animations-card-stack-grid container with optional offset.\n *\n * @param element - The element to be centered\n * @param gridContainer - The grid container element\n * @param offset - Optional offset values in percentages\n * @returns Transform values {x, y} in pixels to center the element with offset\n */\nconst calculateCenterTransform = (\n element: HTMLElement,\n centerElement: HTMLElement,\n offset?: {\n top?: string;\n left?: string;\n right?: string;\n bottom?: string;\n },\n): { x: number; y: number } => {\n const elementRect = element.getBoundingClientRect();\n const centerRect = centerElement.getBoundingClientRect();\n\n const centerX = centerRect.left + centerRect.width / 2;\n const centerY = centerRect.top + centerRect.height / 2;\n\n const elementCenterX = elementRect.left + elementRect.width / 2;\n const elementCenterY = elementRect.top + elementRect.height / 2;\n\n let translateX = centerX - elementCenterX;\n let translateY = centerY - elementCenterY;\n\n if (offset) {\n const applyOffset = (\n value: string | undefined,\n dimension: number,\n ): number => {\n return value ? (parseFloat(value) / 100) * dimension : 0;\n };\n\n translateX += applyOffset(offset.left, centerRect.width);\n translateX -= applyOffset(offset.right, centerRect.width);\n translateY += applyOffset(offset.top, centerRect.height);\n translateY -= applyOffset(offset.bottom, centerRect.height);\n }\n\n return {\n x: translateX,\n y: translateY,\n };\n};\n\n/**\n * Clears animations from elements.\n *\n * @param featuredElement - The featured element\n * @param gridContainer - The grid container element\n */\nconst clearElementAnimations = (\n featuredElement: HTMLElement | null,\n gridContainer: HTMLElement | null,\n): void => {\n if (featuredElement) {\n featuredElement.style.animation = 'none';\n }\n if (gridContainer) {\n gridContainer.style.animation = 'none';\n }\n};\n\n/**\n * Checks if the current device is mobile based on viewport width.\n *\n * @returns True if device is mobile (width < 768px)\n */\nconst isMobileDevice = (): boolean => {\n return window.innerWidth < 768;\n};\n\n/**\n * Creates a resize handler function that only executes on actual window resizes.\n *\n * @param onResize - Callback to execute on resize\n * @param delay - Delay in milliseconds before executing callback\n * @returns Resize handler function\n */\nconst createResizeHandler = (\n onResize: () => void,\n delay: number = 300,\n): (() => void) => {\n let timeoutId: NodeJS.Timeout | null = null;\n let previousWidth = window.innerWidth;\n\n return () => {\n const currentWidth = window.innerWidth;\n\n // Only trigger on width changes (actual resize, not mobile scroll)\n if (currentWidth === previousWidth) {\n return;\n }\n\n previousWidth = currentWidth;\n\n if (timeoutId) {\n clearTimeout(timeoutId);\n }\n timeoutId = setTimeout(() => {\n onResize();\n timeoutId = null;\n }, delay);\n };\n};\n\n/**\n * Sets opacity with optional transition.\n *\n * @param element - The element to modify\n * @param opacity - The opacity value\n * @param transition - Optional transition string\n */\nconst setElementOpacity = (\n element: HTMLElement,\n opacity: string,\n transition?: string,\n): void => {\n element.style.opacity = opacity;\n if (transition) {\n element.style.transition = transition;\n }\n};\n\n/**\n * Validates required elements for animation.\n *\n * @param gridContainer - The grid container element\n * @param config - Configuration object\n * @returns True if all required elements are present\n */\nconst validateAnimationElements = (\n gridContainer: HTMLElement | null,\n config: Configuration | undefined,\n): boolean => {\n return gridContainer !== null && config !== undefined;\n};\n\n/**\n * Applies dimension and position transforms to a grid element.\n *\n * @param element - The element to transform\n * @param itemConfig - Configuration for this specific item\n * @param featuredElement - The featured element for sizing reference\n * @param gridContainer - The grid container for position reference\n */\nconst applyElementTransforms = (\n element: HTMLElement,\n itemConfig: ConfigurationItem,\n featuredElement: HTMLElement,\n): void => {\n if (featuredElement) {\n const windowWidth = window.innerWidth;\n const windowHeight = window.innerHeight;\n const featuredWidth = featuredElement.offsetWidth;\n const featuredHeight = featuredElement.offsetHeight;\n const isLargerThan40Percent =\n featuredWidth > windowWidth * 0.41 ||\n featuredHeight > windowHeight * 0.41;\n\n if (!isLargerThan40Percent) {\n element.style.width = `${featuredWidth}px`;\n element.style.height = `${featuredHeight}px`;\n } else {\n const parentContainer = featuredElement.parentElement;\n const parentWidth = parentContainer\n ? parentContainer.offsetWidth\n : windowWidth;\n\n const { width: widthPercentage, height: heightVh } = getResponsiveSizes();\n const width = Math.round(parentWidth * widthPercentage);\n const height = Math.round(windowHeight * heightVh);\n\n element.style.width = `${width}px`;\n element.style.height = `${height}px`;\n }\n }\n\n const transform = calculateCenterTransform(\n element,\n featuredElement,\n itemConfig?.offset,\n );\n element.style.transform = `translate(${transform.x}px, ${transform.y}px)`;\n};\n\n/**\n * Processes all grid items for animation.\n *\n * @param gridContainer - The grid container element\n * @param config - Configuration object\n * @returns void\n */\nconst processGridAnimation = (\n featuredElement: HTMLElement,\n gridContainer: HTMLElement,\n config: Configuration,\n): void => {\n const gridItems = Array.from(gridContainer.children) as HTMLElement[];\n\n gridItems.forEach((gridItem, index) => {\n const element = getStackElementFromGridItem(gridItem, index);\n\n if (!element) {\n return;\n }\n\n const itemConfig = config.items[index];\n\n applyElementTransforms(element, itemConfig, featuredElement);\n });\n};\n\nconst createGridElement = (\n element: HTMLImageElement | HTMLVideoElement,\n index: number,\n placement: ConfigurationItem,\n) => {\n const children: ElementVisual[] = [];\n\n if (element.tagName === 'IMG') {\n children.push(\n assets.image.background({\n element: element as HTMLImageElement,\n isScaled: true,\n }),\n );\n }\n\n const rowStart = placement.row ? parseInt(placement.row.split(' / ')[0]) : 0;\n\n const getStartRange = (row: number): number => {\n if (row >= 13) return -70;\n if (row >= 10 && row <= 12) return -40;\n if (row >= 6 && row < 10) return 40;\n return 80;\n };\n\n const getEndRange = (row: number): number => {\n if (row >= 13) return 120;\n if (row >= 10 && row <= 12) return 140;\n if (row >= 6 && row < 10) return 160;\n return 170;\n };\n\n const startRange = getStartRange(rowStart);\n const endRange = getEndRange(rowStart);\n const animationRangeStart = `${startRange}vh`;\n const animationRangeEnd = `${endRange}vh`;\n\n return ElementModel.createDiv({\n className: `${STACK_ELEMENT_CLASS}-${index}`,\n children,\n elementStyles: {\n element: {\n overflow: 'clip',\n height: '100%',\n width: '100%',\n\n ...theme.media.withViewTimelineAnimation({\n animation: `${KEY_FRAME_GRID_EXPAND} ease-in-out forwards`,\n animationTimeline: 'view()',\n animationRangeStart,\n animationRangeEnd,\n animationDuration: '1ms',\n }),\n },\n },\n });\n};\n\nconst createGridItem = (\n element: HTMLImageElement | HTMLVideoElement,\n placement: ConfigurationItem,\n index: number,\n) => {\n const rowStart = placement.row ? parseInt(placement.row.split(' / ')[0]) : 0;\n const startRange = rowStart > 8 ? 0 : 80;\n const endRange = rowStart > 8 ? 200 : 200;\n const animationRangeStart = `${startRange}vh`;\n const animationRangeEnd = `${endRange}vh`;\n\n return ElementModel.createDiv({\n className: `${STACK_ITEM_CLASS}-${index}`,\n children: [createGridElement(element, index, placement)],\n elementStyles: {\n element: {\n gridColumn: placement.column,\n gridRow: placement.row,\n zIndex: placement.zIndex || 1,\n width: '100%',\n height: '100%',\n\n [`@media (${Styles.token.media.queries.large.max})`]: {\n [`@supports not (animation-timeline: view())`]: {\n display: 'none',\n },\n },\n\n ...theme.media.withViewTimelineAnimation({\n animation: `${KEY_FRAME_GRID_ITEM} ease-in-out forwards`,\n animationTimeline: 'view()',\n animationRangeStart,\n animationRangeEnd,\n }),\n },\n },\n });\n};\n\nconst createGrid = (props: CardStackProps) => {\n const totalCount = props.images.length;\n const config = getConfigurationByCount(totalCount);\n\n if (!config) {\n console.warn(`No configuration found for ${totalCount} elements`);\n return ElementModel.createDiv({\n className: STACK_GRID_ERROR_CLASS,\n });\n }\n\n const gridItems = props.images.map((element, index) => {\n const placement = config.items[index];\n return createGridItem(element, placement, index);\n });\n\n return ElementModel.createDiv({\n className: STACK_GRID_CLASS,\n children: gridItems,\n elementStyles: {\n element: {\n display: 'grid',\n gridTemplateColumns: 'repeat(16, 1fr)',\n gridTemplateRows: 'repeat(16, 2vh)',\n gap: Styles.token.spacing.min,\n minHeight: '300px',\n\n [`@media (${Styles.token.media.queries.large.max})`]: {\n '@supports not (animation-timeline: view())': {\n width: '100%',\n },\n },\n\n ...theme.media.withViewTimelineAnimation({\n gridTemplateColumns: config.layout.gridTemplateColumns,\n gridTemplateRows: config.layout.gridTemplateRows,\n transform: 'translate(-50%, -25%)',\n }),\n },\n },\n });\n};\n\nconst createFeatured = (\n element: HTMLImageElement | HTMLVideoElement,\n isExpand: boolean,\n totalCount: number,\n) => {\n const children: ElementVisual[] = [];\n let video: (ElementVisual & { events: { setPlay: () => void } }) | undefined;\n\n if (element.tagName === 'IMG') {\n children.push(\n assets.image.background({\n element: element as HTMLImageElement,\n isScaled: true,\n }),\n );\n }\n\n if (element.tagName === 'VIDEO') {\n element.setAttribute('muted', 'true');\n element.setAttribute('playsinline', 'true');\n element.setAttribute('loop', 'true');\n\n video = assets.video.toggle({\n video: element as HTMLVideoElement,\n isScaled: true,\n });\n children.push(video);\n }\n\n const { width: widthPercentage, height: heightVh } = getResponsiveSizes();\n\n const featuredElement = ElementModel.createDiv({\n className: `${STACK_ELEMENT_CLASS}-featured`,\n children,\n elementStyles: {\n element: {\n position: 'absolute',\n top: '20vh',\n left: '50%',\n transform: 'translateX(-50%)',\n zIndex: 999,\n width: `${widthPercentage * 100}%`,\n height: `${heightVh * 100}vh`,\n\n [`@media (${Styles.token.media.queries.large.max})`]: {\n '@supports not (animation-timeline: view())': {\n width: '100% !important',\n height: '100% !important',\n top: '0',\n },\n },\n\n ...(isExpand && {\n ...theme.media.withViewTimelineAnimation({\n top: '30vh',\n animation: `${KEY_FRAME_FEATURED_SIZE} ease-in-out forwards`,\n animationTimeline: 'view()',\n animationRangeStart: `${100 + (totalCount - 4) * 10}vh`,\n animationRangeEnd: '250vh',\n }),\n }),\n },\n },\n });\n\n if (isExpand && featuredElement.element instanceof HTMLElement) {\n const observer = new IntersectionObserver(\n (entries) => {\n entries.forEach((entry) => {\n if (entry.isIntersecting) {\n if (video) video.events.setPlay();\n observer.disconnect();\n }\n });\n },\n {\n rootMargin: `-${100 + (totalCount - 4) * 10}px 0px 0px 0px`,\n threshold: 0,\n },\n );\n\n observer.observe(featuredElement.element);\n }\n\n return featuredElement;\n};\n\nconst createSticky = (props: CardStackProps) => {\n const wrapper = ElementModel.createDiv({\n className: `${STACK_CONTAINER_CLASS}-sticky-wrapper`,\n children: [\n createGrid(props),\n createFeatured(\n props.featured,\n props.isExpandFeature,\n props.images.length,\n ),\n ],\n elementStyles: {\n element: {\n position: 'relative',\n\n ...theme.media.withViewTimelineAnimation({\n position: 'sticky',\n top: 0,\n }),\n },\n },\n });\n\n return ElementModel.createDiv({\n className: `${STACK_CONTAINER_CLASS}-sticky`,\n children: [wrapper],\n elementStyles: {\n element: {\n ...theme.media.withViewTimelineAnimation({\n height: '200vh',\n\n ...(props.isExpandFeature && {\n height: '250vh',\n }),\n }),\n },\n },\n });\n};\n\nexport default (props: CardStackProps) => {\n const composite = ElementModel.createDiv({\n className: STACK_CONTAINER_CLASS,\n children: [createSticky(props)],\n elementStyles: {\n element: {\n containerType: 'inline-size',\n opacity: '0',\n overflow: 'clip',\n },\n },\n });\n\n const loadAnimation = async () => {\n const totalCount = props.images.length;\n const config = getConfigurationByCount(totalCount);\n const gridContainer = composite.element.querySelector(\n `.${STACK_GRID_CLASS}`,\n ) as HTMLElement;\n const featuredElement = composite.element.querySelector(\n `.${STACK_ELEMENT_CLASS}-featured`,\n ) as HTMLElement;\n let animationsCleared = false;\n\n if (!validateAnimationElements(gridContainer, config)) {\n return;\n }\n\n const clearAnimations = () => {\n if (animationsCleared) return;\n\n clearElementAnimations(featuredElement, gridContainer);\n animationsCleared = true;\n\n setTimeout(() => {\n processGridAnimation(props.featured, gridContainer!, config!);\n }, 100);\n };\n\n try {\n await waitForMediaLoad(gridContainer!);\n } catch (error) {\n console.warn('Media loading failed, proceeding with animation:', error);\n }\n\n processGridAnimation(props.featured, gridContainer!, config!);\n setElementOpacity(composite.element, '1');\n\n if (!isMobileDevice()) {\n const resizeHandler = createResizeHandler(() => {\n setTimeout(() => {\n processGridAnimation(props.featured, gridContainer!, config!);\n setTimeout(() => {\n setElementOpacity(composite.element, '1');\n animationsCleared = false;\n }, 100);\n }, 200);\n });\n\n window.addEventListener('resize', () => {\n if (isMobileDevice()) {\n return;\n }\n\n if (composite.element.style.opacity === '1') {\n setElementOpacity(composite.element, '0', 'opacity 0.3s ease-in-out');\n }\n\n clearAnimations();\n resizeHandler();\n });\n }\n };\n\n composite.styles += keyFrameGridExpand;\n composite.styles += keyFrameGridItem;\n composite.styles += keyFrameFeaturedSize;\n\n return {\n ...composite,\n events: {\n loadAnimation,\n },\n };\n};\n"],"names":["index","assets.image.background","ElementModel.createDiv","theme.media.withViewTimelineAnimation","assets.video.toggle"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"card-stack.mjs","sources":["../../../../source/atomic/animations/brand/card-stack.ts"],"sourcesContent":["import * as Styles from '@universityofmaryland/web-styles-library';\nimport { ElementModel } from 'model';\nimport { assets } from 'atomic';\nimport { theme, accessibility } from 'utilities';\nimport { type ElementVisual } from '../../../_types';\n\ninterface CardStackProps {\n featured: HTMLImageElement | HTMLVideoElement;\n images: HTMLImageElement[];\n isExpandFeature: boolean;\n}\n\ninterface ConfigurationItem {\n column?: string;\n row?: string;\n zIndex?: number;\n featured?: boolean;\n matchWidth?: boolean;\n offset?: {\n top?: string;\n left?: string;\n right?: string;\n bottom?: string;\n };\n}\n\ninterface Configuration {\n count: number;\n layout: {\n gridTemplateColumns: string;\n gridTemplateRows: string;\n };\n items: ConfigurationItem[];\n}\n\nconst configuration: Configuration[] = [\n {\n count: 4,\n layout: {\n gridTemplateColumns: 'repeat(15, 10vw)',\n gridTemplateRows: 'repeat(15, 8vh)',\n },\n items: [\n {\n column: '3 / 8',\n row: '4 / 5',\n zIndex: 9,\n offset: {\n top: '-10%',\n left: '-5%',\n },\n },\n {\n column: '12 / 15',\n row: '2 / 6',\n offset: {\n top: '-1%',\n right: '-4%',\n },\n },\n {\n column: '4 / 7',\n row: '10 / 15',\n zIndex: 9,\n offset: {\n bottom: '-13%',\n left: '-4%',\n },\n },\n {\n column: '13 / 15',\n row: '10 / 14',\n offset: {\n right: '-8%',\n bottom: '-3%',\n },\n },\n ],\n },\n {\n count: 5,\n layout: {\n gridTemplateColumns: 'repeat(15, 10vw)',\n gridTemplateRows: 'repeat(15, 8vh)',\n },\n items: [\n {\n column: '2 / 6',\n row: '4 / 9',\n zIndex: 9,\n offset: {\n top: '-10%',\n left: '-6%',\n },\n },\n {\n column: '12 / 15',\n row: '2 / 5',\n offset: {\n top: '-3%',\n right: '-5%',\n },\n },\n {\n column: '10 / 12',\n row: '3 / 5',\n offset: {\n bottom: '-20%',\n right: '-1%',\n },\n },\n {\n column: '1 / 4',\n row: '8/ 13',\n zIndex: 9,\n offset: {\n bottom: '-10%',\n left: '-10%',\n },\n },\n {\n column: '12 / 15',\n row: '10 / 14',\n offset: {\n right: '-10%',\n bottom: '-7%',\n },\n },\n ],\n },\n {\n count: 6,\n layout: {\n gridTemplateColumns: 'repeat(15, 10vw)',\n gridTemplateRows: 'repeat(15, 8vh)',\n },\n items: [\n {\n column: '2 / 6',\n row: '4 / 9',\n zIndex: 9,\n offset: {\n top: '-10%',\n left: '-6%',\n },\n },\n {\n column: '12 / 15',\n row: '2 / 5',\n offset: {\n top: '-3%',\n right: '-5%',\n },\n },\n {\n column: '10 / 12',\n row: '3 / 5',\n offset: {\n bottom: '-20%',\n right: '-1%',\n },\n },\n {\n column: '12 / 15',\n row: '6 / 8',\n offset: {\n bottom: '-5%',\n right: '-20%',\n },\n },\n {\n column: '1 / 4',\n row: '8/ 13',\n zIndex: 9,\n offset: {\n bottom: '-10%',\n left: '-10%',\n },\n },\n {\n column: '12 / 15',\n row: '10 / 14',\n offset: {\n right: '-10%',\n bottom: '-7%',\n },\n },\n ],\n },\n {\n count: 7,\n layout: {\n gridTemplateColumns: 'repeat(15, 10vw)',\n gridTemplateRows: 'repeat(15, 8vh)',\n },\n items: [\n {\n column: '2 / 6',\n row: '4 / 9',\n zIndex: 9,\n offset: {\n top: '-10%',\n left: '-6%',\n },\n },\n {\n column: '12 / 15',\n row: '2 / 5',\n offset: {\n top: '-3%',\n right: '-5%',\n },\n },\n {\n column: '10 / 12',\n row: '3 / 5',\n offset: {\n bottom: '-20%',\n right: '-1%',\n },\n },\n {\n column: '12 / 15',\n row: '6 / 8',\n offset: {\n bottom: '-5%',\n right: '-20%',\n },\n },\n {\n column: '1 / 4',\n row: '8/ 13',\n zIndex: 9,\n offset: {\n bottom: '-10%',\n left: '-10%',\n },\n },\n {\n column: '12 / 15',\n row: '10 / 14',\n offset: {\n right: '-10%',\n bottom: '-7%',\n },\n },\n {\n column: '6 / 9',\n row: '10 / 15',\n offset: {\n right: '-10%',\n bottom: '-25%',\n },\n },\n ],\n },\n {\n count: 8,\n layout: {\n gridTemplateColumns: 'repeat(15, 10vw)',\n gridTemplateRows: 'repeat(15, 8vh)',\n },\n items: [\n {\n column: '2 / 6',\n row: '4 / 9',\n zIndex: 9,\n offset: {\n top: '-10%',\n left: '-6%',\n },\n },\n {\n column: '12 / 15',\n row: '2 / 5',\n offset: {\n top: '-3%',\n right: '-5%',\n },\n },\n {\n column: '10 / 12',\n row: '3 / 5',\n offset: {\n bottom: '-20%',\n right: '-1%',\n },\n },\n {\n column: '3 / 9',\n row: '1 / 3',\n offset: {\n right: '-10%',\n top: '-25%',\n },\n },\n {\n column: '12 / 15',\n row: '6 / 8',\n offset: {\n bottom: '-5%',\n right: '-20%',\n },\n },\n {\n column: '1 / 4',\n row: '8/ 13',\n zIndex: 9,\n offset: {\n bottom: '-10%',\n left: '-10%',\n },\n },\n {\n column: '12 / 15',\n row: '10 / 14',\n offset: {\n right: '-10%',\n bottom: '-7%',\n },\n },\n {\n column: '6 / 9',\n row: '10 / 15',\n offset: {\n right: '-10%',\n bottom: '-25%',\n },\n },\n ],\n },\n];\n\n// Class name constants\nconst STACK_CONTAINER_CLASS = 'brand-animations-card-stack';\nconst STACK_ELEMENT_CLASS = `${STACK_CONTAINER_CLASS}-element`;\nconst STACK_GRID_CLASS = `${STACK_CONTAINER_CLASS}-grid`;\nconst STACK_ITEM_CLASS = `${STACK_CONTAINER_CLASS}-item`;\nconst STACK_GRID_ERROR_CLASS = `${STACK_GRID_CLASS}-error`;\n\nconst KEY_FRAME_GRID_EXPAND = 'grid-expand';\nconst KEY_FRAME_GRID_ITEM = 'grid-item';\nconst KEY_FRAME_FEATURED_SIZE = 'featured-size';\n\nconst isPreferReducedMotion = accessibility.isPrefferdReducedMotion();\nconst isScrollTimelineSupported = () =>\n 'ScrollTimeline' in window || CSS.supports('animation-timeline', 'scroll()');\nconst isDisplayWithoutAnimation =\n isPreferReducedMotion || !isScrollTimelineSupported();\n\nconst getResponsiveSizes = () => {\n const windowWidth = window.innerWidth;\n\n if (windowWidth >= 1024) {\n return { width: 0.4, height: 0.4 };\n } else if (windowWidth >= 768) {\n return { width: 0.5, height: 0.5 };\n } else {\n return { width: 0.8, height: 0.5 };\n }\n};\n\nconst keyFrameGridExpand = `\n @keyframes ${KEY_FRAME_GRID_EXPAND} {\n to {\n transform: translate(0, 0);\n width: inherit;\n }\n }\n`;\n\nconst keyFrameGridItem = `\n @keyframes ${KEY_FRAME_GRID_ITEM} {\n to {\n opacity: 0;\n }\n }\n`;\n\nconst keyFrameFeaturedSize = `\n @keyframes ${KEY_FRAME_FEATURED_SIZE} {\n to {\n width: 100%;\n height: 100vh;\n top: 0%;\n }\n }\n`;\n\n/**\n * Waits for all media elements (images and videos) to load and render.\n *\n * @param container - The container element containing the media\n * @returns Promise that resolves when all media is loaded and rendered\n */\nconst waitForMediaLoad = async (container: HTMLElement): Promise<void> => {\n const images = Array.from(container.querySelectorAll('img'));\n const videos = Array.from(container.querySelectorAll('video'));\n\n const imagePromises = images.map((img) => {\n if (img.complete) {\n // Check if image loaded successfully or failed\n if (img.naturalWidth > 0) {\n return Promise.resolve();\n } else {\n // Image is complete but has no natural dimensions - it failed to load\n return Promise.reject(new Error(`Failed to load image: ${img.src}`));\n }\n }\n return new Promise<void>((resolve, reject) => {\n img.addEventListener('load', () => resolve(), { once: true });\n img.addEventListener(\n 'error',\n () => reject(new Error(`Failed to load image: ${img.src}`)),\n { once: true },\n );\n });\n });\n\n const videoPromises = videos.map((video) => {\n if (video.readyState >= 3) {\n return Promise.resolve();\n }\n return new Promise<void>((resolve, reject) => {\n video.addEventListener('loadeddata', () => resolve(), { once: true });\n video.addEventListener(\n 'error',\n () => reject(new Error(`Failed to load video: ${video.src}`)),\n { once: true },\n );\n });\n });\n\n await Promise.all([...imagePromises, ...videoPromises]);\n\n return new Promise<void>((resolve) => {\n requestAnimationFrame(() => {\n requestAnimationFrame(() => {\n resolve();\n });\n });\n });\n};\n\n/**\n * Retrieves the configuration object for a specific element count.\n *\n * @param count - The number of elements to display\n * @returns The configuration object for the given count, or undefined if not found\n */\nconst getConfigurationByCount = (count: number) => {\n return configuration.find((c) => c.count === count);\n};\n\n/**\n * Gets the stack element from a grid item.\n *\n * @param gridItem - The grid item element\n * @param index - The index of the stack element\n * @returns The stack element or null if not found\n */\nconst getStackElementFromGridItem = (\n gridItem: HTMLElement,\n index: number,\n): HTMLElement | null => {\n return gridItem.querySelector(\n `.${STACK_ELEMENT_CLASS}-${index}`,\n ) as HTMLElement;\n};\n\n/**\n * Calculates the transform values (x, y) needed to center an element\n * relative to the brand-animations-card-stack-grid container with optional offset.\n *\n * @param element - The element to be centered\n * @param gridContainer - The grid container element\n * @param offset - Optional offset values in percentages\n * @returns Transform values {x, y} in pixels to center the element with offset\n */\nconst calculateCenterTransform = (\n element: HTMLElement,\n centerElement: HTMLElement,\n offset?: {\n top?: string;\n left?: string;\n right?: string;\n bottom?: string;\n },\n): { x: number; y: number } => {\n const elementRect = element.getBoundingClientRect();\n const centerRect = centerElement.getBoundingClientRect();\n\n const centerX = centerRect.left + centerRect.width / 2;\n const centerY = centerRect.top + centerRect.height / 2;\n\n const elementCenterX = elementRect.left + elementRect.width / 2;\n const elementCenterY = elementRect.top + elementRect.height / 2;\n\n let translateX = centerX - elementCenterX;\n let translateY = centerY - elementCenterY;\n\n if (offset) {\n const applyOffset = (\n value: string | undefined,\n dimension: number,\n ): number => {\n return value ? (parseFloat(value) / 100) * dimension : 0;\n };\n\n translateX += applyOffset(offset.left, centerRect.width);\n translateX -= applyOffset(offset.right, centerRect.width);\n translateY += applyOffset(offset.top, centerRect.height);\n translateY -= applyOffset(offset.bottom, centerRect.height);\n }\n\n return {\n x: translateX,\n y: translateY,\n };\n};\n\n/**\n * Clears animations from elements.\n *\n * @param featuredElement - The featured element\n * @param gridContainer - The grid container element\n */\nconst clearElementAnimations = (\n featuredElement: HTMLElement | null,\n gridContainer: HTMLElement | null,\n): void => {\n if (featuredElement) {\n featuredElement.style.animation = 'none';\n }\n if (gridContainer) {\n gridContainer.style.animation = 'none';\n }\n};\n\n/**\n * Checks if the current device is mobile based on viewport width.\n *\n * @returns True if device is mobile (width < 768px)\n */\nconst isMobileDevice = (): boolean => {\n return window.innerWidth < 768;\n};\n\n/**\n * Creates a resize handler function that only executes on actual window resizes.\n *\n * @param onResize - Callback to execute on resize\n * @param delay - Delay in milliseconds before executing callback\n * @returns Resize handler function\n */\nconst createResizeHandler = (\n onResize: () => void,\n delay: number = 300,\n): (() => void) => {\n let timeoutId: NodeJS.Timeout | null = null;\n let previousWidth = window.innerWidth;\n\n return () => {\n const currentWidth = window.innerWidth;\n\n // Only trigger on width changes (actual resize, not mobile scroll)\n if (currentWidth === previousWidth) {\n return;\n }\n\n previousWidth = currentWidth;\n\n if (timeoutId) {\n clearTimeout(timeoutId);\n }\n timeoutId = setTimeout(() => {\n onResize();\n timeoutId = null;\n }, delay);\n };\n};\n\n/**\n * Sets opacity with optional transition.\n *\n * @param element - The element to modify\n * @param opacity - The opacity value\n * @param transition - Optional transition string\n */\nconst setElementOpacity = (\n element: HTMLElement,\n opacity: string,\n transition?: string,\n): void => {\n element.style.opacity = opacity;\n if (transition) {\n element.style.transition = transition;\n }\n};\n\n/**\n * Validates required elements for animation.\n *\n * @param gridContainer - The grid container element\n * @param config - Configuration object\n * @returns True if all required elements are present\n */\nconst validateAnimationElements = (\n gridContainer: HTMLElement | null,\n config: Configuration | undefined,\n): boolean => {\n return gridContainer !== null && config !== undefined;\n};\n\n/**\n * Applies dimension and position transforms to a grid element.\n *\n * @param element - The element to transform\n * @param itemConfig - Configuration for this specific item\n * @param featuredElement - The featured element for sizing reference\n * @param gridContainer - The grid container for position reference\n */\nconst applyElementTransforms = (\n element: HTMLElement,\n itemConfig: ConfigurationItem,\n featuredElement: HTMLElement,\n): void => {\n if (featuredElement) {\n const windowWidth = window.innerWidth;\n const windowHeight = window.innerHeight;\n const featuredWidth = featuredElement.offsetWidth;\n const featuredHeight = featuredElement.offsetHeight;\n const isLargerThan40Percent =\n featuredWidth > windowWidth * 0.41 ||\n featuredHeight > windowHeight * 0.41;\n\n if (!isLargerThan40Percent) {\n element.style.width = `${featuredWidth}px`;\n element.style.height = `${featuredHeight}px`;\n } else {\n const parentContainer = featuredElement.parentElement;\n const parentWidth = parentContainer\n ? parentContainer.offsetWidth\n : windowWidth;\n\n const { width: widthPercentage, height: heightVh } = getResponsiveSizes();\n const width = Math.round(parentWidth * widthPercentage);\n const height = Math.round(windowHeight * heightVh);\n\n element.style.width = `${width}px`;\n element.style.height = `${height}px`;\n }\n }\n\n const transform = calculateCenterTransform(\n element,\n featuredElement,\n itemConfig?.offset,\n );\n element.style.transform = `translate(${transform.x}px, ${transform.y}px)`;\n};\n\n/**\n * Processes all grid items for animation.\n *\n * @param gridContainer - The grid container element\n * @param config - Configuration object\n * @returns void\n */\nconst processGridAnimation = (\n featuredElement: HTMLElement,\n gridContainer: HTMLElement,\n config: Configuration,\n): void => {\n const gridItems = Array.from(gridContainer.children) as HTMLElement[];\n\n gridItems.forEach((gridItem, index) => {\n const element = getStackElementFromGridItem(gridItem, index);\n\n if (!element) {\n return;\n }\n\n const itemConfig = config.items[index];\n\n applyElementTransforms(element, itemConfig, featuredElement);\n });\n};\n\nconst createGridElement = (\n element: HTMLImageElement | HTMLVideoElement,\n index: number,\n placement: ConfigurationItem,\n) => {\n const children: ElementVisual[] = [];\n\n if (element.tagName === 'IMG') {\n children.push(\n assets.image.background({\n element: element as HTMLImageElement,\n isScaled: true,\n }),\n );\n }\n\n const rowStart = placement.row ? parseInt(placement.row.split(' / ')[0]) : 0;\n\n const getStartRange = (row: number): number => {\n if (row >= 13) return -70;\n if (row >= 10 && row <= 12) return -40;\n if (row >= 6 && row < 10) return 40;\n return 80;\n };\n\n const getEndRange = (row: number): number => {\n if (row >= 13) return 120;\n if (row >= 10 && row <= 12) return 140;\n if (row >= 6 && row < 10) return 160;\n return 170;\n };\n\n const startRange = getStartRange(rowStart);\n const endRange = getEndRange(rowStart);\n const animationRangeStart = `${startRange}vh`;\n const animationRangeEnd = `${endRange}vh`;\n\n return ElementModel.createDiv({\n className: `${STACK_ELEMENT_CLASS}-${index}`,\n children,\n elementStyles: {\n element: {\n overflow: 'clip',\n height: '100%',\n width: '100%',\n\n ...theme.media.withViewTimelineAnimation({\n animation: `${KEY_FRAME_GRID_EXPAND} ease-in-out forwards`,\n animationTimeline: 'view()',\n animationRangeStart,\n animationRangeEnd,\n animationDuration: '1ms',\n }),\n },\n },\n });\n};\n\nconst createGridItem = (\n element: HTMLImageElement | HTMLVideoElement,\n placement: ConfigurationItem,\n index: number,\n) => {\n const rowStart = placement.row ? parseInt(placement.row.split(' / ')[0]) : 0;\n const startRange = rowStart > 8 ? 0 : 80;\n const endRange = rowStart > 8 ? 200 : 200;\n const animationRangeStart = `${startRange}vh`;\n const animationRangeEnd = `${endRange}vh`;\n\n return ElementModel.createDiv({\n className: `${STACK_ITEM_CLASS}-${index}`,\n children: [createGridElement(element, index, placement)],\n elementStyles: {\n element: {\n gridColumn: placement.column,\n gridRow: placement.row,\n zIndex: placement.zIndex || 1,\n width: '100%',\n height: '100%',\n\n [`@media (${Styles.token.media.queries.large.max})`]: {\n [`@supports not (animation-timeline: scroll())`]: {\n display: 'none',\n },\n },\n\n ...(isDisplayWithoutAnimation && {\n display: 'none',\n }),\n\n ...theme.media.withViewTimelineAnimation({\n animation: `${KEY_FRAME_GRID_ITEM} ease-in-out forwards`,\n animationTimeline: 'view()',\n animationRangeStart,\n animationRangeEnd,\n }),\n },\n },\n });\n};\n\nconst createGrid = (props: CardStackProps) => {\n const totalCount = props.images.length;\n const config = getConfigurationByCount(totalCount);\n\n if (!config) {\n console.warn(`No configuration found for ${totalCount} elements`);\n return ElementModel.createDiv({\n className: STACK_GRID_ERROR_CLASS,\n });\n }\n\n const gridItems = props.images.map((element, index) => {\n const placement = config.items[index];\n return createGridItem(element, placement, index);\n });\n\n return ElementModel.createDiv({\n className: STACK_GRID_CLASS,\n children: gridItems,\n elementStyles: {\n element: {\n display: 'grid',\n gridTemplateColumns: 'repeat(16, 1fr)',\n gridTemplateRows: 'repeat(16, 2vh)',\n gap: Styles.token.spacing.min,\n minHeight: '300px',\n\n [`@media (${Styles.token.media.queries.large.max})`]: {\n '@supports not (animation-timeline: scroll())': {\n width: '100%',\n },\n },\n\n ...theme.media.withViewTimelineAnimation({\n gridTemplateColumns: config.layout.gridTemplateColumns,\n gridTemplateRows: config.layout.gridTemplateRows,\n transform: 'translate(-50%, -25%)',\n }),\n },\n },\n });\n};\n\nconst createFeatured = (\n element: HTMLImageElement | HTMLVideoElement,\n isExpand: boolean,\n totalCount: number,\n) => {\n const children: ElementVisual[] = [];\n let video: (ElementVisual & { events: { setPlay: () => void } }) | undefined;\n\n if (element.tagName === 'IMG') {\n children.push(\n assets.image.background({\n element: element as HTMLImageElement,\n isScaled: true,\n }),\n );\n }\n\n if (element.tagName === 'VIDEO') {\n element.setAttribute('muted', 'true');\n element.setAttribute('playsinline', 'true');\n element.setAttribute('loop', 'true');\n\n video = assets.video.toggle({\n video: element as HTMLVideoElement,\n isScaled: true,\n });\n children.push(video);\n }\n\n const { width: widthPercentage, height: heightVh } = getResponsiveSizes();\n\n const featuredElement = ElementModel.createDiv({\n className: `${STACK_ELEMENT_CLASS}-featured`,\n children,\n elementStyles: {\n element: {\n position: 'absolute',\n top: '20vh',\n left: '50%',\n transform: 'translateX(-50%)',\n zIndex: 999,\n width: `${widthPercentage * 100}%`,\n height: `${heightVh * 100}vh`,\n\n ...(isDisplayWithoutAnimation && {\n top: '0',\n }),\n\n [`@media (${Styles.token.media.queries.large.max})`]: {\n '@supports not (animation-timeline: view())': {\n width: '100% !important',\n height: '100% !important',\n top: '0',\n },\n },\n\n ...(isExpand && {\n ...theme.media.withViewTimelineAnimation({\n top: '30vh',\n animation: `${KEY_FRAME_FEATURED_SIZE} ease-in-out forwards`,\n animationTimeline: 'view()',\n animationRangeStart: `${100 + (totalCount - 4) * 10}vh`,\n animationRangeEnd: '250vh',\n }),\n }),\n },\n },\n });\n\n if (isExpand && featuredElement.element instanceof HTMLElement) {\n const observer = new IntersectionObserver(\n (entries) => {\n entries.forEach((entry) => {\n if (entry.isIntersecting) {\n if (video) video.events.setPlay();\n observer.disconnect();\n }\n });\n },\n {\n rootMargin: `-${100 + (totalCount - 4) * 10}px 0px 0px 0px`,\n threshold: 0,\n },\n );\n\n observer.observe(featuredElement.element);\n }\n\n return featuredElement;\n};\n\nconst createSticky = (props: CardStackProps) => {\n const wrapper = ElementModel.createDiv({\n className: `${STACK_CONTAINER_CLASS}-sticky-wrapper`,\n children: [\n createGrid(props),\n createFeatured(\n props.featured,\n props.isExpandFeature,\n props.images.length,\n ),\n ],\n elementStyles: {\n element: {\n position: 'relative',\n\n ...theme.media.withViewTimelineAnimation({\n position: 'sticky',\n top: 0,\n }),\n },\n },\n });\n\n return ElementModel.createDiv({\n className: `${STACK_CONTAINER_CLASS}-sticky`,\n children: [wrapper],\n elementStyles: {\n element: {\n ...theme.media.withViewTimelineAnimation({\n height: '200vh',\n\n ...(props.isExpandFeature && {\n height: '250vh',\n }),\n }),\n },\n },\n });\n};\n\nexport default (props: CardStackProps) => {\n const composite = ElementModel.createDiv({\n className: STACK_CONTAINER_CLASS,\n children: [createSticky(props)],\n elementStyles: {\n element: {\n containerType: 'inline-size',\n opacity: '0',\n overflow: 'clip',\n },\n },\n });\n\n const loadAnimation = async () => {\n const totalCount = props.images.length;\n const config = getConfigurationByCount(totalCount);\n const gridContainer = composite.element.querySelector(\n `.${STACK_GRID_CLASS}`,\n ) as HTMLElement;\n const featuredElement = composite.element.querySelector(\n `.${STACK_ELEMENT_CLASS}-featured`,\n ) as HTMLElement;\n let animationsCleared = false;\n\n if (!validateAnimationElements(gridContainer, config)) {\n return;\n }\n\n const clearAnimations = () => {\n if (animationsCleared) return;\n\n clearElementAnimations(featuredElement, gridContainer);\n animationsCleared = true;\n\n setTimeout(() => {\n processGridAnimation(props.featured, gridContainer!, config!);\n }, 100);\n };\n\n try {\n await waitForMediaLoad(gridContainer!);\n } catch (error) {\n console.warn('Media loading failed, proceeding with animation:', error);\n }\n\n processGridAnimation(props.featured, gridContainer!, config!);\n setElementOpacity(composite.element, '1');\n\n if (!isMobileDevice()) {\n const resizeHandler = createResizeHandler(() => {\n setTimeout(() => {\n processGridAnimation(props.featured, gridContainer!, config!);\n setTimeout(() => {\n setElementOpacity(composite.element, '1');\n animationsCleared = false;\n }, 100);\n }, 200);\n });\n\n window.addEventListener('resize', () => {\n if (isMobileDevice()) {\n return;\n }\n\n if (composite.element.style.opacity === '1') {\n setElementOpacity(composite.element, '0', 'opacity 0.3s ease-in-out');\n }\n\n clearAnimations();\n resizeHandler();\n });\n }\n };\n\n composite.styles += keyFrameGridExpand;\n composite.styles += keyFrameGridItem;\n composite.styles += keyFrameFeaturedSize;\n\n return {\n ...composite,\n events: {\n loadAnimation,\n },\n };\n};\n"],"names":["accessibility.isPrefferdReducedMotion","index","assets.image.background","ElementModel.createDiv","theme.media.withViewTimelineAnimation","assets.video.toggle"],"mappings":"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"}
|