@alfalab/core-components-gallery 7.2.0-64f7d0ecb6f2b8b0910c54ea303807cf8837fcbc → 7.2.0
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/Component.d.ts +0 -4
- package/Component.js +9 -14
- package/Component.js.map +1 -1
- package/components/bottom-button/index.css +5 -5
- package/components/bottom-button/index.module.css.js +1 -1
- package/components/bottom-button/index.module.css.js.map +1 -1
- package/components/buttons/index.css +5 -5
- package/components/buttons/index.module.css.js +1 -1
- package/components/buttons/index.module.css.js.map +1 -1
- package/components/header/index.css +1 -1
- package/components/header/index.module.css.js +1 -1
- package/components/header/index.module.css.js.map +1 -1
- package/components/header-info-block/index.css +4 -4
- package/components/header-info-block/index.module.css.js +1 -1
- package/components/header-info-block/index.module.css.js.map +1 -1
- package/components/header-mobile/index.css +6 -6
- package/components/header-mobile/index.module.css.js +1 -1
- package/components/header-mobile/index.module.css.js.map +1 -1
- package/components/image-preview/index.css +17 -17
- package/components/image-preview/index.module.css.js +1 -1
- package/components/image-preview/index.module.css.js.map +1 -1
- package/components/image-viewer/component.d.ts +0 -1
- package/components/image-viewer/component.js +32 -25
- package/components/image-viewer/component.js.map +1 -1
- package/components/image-viewer/index.css +256 -123
- package/components/image-viewer/index.module.css.js +1 -1
- package/components/image-viewer/index.module.css.js.map +1 -1
- package/components/image-viewer/single.js +2 -1
- package/components/image-viewer/single.js.map +1 -1
- package/components/image-viewer/slide.d.ts +1 -0
- package/components/image-viewer/slide.js +17 -13
- package/components/image-viewer/slide.js.map +1 -1
- package/components/image-viewer/video/index.css +13 -8
- package/components/image-viewer/video/index.module.css.js +1 -1
- package/components/image-viewer/video/index.module.css.js.map +1 -1
- package/components/info-bar/index.css +3 -3
- package/components/info-bar/index.module.css.js +1 -1
- package/components/info-bar/index.module.css.js.map +1 -1
- package/components/navigation-bar/index.css +8 -8
- package/components/navigation-bar/index.module.css.js +1 -1
- package/components/navigation-bar/index.module.css.js.map +1 -1
- package/components/subtitles/index.css +3 -3
- package/components/subtitles/index.module.css.js +1 -1
- package/components/subtitles/index.module.css.js.map +1 -1
- package/cssm/Component.d.ts +0 -4
- package/cssm/Component.js +9 -14
- package/cssm/Component.js.map +1 -1
- package/cssm/components/image-viewer/component.d.ts +0 -1
- package/cssm/components/image-viewer/component.js +32 -25
- package/cssm/components/image-viewer/component.js.map +1 -1
- package/cssm/components/image-viewer/index.module.css +255 -122
- package/cssm/components/image-viewer/single.js +2 -1
- package/cssm/components/image-viewer/single.js.map +1 -1
- package/cssm/components/image-viewer/slide.d.ts +1 -0
- package/cssm/components/image-viewer/slide.js +17 -13
- package/cssm/components/image-viewer/slide.js.map +1 -1
- package/cssm/components/image-viewer/video/index.module.css +6 -1
- package/cssm/index.module.css +2 -0
- package/esm/Component.d.ts +0 -4
- package/esm/Component.js +9 -14
- package/esm/Component.js.map +1 -1
- package/esm/components/bottom-button/index.css +5 -5
- package/esm/components/bottom-button/index.module.css.js +1 -1
- package/esm/components/bottom-button/index.module.css.js.map +1 -1
- package/esm/components/buttons/index.css +5 -5
- package/esm/components/buttons/index.module.css.js +1 -1
- package/esm/components/buttons/index.module.css.js.map +1 -1
- package/esm/components/header/index.css +1 -1
- package/esm/components/header/index.module.css.js +1 -1
- package/esm/components/header/index.module.css.js.map +1 -1
- package/esm/components/header-info-block/index.css +4 -4
- package/esm/components/header-info-block/index.module.css.js +1 -1
- package/esm/components/header-info-block/index.module.css.js.map +1 -1
- package/esm/components/header-mobile/index.css +6 -6
- package/esm/components/header-mobile/index.module.css.js +1 -1
- package/esm/components/header-mobile/index.module.css.js.map +1 -1
- package/esm/components/image-preview/index.css +17 -17
- package/esm/components/image-preview/index.module.css.js +1 -1
- package/esm/components/image-preview/index.module.css.js.map +1 -1
- package/esm/components/image-viewer/component.d.ts +0 -1
- package/esm/components/image-viewer/component.js +33 -25
- package/esm/components/image-viewer/component.js.map +1 -1
- package/esm/components/image-viewer/index.css +256 -123
- package/esm/components/image-viewer/index.module.css.js +1 -1
- package/esm/components/image-viewer/index.module.css.js.map +1 -1
- package/esm/components/image-viewer/single.js +3 -2
- package/esm/components/image-viewer/single.js.map +1 -1
- package/esm/components/image-viewer/slide.d.ts +1 -0
- package/esm/components/image-viewer/slide.js +18 -14
- package/esm/components/image-viewer/slide.js.map +1 -1
- package/esm/components/image-viewer/video/index.css +13 -8
- package/esm/components/image-viewer/video/index.module.css.js +1 -1
- package/esm/components/image-viewer/video/index.module.css.js.map +1 -1
- package/esm/components/info-bar/index.css +3 -3
- package/esm/components/info-bar/index.module.css.js +1 -1
- package/esm/components/info-bar/index.module.css.js.map +1 -1
- package/esm/components/navigation-bar/index.css +8 -8
- package/esm/components/navigation-bar/index.module.css.js +1 -1
- package/esm/components/navigation-bar/index.module.css.js.map +1 -1
- package/esm/components/subtitles/index.css +3 -3
- package/esm/components/subtitles/index.module.css.js +1 -1
- package/esm/components/subtitles/index.module.css.js.map +1 -1
- package/esm/index.css +11 -9
- package/esm/index.module.css.js +1 -1
- package/esm/index.module.css.js.map +1 -1
- package/index.css +11 -9
- package/index.module.css.js +1 -1
- package/index.module.css.js.map +1 -1
- package/modern/Component.d.ts +0 -4
- package/modern/Component.js +9 -14
- package/modern/Component.js.map +1 -1
- package/modern/components/bottom-button/index.css +5 -5
- package/modern/components/bottom-button/index.module.css.js +1 -1
- package/modern/components/bottom-button/index.module.css.js.map +1 -1
- package/modern/components/buttons/index.css +5 -5
- package/modern/components/buttons/index.module.css.js +1 -1
- package/modern/components/buttons/index.module.css.js.map +1 -1
- package/modern/components/header/index.css +1 -1
- package/modern/components/header/index.module.css.js +1 -1
- package/modern/components/header/index.module.css.js.map +1 -1
- package/modern/components/header-info-block/index.css +4 -4
- package/modern/components/header-info-block/index.module.css.js +1 -1
- package/modern/components/header-info-block/index.module.css.js.map +1 -1
- package/modern/components/header-mobile/index.css +6 -6
- package/modern/components/header-mobile/index.module.css.js +1 -1
- package/modern/components/header-mobile/index.module.css.js.map +1 -1
- package/modern/components/image-preview/index.css +17 -17
- package/modern/components/image-preview/index.module.css.js +1 -1
- package/modern/components/image-preview/index.module.css.js.map +1 -1
- package/modern/components/image-viewer/component.d.ts +0 -1
- package/modern/components/image-viewer/component.js +23 -16
- package/modern/components/image-viewer/component.js.map +1 -1
- package/modern/components/image-viewer/index.css +256 -123
- package/modern/components/image-viewer/index.module.css.js +1 -1
- package/modern/components/image-viewer/index.module.css.js.map +1 -1
- package/modern/components/image-viewer/single.js +3 -2
- package/modern/components/image-viewer/single.js.map +1 -1
- package/modern/components/image-viewer/slide.d.ts +1 -0
- package/modern/components/image-viewer/slide.js +11 -7
- package/modern/components/image-viewer/slide.js.map +1 -1
- package/modern/components/image-viewer/video/index.css +13 -8
- package/modern/components/image-viewer/video/index.module.css.js +1 -1
- package/modern/components/image-viewer/video/index.module.css.js.map +1 -1
- package/modern/components/info-bar/index.css +3 -3
- package/modern/components/info-bar/index.module.css.js +1 -1
- package/modern/components/info-bar/index.module.css.js.map +1 -1
- package/modern/components/navigation-bar/index.css +8 -8
- package/modern/components/navigation-bar/index.module.css.js +1 -1
- package/modern/components/navigation-bar/index.module.css.js.map +1 -1
- package/modern/components/subtitles/index.css +3 -3
- package/modern/components/subtitles/index.module.css.js +1 -1
- package/modern/components/subtitles/index.module.css.js.map +1 -1
- package/modern/index.css +11 -9
- package/modern/index.module.css.js +1 -1
- package/modern/index.module.css.js.map +1 -1
- package/moderncssm/Component.d.ts +0 -4
- package/moderncssm/Component.js +9 -14
- package/moderncssm/Component.js.map +1 -1
- package/moderncssm/components/image-viewer/component.d.ts +0 -1
- package/moderncssm/components/image-viewer/component.js +23 -16
- package/moderncssm/components/image-viewer/component.js.map +1 -1
- package/moderncssm/components/image-viewer/index.module.css +232 -123
- package/moderncssm/components/image-viewer/single.js +3 -2
- package/moderncssm/components/image-viewer/single.js.map +1 -1
- package/moderncssm/components/image-viewer/slide.d.ts +1 -0
- package/moderncssm/components/image-viewer/slide.js +11 -7
- package/moderncssm/components/image-viewer/slide.js.map +1 -1
- package/moderncssm/components/image-viewer/video/index.module.css +6 -1
- package/moderncssm/index.module.css +2 -0
- package/package.json +16 -13
- package/src/Component.tsx +10 -27
- package/src/components/bottom-button/index.module.css +1 -1
- package/src/components/buttons/index.module.css +1 -1
- package/src/components/header/index.module.css +1 -1
- package/src/components/header-info-block/index.module.css +1 -1
- package/src/components/header-mobile/index.module.css +1 -1
- package/src/components/image-preview/index.module.css +1 -1
- package/src/components/image-viewer/component.tsx +66 -47
- package/src/components/image-viewer/index.module.css +228 -120
- package/src/components/image-viewer/single.tsx +14 -6
- package/src/components/image-viewer/slide.tsx +24 -5
- package/src/components/image-viewer/video/index.module.css +6 -2
- package/src/components/info-bar/index.module.css +1 -1
- package/src/components/navigation-bar/index.module.css +1 -1
- package/src/components/subtitles/index.module.css +1 -1
- package/src/index.module.css +3 -1
package/Component.d.ts
CHANGED
|
@@ -35,9 +35,5 @@ export type GalleryProps = {
|
|
|
35
35
|
* Дополнительный класс для попапа
|
|
36
36
|
*/
|
|
37
37
|
popupClassName?: string;
|
|
38
|
-
/**
|
|
39
|
-
* Обработчик при достижении конца элементов галереии
|
|
40
|
-
*/
|
|
41
|
-
handleChangeImages: (slideDirection: 'next' | 'prev') => void;
|
|
42
38
|
};
|
|
43
39
|
export declare const Gallery: FC<GalleryProps>;
|
package/Component.js
CHANGED
|
@@ -33,7 +33,7 @@ var Backdrop = function () { return null; };
|
|
|
33
33
|
var Gallery = function (_a) {
|
|
34
34
|
var _b, _c;
|
|
35
35
|
var _d, _e, _f;
|
|
36
|
-
var open = _a.open, images = _a.images, slideIndex = _a.slideIndex, _g = _a.initialSlide, initialSlide = _g === void 0 ? 0 : _g, _h = _a.loop, loop = _h === void 0 ? true : _h, onClose = _a.onClose, onSlideIndexChange = _a.onSlideIndexChange, popupClassName = _a.popupClassName
|
|
36
|
+
var open = _a.open, images = _a.images, slideIndex = _a.slideIndex, _g = _a.initialSlide, initialSlide = _g === void 0 ? 0 : _g, _h = _a.loop, loop = _h === void 0 ? true : _h, onClose = _a.onClose, onSlideIndexChange = _a.onSlideIndexChange, popupClassName = _a.popupClassName;
|
|
37
37
|
var currentSlideIndexState = React.useState(initialSlide);
|
|
38
38
|
var uncontrolled = slideIndex === undefined;
|
|
39
39
|
var _j = uncontrolled
|
|
@@ -61,30 +61,25 @@ var Gallery = function (_a) {
|
|
|
61
61
|
var lastIndex = images.length - 1;
|
|
62
62
|
var nextIndex = currentSlideIndex + 1;
|
|
63
63
|
if (nextIndex >= images.length) {
|
|
64
|
-
if (handleChangeImages) {
|
|
65
|
-
handleChangeImages('next');
|
|
66
|
-
return;
|
|
67
|
-
}
|
|
68
64
|
nextIndex = loop ? 0 : lastIndex;
|
|
69
65
|
}
|
|
70
66
|
slideTo(nextIndex);
|
|
71
|
-
}, [images.length, currentSlideIndex, slideTo
|
|
67
|
+
}, [images.length, loop, currentSlideIndex, slideTo]);
|
|
72
68
|
var slidePrev = React.useCallback(function () {
|
|
73
69
|
var lastIndex = images.length - 1;
|
|
74
70
|
var nextIndex = currentSlideIndex - 1;
|
|
75
71
|
if (nextIndex < 0) {
|
|
76
|
-
if (handleChangeImages) {
|
|
77
|
-
handleChangeImages('prev');
|
|
78
|
-
return;
|
|
79
|
-
}
|
|
80
72
|
nextIndex = loop ? lastIndex : 0;
|
|
81
73
|
}
|
|
82
74
|
slideTo(nextIndex);
|
|
83
|
-
}, [images.length, currentSlideIndex, slideTo
|
|
75
|
+
}, [images.length, loop, currentSlideIndex, slideTo]);
|
|
84
76
|
var setImageMeta = React.useCallback(function (meta, index) {
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
77
|
+
setImagesMeta(function (prevImagesMeta) {
|
|
78
|
+
var nextImagesMeta = prevImagesMeta.slice();
|
|
79
|
+
nextImagesMeta[index] = meta;
|
|
80
|
+
return nextImagesMeta;
|
|
81
|
+
});
|
|
82
|
+
}, []);
|
|
88
83
|
var handleBottomButtonClick = React.useCallback(function (e) {
|
|
89
84
|
e.stopPropagation();
|
|
90
85
|
if (bottomButton === null || bottomButton === void 0 ? void 0 : bottomButton.onClick) {
|
package/Component.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Component.js","sources":["src/Component.tsx"],"sourcesContent":["import React, { type FC, type MouseEvent, useCallback, useEffect, useState } from 'react';\nimport cn from 'classnames';\nimport type SwiperCore from 'swiper';\n\nimport { BaseModal } from '@alfalab/core-components-base-modal';\nimport { useIsDesktop } from '@alfalab/core-components-mq';\n\nimport { BottomButton } from './components/bottom-button';\nimport { Single } from './components/image-viewer/single';\nimport { Subtitles } from './components/subtitles';\nimport { Header, HeaderMobile, ImageViewer, InfoBar, NavigationBar } from './components';\nimport { SWIPE_THRESHOLD } from './constants';\nimport { GalleryContext } from './context';\nimport { type GalleryImage, type ImageMeta } from './types';\n\nimport styles from './index.module.css';\n\nexport type GalleryProps = {\n /**\n * Управление видимостью\n */\n open: boolean;\n\n /**\n * Массив изображений\n */\n images: GalleryImage[];\n\n /**\n * Зациклить галерею\n * @default true\n */\n loop?: boolean;\n\n /**\n * Индекс открытого изображение\n * @default 0\n */\n initialSlide?: number;\n\n /**\n * Обработчик закрытия\n */\n onClose: () => void;\n\n /**\n * Индекс текущего изображения\n */\n slideIndex?: number;\n\n /**\n * Обработчик изменения текущего изображения\n */\n onSlideIndexChange?: (index: number) => void;\n\n /**\n * Дополнительный класс для попапа\n */\n popupClassName?: string;\n\n /**\n * Обработчик при достижении конца элементов галереии\n */\n handleChangeImages: (slideDirection: 'next' | 'prev') => void;\n};\n\nconst DEFAULT_FULL_SCREEN = false;\nconst DEFAULT_MUTED_VIDEO = true;\nconst DEFAULT_PLAYING_VIDEO = true;\nconst DEFAULT_HIDE_NAVIGATION = false;\n\nconst Backdrop = () => null;\n\nexport const Gallery: FC<GalleryProps> = ({\n open,\n images,\n slideIndex,\n initialSlide = 0,\n loop = true,\n onClose,\n onSlideIndexChange,\n popupClassName,\n handleChangeImages,\n}) => {\n const currentSlideIndexState = useState(initialSlide);\n const uncontrolled = slideIndex === undefined;\n const [currentSlideIndex, setCurrentSlideIndex] = uncontrolled\n ? currentSlideIndexState\n : [slideIndex, onSlideIndexChange];\n\n const [swiper, setSwiper] = useState<SwiperCore>();\n const [imagesMeta, setImagesMeta] = useState<ImageMeta[]>([]);\n const [fullScreen, setFullScreen] = useState<boolean>(DEFAULT_FULL_SCREEN);\n const [mutedVideo, setMutedVideo] = useState<boolean>(DEFAULT_MUTED_VIDEO);\n const [playingVideo, setPlayingVideo] = useState<boolean>(DEFAULT_PLAYING_VIDEO);\n const [hideNavigation, setHideNavigation] = useState<boolean>(DEFAULT_HIDE_NAVIGATION);\n\n const isDesktop = useIsDesktop();\n\n const isCurrentVideo = !!imagesMeta[currentSlideIndex]?.player?.current;\n\n const bottomButton = images[currentSlideIndex]?.bottomButton;\n\n const slideTo = useCallback(\n (index: number) => {\n if (images[index]) {\n setCurrentSlideIndex?.(index);\n\n if (swiper) {\n setPlayingVideo(true);\n swiper.slideTo(index);\n }\n }\n },\n [images, setCurrentSlideIndex, swiper],\n );\n\n const slideNext = useCallback(() => {\n const lastIndex = images.length - 1;\n\n let nextIndex = currentSlideIndex + 1;\n\n if (nextIndex >= images.length) {\n if (handleChangeImages) {\n handleChangeImages('next');\n\n return;\n }\n\n nextIndex = loop ? 0 : lastIndex;\n }\n\n slideTo(nextIndex);\n }, [images.length, currentSlideIndex, slideTo, handleChangeImages, loop]);\n\n const slidePrev = useCallback(() => {\n const lastIndex = images.length - 1;\n\n let nextIndex = currentSlideIndex - 1;\n\n if (nextIndex < 0) {\n if (handleChangeImages) {\n handleChangeImages('prev');\n\n return;\n }\n\n nextIndex = loop ? lastIndex : 0;\n }\n\n slideTo(nextIndex);\n }, [images.length, currentSlideIndex, slideTo, handleChangeImages, loop]);\n\n const setImageMeta = useCallback(\n (meta: ImageMeta, index: number) => {\n imagesMeta[index] = meta;\n\n setImagesMeta(imagesMeta.slice());\n },\n [imagesMeta],\n );\n\n const handleBottomButtonClick = useCallback(\n (e: MouseEvent) => {\n e.stopPropagation();\n if (bottomButton?.onClick) {\n bottomButton.onClick(e);\n }\n },\n [bottomButton],\n );\n\n const handleClose = useCallback(() => {\n onClose();\n\n if (uncontrolled) {\n setCurrentSlideIndex?.(initialSlide);\n }\n\n setFullScreen(false);\n }, [initialSlide, onClose, setCurrentSlideIndex, uncontrolled]);\n\n const handleEscapeKeyDown = () => {\n if (fullScreen) {\n setFullScreen(false);\n } else {\n handleClose();\n }\n };\n\n const handleKeyDown = useCallback(\n (event: KeyboardEvent) => {\n if (!open || fullScreen) {\n return;\n }\n\n switch (event.key) {\n case 'ArrowLeft':\n slidePrev();\n break;\n case 'ArrowRight':\n slideNext();\n break;\n }\n },\n [fullScreen, open, slideNext, slidePrev],\n );\n\n const onUnmount = useCallback(() => {\n setPlayingVideo(DEFAULT_PLAYING_VIDEO);\n setMutedVideo(DEFAULT_MUTED_VIDEO);\n }, [setPlayingVideo]);\n\n useEffect(() => {\n if (!uncontrolled && !swiper?.destroyed) {\n swiper?.slideTo(currentSlideIndex);\n }\n }, [uncontrolled, currentSlideIndex, swiper]);\n\n useEffect(() => {\n document.addEventListener('keydown', handleKeyDown);\n\n return () => {\n document.removeEventListener('keydown', handleKeyDown);\n };\n }, [handleKeyDown]);\n\n useEffect(() => {\n let startY: number;\n const abortController = new AbortController();\n const { signal } = abortController;\n\n document.addEventListener(\n 'touchstart',\n (e) => {\n startY = e.touches[0].clientY;\n },\n { signal },\n );\n\n document.addEventListener(\n 'touchmove',\n (e) => {\n const endY = e.changedTouches[0].clientY;\n const deltaY = startY - endY;\n\n // Если свайп вниз, закрываем галерею\n if (deltaY < SWIPE_THRESHOLD) {\n onClose();\n }\n },\n { signal },\n );\n\n return () => {\n abortController.abort();\n };\n }, [onClose]);\n\n const singleSlide = images.length === 1;\n\n const showNavigationBar = !singleSlide && !fullScreen;\n\n // eslint-disable-next-line react/jsx-no-constructed-context-values\n const galleryContext: GalleryContext = {\n view: isDesktop ? 'desktop' : 'mobile',\n singleSlide,\n currentSlideIndex,\n images,\n imagesMeta,\n fullScreen,\n initialSlide: uncontrolled ? initialSlide : currentSlideIndex,\n setFullScreen,\n playingVideo,\n setPlayingVideo,\n mutedVideo,\n setMutedVideo,\n hideNavigation,\n setHideNavigation,\n setImageMeta,\n slideNext,\n slidePrev,\n slideTo,\n getSwiper: () => swiper,\n setSwiper,\n onClose: handleClose,\n setCurrentSlideIndex,\n getCurrentImage: () => images[currentSlideIndex],\n getCurrentImageMeta: () => imagesMeta[currentSlideIndex],\n };\n\n return (\n <GalleryContext.Provider value={galleryContext}>\n <BaseModal\n open={open}\n className={cn(styles.modal, popupClassName)}\n onEscapeKeyDown={handleEscapeKeyDown}\n Backdrop={Backdrop}\n onUnmount={onUnmount}\n >\n <div\n className={cn(styles.container, {\n [styles.mobile]: !isDesktop,\n })}\n >\n {isDesktop ? <Header /> : <HeaderMobile />}\n {images.length === 1 ? <Single /> : <ImageViewer />}\n <nav\n className={cn({\n [styles.navigationVideo]: isCurrentVideo && !isDesktop,\n [styles.hide]: showNavigationBar && hideNavigation && !isDesktop,\n [styles.hideInfo]: !showNavigationBar && hideNavigation && !isDesktop,\n })}\n >\n {!isDesktop && <Subtitles />}\n {isCurrentVideo && !isDesktop && bottomButton && (\n <BottomButton\n bottomButton={bottomButton}\n onClick={handleBottomButtonClick}\n className={styles.bottomButton}\n />\n )}\n\n {showNavigationBar && <NavigationBar />}\n {!isDesktop && <InfoBar />}\n </nav>\n </div>\n </BaseModal>\n </GalleryContext.Provider>\n );\n};\n"],"names":["useState","useIsDesktop","useCallback","useEffect","SWIPE_THRESHOLD","React","GalleryContext","BaseModal","cn","styles","Header","HeaderMobile","Single","ImageViewer","Subtitles","BottomButton","NavigationBar","InfoBar"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;AAkEA,IAAM,mBAAmB,GAAG,KAAK;AACjC,IAAM,mBAAmB,GAAG,IAAI;AAChC,IAAM,qBAAqB,GAAG,IAAI;AAClC,IAAM,uBAAuB,GAAG,KAAK;AAErC,IAAM,QAAQ,GAAG,YAAA,EAAM,OAAA,IAAI,CAAA,EAAA;AAEpB,IAAM,OAAO,GAAqB,UAAC,EAUzC,EAAA;;;AATG,IAAA,IAAA,IAAI,GAAA,EAAA,CAAA,IAAA,EACJ,MAAM,GAAA,EAAA,CAAA,MAAA,EACN,UAAU,GAAA,EAAA,CAAA,UAAA,EACV,EAAA,GAAA,EAAA,CAAA,YAAgB,EAAhB,YAAY,GAAG,EAAA,KAAA,MAAA,GAAA,CAAC,KAAA,EAChB,EAAA,GAAA,EAAA,CAAA,IAAW,EAAX,IAAI,GAAG,EAAA,KAAA,MAAA,GAAA,IAAI,GAAA,EAAA,EACX,OAAO,GAAA,EAAA,CAAA,OAAA,EACP,kBAAkB,GAAA,EAAA,CAAA,kBAAA,EAClB,cAAc,GAAA,EAAA,CAAA,cAAA,EACd,kBAAkB,GAAA,EAAA,CAAA,kBAAA;AAElB,IAAA,IAAM,sBAAsB,GAAGA,cAAQ,CAAC,YAAY,CAAC;AACrD,IAAA,IAAM,YAAY,GAAG,UAAU,KAAK,SAAS;AACvC,IAAA,IAAA,KAA4C;AAC9C,UAAE;AACF,UAAE,CAAC,UAAU,EAAE,kBAAkB,CAAC,EAF/B,iBAAiB,GAAA,EAAA,CAAA,CAAA,CAAA,EAAE,oBAAoB,GAAA,EAAA,CAAA,CAAA,CAER;IAEhC,IAAA,EAAA,GAAsBA,cAAQ,EAAc,EAA3C,MAAM,GAAA,EAAA,CAAA,CAAA,CAAA,EAAE,SAAS,GAAA,EAAA,CAAA,CAAA,CAA0B;IAC5C,IAAA,EAAA,GAA8BA,cAAQ,CAAc,EAAE,CAAC,EAAtD,UAAU,GAAA,EAAA,CAAA,CAAA,CAAA,EAAE,aAAa,GAAA,EAAA,CAAA,CAAA,CAA6B;IACvD,IAAA,EAAA,GAA8BA,cAAQ,CAAU,mBAAmB,CAAC,EAAnE,UAAU,GAAA,EAAA,CAAA,CAAA,CAAA,EAAE,aAAa,GAAA,EAAA,CAAA,CAAA,CAA0C;IACpE,IAAA,EAAA,GAA8BA,cAAQ,CAAU,mBAAmB,CAAC,EAAnE,UAAU,GAAA,EAAA,CAAA,CAAA,CAAA,EAAE,aAAa,GAAA,EAAA,CAAA,CAAA,CAA0C;IACpE,IAAA,EAAA,GAAkCA,cAAQ,CAAU,qBAAqB,CAAC,EAAzE,YAAY,GAAA,EAAA,CAAA,CAAA,CAAA,EAAE,eAAe,GAAA,EAAA,CAAA,CAAA,CAA4C;IAC1E,IAAA,EAAA,GAAsCA,cAAQ,CAAU,uBAAuB,CAAC,EAA/E,cAAc,GAAA,EAAA,CAAA,CAAA,CAAA,EAAE,iBAAiB,GAAA,EAAA,CAAA,CAAA,CAA8C;AAEtF,IAAA,IAAM,SAAS,GAAGC,6BAAY,EAAE;AAEhC,IAAA,IAAM,cAAc,GAAG,CAAC,EAAC,MAAA,CAAA,EAAA,GAAA,UAAU,CAAC,iBAAiB,CAAC,MAAE,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,MAAA,GAAA,EAAA,CAAA,MAAM,MAAE,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,MAAA,GAAA,EAAA,CAAA,OAAO,CAAA;IAEvE,IAAM,YAAY,GAAG,CAAA,EAAA,GAAA,MAAM,CAAC,iBAAiB,CAAC,MAAE,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,MAAA,GAAA,EAAA,CAAA,YAAY;AAE5D,IAAA,IAAM,OAAO,GAAGC,iBAAW,CACvB,UAAC,KAAa,EAAA;AACV,QAAA,IAAI,MAAM,CAAC,KAAK,CAAC,EAAE;AACf,YAAA,oBAAoB,aAApB,oBAAoB,KAAA,MAAA,GAAA,MAAA,GAApB,oBAAoB,CAAG,KAAK,CAAC;YAE7B,IAAI,MAAM,EAAE;gBACR,eAAe,CAAC,IAAI,CAAC;AACrB,gBAAA,MAAM,CAAC,OAAO,CAAC,KAAK,CAAC;;;KAGhC,EACD,CAAC,MAAM,EAAE,oBAAoB,EAAE,MAAM,CAAC,CACzC;IAED,IAAM,SAAS,GAAGA,iBAAW,CAAC,YAAA;AAC1B,QAAA,IAAM,SAAS,GAAG,MAAM,CAAC,MAAM,GAAG,CAAC;AAEnC,QAAA,IAAI,SAAS,GAAG,iBAAiB,GAAG,CAAC;AAErC,QAAA,IAAI,SAAS,IAAI,MAAM,CAAC,MAAM,EAAE;YAC5B,IAAI,kBAAkB,EAAE;gBACpB,kBAAkB,CAAC,MAAM,CAAC;gBAE1B;;YAGJ,SAAS,GAAG,IAAI,GAAG,CAAC,GAAG,SAAS;;QAGpC,OAAO,CAAC,SAAS,CAAC;AACtB,KAAC,EAAE,CAAC,MAAM,CAAC,MAAM,EAAE,iBAAiB,EAAE,OAAO,EAAE,kBAAkB,EAAE,IAAI,CAAC,CAAC;IAEzE,IAAM,SAAS,GAAGA,iBAAW,CAAC,YAAA;AAC1B,QAAA,IAAM,SAAS,GAAG,MAAM,CAAC,MAAM,GAAG,CAAC;AAEnC,QAAA,IAAI,SAAS,GAAG,iBAAiB,GAAG,CAAC;AAErC,QAAA,IAAI,SAAS,GAAG,CAAC,EAAE;YACf,IAAI,kBAAkB,EAAE;gBACpB,kBAAkB,CAAC,MAAM,CAAC;gBAE1B;;YAGJ,SAAS,GAAG,IAAI,GAAG,SAAS,GAAG,CAAC;;QAGpC,OAAO,CAAC,SAAS,CAAC;AACtB,KAAC,EAAE,CAAC,MAAM,CAAC,MAAM,EAAE,iBAAiB,EAAE,OAAO,EAAE,kBAAkB,EAAE,IAAI,CAAC,CAAC;AAEzE,IAAA,IAAM,YAAY,GAAGA,iBAAW,CAC5B,UAAC,IAAe,EAAE,KAAa,EAAA;AAC3B,QAAA,UAAU,CAAC,KAAK,CAAC,GAAG,IAAI;AAExB,QAAA,aAAa,CAAC,UAAU,CAAC,KAAK,EAAE,CAAC;AACrC,KAAC,EACD,CAAC,UAAU,CAAC,CACf;AAED,IAAA,IAAM,uBAAuB,GAAGA,iBAAW,CACvC,UAAC,CAAa,EAAA;QACV,CAAC,CAAC,eAAe,EAAE;QACnB,IAAI,YAAY,aAAZ,YAAY,KAAA,MAAA,GAAA,MAAA,GAAZ,YAAY,CAAE,OAAO,EAAE;AACvB,YAAA,YAAY,CAAC,OAAO,CAAC,CAAC,CAAC;;AAE/B,KAAC,EACD,CAAC,YAAY,CAAC,CACjB;IAED,IAAM,WAAW,GAAGA,iBAAW,CAAC,YAAA;AAC5B,QAAA,OAAO,EAAE;QAET,IAAI,YAAY,EAAE;AACd,YAAA,oBAAoB,aAApB,oBAAoB,KAAA,MAAA,GAAA,MAAA,GAApB,oBAAoB,CAAG,YAAY,CAAC;;QAGxC,aAAa,CAAC,KAAK,CAAC;KACvB,EAAE,CAAC,YAAY,EAAE,OAAO,EAAE,oBAAoB,EAAE,YAAY,CAAC,CAAC;AAE/D,IAAA,IAAM,mBAAmB,GAAG,YAAA;QACxB,IAAI,UAAU,EAAE;YACZ,aAAa,CAAC,KAAK,CAAC;;aACjB;AACH,YAAA,WAAW,EAAE;;AAErB,KAAC;AAED,IAAA,IAAM,aAAa,GAAGA,iBAAW,CAC7B,UAAC,KAAoB,EAAA;AACjB,QAAA,IAAI,CAAC,IAAI,IAAI,UAAU,EAAE;YACrB;;AAGJ,QAAA,QAAQ,KAAK,CAAC,GAAG;AACb,YAAA,KAAK,WAAW;AACZ,gBAAA,SAAS,EAAE;gBACX;AACJ,YAAA,KAAK,YAAY;AACb,gBAAA,SAAS,EAAE;gBACX;;KAEX,EACD,CAAC,UAAU,EAAE,IAAI,EAAE,SAAS,EAAE,SAAS,CAAC,CAC3C;IAED,IAAM,SAAS,GAAGA,iBAAW,CAAC,YAAA;QAC1B,eAAe,CAAC,qBAAqB,CAAC;QACtC,aAAa,CAAC,mBAAmB,CAAC;AACtC,KAAC,EAAE,CAAC,eAAe,CAAC,CAAC;AAErB,IAAAC,eAAS,CAAC,YAAA;AACN,QAAA,IAAI,CAAC,YAAY,IAAI,EAAC,MAAM,KAAA,IAAA,IAAN,MAAM,KAAA,MAAA,GAAA,MAAA,GAAN,MAAM,CAAE,SAAS,CAAA,EAAE;YACrC,MAAM,KAAA,IAAA,IAAN,MAAM,KAAN,MAAA,GAAA,MAAA,GAAA,MAAM,CAAE,OAAO,CAAC,iBAAiB,CAAC;;KAEzC,EAAE,CAAC,YAAY,EAAE,iBAAiB,EAAE,MAAM,CAAC,CAAC;AAE7C,IAAAA,eAAS,CAAC,YAAA;AACN,QAAA,QAAQ,CAAC,gBAAgB,CAAC,SAAS,EAAE,aAAa,CAAC;QAEnD,OAAO,YAAA;AACH,YAAA,QAAQ,CAAC,mBAAmB,CAAC,SAAS,EAAE,aAAa,CAAC;AAC1D,SAAC;AACL,KAAC,EAAE,CAAC,aAAa,CAAC,CAAC;AAEnB,IAAAA,eAAS,CAAC,YAAA;AACN,QAAA,IAAI,MAAc;AAClB,QAAA,IAAM,eAAe,GAAG,IAAI,eAAe,EAAE;AACrC,QAAA,IAAA,MAAM,GAAK,eAAe,CAAA,MAApB;AAEd,QAAA,QAAQ,CAAC,gBAAgB,CACrB,YAAY,EACZ,UAAC,CAAC,EAAA;YACE,MAAM,GAAG,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,OAAO;AACjC,SAAC,EACD,EAAE,MAAM,EAAA,MAAA,EAAE,CACb;AAED,QAAA,QAAQ,CAAC,gBAAgB,CACrB,WAAW,EACX,UAAC,CAAC,EAAA;YACE,IAAM,IAAI,GAAG,CAAC,CAAC,cAAc,CAAC,CAAC,CAAC,CAAC,OAAO;AACxC,YAAA,IAAM,MAAM,GAAG,MAAM,GAAG,IAAI;;AAG5B,YAAA,IAAI,MAAM,GAAGC,yBAAe,EAAE;AAC1B,gBAAA,OAAO,EAAE;;AAEjB,SAAC,EACD,EAAE,MAAM,EAAA,MAAA,EAAE,CACb;QAED,OAAO,YAAA;YACH,eAAe,CAAC,KAAK,EAAE;AAC3B,SAAC;AACL,KAAC,EAAE,CAAC,OAAO,CAAC,CAAC;AAEb,IAAA,IAAM,WAAW,GAAG,MAAM,CAAC,MAAM,KAAK,CAAC;AAEvC,IAAA,IAAM,iBAAiB,GAAG,CAAC,WAAW,IAAI,CAAC,UAAU;;AAGrD,IAAA,IAAM,cAAc,GAAmB;QACnC,IAAI,EAAE,SAAS,GAAG,SAAS,GAAG,QAAQ;AACtC,QAAA,WAAW,EAAA,WAAA;AACX,QAAA,iBAAiB,EAAA,iBAAA;AACjB,QAAA,MAAM,EAAA,MAAA;AACN,QAAA,UAAU,EAAA,UAAA;AACV,QAAA,UAAU,EAAA,UAAA;QACV,YAAY,EAAE,YAAY,GAAG,YAAY,GAAG,iBAAiB;AAC7D,QAAA,aAAa,EAAA,aAAA;AACb,QAAA,YAAY,EAAA,YAAA;AACZ,QAAA,eAAe,EAAA,eAAA;AACf,QAAA,UAAU,EAAA,UAAA;AACV,QAAA,aAAa,EAAA,aAAA;AACb,QAAA,cAAc,EAAA,cAAA;AACd,QAAA,iBAAiB,EAAA,iBAAA;AACjB,QAAA,YAAY,EAAA,YAAA;AACZ,QAAA,SAAS,EAAA,SAAA;AACT,QAAA,SAAS,EAAA,SAAA;AACT,QAAA,OAAO,EAAA,OAAA;AACP,QAAA,SAAS,EAAE,YAAA,EAAM,OAAA,MAAM,GAAA;AACvB,QAAA,SAAS,EAAA,SAAA;AACT,QAAA,OAAO,EAAE,WAAW;AACpB,QAAA,oBAAoB,EAAA,oBAAA;QACpB,eAAe,EAAE,cAAM,OAAA,MAAM,CAAC,iBAAiB,CAAC,GAAA;QAChD,mBAAmB,EAAE,cAAM,OAAA,UAAU,CAAC,iBAAiB,CAAC,GAAA;KAC3D;IAED,QACIC,qCAACC,sBAAc,CAAC,QAAQ,EAAC,EAAA,KAAK,EAAE,cAAc,EAAA;QAC1CD,sBAAC,CAAA,aAAA,CAAAE,iCAAS,EACN,EAAA,IAAI,EAAE,IAAI,EACV,SAAS,EAAEC,mBAAE,CAACC,YAAM,CAAC,KAAK,EAAE,cAAc,CAAC,EAC3C,eAAe,EAAE,mBAAmB,EACpC,QAAQ,EAAE,QAAQ,EAClB,SAAS,EAAE,SAAS,EAAA;AAEpB,YAAAJ,sBAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EACI,SAAS,EAAEG,mBAAE,CAACC,YAAM,CAAC,SAAS,GAAA,EAAA,GAAA,EAAA;AAC1B,oBAAA,EAAA,CAACA,YAAM,CAAC,MAAM,CAAA,GAAG,CAAC,SAAS;AAC7B,oBAAA,EAAA,EAAA,EAAA;gBAED,SAAS,GAAGJ,sBAAC,CAAA,aAAA,CAAAK,gBAAM,EAAG,IAAA,CAAA,GAAGL,sBAAC,CAAA,aAAA,CAAAM,wBAAY,EAAG,IAAA,CAAA;AACzC,gBAAA,MAAM,CAAC,MAAM,KAAK,CAAC,GAAGN,sBAAC,CAAA,aAAA,CAAAO,aAAM,OAAG,GAAGP,sBAAA,CAAA,aAAA,CAACQ,qBAAW,EAAG,IAAA,CAAA;gBACnDR,sBACI,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,SAAS,EAAEG,mBAAE,EAAA,EAAA,GAAA,EAAA;AACT,wBAAA,EAAA,CAACC,YAAM,CAAC,eAAe,IAAG,cAAc,IAAI,CAAC,SAAS;wBACtD,EAAC,CAAAA,YAAM,CAAC,IAAI,CAAA,GAAG,iBAAiB,IAAI,cAAc,IAAI,CAAC,SAAS;wBAChE,EAAC,CAAAA,YAAM,CAAC,QAAQ,CAAG,GAAA,CAAC,iBAAiB,IAAI,cAAc,IAAI,CAAC,SAAS;AACvE,wBAAA,EAAA,EAAA,EAAA;AAED,oBAAA,CAAC,SAAS,IAAIJ,sBAAC,CAAA,aAAA,CAAAS,eAAS,EAAG,IAAA,CAAA;oBAC3B,cAAc,IAAI,CAAC,SAAS,IAAI,YAAY,KACzCT,sBAAA,CAAA,aAAA,CAACU,wBAAY,EAAA,EACT,YAAY,EAAE,YAAY,EAC1B,OAAO,EAAE,uBAAuB,EAChC,SAAS,EAAEN,YAAM,CAAC,YAAY,EAAA,CAChC,CACL;oBAEA,iBAAiB,IAAIJ,sBAAC,CAAA,aAAA,CAAAW,yBAAa,EAAG,IAAA,CAAA;oBACtC,CAAC,SAAS,IAAIX,sBAAA,CAAA,aAAA,CAACY,mBAAO,EAAA,IAAA,CAAG,CACxB,CACJ,CACE,CACU;AAElC;;;;"}
|
|
1
|
+
{"version":3,"file":"Component.js","sources":["src/Component.tsx"],"sourcesContent":["import React, { type FC, type MouseEvent, useCallback, useEffect, useState } from 'react';\nimport cn from 'classnames';\nimport type SwiperCore from 'swiper';\n\nimport { BaseModal } from '@alfalab/core-components-base-modal';\nimport { useIsDesktop } from '@alfalab/core-components-mq';\n\nimport { BottomButton } from './components/bottom-button';\nimport { Single } from './components/image-viewer/single';\nimport { Subtitles } from './components/subtitles';\nimport { Header, HeaderMobile, ImageViewer, InfoBar, NavigationBar } from './components';\nimport { SWIPE_THRESHOLD } from './constants';\nimport { GalleryContext } from './context';\nimport { type GalleryImage, type ImageMeta } from './types';\n\nimport styles from './index.module.css';\n\nexport type GalleryProps = {\n /**\n * Управление видимостью\n */\n open: boolean;\n\n /**\n * Массив изображений\n */\n images: GalleryImage[];\n\n /**\n * Зациклить галерею\n * @default true\n */\n loop?: boolean;\n\n /**\n * Индекс открытого изображение\n * @default 0\n */\n initialSlide?: number;\n\n /**\n * Обработчик закрытия\n */\n onClose: () => void;\n\n /**\n * Индекс текущего изображения\n */\n slideIndex?: number;\n\n /**\n * Обработчик изменения текущего изображения\n */\n onSlideIndexChange?: (index: number) => void;\n\n /**\n * Дополнительный класс для попапа\n */\n popupClassName?: string;\n};\n\nconst DEFAULT_FULL_SCREEN = false;\nconst DEFAULT_MUTED_VIDEO = true;\nconst DEFAULT_PLAYING_VIDEO = true;\nconst DEFAULT_HIDE_NAVIGATION = false;\n\nconst Backdrop = () => null;\n\nexport const Gallery: FC<GalleryProps> = ({\n open,\n images,\n slideIndex,\n initialSlide = 0,\n loop = true,\n onClose,\n onSlideIndexChange,\n popupClassName,\n}) => {\n const currentSlideIndexState = useState(initialSlide);\n const uncontrolled = slideIndex === undefined;\n const [currentSlideIndex, setCurrentSlideIndex] = uncontrolled\n ? currentSlideIndexState\n : [slideIndex, onSlideIndexChange];\n\n const [swiper, setSwiper] = useState<SwiperCore>();\n const [imagesMeta, setImagesMeta] = useState<ImageMeta[]>([]);\n const [fullScreen, setFullScreen] = useState<boolean>(DEFAULT_FULL_SCREEN);\n const [mutedVideo, setMutedVideo] = useState<boolean>(DEFAULT_MUTED_VIDEO);\n const [playingVideo, setPlayingVideo] = useState<boolean>(DEFAULT_PLAYING_VIDEO);\n const [hideNavigation, setHideNavigation] = useState<boolean>(DEFAULT_HIDE_NAVIGATION);\n\n const isDesktop = useIsDesktop();\n\n const isCurrentVideo = !!imagesMeta[currentSlideIndex]?.player?.current;\n\n const bottomButton = images[currentSlideIndex]?.bottomButton;\n\n const slideTo = useCallback(\n (index: number) => {\n if (images[index]) {\n setCurrentSlideIndex?.(index);\n\n if (swiper) {\n setPlayingVideo(true);\n swiper.slideTo(index);\n }\n }\n },\n [images, setCurrentSlideIndex, swiper],\n );\n\n const slideNext = useCallback(() => {\n const lastIndex = images.length - 1;\n\n let nextIndex = currentSlideIndex + 1;\n\n if (nextIndex >= images.length) {\n nextIndex = loop ? 0 : lastIndex;\n }\n\n slideTo(nextIndex);\n }, [images.length, loop, currentSlideIndex, slideTo]);\n\n const slidePrev = useCallback(() => {\n const lastIndex = images.length - 1;\n\n let nextIndex = currentSlideIndex - 1;\n\n if (nextIndex < 0) {\n nextIndex = loop ? lastIndex : 0;\n }\n\n slideTo(nextIndex);\n }, [images.length, loop, currentSlideIndex, slideTo]);\n\n const setImageMeta = useCallback((meta: ImageMeta, index: number) => {\n setImagesMeta((prevImagesMeta) => {\n const nextImagesMeta = prevImagesMeta.slice();\n\n nextImagesMeta[index] = meta;\n\n return nextImagesMeta;\n });\n }, []);\n\n const handleBottomButtonClick = useCallback(\n (e: MouseEvent) => {\n e.stopPropagation();\n if (bottomButton?.onClick) {\n bottomButton.onClick(e);\n }\n },\n [bottomButton],\n );\n\n const handleClose = useCallback(() => {\n onClose();\n\n if (uncontrolled) {\n setCurrentSlideIndex?.(initialSlide);\n }\n\n setFullScreen(false);\n }, [initialSlide, onClose, setCurrentSlideIndex, uncontrolled]);\n\n const handleEscapeKeyDown = () => {\n if (fullScreen) {\n setFullScreen(false);\n } else {\n handleClose();\n }\n };\n\n const handleKeyDown = useCallback(\n (event: KeyboardEvent) => {\n if (!open || fullScreen) {\n return;\n }\n\n switch (event.key) {\n case 'ArrowLeft':\n slidePrev();\n break;\n case 'ArrowRight':\n slideNext();\n break;\n }\n },\n [fullScreen, open, slideNext, slidePrev],\n );\n\n const onUnmount = useCallback(() => {\n setPlayingVideo(DEFAULT_PLAYING_VIDEO);\n setMutedVideo(DEFAULT_MUTED_VIDEO);\n }, [setPlayingVideo]);\n\n useEffect(() => {\n if (!uncontrolled && !swiper?.destroyed) {\n swiper?.slideTo(currentSlideIndex);\n }\n }, [uncontrolled, currentSlideIndex, swiper]);\n\n useEffect(() => {\n document.addEventListener('keydown', handleKeyDown);\n\n return () => {\n document.removeEventListener('keydown', handleKeyDown);\n };\n }, [handleKeyDown]);\n\n useEffect(() => {\n let startY: number;\n const abortController = new AbortController();\n const { signal } = abortController;\n\n document.addEventListener(\n 'touchstart',\n (e) => {\n startY = e.touches[0].clientY;\n },\n { signal },\n );\n\n document.addEventListener(\n 'touchmove',\n (e) => {\n const endY = e.changedTouches[0].clientY;\n const deltaY = startY - endY;\n\n // Если свайп вниз, закрываем галерею\n if (deltaY < SWIPE_THRESHOLD) {\n onClose();\n }\n },\n { signal },\n );\n\n return () => {\n abortController.abort();\n };\n }, [onClose]);\n\n const singleSlide = images.length === 1;\n\n const showNavigationBar = !singleSlide && !fullScreen;\n\n // eslint-disable-next-line react/jsx-no-constructed-context-values\n const galleryContext: GalleryContext = {\n view: isDesktop ? 'desktop' : 'mobile',\n singleSlide,\n currentSlideIndex,\n images,\n imagesMeta,\n fullScreen,\n initialSlide: uncontrolled ? initialSlide : currentSlideIndex,\n setFullScreen,\n playingVideo,\n setPlayingVideo,\n mutedVideo,\n setMutedVideo,\n hideNavigation,\n setHideNavigation,\n setImageMeta,\n slideNext,\n slidePrev,\n slideTo,\n getSwiper: () => swiper,\n setSwiper,\n onClose: handleClose,\n setCurrentSlideIndex,\n getCurrentImage: () => images[currentSlideIndex],\n getCurrentImageMeta: () => imagesMeta[currentSlideIndex],\n };\n\n return (\n <GalleryContext.Provider value={galleryContext}>\n <BaseModal\n open={open}\n className={cn(styles.modal, popupClassName)}\n onEscapeKeyDown={handleEscapeKeyDown}\n Backdrop={Backdrop}\n onUnmount={onUnmount}\n >\n <div\n className={cn(styles.container, {\n [styles.mobile]: !isDesktop,\n })}\n >\n {isDesktop ? <Header /> : <HeaderMobile />}\n {images.length === 1 ? <Single /> : <ImageViewer />}\n <nav\n className={cn({\n [styles.navigationVideo]: isCurrentVideo && !isDesktop,\n [styles.hide]: showNavigationBar && hideNavigation && !isDesktop,\n [styles.hideInfo]: !showNavigationBar && hideNavigation && !isDesktop,\n })}\n >\n {!isDesktop && <Subtitles />}\n {isCurrentVideo && !isDesktop && bottomButton && (\n <BottomButton\n bottomButton={bottomButton}\n onClick={handleBottomButtonClick}\n className={styles.bottomButton}\n />\n )}\n\n {showNavigationBar && <NavigationBar />}\n {!isDesktop && <InfoBar />}\n </nav>\n </div>\n </BaseModal>\n </GalleryContext.Provider>\n );\n};\n"],"names":["useState","useIsDesktop","useCallback","useEffect","SWIPE_THRESHOLD","React","GalleryContext","BaseModal","cn","styles","Header","HeaderMobile","Single","ImageViewer","Subtitles","BottomButton","NavigationBar","InfoBar"],"mappings":"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"}
|
|
@@ -3,20 +3,20 @@
|
|
|
3
3
|
--color-static-neutral-translucent-500-inverted-hover: rgba(233, 233, 250, 0.37);
|
|
4
4
|
--color-static-neutral-translucent-500-inverted-press: rgba(238, 238, 254, 0.46);
|
|
5
5
|
}
|
|
6
|
-
.
|
|
6
|
+
.gallery__component_1111w {
|
|
7
7
|
background-color: var(--color-static-neutral-translucent-500-inverted);
|
|
8
8
|
}
|
|
9
|
-
.
|
|
9
|
+
.gallery__component_1111w:hover {
|
|
10
10
|
background-color: var(--color-static-neutral-translucent-500-inverted-hover);
|
|
11
11
|
}
|
|
12
|
-
.
|
|
12
|
+
.gallery__component_1111w:active {
|
|
13
13
|
background-color: var(--color-static-neutral-translucent-500-inverted-press);
|
|
14
14
|
}
|
|
15
|
-
.
|
|
15
|
+
.gallery__component_1111w {
|
|
16
16
|
|
|
17
17
|
transition: transform 1s ease-in-out;
|
|
18
18
|
will-change: transform;
|
|
19
19
|
}
|
|
20
|
-
.
|
|
20
|
+
.gallery__notVisible_1111w {
|
|
21
21
|
transform: translateY(250%);
|
|
22
22
|
}
|
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
|
|
3
3
|
require('./index.css');
|
|
4
4
|
|
|
5
|
-
var styles = {"component":"
|
|
5
|
+
var styles = {"component":"gallery__component_1111w","notVisible":"gallery__notVisible_1111w"};
|
|
6
6
|
|
|
7
7
|
module.exports = styles;
|
|
8
8
|
//# sourceMappingURL=index.module.css.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.module.css.js","sources":["../../src/components/bottom-button/index.module.css"],"sourcesContent":["@import '@alfalab/core-components-vars/src/
|
|
1
|
+
{"version":3,"file":"index.module.css.js","sources":["../../src/components/bottom-button/index.module.css"],"sourcesContent":["@import '@alfalab/core-components-vars/src/index.css';\n\n.component {\n background-color: var(--color-static-neutral-translucent-500-inverted);\n &:hover {\n background-color: var(--color-static-neutral-translucent-500-inverted-hover);\n }\n &:active {\n background-color: var(--color-static-neutral-translucent-500-inverted-press);\n }\n\n transition: transform 1s ease-in-out;\n will-change: transform;\n}\n\n.notVisible {\n transform: translateY(250%);\n}\n"],"names":[],"mappings":";;;;AAEgB,aAAe,CAAC,WAAW,CAAC,0BAA0B,CAAC,YAAY,CAAC,2BAA2B,CAAC;;;;"}
|
|
@@ -8,19 +8,19 @@
|
|
|
8
8
|
--gap-2xl: 32px;
|
|
9
9
|
--gap-32: var(--gap-2xl);
|
|
10
10
|
}
|
|
11
|
-
.
|
|
11
|
+
.gallery__buttons_wuul2 {
|
|
12
12
|
display: flex;
|
|
13
13
|
padding-left: var(--gap-32);
|
|
14
14
|
}
|
|
15
|
-
.
|
|
15
|
+
.gallery__buttons_wuul2 path {
|
|
16
16
|
color: var(--color-static-neutral-translucent-1300-inverted);
|
|
17
17
|
}
|
|
18
|
-
.
|
|
18
|
+
.gallery__iconButton_wuul2 path {
|
|
19
19
|
color: var(--color-static-neutral-100);
|
|
20
20
|
}
|
|
21
|
-
.
|
|
21
|
+
.gallery__iconButton_wuul2:hover path {
|
|
22
22
|
color: var(--color-static-neutral-100-hover);
|
|
23
23
|
}
|
|
24
|
-
.
|
|
24
|
+
.gallery__iconButton_wuul2:active path {
|
|
25
25
|
color: var(--color-static-neutral-100-press);
|
|
26
26
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.module.css.js","sources":["../../src/components/buttons/index.module.css"],"sourcesContent":["@import '@alfalab/core-components-vars/src/
|
|
1
|
+
{"version":3,"file":"index.module.css.js","sources":["../../src/components/buttons/index.module.css"],"sourcesContent":["@import '@alfalab/core-components-vars/src/index.css';\n\n.buttons {\n display: flex;\n padding-left: var(--gap-32);\n\n & path {\n color: var(--color-static-neutral-translucent-1300-inverted);\n }\n}\n\n.iconButton {\n & path {\n color: var(--color-static-neutral-100);\n }\n\n &:hover path {\n color: var(--color-static-neutral-100-hover);\n }\n\n &:active path {\n color: var(--color-static-neutral-100-press);\n }\n}\n"],"names":[],"mappings":";;;;AAEgB,aAAe,CAAoC,YAAY,CAAC,2BAA2B,CAAC;;;;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.module.css.js","sources":["../../src/components/header/index.module.css"],"sourcesContent":["@import '@alfalab/core-components-vars/src/
|
|
1
|
+
{"version":3,"file":"index.module.css.js","sources":["../../src/components/header/index.module.css"],"sourcesContent":["@import '@alfalab/core-components-vars/src/index.css';\n\n.header {\n display: flex;\n justify-content: space-between;\n flex-shrink: 0;\n width: 100%;\n padding: var(--gap-16) var(--gap-32);\n box-sizing: border-box;\n}\n"],"names":[],"mappings":";;;;AAEgB,aAAe,CAAC,QAAQ,CAAC,uBAAuB,CAAC;;;;"}
|
|
@@ -2,24 +2,24 @@
|
|
|
2
2
|
--gap-2xs: 4px;
|
|
3
3
|
--gap-4: var(--gap-2xs);
|
|
4
4
|
}
|
|
5
|
-
.
|
|
5
|
+
.gallery__info_67sij {
|
|
6
6
|
height: 100%;
|
|
7
7
|
display: flex;
|
|
8
8
|
flex-direction: column;
|
|
9
9
|
justify-content: center;
|
|
10
10
|
overflow: hidden;
|
|
11
11
|
}
|
|
12
|
-
.
|
|
12
|
+
.gallery__filenameHead_67sij {
|
|
13
13
|
display: inline;
|
|
14
14
|
text-overflow: ellipsis;
|
|
15
15
|
overflow: hidden;
|
|
16
16
|
white-space: nowrap;
|
|
17
17
|
}
|
|
18
|
-
.
|
|
18
|
+
.gallery__filenameContainer_67sij {
|
|
19
19
|
overflow: hidden;
|
|
20
20
|
display: inline-flex;
|
|
21
21
|
}
|
|
22
|
-
.
|
|
22
|
+
.gallery__description_67sij {
|
|
23
23
|
display: inline;
|
|
24
24
|
text-overflow: ellipsis;
|
|
25
25
|
overflow: hidden;
|
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
|
|
3
3
|
require('./index.css');
|
|
4
4
|
|
|
5
|
-
var styles = {"info":"
|
|
5
|
+
var styles = {"info":"gallery__info_67sij","filenameHead":"gallery__filenameHead_67sij","filenameContainer":"gallery__filenameContainer_67sij","description":"gallery__description_67sij"};
|
|
6
6
|
|
|
7
7
|
module.exports = styles;
|
|
8
8
|
//# sourceMappingURL=index.module.css.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.module.css.js","sources":["../../src/components/header-info-block/index.module.css"],"sourcesContent":["@import '@alfalab/core-components-vars/src/
|
|
1
|
+
{"version":3,"file":"index.module.css.js","sources":["../../src/components/header-info-block/index.module.css"],"sourcesContent":["@import '@alfalab/core-components-vars/src/index.css';\n\n.info {\n height: 100%;\n display: flex;\n flex-direction: column;\n justify-content: center;\n overflow: hidden;\n}\n\n.filenameHead {\n display: inline;\n text-overflow: ellipsis;\n overflow: hidden;\n white-space: nowrap;\n}\n\n.filenameContainer {\n overflow: hidden;\n display: inline-flex;\n}\n\n.description {\n display: inline;\n text-overflow: ellipsis;\n overflow: hidden;\n white-space: nowrap;\n margin-top: var(--gap-4);\n}\n"],"names":[],"mappings":";;;;AAEgB,aAAe,CAAC,MAAM,CAAC,qBAAqB,CAAC,cAAc,CAAC,6BAA6B,CAAC,mBAAmB,CAAC,kCAAkC,CAAC,aAAa,CAAC,4BAA4B,CAAC;;;;"}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
:root {
|
|
2
2
|
--color-static-neutral-0-inverted: #262629;
|
|
3
3
|
}
|
|
4
|
-
.
|
|
4
|
+
.gallery__headerMobile_t1ge4 {
|
|
5
5
|
position: relative;
|
|
6
6
|
height: 72px;
|
|
7
7
|
z-index: 3;
|
|
@@ -10,21 +10,21 @@
|
|
|
10
10
|
justify-content: space-between;
|
|
11
11
|
align-items: center;
|
|
12
12
|
}
|
|
13
|
-
.
|
|
13
|
+
.gallery__headerMobile_t1ge4.gallery__video_t1ge4 {
|
|
14
14
|
position: absolute;
|
|
15
15
|
width: 100%;
|
|
16
16
|
background-color: var(--color-static-neutral-0-inverted);
|
|
17
17
|
transition: transform 0.3s ease-in-out;
|
|
18
18
|
}
|
|
19
|
-
.
|
|
19
|
+
.gallery__hide_t1ge4 {
|
|
20
20
|
transform: translateY(-96px);
|
|
21
21
|
}
|
|
22
|
-
.
|
|
23
|
-
.
|
|
22
|
+
.gallery__leftButton_t1ge4,
|
|
23
|
+
.gallery__rightButtons_t1ge4 {
|
|
24
24
|
display: flex;
|
|
25
25
|
align-items: center;
|
|
26
26
|
}
|
|
27
|
-
.
|
|
27
|
+
.gallery__description_t1ge4 {
|
|
28
28
|
position: absolute;
|
|
29
29
|
left: 50%;
|
|
30
30
|
transform: translateX(-50%);
|
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
|
|
3
3
|
require('./index.css');
|
|
4
4
|
|
|
5
|
-
var styles = {"headerMobile":"
|
|
5
|
+
var styles = {"headerMobile":"gallery__headerMobile_t1ge4","video":"gallery__video_t1ge4","hide":"gallery__hide_t1ge4","rightButtons":"gallery__rightButtons_t1ge4","description":"gallery__description_t1ge4"};
|
|
6
6
|
|
|
7
7
|
module.exports = styles;
|
|
8
8
|
//# sourceMappingURL=index.module.css.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.module.css.js","sources":["../../src/components/header-mobile/index.module.css"],"sourcesContent":["@import '@alfalab/core-components-vars/src/
|
|
1
|
+
{"version":3,"file":"index.module.css.js","sources":["../../src/components/header-mobile/index.module.css"],"sourcesContent":["@import '@alfalab/core-components-vars/src/index.css';\n\n.headerMobile {\n position: relative;\n height: 72px;\n z-index: 3;\n padding: 0;\n display: flex;\n justify-content: space-between;\n align-items: center;\n\n &.video {\n position: absolute;\n width: 100%;\n background-color: var(--color-static-neutral-0-inverted);\n transition: transform 0.3s ease-in-out;\n }\n}\n\n.hide {\n transform: translateY(-96px);\n}\n\n.leftButton,\n.rightButtons {\n display: flex;\n align-items: center;\n}\n\n.description {\n position: absolute;\n left: 50%;\n transform: translateX(-50%);\n}\n"],"names":[],"mappings":";;;;AAEgB,aAAe,CAAC,cAAc,CAAC,6BAA6B,CAAC,OAAO,CAAC,sBAAsB,CAAC,MAAM,CAAC,qBAAqB,CAA0C,cAAc,CAAC,6BAA6B,CAAC,aAAa,CAAC,4BAA4B,CAAC;;;;"}
|
|
@@ -12,23 +12,23 @@
|
|
|
12
12
|
:root {
|
|
13
13
|
--focus-color: var(--color-light-status-info);
|
|
14
14
|
}
|
|
15
|
-
.
|
|
15
|
+
.gallery__component_14mo1 {
|
|
16
16
|
display: flex;
|
|
17
17
|
z-index: 3;
|
|
18
18
|
overflow: hidden;
|
|
19
19
|
transition: border 0.15s ease-in-out;
|
|
20
20
|
outline: none;
|
|
21
21
|
}
|
|
22
|
-
.
|
|
22
|
+
.gallery__component_14mo1 .gallery__image_14mo1 {
|
|
23
23
|
opacity: 0.3;
|
|
24
24
|
}
|
|
25
|
-
.
|
|
25
|
+
.gallery__component_14mo1.gallery__mobile_14mo1 {
|
|
26
26
|
padding: 0;
|
|
27
27
|
}
|
|
28
|
-
.
|
|
28
|
+
.gallery__active_14mo1 > .gallery__image_14mo1 {
|
|
29
29
|
opacity: 1;
|
|
30
30
|
}
|
|
31
|
-
.
|
|
31
|
+
.gallery__preview_14mo1 {
|
|
32
32
|
width: 56px;
|
|
33
33
|
height: 56px;
|
|
34
34
|
flex-shrink: 0;
|
|
@@ -38,15 +38,15 @@
|
|
|
38
38
|
-moz-user-select: none;
|
|
39
39
|
user-select: none;
|
|
40
40
|
}
|
|
41
|
-
.
|
|
41
|
+
.gallery__preview_14mo1.gallery__mobile_14mo1 {
|
|
42
42
|
width: 46px;
|
|
43
43
|
height: 46px;
|
|
44
44
|
border-radius: var(--border-radius-8);
|
|
45
45
|
}
|
|
46
|
-
.
|
|
46
|
+
.gallery__image_14mo1 {
|
|
47
47
|
transition: opacity 0.15s ease-in-out;
|
|
48
48
|
}
|
|
49
|
-
.
|
|
49
|
+
.gallery__image_14mo1 > img {
|
|
50
50
|
display: block;
|
|
51
51
|
width: 100%;
|
|
52
52
|
height: 100%;
|
|
@@ -56,36 +56,36 @@
|
|
|
56
56
|
overflow: clip;
|
|
57
57
|
overflow-clip-margin: border-box;
|
|
58
58
|
}
|
|
59
|
-
.
|
|
59
|
+
.gallery__image_14mo1:hover {
|
|
60
60
|
opacity: 0.7;
|
|
61
61
|
}
|
|
62
|
-
.
|
|
62
|
+
.gallery__loading_14mo1 {
|
|
63
63
|
background-color: var(--color-static-neutral-100-inverted);
|
|
64
64
|
}
|
|
65
|
-
.
|
|
65
|
+
.gallery__loading_14mo1 .gallery__active_14mo1 {
|
|
66
66
|
background-color: var(--color-static-neutral-300-inverted);
|
|
67
67
|
}
|
|
68
|
-
.
|
|
68
|
+
.gallery__brokenImageWrapper_14mo1 {
|
|
69
69
|
display: flex;
|
|
70
70
|
justify-content: center;
|
|
71
71
|
align-items: center;
|
|
72
72
|
background-color: var(--color-static-neutral-300-inverted);
|
|
73
73
|
opacity: 0.3;
|
|
74
74
|
}
|
|
75
|
-
.
|
|
75
|
+
.gallery__brokenImageWrapper_14mo1.gallery__active_14mo1 {
|
|
76
76
|
opacity: 1;
|
|
77
77
|
}
|
|
78
|
-
.
|
|
78
|
+
.gallery__brokenIcon_14mo1 {
|
|
79
79
|
width: 40px;
|
|
80
80
|
height: 40px;
|
|
81
81
|
}
|
|
82
|
-
.
|
|
82
|
+
.gallery__focused_14mo1 {
|
|
83
83
|
outline: 2px solid var(--focus-color);
|
|
84
84
|
outline-offset: 2px;
|
|
85
85
|
}
|
|
86
|
-
.
|
|
86
|
+
.gallery__canvasPreview_14mo1 {
|
|
87
87
|
border-radius: var(--border-radius-12);
|
|
88
88
|
}
|
|
89
|
-
.
|
|
89
|
+
.gallery__canvasPreview_14mo1.gallery__mobile_14mo1 {
|
|
90
90
|
border-radius: var(--border-radius-8);
|
|
91
91
|
}
|
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
|
|
3
3
|
require('./index.css');
|
|
4
4
|
|
|
5
|
-
var styles = {"component":"
|
|
5
|
+
var styles = {"component":"gallery__component_14mo1","image":"gallery__image_14mo1","mobile":"gallery__mobile_14mo1","active":"gallery__active_14mo1","preview":"gallery__preview_14mo1","loading":"gallery__loading_14mo1","brokenImageWrapper":"gallery__brokenImageWrapper_14mo1","brokenIcon":"gallery__brokenIcon_14mo1","focused":"gallery__focused_14mo1","canvasPreview":"gallery__canvasPreview_14mo1"};
|
|
6
6
|
|
|
7
7
|
module.exports = styles;
|
|
8
8
|
//# sourceMappingURL=index.module.css.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.module.css.js","sources":["../../src/components/image-preview/index.module.css"],"sourcesContent":["@import '@alfalab/core-components-vars/src/
|
|
1
|
+
{"version":3,"file":"index.module.css.js","sources":["../../src/components/image-preview/index.module.css"],"sourcesContent":["@import '@alfalab/core-components-vars/src/index.css';\n\n.component {\n display: flex;\n z-index: 3;\n overflow: hidden;\n transition: border 0.15s ease-in-out;\n outline: none;\n\n & .image {\n opacity: 0.3;\n }\n\n &.mobile {\n padding: 0;\n }\n}\n\n.active {\n & > .image {\n opacity: 1;\n }\n}\n\n.preview {\n width: 56px;\n height: 56px;\n flex-shrink: 0;\n border-radius: var(--border-radius-12);\n cursor: pointer;\n user-select: none;\n\n &.mobile {\n width: 46px;\n height: 46px;\n border-radius: var(--border-radius-8);\n }\n}\n\n.image {\n transition: opacity 0.15s ease-in-out;\n\n & > img {\n display: block;\n width: 100%;\n height: 100%;\n border-radius: inherit;\n object-fit: cover;\n overflow: clip;\n overflow-clip-margin: border-box;\n }\n\n &:hover {\n opacity: 0.7;\n }\n}\n\n.loading {\n background-color: var(--color-static-neutral-100-inverted);\n\n & .active {\n background-color: var(--color-static-neutral-300-inverted);\n }\n}\n\n.brokenImageWrapper {\n display: flex;\n justify-content: center;\n align-items: center;\n background-color: var(--color-static-neutral-300-inverted);\n opacity: 0.3;\n\n &.active {\n opacity: 1;\n }\n}\n\n.brokenIcon {\n width: 40px;\n height: 40px;\n}\n\n.focused {\n @mixin focus-outline;\n}\n\n.canvasPreview {\n border-radius: var(--border-radius-12);\n\n &.mobile {\n border-radius: var(--border-radius-8);\n }\n}\n"],"names":[],"mappings":";;;;AAEgB,aAAe,CAAC,WAAW,CAAC,0BAA0B,CAAC,OAAO,CAAC,sBAAsB,CAAC,QAAQ,CAAC,uBAAuB,CAAC,QAAQ,CAAC,uBAAuB,CAAC,SAAS,CAAC,wBAAwB,CAAC,SAAS,CAAC,wBAAwB,CAAC,oBAAoB,CAAC,mCAAmC,CAAC,YAAY,CAAC,2BAA2B,CAAC,SAAS,CAAC,wBAAwB,CAAC,eAAe,CAAC,8BAA8B,CAAC;;;;"}
|
|
@@ -5,7 +5,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
|
|
|
5
5
|
var tslib = require('tslib');
|
|
6
6
|
var React = require('react');
|
|
7
7
|
var cn = require('classnames');
|
|
8
|
-
var
|
|
8
|
+
var modules = require('swiper/modules');
|
|
9
9
|
var react = require('swiper/react');
|
|
10
10
|
var hooks$1 = require('@alfalab/hooks');
|
|
11
11
|
var ChevronBackHeavyMIcon = require('@alfalab/icons-glyph/ChevronBackHeavyMIcon');
|
|
@@ -15,20 +15,18 @@ var utils = require('../../utils/utils.js');
|
|
|
15
15
|
var constants = require('../../utils/constants.js');
|
|
16
16
|
var hooks = require('./hooks.js');
|
|
17
17
|
var slide = require('./slide.js');
|
|
18
|
-
require('swiper/swiper.min.css');
|
|
19
18
|
var index_module = require('./index.module.css.js');
|
|
20
19
|
|
|
21
20
|
function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
|
|
22
21
|
|
|
23
22
|
var React__default = /*#__PURE__*/_interopDefaultCompat(React);
|
|
24
23
|
var cn__default = /*#__PURE__*/_interopDefaultCompat(cn);
|
|
25
|
-
var SwiperCore__default = /*#__PURE__*/_interopDefaultCompat(SwiperCore);
|
|
26
24
|
|
|
27
|
-
SwiperCore__default.default.use([SwiperCore.EffectFade, SwiperCore.A11y, SwiperCore.Controller]);
|
|
28
25
|
var ImageViewer = function () {
|
|
29
|
-
var _a, _b, _c;
|
|
30
|
-
var
|
|
31
|
-
var
|
|
26
|
+
var _a, _b, _c, _d;
|
|
27
|
+
var _e, _f;
|
|
28
|
+
var _g = React.useContext(context.GalleryContext), images = _g.images, imagesMeta = _g.imagesMeta, fullScreen = _g.fullScreen, currentSlideIndex = _g.currentSlideIndex, initialSlide = _g.initialSlide, setCurrentSlideIndex = _g.setCurrentSlideIndex, getSwiper = _g.getSwiper, setSwiper = _g.setSwiper, slidePrev = _g.slidePrev, slideNext = _g.slideNext, getCurrentImage = _g.getCurrentImage;
|
|
29
|
+
var _h = hooks.useHandleImageViewer(), handleWrapperClick = _h.handleWrapperClick, isMobile = _h.isMobile, rightArrowRef = _h.rightArrowRef, leftArrowRef = _h.leftArrowRef;
|
|
32
30
|
var leftArrowFocused = hooks$1.useFocus(leftArrowRef, 'keyboard')[0];
|
|
33
31
|
var rightArrowFocused = hooks$1.useFocus(rightArrowRef, 'keyboard')[0];
|
|
34
32
|
var swiper = getSwiper();
|
|
@@ -64,6 +62,7 @@ var ImageViewer = function () {
|
|
|
64
62
|
_a[index_module.mobile] = isMobile,
|
|
65
63
|
_a[index_module.mobileVideo] = isMobile && utils.isVideo(currentImage === null || currentImage === void 0 ? void 0 : currentImage.src),
|
|
66
64
|
_a)),
|
|
65
|
+
modules: [modules.A11y, modules.Controller],
|
|
67
66
|
controller: { control: swiper },
|
|
68
67
|
a11y: {
|
|
69
68
|
slideRole: 'img',
|
|
@@ -96,24 +95,32 @@ var ImageViewer = function () {
|
|
|
96
95
|
_b[index_module.focused] = leftArrowFocused,
|
|
97
96
|
_b)), onClick: handlePrevClick, role: 'button', onKeyDown: handleArrowLeftKeyDown, tabIndex: 0, ref: leftArrowRef, "aria-label": '\u041F\u0440\u0435\u0434\u044B\u0434\u0443\u0449\u0435\u0435 \u0438\u0437\u043E\u0431\u0440\u0430\u0436\u0435\u043D\u0438\u0435', "data-test-id": constants.TestIds.PREV_SLIDE_BUTTON },
|
|
98
97
|
React__default.default.createElement(ChevronBackHeavyMIcon.ChevronBackHeavyMIcon, null))),
|
|
99
|
-
fullScreen && !utils.isVideo(currentImage
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
var
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
98
|
+
fullScreen && currentImage && !utils.isVideo(currentImage.src) && (React__default.default.createElement("div", { className: index_module.fullScreenFrame },
|
|
99
|
+
React__default.default.createElement(slide.Slide, { isActive: true, containerAspectRatio: swiperAspectRatio, image: currentImage, containerHeight: swiperHeight, meta: imagesMeta[currentSlideIndex], index: currentSlideIndex, imageAspectRatio: (((_e = imagesMeta[currentSlideIndex]) === null || _e === void 0 ? void 0 : _e.width) || 1) /
|
|
100
|
+
(((_f = imagesMeta[currentSlideIndex]) === null || _f === void 0 ? void 0 : _f.height) || 1), slideVisible: false, fullScreen: true }))),
|
|
101
|
+
React__default.default.createElement("div", { className: cn__default.default(index_module.swiperFrame, (_c = {},
|
|
102
|
+
_c[index_module.mobile] = isMobile,
|
|
103
|
+
_c[index_module.mobileVideo] = isMobile && utils.isVideo(currentImage === null || currentImage === void 0 ? void 0 : currentImage.src),
|
|
104
|
+
_c[index_module.fullScreenFrame] = fullScreen,
|
|
105
|
+
_c[index_module.hiddenFrame] = fullScreen && !utils.isVideo(currentImage === null || currentImage === void 0 ? void 0 : currentImage.src),
|
|
106
|
+
_c)) },
|
|
107
|
+
React__default.default.createElement(react.Swiper, tslib.__assign({}, swiperProps), images.map(function (image, index) {
|
|
108
|
+
var meta = imagesMeta[index];
|
|
109
|
+
var imageWidth = (meta === null || meta === void 0 ? void 0 : meta.width) || 1;
|
|
110
|
+
var imageHeight = (meta === null || meta === void 0 ? void 0 : meta.height) || 1;
|
|
111
|
+
var imageAspectRatio = imageWidth / imageHeight;
|
|
112
|
+
var slideVisible = index === currentSlideIndex;
|
|
113
|
+
return (React__default.default.createElement(react.SwiperSlide, { key: utils.getImageKey(image, index), style: {
|
|
114
|
+
pointerEvents: slideVisible ? 'auto' : 'none',
|
|
115
|
+
transitionProperty: 'opacity',
|
|
116
|
+
} }, function (_a) {
|
|
117
|
+
var isActive = _a.isActive;
|
|
118
|
+
return (React__default.default.createElement(slide.Slide, { isActive: isActive, containerAspectRatio: swiperAspectRatio, image: image, containerHeight: swiperHeight, meta: meta, index: index, imageAspectRatio: imageAspectRatio, slideVisible: slideVisible, fullScreen: fullScreen && utils.isVideo(image.src) }));
|
|
119
|
+
}));
|
|
120
|
+
}))),
|
|
121
|
+
showControls && (React__default.default.createElement("div", { className: cn__default.default(index_module.arrow, (_d = {},
|
|
122
|
+
_d[index_module.focused] = rightArrowFocused,
|
|
123
|
+
_d)), onClick: handleNextClick, role: 'button', onKeyDown: handleArrowRightKeyDown, tabIndex: 0, ref: rightArrowRef, "aria-label": '\u0421\u043B\u0435\u0434\u0443\u044E\u0449\u0435\u0435 \u0438\u0437\u043E\u0431\u0440\u0430\u0436\u0435\u043D\u0438\u0435', "data-test-id": constants.TestIds.NEXT_SLIDE_BUTTON },
|
|
117
124
|
React__default.default.createElement(ChevronForwardHeavyMIcon.ChevronForwardHeavyMIcon, null)))));
|
|
118
125
|
};
|
|
119
126
|
|