@universityofmaryland/web-elements-library 1.7.0 → 1.7.1
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/layout/overlay/modal.d.ts +2 -1
- package/dist/atomic/layout/overlay/modal.d.ts.map +1 -1
- package/dist/atomic/layout/overlay/modal.js +14 -1
- package/dist/atomic/layout/overlay/modal.js.map +1 -1
- package/dist/composite/carousel/elements/full-screen.d.ts +1 -1
- package/dist/composite/carousel/elements/full-screen.d.ts.map +1 -1
- package/dist/composite/carousel/elements/full-screen.js +5 -2
- package/dist/composite/carousel/elements/full-screen.js.map +1 -1
- package/dist/composite/carousel/elements/overlay.d.ts.map +1 -1
- package/dist/composite/carousel/elements/overlay.js +23 -15
- package/dist/composite/carousel/elements/overlay.js.map +1 -1
- package/package.json +2 -2
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
|
|
|
@@ -2,7 +2,8 @@ type TypeFixedFullScreenProps = {
|
|
|
2
2
|
content: HTMLElement | null;
|
|
3
3
|
isHidden?: boolean;
|
|
4
4
|
context?: HTMLElement | null;
|
|
5
|
+
onHide?: () => void;
|
|
5
6
|
};
|
|
6
|
-
export declare const createModal: ({ content, isHidden, context, }: TypeFixedFullScreenProps) => import('../../../../builder/dist/index.d.ts').ElementModel<HTMLElement>;
|
|
7
|
+
export declare const createModal: ({ content, isHidden, context, onHide, }: TypeFixedFullScreenProps) => import('../../../../builder/dist/index.d.ts').ElementModel<HTMLElement>;
|
|
7
8
|
export {};
|
|
8
9
|
//# sourceMappingURL=modal.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"modal.d.ts","sourceRoot":"","sources":["../../../../source/atomic/layout/overlay/modal.ts"],"names":[],"mappings":"AAIA,KAAK,wBAAwB,GAAG;IAC9B,OAAO,EAAE,WAAW,GAAG,IAAI,CAAC;IAC5B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,WAAW,GAAG,IAAI,CAAC;
|
|
1
|
+
{"version":3,"file":"modal.d.ts","sourceRoot":"","sources":["../../../../source/atomic/layout/overlay/modal.ts"],"names":[],"mappings":"AAIA,KAAK,wBAAwB,GAAG;IAC9B,OAAO,EAAE,WAAW,GAAG,IAAI,CAAC;IAC5B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,WAAW,GAAG,IAAI,CAAC;IAC7B,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;CACrB,CAAC;AAEF,eAAO,MAAM,WAAW,GAAI,yCAKzB,wBAAwB,kFAoG1B,CAAC"}
|
|
@@ -4,12 +4,14 @@ import { trapFocus } from "@universityofmaryland/web-utilities-library/accessibi
|
|
|
4
4
|
const createModal = ({
|
|
5
5
|
content,
|
|
6
6
|
isHidden,
|
|
7
|
-
context
|
|
7
|
+
context,
|
|
8
|
+
onHide
|
|
8
9
|
}) => {
|
|
9
10
|
const body = document.body;
|
|
10
11
|
const html = document.documentElement;
|
|
11
12
|
let eventReference = null;
|
|
12
13
|
let accessibiltyEventReference = null;
|
|
14
|
+
let scrollPosition = 0;
|
|
13
15
|
const backgroundBuilder = new ElementBuilder().withClassName("modal-screen-container-background").withStyles({
|
|
14
16
|
element: {
|
|
15
17
|
backgroundColor: "rgba(0, 0, 0, 0.9)",
|
|
@@ -34,7 +36,12 @@ const createModal = ({
|
|
|
34
36
|
}).withChild(backgroundBuilder);
|
|
35
37
|
const container = containerBuilder.getElement();
|
|
36
38
|
const show = () => {
|
|
39
|
+
scrollPosition = window.scrollY;
|
|
37
40
|
container.style.display = "block";
|
|
41
|
+
body.style.position = "fixed";
|
|
42
|
+
body.style.top = `-${scrollPosition}px`;
|
|
43
|
+
body.style.left = "0";
|
|
44
|
+
body.style.right = "0";
|
|
38
45
|
body.style.overflow = "hidden";
|
|
39
46
|
body.style.height = "100%";
|
|
40
47
|
html.style.overflow = "hidden";
|
|
@@ -54,13 +61,19 @@ const createModal = ({
|
|
|
54
61
|
}, 100);
|
|
55
62
|
};
|
|
56
63
|
const hide = () => {
|
|
64
|
+
body.style.position = "";
|
|
65
|
+
body.style.top = "";
|
|
66
|
+
body.style.left = "";
|
|
67
|
+
body.style.right = "";
|
|
57
68
|
body.style.overflow = "visible";
|
|
58
69
|
body.style.height = "inherit";
|
|
59
70
|
html.style.overflow = "visible";
|
|
60
71
|
html.style.height = "inherit";
|
|
61
72
|
container.style.display = "none";
|
|
73
|
+
window.scrollTo(0, scrollPosition);
|
|
62
74
|
if (accessibiltyEventReference) accessibiltyEventReference();
|
|
63
75
|
if (eventReference) eventReference.removeEventListener("click", () => hide());
|
|
76
|
+
if (onHide) onHide();
|
|
64
77
|
if (context) context.dispatchEvent(new CustomEvent("modal:hide", { bubbles: true, composed: true }));
|
|
65
78
|
setTimeout(() => {
|
|
66
79
|
if (context) {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"modal.js","sources":["../../../../source/atomic/layout/overlay/modal.ts"],"sourcesContent":["import * as token from '@universityofmaryland/web-token-library';\nimport { ElementBuilder } from '@universityofmaryland/web-builder-library';\nimport { trapFocus } from '@universityofmaryland/web-utilities-library/accessibility';\n\ntype TypeFixedFullScreenProps = {\n content: HTMLElement | null;\n isHidden?: boolean;\n context?: HTMLElement | null;\n};\n\nexport const createModal = ({\n content,\n isHidden,\n context,\n}: TypeFixedFullScreenProps) => {\n const body = document.body;\n const html = document.documentElement;\n let eventReference: any = null;\n let accessibiltyEventReference: any = null;\n\n const backgroundBuilder = new ElementBuilder()\n .withClassName('modal-screen-container-background')\n .withStyles({\n element: {\n backgroundColor: 'rgba(0, 0, 0, 0.9)',\n padding: `${token.spacing.xl} ${token.spacing.md}`,\n width: '100%',\n height: '100%',\n [`@media (${token.media.queries.tablet.min})`]: {\n padding: '10vh 10vw',\n },\n },\n })\n .withChildIf(!!content, content as HTMLElement);\n\n const containerBuilder = new ElementBuilder()\n .withClassName('modal-screen-container')\n .withStyles({\n element: {\n display: 'none',\n position: 'fixed',\n top: 0,\n left: 0,\n width: '100%',\n height: '100%',\n zIndex: 999999,\n },\n })\n .withChild(backgroundBuilder);\n\n const container = containerBuilder.getElement();\n\n const show = () => {\n container.style.display = 'block';\n body.style.overflow = 'hidden';\n body.style.height = '100%';\n html.style.overflow = 'hidden';\n html.style.height = '100%';\n eventReference = container.addEventListener('click', (event) => {\n const target = event.target as HTMLElement;\n\n if (target === container) hide();\n });\n\n accessibiltyEventReference = trapFocus({\n element: container,\n action: hide,\n shadowDomContext: context || null,\n });\n\n\t\tif (context) context.dispatchEvent(new CustomEvent('modal:show', {bubbles: true, composed: true}))\n\n setTimeout(() => {\n if (content) content.focus();\n }, 100);\n };\n\n const hide = () => {\n body.style.overflow = 'visible';\n body.style.height = 'inherit';\n html.style.overflow = 'visible';\n html.style.height = 'inherit';\n container.style.display = 'none';\n\n if (accessibiltyEventReference) accessibiltyEventReference();\n\
|
|
1
|
+
{"version":3,"file":"modal.js","sources":["../../../../source/atomic/layout/overlay/modal.ts"],"sourcesContent":["import * as token from '@universityofmaryland/web-token-library';\nimport { ElementBuilder } from '@universityofmaryland/web-builder-library';\nimport { trapFocus } from '@universityofmaryland/web-utilities-library/accessibility';\n\ntype TypeFixedFullScreenProps = {\n content: HTMLElement | null;\n isHidden?: boolean;\n context?: HTMLElement | null;\n onHide?: () => void;\n};\n\nexport const createModal = ({\n content,\n isHidden,\n context,\n onHide,\n}: TypeFixedFullScreenProps) => {\n const body = document.body;\n const html = document.documentElement;\n let eventReference: any = null;\n let accessibiltyEventReference: any = null;\n let scrollPosition = 0;\n\n const backgroundBuilder = new ElementBuilder()\n .withClassName('modal-screen-container-background')\n .withStyles({\n element: {\n backgroundColor: 'rgba(0, 0, 0, 0.9)',\n padding: `${token.spacing.xl} ${token.spacing.md}`,\n width: '100%',\n height: '100%',\n [`@media (${token.media.queries.tablet.min})`]: {\n padding: '10vh 10vw',\n },\n },\n })\n .withChildIf(!!content, content as HTMLElement);\n\n const containerBuilder = new ElementBuilder()\n .withClassName('modal-screen-container')\n .withStyles({\n element: {\n display: 'none',\n position: 'fixed',\n top: 0,\n left: 0,\n width: '100%',\n height: '100%',\n zIndex: 999999,\n },\n })\n .withChild(backgroundBuilder);\n\n const container = containerBuilder.getElement();\n\n const show = () => {\n scrollPosition = window.scrollY;\n container.style.display = 'block';\n body.style.position = 'fixed';\n body.style.top = `-${scrollPosition}px`;\n body.style.left = '0';\n body.style.right = '0';\n body.style.overflow = 'hidden';\n body.style.height = '100%';\n html.style.overflow = 'hidden';\n html.style.height = '100%';\n eventReference = container.addEventListener('click', (event) => {\n const target = event.target as HTMLElement;\n\n if (target === container) hide();\n });\n\n accessibiltyEventReference = trapFocus({\n element: container,\n action: hide,\n shadowDomContext: context || null,\n });\n\n\t\tif (context) context.dispatchEvent(new CustomEvent('modal:show', {bubbles: true, composed: true}))\n\n setTimeout(() => {\n if (content) content.focus();\n }, 100);\n };\n\n const hide = () => {\n body.style.position = '';\n body.style.top = '';\n body.style.left = '';\n body.style.right = '';\n body.style.overflow = 'visible';\n body.style.height = 'inherit';\n html.style.overflow = 'visible';\n html.style.height = 'inherit';\n container.style.display = 'none';\n window.scrollTo(0, scrollPosition);\n\n if (accessibiltyEventReference) accessibiltyEventReference();\n\n if (eventReference) eventReference.removeEventListener('click', () => hide());\n\n if (onHide) onHide();\n\n\t\tif (context) context.dispatchEvent(new CustomEvent('modal:hide', {bubbles: true, composed: true}))\n \n\t\tsetTimeout(() => {\n if (context) {\n const firstItem = context.querySelector('button, a') as HTMLElement;\n firstItem?.focus();\n }\n }, 100);\n };\n\n if (isHidden) container.style.display = 'none';\n\n return containerBuilder.withEvents({ show, hide }).build();\n};\n"],"names":[],"mappings":";;;AAWO,MAAM,cAAc,CAAC;AAAA,EAC1B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAAgC;AAC9B,QAAM,OAAO,SAAS;AACtB,QAAM,OAAO,SAAS;AACtB,MAAI,iBAAsB;AAC1B,MAAI,6BAAkC;AACtC,MAAI,iBAAiB;AAErB,QAAM,oBAAoB,IAAI,eAAA,EAC3B,cAAc,mCAAmC,EACjD,WAAW;AAAA,IACV,SAAS;AAAA,MACP,iBAAiB;AAAA,MACjB,SAAS,GAAG,MAAM,QAAQ,EAAE,IAAI,MAAM,QAAQ,EAAE;AAAA,MAChD,OAAO;AAAA,MACP,QAAQ;AAAA,MACR,CAAC,WAAW,MAAM,MAAM,QAAQ,OAAO,GAAG,GAAG,GAAG;AAAA,QAC9C,SAAS;AAAA,MAAA;AAAA,IACX;AAAA,EACF,CACD,EACA,YAAY,CAAC,CAAC,SAAS,OAAsB;AAEhD,QAAM,mBAAmB,IAAI,eAAA,EAC1B,cAAc,wBAAwB,EACtC,WAAW;AAAA,IACV,SAAS;AAAA,MACP,SAAS;AAAA,MACT,UAAU;AAAA,MACV,KAAK;AAAA,MACL,MAAM;AAAA,MACN,OAAO;AAAA,MACP,QAAQ;AAAA,MACR,QAAQ;AAAA,IAAA;AAAA,EACV,CACD,EACA,UAAU,iBAAiB;AAE9B,QAAM,YAAY,iBAAiB,WAAA;AAEnC,QAAM,OAAO,MAAM;AACjB,qBAAiB,OAAO;AACxB,cAAU,MAAM,UAAU;AAC1B,SAAK,MAAM,WAAW;AACtB,SAAK,MAAM,MAAM,IAAI,cAAc;AACnC,SAAK,MAAM,OAAO;AAClB,SAAK,MAAM,QAAQ;AACnB,SAAK,MAAM,WAAW;AACtB,SAAK,MAAM,SAAS;AACpB,SAAK,MAAM,WAAW;AACtB,SAAK,MAAM,SAAS;AACpB,qBAAiB,UAAU,iBAAiB,SAAS,CAAC,UAAU;AAC9D,YAAM,SAAS,MAAM;AAErB,UAAI,WAAW,UAAW,MAAA;AAAA,IAC5B,CAAC;AAED,iCAA6B,UAAU;AAAA,MACrC,SAAS;AAAA,MACT,QAAQ;AAAA,MACR,kBAAkB,WAAW;AAAA,IAAA,CAC9B;AAEH,QAAI,QAAS,SAAQ,cAAc,IAAI,YAAY,cAAc,EAAC,SAAS,MAAM,UAAU,KAAA,CAAK,CAAC;AAE/F,eAAW,MAAM;AACf,UAAI,iBAAiB,MAAA;AAAA,IACvB,GAAG,GAAG;AAAA,EACR;AAEA,QAAM,OAAO,MAAM;AACjB,SAAK,MAAM,WAAW;AACtB,SAAK,MAAM,MAAM;AACjB,SAAK,MAAM,OAAO;AAClB,SAAK,MAAM,QAAQ;AACnB,SAAK,MAAM,WAAW;AACtB,SAAK,MAAM,SAAS;AACpB,SAAK,MAAM,WAAW;AACtB,SAAK,MAAM,SAAS;AACpB,cAAU,MAAM,UAAU;AAC1B,WAAO,SAAS,GAAG,cAAc;AAEjC,QAAI,2BAA4B,4BAAA;AAEhC,QAAI,eAAgB,gBAAe,oBAAoB,SAAS,MAAM,MAAM;AAE5E,QAAI,OAAQ,QAAA;AAEd,QAAI,QAAS,SAAQ,cAAc,IAAI,YAAY,cAAc,EAAC,SAAS,MAAM,UAAU,KAAA,CAAK,CAAC;AAEjG,eAAW,MAAM;AACb,UAAI,SAAS;AACX,cAAM,YAAY,QAAQ,cAAc,WAAW;AACnD,mBAAW,MAAA;AAAA,MACb;AAAA,IACF,GAAG,GAAG;AAAA,EACR;AAEA,MAAI,SAAU,WAAU,MAAM,UAAU;AAExC,SAAO,iBAAiB,WAAW,EAAE,MAAM,KAAA,CAAM,EAAE,MAAA;AACrD;"}
|
|
@@ -10,6 +10,6 @@ type FullScreenModel = {
|
|
|
10
10
|
hide: () => void;
|
|
11
11
|
};
|
|
12
12
|
};
|
|
13
|
-
export declare const createCompositeCarouselFullScreen: ({ content }: TypeFixedFullScreenProps) => FullScreenModel;
|
|
13
|
+
export declare const createCompositeCarouselFullScreen: ({ content, callback, }: TypeFixedFullScreenProps) => FullScreenModel;
|
|
14
14
|
export {};
|
|
15
15
|
//# sourceMappingURL=full-screen.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"full-screen.d.ts","sourceRoot":"","sources":["../../../../source/composite/carousel/elements/full-screen.ts"],"names":[],"mappings":"AAMA,KAAK,wBAAwB,GAAG;IAC9B,OAAO,EAAE,WAAW,CAAC;IACrB,QAAQ,EAAE,MAAM,IAAI,CAAC;CACtB,CAAC;AAEF,KAAK,eAAe,GAAG;IACrB,OAAO,EAAE,WAAW,CAAC;IACrB,MAAM,EAAE,MAAM,CAAC;IACf,MAAM,EAAE;QACN,IAAI,EAAE,MAAM,IAAI,CAAC;QACjB,IAAI,EAAE,MAAM,IAAI,CAAC;KAClB,CAAC;CACH,CAAC;AAEF,eAAO,MAAM,iCAAiC,GAAI,
|
|
1
|
+
{"version":3,"file":"full-screen.d.ts","sourceRoot":"","sources":["../../../../source/composite/carousel/elements/full-screen.ts"],"names":[],"mappings":"AAMA,KAAK,wBAAwB,GAAG;IAC9B,OAAO,EAAE,WAAW,CAAC;IACrB,QAAQ,EAAE,MAAM,IAAI,CAAC;CACtB,CAAC;AAEF,KAAK,eAAe,GAAG;IACrB,OAAO,EAAE,WAAW,CAAC;IACrB,MAAM,EAAE,MAAM,CAAC;IACf,MAAM,EAAE;QACN,IAAI,EAAE,MAAM,IAAI,CAAC;QACjB,IAAI,EAAE,MAAM,IAAI,CAAC;KAClB,CAAC;CACH,CAAC;AAEF,eAAO,MAAM,iCAAiC,GAAI,wBAG/C,wBAAwB,KA0CpB,eACN,CAAC"}
|
|
@@ -26,8 +26,11 @@ import "@universityofmaryland/web-icons-library/social";
|
|
|
26
26
|
import "@universityofmaryland/web-utilities-library/string";
|
|
27
27
|
import "@universityofmaryland/web-utilities-library/animation";
|
|
28
28
|
import "../../../atomic/text-lockup/small.js";
|
|
29
|
-
const createCompositeCarouselFullScreen = ({
|
|
30
|
-
|
|
29
|
+
const createCompositeCarouselFullScreen = ({
|
|
30
|
+
content,
|
|
31
|
+
callback
|
|
32
|
+
}) => {
|
|
33
|
+
const modal = createModal({ content, onHide: callback });
|
|
31
34
|
const modalEvents = modal.events;
|
|
32
35
|
const closeButtonModel = new ElementBuilder("button").withClassName("carousel-fixed-screen-button").withAttribute("type", "button").withAria({ label: "Close" }).withHTML(close_large).withStyles({
|
|
33
36
|
element: {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"full-screen.js","sources":["../../../../source/composite/carousel/elements/full-screen.ts"],"sourcesContent":["import * as token from '@universityofmaryland/web-token-library';\nimport { ElementBuilder } from '@universityofmaryland/web-builder-library';\nimport { combineStyles } from '@universityofmaryland/web-utilities-library/styles';\nimport { close_large as iconCloseLarge } from '@universityofmaryland/web-icons-library/controls';\nimport { layout } from 'atomic';\n\ntype TypeFixedFullScreenProps = {\n content: HTMLElement;\n callback: () => void;\n};\n\ntype FullScreenModel = {\n element: HTMLElement;\n styles: string;\n events: {\n show: () => void;\n hide: () => void;\n };\n};\n\nexport const createCompositeCarouselFullScreen = ({
|
|
1
|
+
{"version":3,"file":"full-screen.js","sources":["../../../../source/composite/carousel/elements/full-screen.ts"],"sourcesContent":["import * as token from '@universityofmaryland/web-token-library';\nimport { ElementBuilder } from '@universityofmaryland/web-builder-library';\nimport { combineStyles } from '@universityofmaryland/web-utilities-library/styles';\nimport { close_large as iconCloseLarge } from '@universityofmaryland/web-icons-library/controls';\nimport { layout } from 'atomic';\n\ntype TypeFixedFullScreenProps = {\n content: HTMLElement;\n callback: () => void;\n};\n\ntype FullScreenModel = {\n element: HTMLElement;\n styles: string;\n events: {\n show: () => void;\n hide: () => void;\n };\n};\n\nexport const createCompositeCarouselFullScreen = ({\n content,\n callback,\n}: TypeFixedFullScreenProps) => {\n const modal = layout.overlay.modal({ content, onHide: callback });\n const modalEvents = modal.events;\n\n const closeButtonModel = new ElementBuilder('button')\n .withClassName('carousel-fixed-screen-button')\n .withAttribute('type', 'button')\n .withAria({ label: 'Close' })\n .withHTML(iconCloseLarge)\n .withStyles({\n element: {\n position: 'absolute',\n top: '10px',\n right: '10px',\n [`@media (${token.media.queries.tablet.min})`]: {\n top: 'calc(10vh - 22px)',\n right: 'calc(10vw - 22px)',\n },\n '& svg': {\n fill: token.color.white,\n width: '20px',\n height: '20px',\n },\n },\n })\n .on('click', () => {\n if (!modalEvents) {\n return;\n }\n modalEvents.hide();\n })\n .build();\n\n modal.element.appendChild(closeButtonModel.element);\n\n const show = modalEvents ? modalEvents.show : () => {};\n const hide = modalEvents ? modalEvents.hide : () => {};\n\n return {\n element: modal.element,\n styles: combineStyles(modal.styles, closeButtonModel.styles),\n events: { show, hide },\n } as FullScreenModel;\n};\n"],"names":["layout.overlay.modal","iconCloseLarge"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAoBO,MAAM,oCAAoC,CAAC;AAAA,EAChD;AAAA,EACA;AACF,MAAgC;AAC9B,QAAM,QAAQA,YAAqB,EAAE,SAAS,QAAQ,UAAU;AAChE,QAAM,cAAc,MAAM;AAE1B,QAAM,mBAAmB,IAAI,eAAe,QAAQ,EACjD,cAAc,8BAA8B,EAC5C,cAAc,QAAQ,QAAQ,EAC9B,SAAS,EAAE,OAAO,QAAA,CAAS,EAC3B,SAASC,WAAc,EACvB,WAAW;AAAA,IACV,SAAS;AAAA,MACP,UAAU;AAAA,MACV,KAAK;AAAA,MACL,OAAO;AAAA,MACP,CAAC,WAAW,MAAM,MAAM,QAAQ,OAAO,GAAG,GAAG,GAAG;AAAA,QAC9C,KAAK;AAAA,QACL,OAAO;AAAA,MAAA;AAAA,MAET,SAAS;AAAA,QACP,MAAM,MAAM,MAAM;AAAA,QAClB,OAAO;AAAA,QACP,QAAQ;AAAA,MAAA;AAAA,IACV;AAAA,EACF,CACD,EACA,GAAG,SAAS,MAAM;AACjB,QAAI,CAAC,aAAa;AAChB;AAAA,IACF;AACA,gBAAY,KAAA;AAAA,EACd,CAAC,EACA,MAAA;AAEH,QAAM,QAAQ,YAAY,iBAAiB,OAAO;AAElD,QAAM,OAAO,cAAc,YAAY,OAAO,MAAM;AAAA,EAAC;AACrD,QAAM,OAAO,cAAc,YAAY,OAAO,MAAM;AAAA,EAAC;AAErD,SAAO;AAAA,IACL,SAAS,MAAM;AAAA,IACf,QAAQ,cAAc,MAAM,QAAQ,iBAAiB,MAAM;AAAA,IAC3D,QAAQ,EAAE,MAAM,KAAA;AAAA,EAAK;AAEzB;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"overlay.d.ts","sourceRoot":"","sources":["../../../../source/composite/carousel/elements/overlay.ts"],"names":[],"mappings":"AAgDA,eAAO,MAAM,8BAA8B,GAAI,8BAG5C;IACD,MAAM,EAAE,gBAAgB,EAAE,CAAC;IAC3B,eAAe,CAAC,EAAE,OAAO,CAAC;CAC3B;;;;+BAIiC,MAAM;;
|
|
1
|
+
{"version":3,"file":"overlay.d.ts","sourceRoot":"","sources":["../../../../source/composite/carousel/elements/overlay.ts"],"names":[],"mappings":"AAgDA,eAAO,MAAM,8BAA8B,GAAI,8BAG5C;IACD,MAAM,EAAE,gBAAgB,EAAE,CAAC;IAC3B,eAAe,CAAC,EAAE,OAAO,CAAC;CAC3B;;;;+BAIiC,MAAM;;CAgElC,CAAC"}
|
|
@@ -62,28 +62,31 @@ const createCompositeCarouselOverlay = ({
|
|
|
62
62
|
images,
|
|
63
63
|
isToggleCaption = true
|
|
64
64
|
}) => (() => {
|
|
65
|
+
let isFullScreenEvents = null;
|
|
65
66
|
const setFullScreen = (index) => {
|
|
66
67
|
let canMove = true;
|
|
68
|
+
if (isFullScreenEvents) {
|
|
69
|
+
window.removeEventListener("keyup", isFullScreenEvents);
|
|
70
|
+
}
|
|
67
71
|
overlayCarousel.events.EventMoveTo(index);
|
|
68
72
|
setTimeout(() => fixedFullScreen.events.show(), 100);
|
|
69
73
|
setTimeout(() => {
|
|
70
74
|
overlayCarousel.events.EventResize();
|
|
71
75
|
}, 100);
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
} else if (event.key === "ArrowRight") {
|
|
80
|
-
overlayCarousel.events.EventSlideRight();
|
|
81
|
-
}
|
|
82
|
-
setTimeout(() => {
|
|
83
|
-
canMove = true;
|
|
84
|
-
}, 700);
|
|
76
|
+
const handleKeyup = (event) => {
|
|
77
|
+
if (!canMove) return;
|
|
78
|
+
canMove = false;
|
|
79
|
+
if (event.key === "ArrowLeft") {
|
|
80
|
+
overlayCarousel.events.EventSlideLeft();
|
|
81
|
+
} else if (event.key === "ArrowRight") {
|
|
82
|
+
overlayCarousel.events.EventSlideRight();
|
|
85
83
|
}
|
|
86
|
-
|
|
84
|
+
setTimeout(() => {
|
|
85
|
+
canMove = true;
|
|
86
|
+
}, 700);
|
|
87
|
+
};
|
|
88
|
+
isFullScreenEvents = handleKeyup;
|
|
89
|
+
window.addEventListener("keyup", handleKeyup);
|
|
87
90
|
};
|
|
88
91
|
const overlaySlideModels = CreateOverlaySlide({ images, isToggleCaption });
|
|
89
92
|
const overlaySlides = overlaySlideModels.map((model) => model.element);
|
|
@@ -94,7 +97,12 @@ const createCompositeCarouselOverlay = ({
|
|
|
94
97
|
maxHeight: window.innerHeight / 10 * 8
|
|
95
98
|
});
|
|
96
99
|
const fixedFullScreen = createCompositeCarouselFullScreen({
|
|
97
|
-
content: overlayCarousel.element
|
|
100
|
+
content: overlayCarousel.element,
|
|
101
|
+
callback: () => {
|
|
102
|
+
if (isFullScreenEvents) {
|
|
103
|
+
window.removeEventListener("keyup", isFullScreenEvents);
|
|
104
|
+
}
|
|
105
|
+
}
|
|
98
106
|
});
|
|
99
107
|
return {
|
|
100
108
|
element: fixedFullScreen.element,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"overlay.js","sources":["../../../../source/composite/carousel/elements/overlay.ts"],"sourcesContent":["import * as token from '@universityofmaryland/web-token-library';\nimport { ElementBuilder } from '@universityofmaryland/web-builder-library';\nimport { combineStyles } from '@universityofmaryland/web-utilities-library/styles';\nimport * as carouselElements from '../elements';\nimport { createLayoutImageContainer } from 'layout';\n\nconst CreateOverlaySlide = ({\n images,\n isToggleCaption,\n}: {\n images: HTMLImageElement[];\n isToggleCaption: boolean;\n}) =>\n images.map((image) => {\n const imageBlock = createLayoutImageContainer({ image, showCaption: true, isToggleCaption });\n\n const imageContainerModel = new ElementBuilder()\n .withClassName('carousel-overlay-container')\n .withStyles({\n element: {\n position: 'absolute',\n top: 0,\n left: 0,\n right: 0,\n bottom: 0,\n backgroundColor: token.color.gray.dark,\n\n '& > *': {\n width: '100%',\n height: '100%',\n display: 'flex',\n justifyContent: 'center',\n alignItems: 'center',\n },\n\n '& img': {\n objectFit: 'contain',\n maxHeight: '100%',\n maxWidth: '100%',\n },\n },\n })\n .withChild(imageBlock)\n .build();\n\n return imageContainerModel;\n });\n\nexport const createCompositeCarouselOverlay = ({\n images,\n isToggleCaption = true,\n}: {\n images: HTMLImageElement[];\n isToggleCaption?: boolean;\n}) =>\n (() => {\n let isFullScreenEvents: any = null;\n\n const setFullScreen = (index: number) => {\n let canMove = true;\n\n overlayCarousel.events.EventMoveTo(index);\n\n setTimeout(() => fixedFullScreen.events.show(), 100);\n\n setTimeout(() => {\n overlayCarousel.events.EventResize();\n }, 100);\n\n
|
|
1
|
+
{"version":3,"file":"overlay.js","sources":["../../../../source/composite/carousel/elements/overlay.ts"],"sourcesContent":["import * as token from '@universityofmaryland/web-token-library';\nimport { ElementBuilder } from '@universityofmaryland/web-builder-library';\nimport { combineStyles } from '@universityofmaryland/web-utilities-library/styles';\nimport * as carouselElements from '../elements';\nimport { createLayoutImageContainer } from 'layout';\n\nconst CreateOverlaySlide = ({\n images,\n isToggleCaption,\n}: {\n images: HTMLImageElement[];\n isToggleCaption: boolean;\n}) =>\n images.map((image) => {\n const imageBlock = createLayoutImageContainer({ image, showCaption: true, isToggleCaption });\n\n const imageContainerModel = new ElementBuilder()\n .withClassName('carousel-overlay-container')\n .withStyles({\n element: {\n position: 'absolute',\n top: 0,\n left: 0,\n right: 0,\n bottom: 0,\n backgroundColor: token.color.gray.dark,\n\n '& > *': {\n width: '100%',\n height: '100%',\n display: 'flex',\n justifyContent: 'center',\n alignItems: 'center',\n },\n\n '& img': {\n objectFit: 'contain',\n maxHeight: '100%',\n maxWidth: '100%',\n },\n },\n })\n .withChild(imageBlock)\n .build();\n\n return imageContainerModel;\n });\n\nexport const createCompositeCarouselOverlay = ({\n images,\n isToggleCaption = true,\n}: {\n images: HTMLImageElement[];\n isToggleCaption?: boolean;\n}) =>\n (() => {\n let isFullScreenEvents: any = null;\n\n const setFullScreen = (index: number) => {\n let canMove = true;\n\n if (isFullScreenEvents) {\n window.removeEventListener('keyup', isFullScreenEvents);\n }\n\n overlayCarousel.events.EventMoveTo(index);\n\n setTimeout(() => fixedFullScreen.events.show(), 100);\n\n setTimeout(() => {\n overlayCarousel.events.EventResize();\n }, 100);\n\n const handleKeyup = (event: KeyboardEvent) => {\n if (!canMove) return;\n\n canMove = false;\n if (event.key === 'ArrowLeft') {\n overlayCarousel.events.EventSlideLeft();\n } else if (event.key === 'ArrowRight') {\n overlayCarousel.events.EventSlideRight();\n }\n\n setTimeout(() => {\n canMove = true;\n }, 700);\n };\n\n isFullScreenEvents = handleKeyup;\n window.addEventListener('keyup', handleKeyup);\n };\n\n const overlaySlideModels = CreateOverlaySlide({ images, isToggleCaption });\n const overlaySlides = overlaySlideModels.map((model) => model.element);\n const firstSlide = overlaySlideModels[0];\n const slideStyles = firstSlide ? firstSlide.styles : '';\n\n const overlayCarousel = carouselElements.image({\n slides: overlaySlides,\n maxHeight: (window.innerHeight / 10) * 8,\n });\n\n const fixedFullScreen = carouselElements.fullScreen({\n content: overlayCarousel.element,\n callback: () => {\n if (isFullScreenEvents) {\n window.removeEventListener('keyup', isFullScreenEvents);\n }\n },\n });\n\n return {\n element: fixedFullScreen.element,\n styles: combineStyles(\n slideStyles,\n overlayCarousel.styles,\n fixedFullScreen.styles,\n ),\n events: {\n setFullScreen,\n },\n };\n })();\n"],"names":["carouselElements.image","carouselElements.fullScreen"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAMA,MAAM,qBAAqB,CAAC;AAAA,EAC1B;AAAA,EACA;AACF,MAIE,OAAO,IAAI,CAAC,UAAU;AACpB,QAAM,aAAa,2BAA2B,EAAE,OAAO,aAAa,MAAM,iBAAiB;AAE3F,QAAM,sBAAsB,IAAI,eAAA,EAC7B,cAAc,4BAA4B,EAC1C,WAAW;AAAA,IACV,SAAS;AAAA,MACP,UAAU;AAAA,MACV,KAAK;AAAA,MACL,MAAM;AAAA,MACN,OAAO;AAAA,MACP,QAAQ;AAAA,MACR,iBAAiB,MAAM,MAAM,KAAK;AAAA,MAElC,SAAS;AAAA,QACP,OAAO;AAAA,QACP,QAAQ;AAAA,QACR,SAAS;AAAA,QACT,gBAAgB;AAAA,QAChB,YAAY;AAAA,MAAA;AAAA,MAGd,SAAS;AAAA,QACP,WAAW;AAAA,QACX,WAAW;AAAA,QACX,UAAU;AAAA,MAAA;AAAA,IACZ;AAAA,EACF,CACD,EACA,UAAU,UAAU,EACpB,MAAA;AAEH,SAAO;AACT,CAAC;AAEI,MAAM,iCAAiC,CAAC;AAAA,EAC7C;AAAA,EACA,kBAAkB;AACpB,OAIG,MAAM;AACL,MAAI,qBAA0B;AAE9B,QAAM,gBAAgB,CAAC,UAAkB;AACvC,QAAI,UAAU;AAEd,QAAI,oBAAoB;AACtB,aAAO,oBAAoB,SAAS,kBAAkB;AAAA,IACxD;AAEA,oBAAgB,OAAO,YAAY,KAAK;AAExC,eAAW,MAAM,gBAAgB,OAAO,KAAA,GAAQ,GAAG;AAEnD,eAAW,MAAM;AACf,sBAAgB,OAAO,YAAA;AAAA,IACzB,GAAG,GAAG;AAEN,UAAM,cAAc,CAAC,UAAyB;AAC5C,UAAI,CAAC,QAAS;AAEd,gBAAU;AACV,UAAI,MAAM,QAAQ,aAAa;AAC7B,wBAAgB,OAAO,eAAA;AAAA,MACzB,WAAW,MAAM,QAAQ,cAAc;AACrC,wBAAgB,OAAO,gBAAA;AAAA,MACzB;AAEA,iBAAW,MAAM;AACf,kBAAU;AAAA,MACZ,GAAG,GAAG;AAAA,IACR;AAEA,yBAAqB;AACrB,WAAO,iBAAiB,SAAS,WAAW;AAAA,EAC9C;AAEA,QAAM,qBAAqB,mBAAmB,EAAE,QAAQ,iBAAiB;AACzE,QAAM,gBAAgB,mBAAmB,IAAI,CAAC,UAAU,MAAM,OAAO;AACrE,QAAM,aAAa,mBAAmB,CAAC;AACvC,QAAM,cAAc,aAAa,WAAW,SAAS;AAErD,QAAM,kBAAkBA,6BAAuB;AAAA,IAC7C,QAAQ;AAAA,IACR,WAAY,OAAO,cAAc,KAAM;AAAA,EAAA,CACxC;AAED,QAAM,kBAAkBC,kCAA4B;AAAA,IAClD,SAAS,gBAAgB;AAAA,IACzB,UAAU,MAAM;AACd,UAAI,oBAAoB;AACtB,eAAO,oBAAoB,SAAS,kBAAkB;AAAA,MACxD;AAAA,IACF;AAAA,EAAA,CACD;AAED,SAAO;AAAA,IACL,SAAS,gBAAgB;AAAA,IACzB,QAAQ;AAAA,MACN;AAAA,MACA,gBAAgB;AAAA,MAChB,gBAAgB;AAAA,IAAA;AAAA,IAElB,QAAQ;AAAA,MACN;AAAA,IAAA;AAAA,EACF;AAEJ,GAAA;"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@universityofmaryland/web-elements-library",
|
|
3
|
-
"version": "1.7.
|
|
3
|
+
"version": "1.7.1",
|
|
4
4
|
"description": "UMD Web Elements",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"main": "dist/index.js",
|
|
@@ -39,10 +39,10 @@
|
|
|
39
39
|
},
|
|
40
40
|
"dependencies": {
|
|
41
41
|
"@types/postcss-js": "^4.0.4",
|
|
42
|
+
"@universityofmaryland/web-builder-library": "^1.0.4",
|
|
42
43
|
"@universityofmaryland/web-icons-library": "^1.0.4",
|
|
43
44
|
"@universityofmaryland/web-token-library": "^1.0.3",
|
|
44
45
|
"@universityofmaryland/web-utilities-library": "^1.0.6",
|
|
45
|
-
"@universityofmaryland/web-builder-library": "^1.0.4",
|
|
46
46
|
"@universityofmaryland/web-styles-library": "^1.8.14"
|
|
47
47
|
},
|
|
48
48
|
"peerDependencies": {
|