mirror of
https://github.com/muerwre/vault-frontend.git
synced 2025-04-24 20:36:40 +07:00
bump photoswipe
This commit is contained in:
Fedor Katurov
parent
4eb605a398
commit
bf1382af0b
5 changed files with 58 additions and 108 deletions
|
|
@ -26,7 +26,7 @@
|
|||
"mobx-persist-store": "^1.0.4",
|
||||
"mobx-react-lite": "^3.2.3",
|
||||
"next": "^12.3.0",
|
||||
"photoswipe": "^4.1.3",
|
||||
"photoswipe": "^5.4.4",
|
||||
"raleway-cyrillic": "^4.0.2",
|
||||
"ramda": "^0.26.1",
|
||||
"react": "^17.0.2",
|
||||
|
|
|
|||
|
|
@ -1,9 +1,9 @@
|
|||
import { useEffect, useRef, VFC } from 'react';
|
||||
import { useEffect } from 'react';
|
||||
|
||||
import classNames from 'classnames';
|
||||
import { observer } from 'mobx-react-lite';
|
||||
import PhotoSwipeUI_Default from 'photoswipe/dist/photoswipe-ui-default.js';
|
||||
import PhotoSwipeJs from 'photoswipe/dist/photoswipe.js';
|
||||
import { SlideData } from 'photoswipe/dist/types/slide/slide';
|
||||
|
||||
import 'photoswipe/style.css';
|
||||
|
||||
import { imagePresets } from '~/constants/urls';
|
||||
import { useWindowSize } from '~/hooks/dom/useWindowSize';
|
||||
|
|
@ -14,124 +14,76 @@ import { getURL } from '~/utils/dom';
|
|||
|
||||
import styles from './styles.module.scss';
|
||||
|
||||
export interface PhotoSwipeProps extends DialogComponentProps {
|
||||
export interface Props extends DialogComponentProps {
|
||||
items: IFile[];
|
||||
index: number;
|
||||
}
|
||||
|
||||
const PhotoSwipe: VFC<PhotoSwipeProps> = observer(({ index, items }) => {
|
||||
let ref = useRef<HTMLDivElement>(null);
|
||||
const padding = { top: 10, left: 10, right: 10, bottom: 10 } as const;
|
||||
|
||||
const PhotoSwipe = observer(({ index, items }: Props) => {
|
||||
const { hideModal } = useModal();
|
||||
const { isTablet } = useWindowSize();
|
||||
|
||||
useEffect(() => {
|
||||
new Promise(async (resolve) => {
|
||||
const images = await Promise.all(
|
||||
items.map(
|
||||
(file) =>
|
||||
new Promise((resolve) => {
|
||||
const src = getURL(
|
||||
file,
|
||||
isTablet ? imagePresets[900] : imagePresets[1600],
|
||||
);
|
||||
Promise.all(
|
||||
items.map(
|
||||
(file): Promise<SlideData> =>
|
||||
new Promise((resolve) => {
|
||||
const src = getURL(
|
||||
file,
|
||||
isTablet ? imagePresets[900] : imagePresets[1600],
|
||||
);
|
||||
|
||||
if (file.metadata?.width && file.metadata.height) {
|
||||
resolve({
|
||||
src,
|
||||
w: file.metadata.width,
|
||||
h: file.metadata.height,
|
||||
});
|
||||
if (file.metadata?.width && file.metadata.height) {
|
||||
resolve({
|
||||
src,
|
||||
width: file.metadata.width,
|
||||
height: file.metadata.height,
|
||||
});
|
||||
|
||||
return;
|
||||
}
|
||||
return;
|
||||
}
|
||||
|
||||
const img = new Image();
|
||||
const img = new Image();
|
||||
|
||||
img.onload = () => {
|
||||
resolve({
|
||||
src,
|
||||
h: img.naturalHeight,
|
||||
w: img.naturalWidth,
|
||||
});
|
||||
};
|
||||
img.onload = () => {
|
||||
resolve({
|
||||
src,
|
||||
height: img.naturalHeight,
|
||||
width: img.naturalWidth,
|
||||
});
|
||||
};
|
||||
|
||||
img.onerror = () => {
|
||||
resolve({});
|
||||
};
|
||||
img.onerror = () => {
|
||||
resolve({});
|
||||
};
|
||||
|
||||
img.src = getURL(file, imagePresets[1600]);
|
||||
}),
|
||||
),
|
||||
);
|
||||
img.src = getURL(file, imagePresets[1600]);
|
||||
}),
|
||||
),
|
||||
).then(async (images: SlideData[]) => {
|
||||
const PSWP = await import('photoswipe').then((it) => it.default);
|
||||
|
||||
resolve(images);
|
||||
}).then((images) => {
|
||||
const ps = new PhotoSwipeJs(ref.current, PhotoSwipeUI_Default, images, {
|
||||
const ps = new PSWP({
|
||||
dataSource: images,
|
||||
index: index || 0,
|
||||
closeOnScroll: false,
|
||||
history: false,
|
||||
closeOnVerticalDrag: true,
|
||||
padding,
|
||||
mainClass: styles.wrap,
|
||||
zoom: false,
|
||||
counter: false,
|
||||
bgOpacity: 0.1,
|
||||
});
|
||||
|
||||
ps.on('destroy', hideModal);
|
||||
ps.on('close', hideModal);
|
||||
|
||||
ps.init();
|
||||
ps.listen('destroy', hideModal);
|
||||
ps.listen('close', hideModal);
|
||||
});
|
||||
}, [hideModal, items, index, isTablet]);
|
||||
|
||||
return (
|
||||
<div
|
||||
className="pswp"
|
||||
tabIndex={-1}
|
||||
role="dialog"
|
||||
aria-hidden="true"
|
||||
ref={ref}
|
||||
>
|
||||
<div className={classNames('pswp__bg', styles.bg)} />
|
||||
<div className={classNames('pswp__scroll-wrap', styles.wrap)}>
|
||||
<div className="pswp__container">
|
||||
<div className="pswp__item" />
|
||||
<div className="pswp__item" />
|
||||
<div className="pswp__item" />
|
||||
</div>
|
||||
|
||||
<div className="pswp__ui pswp__ui--hidden">
|
||||
<div className={classNames('pswp__top-bar', styles.bar)}>
|
||||
<div className="pswp__counter" />
|
||||
<button
|
||||
className="pswp__button pswp__button--close"
|
||||
title="Close (Esc)"
|
||||
/>
|
||||
|
||||
<div className="pswp__preloader">
|
||||
<div className="pswp__preloader__icn">
|
||||
<div className="pswp__preloader__cut">
|
||||
<div className="pswp__preloader__donut" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="pswp__share-modal pswp__share-modal--hidden pswp__single-tap">
|
||||
<div className="pswp__share-tooltip" />
|
||||
</div>
|
||||
|
||||
<button
|
||||
className="pswp__button pswp__button--arrow--left"
|
||||
title="Previous (arrow left)"
|
||||
/>
|
||||
|
||||
<button
|
||||
className="pswp__button pswp__button--arrow--right"
|
||||
title="Next (arrow right)"
|
||||
/>
|
||||
|
||||
<div className="pswp__caption">
|
||||
<div className="pswp__caption__center" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
return null;
|
||||
});
|
||||
|
||||
export { PhotoSwipe };
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
@import "src/styles/variables";
|
||||
@import 'src/styles/variables';
|
||||
|
||||
.wrap {
|
||||
:global(.pswp__img) {
|
||||
|
|
|
|||
|
|
@ -2,8 +2,6 @@
|
|||
@use './themes/horizon' as theme_horizon;
|
||||
|
||||
@import 'src/styles/variables';
|
||||
@import 'photoswipe/dist/photoswipe';
|
||||
@import 'photoswipe/dist/default-skin/default-skin';
|
||||
|
||||
@import 'swiper/css';
|
||||
@import 'swiper/css/effect-fade';
|
||||
|
|
|
|||
|
|
@ -2423,10 +2423,10 @@ path-type@^4.0.0:
|
|||
resolved "https://registry.yarnpkg.com/path-type/-/path-type-4.0.0.tgz#84ed01c0a7ba380afe09d90a8c180dcd9d03043b"
|
||||
integrity sha512-gDKb8aZMDeD/tZWs9P6+q0J9Mwkdl6xMV8TjnGP3qJVJ06bdMgkbBlLU8IdfOsIsFz2BW1rNVT3XuNEl8zPAvw==
|
||||
|
||||
photoswipe@^4.1.3:
|
||||
version "4.1.3"
|
||||
resolved "https://registry.yarnpkg.com/photoswipe/-/photoswipe-4.1.3.tgz#59f49494eeb9ddab5888d03392926a19bc197550"
|
||||
integrity sha512-89Z43IRUyw7ycTolo+AaiDn3W1EEIfox54hERmm9bI12IB9cvRfHSHez3XhAyU8XW2EAFrC+2sKMhh7SJwn0bA==
|
||||
photoswipe@^5.4.4:
|
||||
version "5.4.4"
|
||||
resolved "https://registry.yarnpkg.com/photoswipe/-/photoswipe-5.4.4.tgz#e045dc036453493188d5c8665b0e8f1000ac4d6e"
|
||||
integrity sha512-WNFHoKrkZNnvFFhbHL93WDkW3ifwVOXSW3w1UuZZelSmgXpIGiZSNlZJq37rR8YejqME2rHs9EhH9ZvlvFH2NA==
|
||||
|
||||
picocolors@^1.0.0:
|
||||
version "1.0.0"
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue